Webサイトをパソコンで見ると問題ないのに、スマートフォンでは文字が小さかったり、画面からコンテンツがはみ出したりすることがあります。
パソコンとスマートフォンでは画面の大きさが大きく異なるため、同じ表示のままでは見づらくなる場合があります。
そこで使われるのが「レスポンシブデザイン」です。
現在のWebサイト制作では一般的な方法なので、まずはどのような仕組みなのか確認してみましょう。
レスポンシブデザインとは？
レスポンシブデザインとは、画面の大きさに合わせてWebページのレイアウトや表示を調整する方法です。
パソコン、タブレット、スマートフォンなど、それぞれの画面幅に合わせて見やすい状態に変化させます。
たとえば、パソコンでは横に3つ並んでいるコンテンツを、スマートフォンでは縦に1つずつ並べるといった調整ができます。
文字や画像の大きさ、メニューの表示方法、コンテンツの余白なども画面幅に応じて変更できます。
パソコンとスマホでは表示が変わる
レスポンシブデザインを採用したWebサイトでは、同じページでも端末によって見え方が変わります。
パソコンは横幅が広いため、複数のコンテンツを横並びに配置できます。
一方、スマートフォンは画面が狭いため、そのまま横並びにすると一つひとつのコンテンツが小さくなってしまいます。
そこでスマートフォンでは縦並びへ変更したり、ナビゲーションをコンパクトなメニューへ切り替えたりします。
表示する情報そのものを変えるのではなく、画面に合わせて見せ方を調整するのが基本的な考え方です。
なぜスマホ対応が必要なの？
Webサイトはパソコンだけで閲覧されるものではありません。
スマートフォンから閲覧する人もいるため、小さな画面でも情報を読んだり、リンクやボタンを操作したりできるようにしておく必要があります。
スマートフォンで開いたときに文字が極端に小さければ、拡大しながら読まなければなりません。
横方向へスクロールしなければ本文を読めなかったり、ボタン同士が近すぎて押し間違えたりすることもあります。
レスポンシブデザインを使って画面に合わせた表示にすることで、このような使いにくさを減らせます。
レスポンシブデザインはどうやって実現する？
レスポンシブデザインでは、HTMLやCSSを使って画面幅に応じた表示を設定します。
代表的なのがCSSの「メディアクエリ」です。
メディアクエリを使うと、「画面幅が一定以下になったら、このスタイルを適用する」といった指定ができます。
たとえば、パソコンでは横並びにしている2つのコンテンツを、画面が狭くなったときだけ縦並びに変更できます。
また、画像についても固定された大きさではなく、表示領域に合わせて縮小できるよう設定することがあります。
ただし、Webサイトを自分で運営するだけなら、必ずしもこうしたコードを自分で書く必要はありません。
WordPressテーマやWebサイト作成サービスには、最初からレスポンシブデザインに対応しているものもあります。
スマホ対応で確認したいポイント
レスポンシブデザインを採用していても、それだけで必ず使いやすいWebサイトになるわけではありません。
実際のスマートフォン表示を確認することが大切です。
特に次のような部分を確認します。
1．文字が小さすぎないか
2．画像が画面からはみ出していないか
3．横スクロールが発生していないか
4．リンクやボタンを押しやすいか
5．メニューを問題なく操作できるか
設定上はスマホ対応になっていても、長い文字列や大きな画像などが原因で一部だけ表示が崩れる場合があります。
「レスポンシブ対応済み」と表示されていることだけで判断せず、実際の画面で確認することが重要です。
パソコンだけで確認するのは不十分
Webサイトを制作するときは、作業しやすいパソコンで確認することが多くなります。
しかし、パソコンできれいに表示されていても、スマートフォンで同じように使いやすいとは限りません。
ブラウザの開発者向け機能を使えば、パソコン上で画面幅を変更してスマートフォンに近い表示を確認することもできます。
ただし、実際の端末とは表示や操作感が異なる場合もあります。
公開前には可能であれば実際のスマートフォンでもページを開き、文字の読みやすさやボタンの押しやすさなどを確認しておきましょう。
スマートフォンの機種によって画面サイズは異なります。特定の1機種だけに合わせるのではなく、画面幅が変わっても大きく表示が崩れない状態を目指すことが大切です。
レスポンシブデザインは見た目だけの問題ではない
レスポンシブデザインというと、パソコンとスマートフォンでレイアウトを変えることに目が向きやすくなります。
しかし、大切なのは見た目を整えることだけではありません。
文章を読みやすくする、メニューから目的のページへ移動しやすくする、ボタンを押しやすくするといった操作性も含めて考える必要があります。
スマートフォンで表示したときに「崩れていない」だけではなく、利用する人が無理なく情報を読んで操作できるかまで確認しましょう。
画面サイズに合わせて使いやすいWebサイトにしよう
レスポンシブデザインは、パソコンやスマートフォンなどの画面サイズに合わせてWebページの表示を調整する方法です。
パソコンでは横並び、スマートフォンでは縦並びにするなど、同じページでも見やすいレイアウトへ変化させられます。
ただし、レスポンシブ対応しているだけで十分とは限りません。
文字の読みやすさ、画像の表示、ボタンやメニューの操作性なども確認する必要があります。
Webサイトを制作・運営するときは、パソコンだけでなくスマートフォンでも実際の表示を確認することを基本にしましょう。
コメント