こんにちは！株式会社アッシェです。突然ですが、皆さんはこんな経験ありませんか？

「うわ！このWebサイト、スマホで見たら文字が小さい！ボタンが押しにくい！！」
なぜこんな現象が起きてしまうのか？本日は「レスポンシブデザイン」について 企画や制作、運用まで一社で行う弊社ならではの目線でまとめていきたいと思います。 ぜひ、最後までお読みください！

 

レスポンシブデザインとは？

 

どんな端末を使っても閲覧しやすい配慮がされたWebサイトのデザインのことをレスポンシブデザインといいます。 内容は同じでも「その端末に応じた見やすさ」を意識したデザインにすることで、 見ている人がストレスなく情報にアクセスできるようになるのです。

 

レスポンシブデザインのポイント

 

レスポンシブデザインを取り入れるためのポイントをご紹介します。

 

①掲載する情報の優先順位付けをおこなう
スマホの画面はPCに比べて小さく、 情報を盛り込みすぎると視認性や可読性が下がってしまう恐れがあります。 制作を行う際には、掲載する情報に優先順位付けや整理を行い 場合によっては別ページに移動したり、難しい場合はアコーディオンや スライダー機能を入れるなどして1ページ内に表示する情報が⻑くなりすぎないように 配慮したサイト設計を行いましょう。

②視認性・ユーザビリティを重視する
スマホ表示では、文字・入力フォームやリンク、ボタンの大きさを適切な大きさに設定する必要があります。 画面が小さくて誤ったボタンを押してしまった方、 飛びたくなかったリンクに遷移したことのある方もいらっしゃるのではないでしょうか？ これらはユーザーにとって大きなストレスを与えることになります。

③閲覧しやすい画像を使用する
視認性を高めるためにも画像を使用することは重要ですが、闇雲に貼り付ければいいというわけではありません。

・画質・サイズが見やすいものであるか
・容量が重すぎて読み込み速度が遅くなっていないか

などを考慮する必要があります。「JPEG・GIF・PNG・WebP・SVG」などのフォーマットから、適切なものを選択しましょう。

以下2つはコーディングの要素が強いポイントになります。

④HTMLにViewportを記述する
Viewportとは、その端末における表示領域のことです。 画像の「アスペクト比」のようなものだと考えてみてください。 スマホはPCよりも液晶のサイズが小さいため、レスポンシブデザインとして領域を設定し、見やすくする必要があります。 なお、スマホやタブレットは横向きにして操作することもあります。横向きにしたときのレイアウトも考慮しましょう。

⑤CSSファイルにメディアクエリを記載する
それぞれの端末ごとに適用されるCSSのルールを定義しましょう。 「端末がこのサイズなら、画像はこのサイズで表示させる」といった個別の値を設定することで、 PC、スマホを問わず閲覧しやすくなります。

まとめ
ここまで、レスポンシブデザインの取り入れ方について解説しましたが、いかがでしょうか？ ストレスなく情報を手に入れられたことは「いい体験」としてユーザーに記憶されます。

この体験は、リピーターや新規顧客の獲得にもつながります。 Webサイトを運用する際には、快適さ・わかりやすさを意識してみてください。

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

ウチのWebサイトもスマホ対応がまだなんだよなあ……というそこのあなた！

高知のWeb制作会社といえばアッシェ！
わたしたちは企画や制作、運用まで一社完結で行い、ワクワクするWebサイトをご一緒にカタチにします！