レスポンシブデザインの作り方を初心者向けに徹底解説【2025年版】 | ホームページ制作・作成なら大阪のweb制作.com

COLUMN

コラム
  • >
  • >
  • レスポンシブデザインの作り方を初心者向けに徹底解説【2025年版】

2026.05.01

レスポンシブデザインの作り方を初心者向けに徹底解説【2025年版】

allmanage
株式会社オールマネージからの情報発信コラムです！

レスポンシブデザインの作り方を知りたい方に向けて、基本概念から実際のコードまでわかりやすく解説します。スマートフォンでのWeb閲覧が主流となった現在、レスポンシブデザインはもはや「あれば便利」ではなく「なければ困る」技術です。この記事では、初心者の方でも実装できるよう、viewportの設定・メディアクエリの書き方・フレキシブルなレイアウト設計まで、ステップごとに丁寧に解説します。

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

レスポンシブデザインとは、デバイスや画面サイズに応じて最適なレイアウトで表示されるよう設計されたWebデザインの手法です。1つのHTMLファイルで、パソコン・スマートフォン・タブレットそれぞれに合わせた表示に自動で切り替わります。

以前は「PC用サイト」と「スマホ用サイト」を別々に用意するのが一般的でしたが、レスポンシブデザインを採用すれば1つのコードで管理できるため、制作・運用コストを大きく削減できます。

レスポンシブデザインの主なメリット

レスポンシブデザインには、以下のようなメリットがあります。

  • Googleが推奨している：GoogleはモバイルフレンドリーなサイトをSEO評価でも重視しています。2024年7月にGoogleはMFI（モバイルファーストインデックス）をすべての既存サイトへ完全適用を完了し、現在はすべてのサイトがモバイルファーストでインデックスされています。PC・SP間でコンテンツの乖離が起きにくいレスポンシブデザインが有利です。
  • URLが1本で管理できる：デバイスごとにURLが分かれないため、SNSでのシェアやブックマークがしやすくなります。外部サイトからのリンクも分散しません。
  • 更新・メンテナンスが容易：HTMLファイルが1つなので、コンテンツの修正や追加が一度の作業で完結します。PC用・SP用と二重管理する必要がなくなります。

サイトマップとは？HTMLサイトマップ・XMLサイトマップの違いと作り方・デザインのコツ

なぜ今レスポンシブデザインが必要なのか

総務省「令和5年版 情報通信白書」によると、インターネット利用者のスマートフォン利用率は年々上昇を続けており、多くのユーザーがスマートフォンからWebサイトにアクセスしています。自社サイトや個人ブログを問わず、スマートフォンで正しく表示されないWebサイトはユーザーに「使いにくい」と判断され、すぐに離脱されてしまいます。

また、GoogleはCore Web Vitalsの指標においても、モバイルでの表示速度や操作性を重視しています。レスポンシブデザインを採用することで、モバイルユーザーの体験向上とSEO評価の改善を同時に実現できます。

新規でWebサイトを制作する場合はもちろん、既存サイトのリニューアルを検討している場合も、レスポンシブデザインへの対応は最優先で取り組むべき課題です。

レスポンシブデザインの作り方【ステップ解説】

それでは、レスポンシブデザインの具体的な作り方をステップごとに解説します。

ステップ1：viewportを設定する

レスポンシブデザインを実装するうえで、最初に行うのがviewport（ビューポート）の設定です。viewportとは、ブラウザがWebページを表示する「仮想的な画面の領域」のことです。この設定がないと、スマートフォンでページを開いたときにPC向けのレイアウトが縮小表示されてしまいます。

HTMLの<head>内に下記のmetaタグを追加してください。

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>

上記コードの意味は以下のとおりです。

  • width=device-width：ページ幅をデバイスの画面幅に合わせる
  • initial-scale=1.0：初期表示の拡大率を100%に設定する

このたった1行を追加するだけで、スマートフォンでの表示がグッと改善されます。

ステップ2：メディアクエリを設定する

次にメディアクエリ（@media）を設定します。メディアクエリとは、画面幅などの条件に応じて適用するCSSを切り替える仕組みです。「スマートフォンのときだけこのスタイルを適用する」といった制御が可能になります。

メディアクエリの書き方には2種類あります。

① CSSファイル内に直接記述する方法（推奨）

管理がシンプルで、多くの現場で採用されている方法です。

/* 共通スタイル */
body {
  font-size: 16px;
}

/* 画面幅768px以下のスタイル（スマートフォン向け） */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

max-width: 768pxは「画面幅が768px以下のとき」という条件です。このブレークポイント（切り替えの基準値）は、対応したいデバイスに応じて調整します。よく使われるブレークポイントの目安は下記のとおりです。

  • スマートフォン：〜480px
  • タブレット：481px〜768px
  • PC：769px〜

② HTMLのlinkタグにmedia属性を設定する方法

CSSファイルを分けて管理したい場合に使用します。

<!-- PC用CSS -->
<link rel="stylesheet" href="style-pc.css" media="screen and (min-width: 769px)">

<!-- スマートフォン用CSS -->
<link rel="stylesheet" href="style-sp.css" media="screen and (max-width: 768px)">

ファイルが分かれる分、管理が煩雑になりやすいため、初心者の方にはCSSファイル内への直接記述をおすすめします。

ステップ3：フレキシブルなレイアウトを設計する

viewportとメディアクエリの設定が完了したら、次はレイアウト自体をデバイスに応じて柔軟に変化させる設計を行います。現在のCSS設計では、FlexboxとCSS Gridが主流です。

Flexboxを使ったレイアウト例

/* PCではカードを横並びに */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card-list .card {
  flex: 1 1 calc(33.33% - 14px);
}

/* スマートフォンでは縦並びに */
@media screen and (max-width: 768px) {
  .card-list .card {
    width: 100%;
  }
}

上記の例では、PCでは3カラム表示、スマートフォンでは1カラム表示に切り替わります。flex-wrap: wrapを指定することで、画面幅に応じて自動的に折り返しが起きます。

CSS Gridを使ったレイアウト例

/* PCでは2カラムグリッド */
.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* スマートフォンでは1カラムに */
@media screen and (max-width: 768px) {
  .grid-layout {
    grid-template-columns: 1fr;
  }
}

CSS Gridはより複雑なレイアウトにも対応しやすく、ヘッダー・メインコンテンツ・サイドバー・フッターといったページ全体の構成を整理するのに適しています。

また、画像や動画がはみ出さないよう、max-width: 100%を設定しておくことも重要です。

img, video {
  max-width: 100%;
  height: auto;
}

レスポンシブデザインでよくある失敗と注意点

実際にレスポンシブデザインを実装するときに、初心者の方が陥りやすい失敗をまとめました。事前に把握しておくことで、つまずきを防ぐことができます。

  • viewportのmetaタグを忘れる：設定を忘れると、スマートフォンでPC向けの小さな画面がそのまま表示されます。全ページに共通して設定されているか確認しましょう。
  • 画像サイズを固定値（px）で指定している：width: 600pxのように固定幅で指定すると、スマートフォンの画面からはみ出してしまいます。max-width: 100%を使って可変にしましょう。
  • タップ操作を考慮していない：PCではマウスカーソルがあるため小さなボタンでも操作できますが、スマートフォンでは指での操作になります。ボタンやリンクのサイズは最低でも44px×44px程度を確保することが推奨されています。
  • フォントサイズが小さすぎる：スマートフォンでは文字が小さいと非常に読みづらくなります。本文テキストは最低でも14px以上、できれば16px程度を確保しましょう。
  • 特定のデバイスでしかテストしていない：ブラウザの開発者ツール（デベロッパーツール）を活用して、複数のデバイスサイズで表示確認を行いましょう。ChromeのデベロッパーツールではiPhone・Androidなどのデバイスをシミュレートできます。

まとめ

レスポンシブデザインの作り方について、基本概念から実装手順まで解説しました。要点を整理します。

  • レスポンシブデザインとは、1つのHTMLで複数デバイスに最適表示されるデザイン手法
  • まずHTMLの<head>にviewportのmetaタグを追加する
  • CSSのメディアクエリ（@media）で画面幅ごとにスタイルを切り替える
  • FlexboxやCSS Gridを活用してフレキシブルなレイアウトを設計する
  • 画像にはmax-width: 100%を設定してはみ出しを防ぐ

レスポンシブデザインは、スマートフォンユーザーの体験向上とSEO対策の両面で欠かせない技術です。新規サイト制作はもちろん、既存サイトのリニューアルを検討されている方も、ぜひ本記事を参考に対応を進めてみてください。

ホームページ制作・リニューアルに関するご不明な点があれば、ぜひお気軽にご相談ください。

サイトにひと工夫がほしい！Webフォントの探し方と選び方【2025年版】

ホームページを運用しないと起こる6つのデメリット【2025年版】

ホームページで集客できない7つの原因と今すぐできる改善ポイント【2025年版】

レスポンシブに対応したGoogle Mapの埋め込み方

WEB DESIGN & DEVELOPMENT

大阪でホームページ制作をご検討の方へ

集客・ブランディングに強いWebサイトを、大阪の専門チームがご提案！
まずはお気軽に無料相談からどうぞ

無料で相談する

関連記事

最近の記事

採用サイトデザインに特化したまとめサイト | DEZDEZ デザデザ