レスポンシブデザインの作り方は？初心者向けにCSSの実装手順を解説！

レスポンシブデザインの基礎知識

レスポンシブデザインは、1つのコードで複数のデバイスに対応できるWebサイトの構築手法です。仕組みやメリットなどの基本概念を整理します。

画面幅を基準に表示を切り替える

レスポンシブデザインは、アクセスしたデバイスの画面幅を基準にレイアウトや装飾を自動で切り替えます。

PCとスマートフォンで別々のHTMLファイルを用意するのではなく、CSSの条件分岐によって表示を柔軟に調整する仕組みです。そのため、画面サイズの異なる新しいデバイスが将来的に登場した際にも、表示崩れが起きにくいサイトを構築できます。

単一URLでサイトを管理できる

1つのURLでパソコン・スマートフォン・タブレットの全デバイスに対応できます。
PC用とスマホ用でURLが分かれていると、ユーザーがリンクを共有した際に意図しないレイアウトで表示されるリスクも珍しくありません。単一URLであれば、こうした閲覧時の不便が起きにくくなります。加えて、ページの更新や修正も1つのファイルで完結するため、管理の手間を抑えやすくなります。

スマホ対応が検索順位に影響する

スマートフォンに対応したWebサイトは、Googleの検索順位で高く評価される傾向があります。現在Googleは「モバイルファーストインデックス」という方針を導入しており、スマートフォン向けのページを基準にサイトを評価しています。

レスポンシブデザインによって各デバイスのユーザビリティを高めることは、SEOの観点でも重要とされています。

どんなレイアウト手法がある？

レスポンシブデザインには、主に3つのレイアウト手法が存在します。用途やサイトの特性に応じた適切な手法を選定します。

画面幅の数値で表示を切り替える

レスポンシブレイアウトは、指定した画面幅の数値（ブレイクポイント）を境にCSSを切り替える手法です。「768px未満はスマホ用のデザインにする」といったブレイクポイント（分岐点）を設定し、レイアウトの配置やサイズ、表示／非表示を段階的に切り替えます。特に情報量の多いメディアサイトなどでは、ブレイクポイントを活用してスマホ画面向けにレイアウトを大きく変える工夫が重要になります。

画面に合わせて全体を伸縮させる

リキッドレイアウトは、コンテンツの幅をパーセント（%）などで指定し、画面サイズに合わせて常に伸縮させる手法です。画面の幅が変わるとそれに連動して要素の幅も滑らかに変化するため、どのデバイスでも画面いっぱいにコンテンツが表示されます。
一方で、PCなどの大きな画面ではコンテンツが横長に広がりすぎて読みづらくなるケースもあります。

最大幅を定めて要素を伸縮させる

フレキシブルレイアウトは、リキッドレイアウトを応用し、コンテンツの最大幅（max-width）と最小幅（min-width）を設定する手法です。幅をパーセントで指定して伸縮させつつ、「最大1200pxまで」といった上限を設けることで、大画面でも要素が横に広がりすぎる事態を防ぎます。

レスポンシブデザインの作り方

レスポンシブデザインの実装は、HTMLの設定・CSSの設定・ブレイクポイントの決定という3つのステップで進めます。基本的な手順とコードの書き方を解説します。

HTMLにviewportを記述する

HTMLのheadタグ内に、viewport（ビューポート）と呼ばれるmetaタグを記述します。アクセスしたデバイスの画面サイズに合わせて、Webサイトの表示領域を適切に制御するための設定です。具体的には
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
のように記述し、画面幅をデバイスに合わせるようブラウザに指示を出すのが一般的です。

CSSにメディアクエリを記述する

CSSファイル内にメディアクエリ（@media）を記述し、画面幅に応じたスタイルを設定します。メディアクエリを使うことで、「指定した画面幅のときだけこのCSSを適用する」という条件分岐が可能になります。

現在はモバイルファーストの考え方が推奨されており、ベースとなるスマホ用のCSSを記述した上で、メディアクエリ（min-width）でより大きな画面向けのCSSを追加していく流れが標準的な手順です。

表示を切り替えるブレイクポイントを決める

メディアクエリには、表示を切り替える基準となるブレイクポイントの数値を設定します。例えば「max-width: 768px」と指定することで、画面幅が768ピクセル以下の場合にのみ対象のCSSが適用されます。

最新のスマートフォンやタブレットのサイズを考慮しつつ、コンテンツのレイアウトが破綻し始める箇所を基準に数値を決めるケースが一般的です。

よく使うCSSの記述パターン

スマートフォンに対応させる際、頻繁に利用されるCSSの記述が存在します。実務で役立つ代表的なパターンを整理します。

スマホ表示時に不要な要素を隠す

スマートフォンで表示領域を圧迫する要素は、CSSでdisplay: none;を指定して隠します。PC画面では役立つサイドバーや大きな装飾画像も、スマホ画面ではスクロールの手間を増やし、読者の負担になりかねません。情報を削りすぎないよう注意しつつ、スマホ表示では本当に必要なコンテンツだけを残す設計が推奨されます。

画像を画面幅に合わせて縮小する

画像がスマホの画面をはみ出さないよう、CSSでmax-width: 100%;とheight: auto;を指定します。この記述により、元の画像サイズより画面幅が狭い場合は、画像の縦横比を保ったまま自動的に縮小される仕組みです。ユーザーが横スクロールをする手間を省き、見やすいレイアウトを維持できます。

横並びのレイアウトを解除する

PCで横に並べている要素は、スマホ表示では縦積みに変更します。PC用に指定したfloatやdisplay: flex;などの横並び設定を、メディアクエリ内で解除することで縦並びに戻せます。横幅の狭いスマホで要素を横に並べたままにすると、文字が潰れたり画像が小さくなりすぎたりするケースも珍しくありません。

実装時に気をつけるべきポイント

レスポンシブデザインの実装においては、コードの記述以外にも留意すべき点があります。ユーザビリティを保つための注意点を確認します。

スマホ用の画面設計から着手する

Webサイトのレイアウトを考える際は、スマートフォン用の画面設計から始めるのが基本です。スマホは画面が小さく掲載できる情報が限られるため、最初にスマホ版を設計することで、優先すべき重要なコンテンツが明確になります。

そこからPCなどの大画面に向けて要素を広げていくアプローチ（モバイルファースト）を取ると、設計がスムーズに進んでいきます。

画像容量を減らし表示速度を保つ

レスポンシブデザインではPCとスマホで同じHTMLを読み込むため、画像のファイルサイズを小さく抑える必要があります。
スマホ表示時には不要となるPC用の大きな画像データも裏側で読み込まれるため、通信環境によっては表示が遅延します。画像を適切なサイズに圧縮するか、デバイスごとに読み込む画像を切り替える仕組みを取り入れることが有効です。

ボタンはタップしやすく設計する

スマートフォンで操作する読者に配慮し、ボタンやリンクは指でタップしやすい大きさと間隔で設計します。PCのマウス操作では問題ない小さなリンクも、スマホのタッチ操作では誤操作の原因になりかねません。リンク同士の間に十分な余白を設け、重要なボタンは画面の横幅いっぱいに広げるといった工夫を取り入れます。

自社での実装が難しいと感じたときの選択肢

レスポンシブ対応は、コードの記述だけでなく、ブレイクポイントごとの細かなデザイン調整や画像最適化など、地道な作業が積み重なる工程です。
通常業務と並行して独力でサイト全体を改修するのが難しい場合、外部の制作会社を活用するのも有効な選択肢となります。

担当者の負担を抑えながら、モバイル環境でのユーザビリティを確保するための代表的な進め方を整理します。

負担の大きい工程だけを制作会社に部分委託する

実装手順のうち、負担の大きい工程だけを切り出して制作会社に依頼する方法もあります。特にブレイクポイントごとの細かな調整や、画像の圧縮・書き出しといった作業は、専門ツールと経験を持つ外部リソースに任せることで、社内の工数を本来のディレクション業務や運用改善に集中させられます。

既存のHTML・CSSを活かしたスポット対応も可能なため、まずは対応範囲を絞って相談してみるのも一つの手です。

リニューアルとあわせて根本から見直す

既存サイトの構造自体が古く、部分的なCSS調整では表示崩れが解消しきれないケースもあります。その場合は、レスポンシブ対応を前提としたリニューアルを検討する方が、結果的に運用負荷や費用対効果の面で優れるケースも少なくありません。既存サイトの状態や改修範囲によって最適な進め方は変わるため、まずは現状を整理したうえで、必要に応じて制作会社への相談を検討するとよいでしょう。

実装結果をテストする方法は？

実装が完了した後は、意図した通りにレイアウトが切り替わるかを確認します。代表的なテスト方法を2つ紹介します。

Chromeの検証ツールを活用する

Google Chromeなどのブラウザに搭載されている検証ツール（デベロッパーツール）を使うと、PC上で簡単に表示崩れを確認できます。スマートフォンやタブレットの画面幅を擬似的に再現可能です。メディアクエリのブレイクポイントが正しく機能しているか、要素がはみ出していないかを効率よくチェックできます。

実際のスマホで表示をテストする

検証ツールでの確認が終わったら、必ず実際の手持ちのスマートフォンやタブレットでも表示をテストします。検証ツールはあくまで擬似的な再現であり、実機特有のブラウザの仕様や、実際の指での操作感までは完全に把握できません。ボタンの押しやすさやスクロールの滑らかさなど、読者と同じ目線で使い勝手を確かめておくと安心です。

レスポンシブデザインを正しく実装し、スマホでも見やすいサイトを作ろう

レスポンシブデザインの実装は、HTMLのviewport設定とCSSのメディアクエリによる条件分岐が基本となります。ブレイクポイントを適切に定め、画像の縮小や不要要素の非表示など、スマホ特有の環境に配慮したCSSの調整も重要になります。

しかし、ブレイクポイントごとの細かなデザイン調整や、スマホでの表示速度を維持するための画像最適化には、相応の専門知識と時間がかかります。通常業務と並行して独力でサイト全体を改修するのは、担当者にとって大きな負担になりがちです。

株式会社シスコムでは、レスポンシブデザインに対応したホームページ制作やシステム開発をサポートしています。
既存サイトのスマホ対応から新規構築まで、モバイル環境でのユーザビリティとSEOを両立させた設計で、ご担当者様の運用負担を軽減できるよう伴走型の支援を行っています。自社サイトのスマホ対応やリニューアルについて気になることがあれば、下記のページからお気軽にご相談ください。