12. レスポンシブデザイン

この章では、レスポンシブデザインを学びます。

レスポンシブデザインとは、画面幅に合わせて見やすく使いやすい表示に調整することです。

PCで見やすいレイアウトが、そのままスマホでも見やすいとは限りません。

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

レスポンシブデザインでは、1つのWebページをさまざまな画面幅に対応させます。

たとえば、次のような環境です。

スマホ
タブレット
ノートPC
大きなディスプレイ

画面幅が変わると、表示できる情報量や操作方法が変わります。

そのため、レイアウト、余白、文字サイズ、画像、ナビゲーションを調整します。

横並びを縦並びにするだけではない

レスポンシブ対応というと、PCの横並びをスマホで縦並びにすることを思い浮かべるかもしれません。

それも重要ですが、それだけでは足りないことがあります。

スマホでは、次のような調整も必要です。

情報の順番を変える
余白を縮める
文字サイズを調整する
ボタンを押しやすくする
画像比率を変える
メニューを開閉式にする
表示する情報を整理する

スマホで実際に読み進めた時に自然かを確認します。

情報の順番

スマホでは、画面の横幅が狭いため、情報が縦に積み上がります。

そのため、情報の順番がより重要になります。

PCで左右に並んでいた画像とテキストを、スマホでどちらを先に見せるか考えます。

たとえば、サービス説明では、画像より先に見出しと説明文を見せた方が理解しやすい場合があります。

一方で、店舗紹介では、写真を先に見せた方が雰囲気が伝わりやすい場合もあります。

順番は、ページの目的に合わせて決めます。

余白の調整

PCでちょうどよい余白も、スマホでは広すぎることがあります。

スマホは画面が小さいため、余白が大きすぎると情報にたどり着くまで時間がかかります。

一方で、余白を詰めすぎると読みにくくなります。

確認したい項目は次の通りです。

セクション間が広すぎないか
左右余白が狭すぎないか
カード内が窮屈ではないか
ボタン周りに押しやすい余白があるか
見出しと本文の関係がわかるか

スマホでは、必要な余白を残しながら、間延びしないように調整します。

文字サイズ

スマホでは、文字サイズにも注意します。

PCと同じ見出しサイズを使うと、スマホで大きすぎることがあります。

逆に、本文が小さすぎると読みづらくなります。

確認したい項目は次の通りです。

見出しが大きすぎて折り返しすぎていないか
本文が小さすぎないか
ボタン文字が読めるか
注釈が小さくなりすぎていないか
行間が詰まりすぎていないか

スマホでは、限られた幅で読みやすさを保つ必要があります。

ボタンとタップ領域

スマホでは、マウスではなく指で操作します。

そのため、ボタンやリンクのタップ領域が小さすぎると押しづらくなります。

確認したい項目は次の通りです。

ボタンの高さが十分か
文字が読みやすいか
リンク同士が近すぎないか
画面下部に重要な導線があるか
フォーム入力欄が押しやすいか

スマホでは、見た目だけでなく操作しやすさを確認します。

画像の見せ方

画像は、画面幅によって見え方が大きく変わります。

PCで横長に見せていた画像が、スマホでは小さくなりすぎることがあります。

また、背景画像として使っている場合、スマホで重要な部分が見切れることもあります。

確認したい項目は次の通りです。

見せたい部分が切れていないか
画像が小さすぎないか
縦長になりすぎていないか
画像の上の文字が読めるか
画像が連続して重く見えないか

必要に応じて、PCとスマホで画像比率や表示位置を変えます。

実機で確認する

レスポンシブは、ブラウザの幅を変えるだけでなく、できればスマホ実機でも確認します。

実機で見ると、次のようなことに気づきやすくなります。

文字が思ったより小さい
ボタンが押しづらい
画像が見切れている
スクロールが長すぎる
メニューが操作しづらい
フォーム入力が面倒

実際に触ってみることが大切です。

この章のまとめ

レスポンシブデザインは、画面幅に合わせて見やすく使いやすく調整すること
横並びを縦並びにするだけでなく、情報の順番や操作性も見直す
スマホでは余白、文字サイズ、ボタンの押しやすさを確認する
画像は、画面幅によって見切れや比率に注意する
次の章では、アクセシビリティと読みやすさを学ぶ