ホーム＞ブログ＞ HP制作＞【初心者でも分かる】レスポンシブデザインの作り方｜スマホ対応サイトの実装手順を全解説

2026年4月8日 HP制作

【初心者でも分かる】レスポンシブデザインの作り方｜スマホ対応サイトの実装手順を全解説

あなたのサイト、スマホで見たことありますか？

突然ですが、みなさんに一つ質問です。自社のホームページを、最後にスマートフォンで確認したのはいつですか？

「えっ、いつだろう……」と思った方、今すぐスマホで自社サイトを開いてみてください。文字が小さすぎて読めない、ボタンが指で押せないほど小さい、画像がはみ出している——もしこういった状態なら、御社は毎日数十人の見込み客をスマホの画面上で失っています。

2026年現在、日本におけるWebサイトのアクセスの約75%がスマートフォン経由です。つまり、4人中3人がスマホでサイトを見ている。そのスマホ画面で使いにくいサイトは、ユーザーにとって「存在しないのと同じ」なのです。

この記事では、「レスポンシブデザイン」の基礎概念から、実際にスマホ対応サイトを作る（または既存サイトをスマホ対応に改修する）ための具体的な実装手順までを、Web制作初心者の方にも分かるように徹底解説します。

この記事で分かること
レスポンシブデザインとは何か（そしてなぜ必須なのか）
PC・タブレット・スマホに自動対応するCSSの書き方
レスポンシブ実装の具体的な手順（コード付き）
よくある失敗パターンと回避方法
2026年に求められるスマホ対応の最新基準

レスポンシブデザインの基本——なぜ「スマホ専用サイト」ではダメなのか

レスポンシブデザインとは「1つのHTMLで全デバイスに対応する技術」

レスポンシブデザインを一言で定義すると、「1つのHTMLファイルで、画面の幅に応じてレイアウトが自動的に変化するWebデザイン手法」です。

かつては「PC用サイト」と「スマホ用サイト（m.example.com）」を別々に作るアプローチが一般的でした。しかしこの方法には致命的な問題があります。

更新作業が2倍になる（PC版を直したらスマホ版も直す必要がある）
URLが分散するためSEO評価が分散する
タブレットなど「中間サイズ」のデバイスに対応しきれない

レスポンシブデザインなら、HTMLは1つだけ。CSSのメディアクエリという仕組みを使って、「画面幅が768px以下ならこのスタイルを適用する」というルールを書くだけで、全デバイスに自動対応できます。

Googleが「モバイルファースト」を公式に要求している

2021年、Googleは全Webサイトに対してモバイルファーストインデックス（MFI）を完全適用しました。これは「Googleがサイトを評価する際、PC版ではなくスマホ版のコンテンツを基準にする」という方針です。

つまり、スマホ版が貧弱なサイトは、どれだけPC版が充実していても、Googleの検索順位が下がるということです。

2026年現在、この傾向はさらに強まっており、Core Web Vitals（ページ表示速度・操作性の指標）の評価もスマホ基準が優先されています。

レスポンシブ非対応サイトのビジネスインパクト

指標	スマホ対応サイト	スマホ非対応サイト	差
平均直帰率	42%	78%	1.9倍悪い
平均滞在時間	3分12秒	47秒	4倍短い
問い合わせCVR	2.1%	0.3%	7倍低い
Google検索順位（平均）	上位30位以内	50位以下	圏外に近い

実装の準備——モバイルファーストで設計する

viewportメタタグ：全ての始まり

レスポンシブデザインの実装で、最初に必ずやるべきことが1つあります。HTMLのタグ内に、以下のviewportメタタグを記述することです。

このたった1行が、「ブラウザに対して画面幅に応じたレンダリングを指示する」という重要な役割を担っています。これがないと、スマホのブラウザはPC用の幅（通常980px）でページを描画し、それを画面内に無理やり縮小表示してしまいます。

⚠️ 注意：WordPressテーマの多くは最初からこのタグが入っていますが、古いテーマやカスタムテーマでは抜けていることがあります。まず確認してください。

モバイルファーストCSS設計の考え方

2026年のWeb制作のベストプラクティスは、モバイルファースト——つまり「まずスマホ向けのCSSを書き、画面が大きくなるにつれてレイアウトを拡張していく」というアプローチです。

/* ベーススタイル（スマホ向け） */
.container {
  width: 100%;
  padding: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;  /* スマホ：1列 */
  gap: 16px;
}

/* タブレット以上（768px〜） */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
  }
  .card-grid {
    grid-template-columns: repeat(2, 1fr);  /* タブレット：2列 */
  }
}

/* PC以上（1024px〜） */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    padding: 32px;
  }
  .card-grid {
    grid-template-columns: repeat(3, 1fr);  /* PC：3列 */
  }
}

この書き方のメリットは、スマホ向けのスタイルがデフォルトになるため、万が一メディアクエリが読み込まれなくても最低限スマホでの表示が保証されることです。

ブレークポイントの設定基準

「何pxでレイアウトを切り替えるか」の基準（ブレークポイント）は、2026年現在、以下の3段階が一般的です。

デバイス	ブレークポイント	代表的な端末
スマートフォン	〜767px	iPhone 16, Galaxy S26, Pixel 10
タブレット	768px〜1023px	iPad, Galaxy Tab
デスクトップ	1024px〜	ノートPC, デスクトップモニター

💡 ポイント：ブレークポイントは「デバイスの画面幅」ではなく「レイアウトが崩れ始める幅」で決めるのが正解です。コンテンツをブラウザ幅を狭めながら確認し、テキストが読みづらくなったりボタンが押しにくくなる地点でブレークポイントを設定してください。

レスポンシブデザインの実装——よく使うパターン5選

パターン1：ナビゲーションメニューのハンバーガー化

PCでは横並びのナビゲーションメニューを、スマホでは「≡」（ハンバーガーアイコン）に収納するパターンです。これは事実上すべてのレスポンシブサイトで使われている定番中の定番です。

/* スマホ：ハンバーガーメニュー表示 */
.nav-menu {
  display: none;  /* 通常は非表示 */
}
.hamburger {
  display: block;  /* ハンバーガーアイコンを表示 */
}
.nav-menu.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: #fff;
}

/* PC：通常メニュー表示 */
@media (min-width: 1024px) {
  .nav-menu {
    display: flex;  /* 横並びで表示 */
    gap: 24px;
  }
  .hamburger {
    display: none;  /* アイコンは非表示 */
  }
}

パターン2：画像の自動リサイズ

レスポンシブで最も基本的なテクニックの一つが、画像のサイズを画面幅に合わせて自動調整することです。

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

このたった2行で、画像は親要素の幅を超えることなく、アスペクト比を保ったまま縮小されます。

パターン3：フォントサイズの流動的な調整

clamp()関数を使うと、画面幅に応じてフォントサイズが滑らかに変化します。メディアクエリでブレークポイントごとに指定するより、はるかにスマートです。

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  /* 最小1.5rem、画面幅の4%、最大2.5rem */
}

body {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

パターン4：テーブル（表）のスマホ対応

表はスマホ表示の鬼門です。横に長いテーブルがスマホの幅に収まらず、横スクロールが発生してしまう問題は非常によくあります。

解決策は2つ。

/* 方法1：横スクロール式 */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 方法2：カード型に変形（高度だが見やすい） */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead {
    display: none;
  }
  td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
  }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    color: #666;
  }
}

パターン5：フレックスボックスによるレイアウト制御

CSS Flexboxは、レスポンシブレイアウトの最強の味方です。flex-wrap: wrapを使えば、要素が画面幅に収まりきらなくなったとき自動的に折り返されます。

.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.service-card {
  flex: 1 1 300px;  /* 最小幅300px、余裕があれば伸縮 */
}

この書き方なら、PC画面では3〜4列並び、タブレットでは2列、スマホでは1列と、メディアクエリなしで自然にレイアウトが切り替わります。

✅ 実践のコツ：2026年のWeb制作では、CSS GridとFlexboxを組み合わせるのがスタンダードです。Grid = 大枠のページレイアウト、Flexbox = コンポーネント内の要素配置、という使い分けが最も効率的です。

よくある失敗パターンと回避策

失敗1：タップターゲットが小さすぎる

Googleは「タップ可能な要素（ボタン、リンク）は最低48×48ピクセル」を推奨しています。特にフォームの入力欄やチェックボックスが小さいまま放置されているケースが非常に多いです。

button, a, input[type="submit"] {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

失敗2：フォームがスマホで使いにくい

お問い合わせフォームの入力欄が小さすぎたり、キーボードの種類が適切でなかったりすると、ユーザーの離脱に直結します。

失敗3：テスト不足

Chrome DevToolsのデバイスモードだけでテストして「OK」と判断してしまう企業が、驚くほど多いです。実機（iPhone、Android）での表示確認は必ず行ってください。DevToolsはあくまで近似的なエミュレーションであり、実際のスマホブラウザの挙動と100%同じではありません。

まとめ：スマホ対応は「必須コスト」、しかし投資対効果は抜群

レスポンシブデザインは、2026年のWeb制作において「あった方がいい」ものではなく「なければビジネスにならない」レベルの必須要件です。

しかし、ここまで読んでいただいたように、基本的な実装は決して難しくありません。viewportメタタグの設定、モバイルファーストのCSS設計、メディアクエリによるレイアウト切り替え——この3ステップを押さえれば、スマホ対応の基盤は作れます。

もし「自社サイトのスマホ対応状況がよく分からない」という方は、GoogleのPageSpeed Insights（https://pagespeed.web.dev/）で自社サイトのURLを入力してみてください。モバイル対応度を含む総合的な診断が無料で受けられます。

HP制作のご相談はこちら

ホームページ制作の無料相談を受付中です。
お気軽にお問い合わせください。

無料で相談してみる →

この記事を書いた人：進藤優介｜株式会社Acqua 代表取締役飲食業界18年の実務経験を経て、Web制作・デジタルマーケティングの世界へ転身。2020年にAcquaを設立し、AI×Webの力で中小企業のビジネスを加速させることをミッションに、HP制作・LP制作からAI導入支援まで代表自らが伴走しています。