レスポンシブデザインのやり方！スマホ対応の基本をマスターしよう

レスポンシブデザインとは、PC・タブレット・スマホなど画面サイズの異なるデバイスで、最適な表示に自動で切り替えるデザイン手法のことです。スマホからのアクセスがWebサイト全体の半数以上を占める記事執筆時点において、レスポンシブ対応はWebデザイナーの必須スキルと言えます。

「スマホで見ると文字が小さくて読めない」「ボタンが小さすぎて押せない」「横スクロールが発生する」。こうした問題はすべてレスポンシブデザインの不備が原因です。逆に言えば、レスポンシブデザインを正しく実装するだけで、ユーザーの体験は大幅に改善されます。

この記事では、レスポンシブデザインの基本的な考え方から実装のやり方、よくある失敗と対策までを体系的に解説します。

レスポンシブ対応ができないWebデザイナーは、現場では正直厳しいよ。でも基本をしっかり押さえれば難しくないから、ここでマスターしてしまおう。

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

モバイルファースト

まずスマホ版のデザイン・コーディングから始めて、PC版に拡張していく考え方がモバイルファーストです。スマホからのアクセスが過半数を超える状況では、モバイルファーストが合理的なアプローチです。

CSSの書き方もこの考え方に沿って、スマホ用のスタイルをベースとして記述し、メディアクエリでタブレット・PC用のスタイルを追加する形にします。こうすることで、スマホではメディアクエリの処理が不要になり、パフォーマンス面でも有利です。

ブレイクポイントの設定

画面幅の切り替え地点を「ブレイクポイント」と呼びます。一般的なブレイクポイントは以下の通りです。

ただし、デバイスの画面サイズは多様化しています。特定のデバイスのサイズに合わせるのではなく、コンテンツが崩れる地点にブレイクポイントを置くのがベストプラクティスです。

ブレイクポイントは「デバイスに合わせる」より「コンテンツに合わせる」のが正解だよ。ブラウザの幅を徐々に狭めていって、レイアウトが崩れるポイントを見つけるのが効率的だね。

実装のやり方

viewportメタタグの設定

レスポンシブデザインの第一歩は、HTMLのhead内にviewportメタタグを記述することです。これがないとスマホではPC版のページが縮小表示されてしまい、レスポンシブデザインが機能しません。

メディアクエリの書き方

CSSの@mediaルールを使って、画面幅に応じたスタイルを指定します。モバイルファーストの場合、min-widthを使って「タブレット以上」「PC以上」のスタイルを追加する形で書きます。

たとえば「@media (min-width: 768px)」と書けば、画面幅768px以上の端末にだけ適用されるスタイルを定義できます。スマホ用のスタイルをベースに、画面幅が広くなるにつれてレイアウトを変更していく流れです。

Flexboxを活用する

Flexboxはレスポンシブデザインの強い味方です。要素の並び順や幅の配分を柔軟に変えられるCSS機能で、PCでは横並び、スマホでは縦並びに切り替える処理がたった数行のCSSで実現できます。

display: flexを設定した親要素の中で、flex-directionプロパティの値をrow（横並び）とcolumn（縦並び）で切り替えるだけで、レスポンシブなレイアウト変更が可能です。floatを使った古い手法に比べて、コード量が大幅に減り、予期しないレイアウト崩れも起きにくくなります。

CSS Gridも覚えておくと便利

Flexboxが「1次元（横方向または縦方向）」のレイアウト制御に強いのに対し、CSS Gridは「2次元（横と縦の両方）」のレイアウト制御に適しています。カード型のレイアウトやダッシュボードのようなグリッドレイアウトを作る際に重宝します。

画像のレスポンシブ対応

img要素にmax-width: 100%を指定すれば、画面幅に応じて画像が自動的に縮小されます。さらに、picture要素やsrcset属性を使えば、デバイスに応じて最適なサイズの画像を配信することも可能です。

FlexboxとCSS Gridが使えれば、レスポンシブのレイアウトはほぼ完璧に対応できるよ。計算上、この2つだけで実務のレイアウト要件の90%以上はカバーできるんだ。

よくある失敗と対策

テキストが小さすぎる

スマホでの本文フォントサイズは最低16px以上を確保しましょう。14px以下だとピンチズーム（拡大操作）をしないと読めないユーザーが出てきます。見出しも適切なサイズを維持して、視認性を確保してください。

タップ領域が小さすぎる

ボタンやリンクのタップ領域は最低44×44pxを確保するのが推奨されています。指で操作するスマホでは、タップ領域が小さいとユーザーが隣のリンクを誤タップしてしまい、ストレスの原因になります。

横スクロールが発生する

要素がはみ出して横スクロールが発生するのは、レスポンシブデザインとしてNGです。overflow-x: hiddenで応急処置も可能ですが、根本的には要素の幅指定を見直す必要があります。固定幅（px）ではなく、相対値（%やvw）で幅を指定するのが基本です。

テーブルがはみ出る

表（table要素）はスマホで横幅が足りなくなりがちです。対策としては、親要素にoverflow-x: autoを設定して横スクロール可能にする方法、あるいはスマホではテーブルの構造を変えて縦に並べる方法があります。

よくある質問（Q&A）

Q. レスポンシブデザインの学習にどのくらいかかりますか？

A. HTML/CSSの基礎ができている方であれば、1〜2週間で基本的なレスポンシブデザインが実装できるようになります。Flexboxとメディアクエリの2つを重点的に学習すれば、実務レベルのレスポンシブ対応は十分に可能です。

Q. レスポンシブデザインの確認はどうすればいいですか？

A. ブラウザの開発者ツール（F12キー）にあるデバイスエミュレーション機能で各デバイスの表示を確認できます。ただし、あくまでエミュレーションなので、最終確認は実機（実際のスマホやタブレット）で行うのが望ましいです。

Q. FlexboxとCSS Gridはどちらを先に学ぶべきですか？

A. Flexboxを先に学ぶのがおすすめです。使用頻度が高く、レスポンシブデザインの基本パターン（横並び↔縦並びの切り替え）はFlexboxだけで対応できます。CSS Gridはカード型レイアウトなどが必要になった時に学べば十分です。

Q. フレームワーク（Bootstrap等）を使えばレスポンシブ対応は不要ですか？

A. Bootstrapなどのフレームワークにはレスポンシブのグリッドシステムが組み込まれていますが、カスタマイズには結局メディアクエリの知識が必要です。フレームワークに頼る前に、素のCSSでレスポンシブを実装できる力をつけておくことを推奨します。

Q. スマホとPCでデザインを大きく変えるべきですか？

A. 基本的なデザインの方向性は統一しつつ、レイアウトやナビゲーションの構造をデバイスに最適化するのが一般的です。スマホではハンバーガーメニューを使い、PCではフルナビゲーションを表示するなど、ユーザーの操作方法に合わせた調整を行います。

参考：MDN レスポンシブデザイン

参考：web.dev レスポンシブの基本

まとめ：レスポンシブデザインは3つの要素を押さえればOK

レスポンシブデザインは、モバイルファースト・適切なブレイクポイント・Flexboxの3つを押さえれば基本は完了です。最初はシンプルな1カラムのページから練習して、徐々に複雑なレイアウトに挑戦していきましょう。スマホで快適に閲覧できるサイトを作れるデザイナーは、現場で確実に重宝されます。

レスポンシブデザインは「特別な技術」じゃなくて「当たり前の技術」として身につけておくべきものだよ。基本さえ押さえれば難しくないから、自信を持って取り組んでね。