【初心者向け】簡単なレスポンシブデザインのやり方

※本記事にはプロモーション（広告）が含まれます。

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

レスポンシブデザインとは、デバイスの画面サイズや解像度に応じてWebページのレイアウトを自動的に調整する手法です。これにより、デスクトップ、タブレット、スマートフォンなど、どのデバイスでも最適な表示が可能になります。

現代では、スマートフォンからWebサイトにアクセスするユーザーが増えているため、レスポンシブデザインは欠かせません。この技術を学ぶことで、より多くのユーザーに快適な体験を提供できます。

2. メディアクエリの基礎

メディアクエリは、CSSを使用してデバイスの特性（画面幅、解像度など）に応じたスタイルを適用するための仕組みです。

基本的な書き方

@media (条件) {
  セレクタ {
    プロパティ: 値;
  }
}

例として、画面幅が768px以下の場合に文字サイズを調整するコードを示します。

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

3. サンプルコードで学ぶ

以下は、簡単なレスポンシブデザインの例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブデザインの例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>ヘッダー</header>
  <main>
    <p>メインコンテンツ</p>
  </main>
  <footer>フッター</footer>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header, main, footer {
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  header {
    background-color: lightblue;
  }
  main {
    font-size: 16px;
  }
  footer {
    background-color: lightgray;
  }
}

4. 注意点とベストプラクティス

• 一貫したデザインルールを設定して、ユーザーにとって使いやすいサイトを目指しましょう。
• テストツール（例: Chrome DevTools）を使用して、異なる画面サイズで動作を確認しましょう。
• 必要以上に複雑なコードを避け、シンプルでメンテナンスしやすい設計を心掛けましょう。

実務のレスポンシブは、教科書どおりにはいかない

ここまでが基本ですが、実際の案件では別の問題が出ます。私はWeb制作に14年関わり、数十社の現場を見てきました。そこで繰り返し起きたことを書きます。

ブレークポイントは「現場のルール」に従う

自分で決められる案件は多くありません。制作会社や既存サイトのルールに合わせるのが基本です。

私が入った30名規模の現場では、レギュレーションを守ることが技術力より優先されていました。命名規則、ディレクトリ構成、そしてブレークポイントの値。勝手に変えると、他の人が触ったときに壊れます。

参画したら最初に確認してください。既存のCSSを開いて、どの値が使われているかを見るだけで分かります。

崩れる原因は、だいたい同じ3つ

1. 文字数が想定より増えたとき — デザインは短いテキストで作られていることが多い
2. 画像の縦横比が違うとき — 運用側が別サイズの画像を入れる
3. 長い英単語やURL — 折り返されずにはみ出す

いずれも「作った直後」ではなく「運用が始まってから」出ます。だから納品前に、わざと文字数を増やして確認する癖をつけてください。

検証の順番

実務では、次の順で確認すると漏れが減ります。

• ブラウザの開発者ツールで、幅を連続的に変えながら崩れる位置を探す
• 実機で確認する（特にiOSのSafari）
• 文字数を2倍にして崩れないか見る
• 画像が入っていない状態でも成立するか見る

幅を「375px・768px・1024px」など決め打ちで確認するだけでは足りません。崩れるのは、たいてい中間の幅です。

実務でよく使う型は、実は数が少ない

レスポンシブというと覚えることが多そうに見えますが、案件で繰り返し出てくるパターンは限られています。

1. 横並びを縦積みにする

いちばん出番が多い型です。PCで横に並んでいるカードやカラムを、スマホでは縦に積みます。この1つで大半のページは成立します。

2. 表示・非表示を切り替える

PCではグローバルメニュー、スマホではハンバーガーメニュー。この切り替えも定番です。ただし「非表示にした要素はSEO上どう扱われるか」を気にする現場もあるので、独断で消さないでください。

3. 文字サイズと余白を詰める

PCの余白をそのまま持ってくると、スマホでは間延びします。逆に詰めすぎると読みにくくなります。ここは感覚ではなく、デザインの指定値を確認するのが正解です。

4. 画像の切り替え

PC用とスマホ用で別画像を用意するケースがあります。CSSの背景画像で切り替えるのか、HTML側で出し分けるのかは、運用側が画像を差し替えられるかどうかで決まります。

この判断を間違えると、公開後に「画像を変えたいのに変えられない」という問題になります。作る前に、誰がどう更新するかを聞いてください。

5. テーブルの扱い

料金表や仕様表は、スマホで最も崩れやすい要素です。横スクロールさせるのか、縦積みに組み替えるのか。これも必ず確認事項になります。

やりがちな失敗

PCで完成させてから、スマホに取りかかる

効率が悪くなります。セクション単位でPCとスマホを同時に仕上げるほうが、手戻りが減ります。最後にまとめてスマホ対応をすると、構造そのものを直す羽目になります。

固定値で幅を指定する

px固定で幅を指定すると、画面幅が変わったときに必ず破綻します。可変にできるところは可変にしておくのが基本です。

実機で確認しない

ブラウザの検証モードと実機の表示は完全には一致しません。特にスマホ特有の挙動は、実機でしか気づけないものがあります。納品前に一度は実機で見てください。

デザインからの読み取り方

スマホ用のデザインが無い案件もある

「PCのデザインだけ渡されて、スマホは任せます」というケースは実際にあります。このとき勝手に決めると、あとで指摘されて手戻りになります。

着手前に確認すべきことは3つです。

• 要素の並び順は変えていいか
• PCで横並びの要素を、縦に積んでいいか
• PCにあって、スマホでは非表示にしていい要素はあるか

この3点を先に聞くだけで、修正回数が大きく減ります。

Figmaから読み取る

現在はFigmaでデザインが共有されることが多くなりました。私もPhotoshopのPSDを受け取っていた時代から移行しています。

コーダーが使うのは「読む」機能だけで十分です。余白を測る、色を取る、フォントサイズを見る。この3つができれば実装できます。詳しくはコーダーのFigma入門にまとめました。

チェックリスト：納品前に確認する10項目

実務で使っている確認項目です。これを通すだけで、公開後の指摘が大きく減ります。

1. 幅を連続的に変えて、崩れる位置がないか
2. 文字数を増やしても崩れないか
3. 画像が未登録でもレイアウトが成立するか
4. 横スクロールバーが出ていないか
5. タップできる要素が小さすぎないか
6. 実機（iOS・Android）で確認したか
7. 既存サイトのブレークポイントに合わせたか
8. テーブル・料金表の扱いを確認したか
9. PC非表示・スマホ非表示の指示を守っているか
10. 更新する人が触れる形になっているか

特に3番と10番は見落とされがちです。作った瞬間ではなく、運用が始まってから問題になるのがこの2つだからです。

よくある質問

Q. モバイルファーストで書くべきですか

案件によります。既存サイトの改修なら、そのサイトの書き方に合わせてください。新規で自由に決められる場合は、モバイルファーストのほうが記述量は少なくなる傾向があります。

Q. どこまでの端末に対応すべきですか

これも案件ごとに決まっています。推測せずに確認してください。古い端末まで含めるかどうかで、書く量がまったく変わります。

Q. フレームワークを使うべきですか

案件で指定されていれば使います。学習段階では、まず自分で書けるようになるほうが先です。フレームワークが何を自動でやっているかが分からないと、崩れたときに直せません。

Q. レスポンシブができれば案件は取れますか

必須条件ではありますが、それだけでは足りません。HTML/CSSだけの案件は減っています。WordPress構築やJavaScriptを1つ足すと、提案される案件の帯が変わります。判断材料はコーダーにWordPressは必要かにまとめました。

Q. どのくらいで書けるようになりますか

基本の型だけなら、集中すれば数週間で書けるようになります。ただし「案件で通用する」までは別です。実務では、崩れる条件を想像して先回りする必要があるからです。

私はHTML/CSSからJavaScriptに進むまで数年空いてしまい、そのぶん遠回りしました。実際にかかった期間はコーダーの独学期間にまとめています。

Q. 独学とスクール、どちらがいいですか

レスポンシブに限れば、独学で十分に到達できる範囲です。詰まる時間を短くしたいかどうかが判断基準になります。私自身は独学で進めましたが、JavaScriptの壁で長く止まりました。

Q. 実案件ではどのくらいの精度を求められますか

現場によって違います。1pxの差まで厳密に合わせることを求める現場もあれば、意図が伝わればよしとする現場もあります。これも着手前に確認する項目です。私が入った30名規模の現場では、決まりごとに正確に従うことが技術力より優先されていました。

できるようになったら、次にやること

レスポンシブが書けるようになったら、自分の市場価値を数字で確認してください。

私はフリーランスエージェントに7社登録しましたが、門前払いはゼロで、聞かれたのは経歴・得意分野・週何日働けるかの3点だけでした。技術テストもありません。提示されたのはどこも月50万円台です。

実務経験が1年あれば相談できます。Midworksのような会社で提示額を聞くだけでも、次に何を学ぶべきかが見えてきます。登録先の比較はフリーランスコーダーにおすすめのエージェントにまとめています。

5. まとめと次のステップ

この記事では、初心者向けにレスポンシブデザインの基本を解説しました。次のステップとして、より複雑なレイアウトや、JavaScriptを組み合わせた動的なレスポンシブデザインに挑戦してみてください。