レスポンシブデザインの考え方

定義

パソコン・タブレット・スマホなど、画面の大きさが違う端末でも、それぞれ見やすく表示されるようにホームページを作る考え方。画面の幅に応じて、レイアウト(文字や写真、ボタンの並び方)が自動的に切り替わるのが核心。

なぜ必要か

多くの人がスマホでホームページを見る今、スマホで見づらいホームページは、それだけで離れられてしまう。

現場での使い方

パソコンの画面は横に広いので、文章や写真を2列・3列に並べて表示することが多い。同じホームページをスマホで見ると、画面の幅が狭くなるため、その2列だった文章が自動的に1列で縦に積み重なる形に並び替わる。 メニューも同様に変化する。パソコンでは「会社情報」「サービス」「お問い合わせ」のような項目が画面の上部に横一列で並んでいることが多いが、スマホではその横幅がないため、タップすると項目が開く「三」のような3本線のアイコン(ハンバーガーメニューと呼ばれる)にまとめられることが多い。 写真やボタンについても、パソコンでは横に大きく表示されていたものが、スマホでは画面の幅に合わせて縮小されたり、指で押しやすいように大きさや余白が調整されたりする。 このように「画面の幅によって表示が自動的に切り替わる」ことを踏まえ、パソコン・タブレット・スマホのそれぞれで、レイアウトが崩れていないか、文字が小さすぎないか、ボタンが指で押しやすい大きさかを必ず確認しながら作る。

よくある失敗

パソコンでの見た目だけを重視して作り、スマホでの表示確認が後回しになる。

AIで活用する方法

デザインが画面サイズごとにどう崩れる可能性があるか、注意点をAIにチェックリストとして出させる。

実例

関連用語