AsamiWorksAI検索最適化サイト制作
料金シミュレーション無料相談
技術解説

レスポンシブデザインの基本｜スマホ対応サイトの作り方

レスポンシブデザインの基礎から実装方法まで徹底解説。メディアクエリ、ビューポート設定、モバイルファースト設計、実装例を初心者向けに紹介します。

#レスポンシブデザイン#スマホ対応#CSS#メディアクエリ#モバイルファースト#HTML

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

レスポンシブデザインは、PC、タブレット、スマートフォンなど、さまざまな画面サイズに自動で最適化されるWebデザイン手法です。

従来の方法との違い

方式 仕組み メリット デメリット
PC専用サイト PCサイズのみ 制作が簡単 スマホで見づらい
別URL方式 PC版とスマホ版を別URL デバイス最適化 2サイト分の管理コスト
レスポンシブ 1つのHTMLで全デバイス対応 管理が楽、SEOに有利 設計に技術が必要

レスポンシブデザインが必須の理由

  • スマホ利用率70%超：Webサイトの閲覧は、スマホが7割以上
  • Googleが推奨：モバイルファーストインデックス採用（スマホ対応が検索順位に影響）
  • ユーザー体験向上：どのデバイスでも快適に閲覧可能
  • 管理コスト削減：1つのサイトで全デバイス対応

レスポンシブデザインの3つの柱

1. フルードグリッド（Fluid Grid）

固定幅（px）ではなく、相対的な幅（%、vw）でレイアウトを設計します。

従来の固定幅：

.container {
  width: 1200px; /* 固定幅 */
}

フルードグリッド：

.container {
  width: 90%; /* 画面幅の90% */
  max-width: 1200px; /* 最大幅を制限 */
}

2. フレキシブルイメージ（Flexible Images）

画像も画面幅に応じて伸縮させます。

img {
  max-width: 100%; /* 親要素の幅を超えない */
  height: auto; /* 縦横比を維持 */
}

3. メディアクエリ（Media Queries）

画面サイズに応じて、CSSを切り替えます。

/* スマホ（〜767px） */
@media (max-width: 767px) {
  .sidebar {
    display: none; /* サイドバーを非表示 */
  }
}

/* タブレット（768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 95%;
  }
}

/* PC（1024px〜） */
@media (min-width: 1024px) {
  .container {
    width: 1200px;
  }
}

ブレークポイントの設定

ブレークポイントとは、レイアウトを切り替える境界となる画面幅です。

一般的なブレークポイント

デバイス 画面幅 ブレークポイント
スマートフォン 〜767px デフォルト（メディアクエリ不要）
タブレット（縦） 768px〜1023px @media (min-width: 768px)
PC・タブレット（横） 1024px〜 @media (min-width: 1024px)
大画面PC 1440px〜 @media (min-width: 1440px)

モバイルファースト vs デスクトップファースト

モバイルファースト（推奨）：

/* スマホ向けのスタイル（基本） */
.element {
  font-size: 14px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .element {
    font-size: 16px;
  }
}

/* PC以上 */
@media (min-width: 1024px) {
  .element {
    font-size: 18px;
  }
}

デスクトップファースト：

/* PC向けのスタイル（基本） */
.element {
  font-size: 18px;
}

/* タブレット以下 */
@media (max-width: 1023px) {
  .element {
    font-size: 16px;
  }
}

/* スマホ以下 */
@media (max-width: 767px) {
  .element {
    font-size: 14px;
  }
}

推奨：モバイルファースト
理由：スマホユーザーが多い現在、スマホ向けを基本とし、大画面用に拡張する方が効率的です。

ビューポートの設定

ビューポート（viewport）は、スマホでサイトを表示する際の表示領域です。HTMLの<head>内に必ず記述してください。

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

各パラメータの意味

パラメータ 意味 推奨値
width ビューポートの幅 device-width（デバイス幅に合わせる）
initial-scale 初期表示の拡大率 1.0（等倍）
maximum-scale 最大拡大率 設定しない（ユーザーが拡大できるように）
user-scalable ユーザーの拡大縮小 yes（許可）

❌ 悪い例（拡大を禁止）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

→ アクセシビリティの観点からNG。ユーザーが拡大できないと、小さい文字が読めません。

レスポンシブデザインの実装例

例1: 2カラムレイアウト

要件： PCでは2カラム（メイン70%、サイドバー30%）、スマホでは1カラム（サイドバーは下に移動）

HTML：

<div class="container">
  <main class="main">メインコンテンツ</main>
  <aside class="sidebar">サイドバー</aside>
</div>

CSS：

/* スマホ（デフォルト）：縦並び */
.container {
  display: flex;
  flex-direction: column; /* 縦並び */
}

.main {
  width: 100%;
}

.sidebar {
  width: 100%;
}

/* PC（1024px以上）：横並び */
@media (min-width: 1024px) {
  .container {
    flex-direction: row; /* 横並び */
    gap: 20px;
  }

  .main {
    width: 70%;
  }

  .sidebar {
    width: 30%;
  }
}

例2: グリッドレイアウト

要件： スマホでは1列、タブレットでは2列、PCでは3列で商品を表示

HTML：

<div class="products">
  <div class="product">商品1</div>
  <div class="product">商品2</div>
  <div class="product">商品3</div>
  <div class="product">商品4</div>
  <div class="product">商品5</div>
  <div class="product">商品6</div>
</div>

CSS：

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

/* タブレット（768px以上）：2列 */
@media (min-width: 768px) {
  .products {
    grid-template-columns: 1fr 1fr; /* 2列 */
  }
}

/* PC（1024px以上）：3列 */
@media (min-width: 1024px) {
  .products {
    grid-template-columns: 1fr 1fr 1fr; /* 3列 */
  }
}

例3: ハンバーガーメニュー

要件： PCでは横並びメニュー、スマホではハンバーガーメニュー（三本線アイコン）

HTML：

<nav class="nav">
  <button class="menu-toggle">☰</button>
  <ul class="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

CSS：

/* スマホ：ハンバーガーメニュー */
.menu-toggle {
  display: block; /* 表示 */
  background: none;
  border: none;
  font-size: 24px;
}

.menu {
  display: none; /* 非表示 */
  flex-direction: column;
}

.menu.is-open {
  display: flex; /* 開いた時に表示 */
}

/* PC（1024px以上）：横並びメニュー */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none; /* ハンバーガーアイコンを非表示 */
  }

  .menu {
    display: flex; /* 常に表示 */
    flex-direction: row; /* 横並び */
    gap: 20px;
  }
}

JavaScript（メニュー開閉）：

const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');

menuToggle.addEventListener('click', () => {
  menu.classList.toggle('is-open');
});

レスポンシブデザインのチェックリスト

項目 確認内容
ビューポート設定 HTMLに<meta name="viewport">が記述されているか
画像の最大幅 max-width: 100%が設定されているか
フォントサイズ スマホで最低14px以上（読みやすさ確保）
タップ領域 ボタンは最低44px×44px以上（指でタップしやすい）
横スクロール スマホで横スクロールが発生していないか
テキスト折り返し 長い英単語・URLが画面をはみ出していないか

レスポンシブデザインのテスト方法

1. ブラウザのデベロッパーツール

  1. Chrome、Firefox、Safariでサイトを開く
  2. F12キー（Macは⌘+Option+I）でデベロッパーツールを開く
  3. デバイスツールバーアイコンをクリック（スマホアイコン）
  4. 上部のドロップダウンで各デバイスを選択
    • iPhone 14 Pro
    • iPad Pro
    • Galaxy S22等
  5. 表示を確認

2. 実機テスト

開発ツールだけでなく、実際のスマートフォン・タブレットでも確認しましょう。

  • 自分のスマホでアクセス
  • 家族・友人のスマホでもテスト（Android、iPhoneの両方）
  • タブレットでもチェック

3. オンラインツール

ツール名 URL 特徴
Responsinator responsinator.com 複数デバイスで一括表示
Mobile-Friendly Test search.google.com/test/mobile-friendly Googleが評価
BrowserStack browserstack.com 実機テスト環境（有料）

よくある問題と解決方法

問題1: スマホで文字が小さすぎる

原因： フォントサイズが固定（pxで小さい値）

解決策：

/* 悪い例 */
body {
  font-size: 12px; /* 小さすぎる */
}

/* 良い例 */
body {
  font-size: 16px; /* 基本サイズ */
}

/* スマホ用 */
@media (max-width: 767px) {
  body {
    font-size: 14px; /* スマホではやや小さめでもOK */
  }
}

問題2: スマホで横スクロールが発生する

原因： 固定幅（px）の要素が画面幅を超えている

解決策：

/* 悪い例 */
.container {
  width: 1200px; /* スマホ（375px程度）で横スクロール発生 */
}

/* 良い例 */
.container {
  width: 90%; /* 相対幅 */
  max-width: 1200px; /* PCでは最大1200px */
}

問題3: 画像が画面をはみ出す

原因： 画像にmax-widthが設定されていない

解決策：

img {
  max-width: 100%; /* 親要素の幅を超えない */
  height: auto; /* 縦横比を維持 */
}

まとめ：レスポンシブデザインは必須の技術

レスポンシブデザインは、現代のWebサイトに不可欠な技術です：

  1. HTMLに<meta name="viewport">を必ず記述
  2. モバイルファーストで設計（スマホ→タブレット→PCの順）
  3. メディアクエリでデバイス別にスタイル調整
  4. 画像にはmax-width: 100%を設定
  5. 実機テストで表示を確認

AsamiWorksでは、全サイトにレスポンシブデザインを標準実装しています。既存サイトのスマホ対応も対応可能。まずは無料相談で、貴社サイトのスマホ対応診断を受けてみませんか？

執筆者

AsamiWorks

← ブログ一覧に戻るお問い合わせ