設計・デザイン

ホームページのスマホ対応・レスポンシブ対応

ホームページのスマホ対応とは、小さな画面でも文章を読み、メニュー、リンク、フォームなどを無理なく利用できるようにすることです。パソコン版を縮小するだけでは、文字が小さい、横スクロールが出る、ボタンを押しにくいといった問題が残ります。

現在の一般的な方法は、同じHTMLとURLを使い、画面の幅に合わせてCSSでレイアウトを切り替える「レスポンシブWebデザイン」です。ただし、作成ツールやテンプレートに「レスポンシブ対応」と書かれていても、実際の文章・画像・表・フォームを入れた確認が必要です。

このページでは、スマホ向けの情報設計、HTML・CSSによる実装、作成ツールでの確認、実機テスト、よくある表示崩れを解説します。

公開前の重要項目

  • ホームページにスマホ対応が必要な理由
  • レスポンシブWebデザインの仕組み
  • スマホ対応の主な実現方法
  • 文字、画像、表、フォーム、メニューの設計
  • HTML・CSSでレスポンシブ対応する基本

スマホ対応が必要な理由

スマートフォンでは、パソコンと閲覧条件が異なります。

  • 画面が狭く縦長
  • 指で操作する
  • 移動中や屋外で見ることがある
  • 通信速度・容量が安定しない場合がある
  • 電話、地図、カメラなどと連携できる
  • 画面の向き・文字サイズを変更する

スマホ対応が不十分だと、次の問題が起こります。

  • 文字を拡大しなければ読めない
  • 横へ何度もスクロールする
  • メニューやボタンを押し間違える
  • 画像・表・地図が画面からはみ出す
  • フォームの入力中に画面が崩れる
  • ポップアップや固定ボタンが本文を隠す
  • 読み込みが遅く、操作前に離脱する

Google Searchはモバイル版の内容をインデックスとランキングの基準に使うモバイルファーストインデックスの考え方を案内しています。パソコン版にだけ重要な本文、画像代替テキスト、構造化データなどを置かず、スマートフォンでも同等の主要内容を提供します。

スマホ対応はSEOのためだけではありません。問い合わせ、予約、購入、電話、地図確認など、利用者が目的を達成できることが中心です。

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

レスポンシブWebデザインは、一つのページを画面幅・表示環境に応じて柔軟に変化させる設計方法です。

主に次の技術を組み合わせます。

  • 柔軟な幅・グリッド
  • CSSのメディアクエリー
  • 画面に収まる画像・動画
  • viewport設定
  • 横並び・縦並びの切り替え
  • 表示・非表示や順番の調整

MDNは、メディアクエリーをビューポートの幅などに応じて異なるCSSを適用するレスポンシブWebデザインの重要な仕組みとして説明しています。

レスポンシブの利点は次のとおりです。

  • パソコンとスマートフォンで同じURLを使いやすい
  • 内容を二重管理せずに済む
  • 画面幅の異なる端末へ柔軟に対応しやすい
  • 内部リンク・計測・共有URLを統一しやすい

一方、一つのHTMLでも、すべての画面幅を自動的に最適化できるわけではありません。情報の順番、画像の切り抜き、表、メニュー、タップ操作を設計します。

スマホ対応の主な方法

方法 仕組み メリット 注意点
レスポンシブ 同じURL・HTMLをCSSで変更 管理を統一しやすい 設計・テストが必要
動的配信 同じURLで端末によりHTMLを変更 端末別に最適化可能 判定・キャッシュ・内容差を管理
別URL PCとスマホでURL・HTMLを分ける 端末別に独立設計 URL・転送・canonical・内容を二重管理
アプリ・専用画面 Webとは別のアプリなどを提供 端末機能を活用しやすい 開発・審査・保守・導入が必要

新しく一般的なホームページを作る場合は、レスポンシブが選ばれることが多い方法です。別URLや動的配信を採用する場合は、検索エンジン向け設定、キャッシュ、内容差、端末判定を適切に管理します。

作成ツールやCMSではレスポンシブの土台が含まれる場合があります。テンプレートの仕様と、編集できるブレークポイント・表示条件を確認します。

見やすいスマホ画面の設計

文字・余白・ボタン

文字

  • 本文は16px前後を出発点に調整する
  • 行間を確保する
  • 1行の文字数を長くしすぎない
  • 注記やエラーも読める大きさにする
  • 画像内文字だけにしない

余白

  • 画面左右に一定の余白を取る
  • 見出しと本文、セクション間の差を付ける
  • 関連する要素を近づける
  • 固定ヘッダー分の位置ずれを確認する

ボタン・リンク

  • 指で押しやすい大きさと間隔を取る
  • 複数ボタンを密集させない
  • 何が起きるか文字で示す
  • 通常リンクとボタンの役割を分ける
  • タップ・キーボードのフォーカス状態を見えるようにする

「詳しくはこちら」が連続するとリンク先が分かりにくくなります。「料金を見る」「予約方法を確認する」など具体的にします。

画像・表・フォーム

画像・動画

  • コンテナ幅を超えないようにする
  • 縦横比を保つ
  • 画面幅に合う画像を配信する
  • 重要部分がトリミングで切れないか確認する
  • 動画の操作ボタン・字幕を利用できるようにする
  • 背景動画を自動再生する場合は停止・通信量に配慮する

HTMLではmax-width: 100%などの基本に加え、srcset・sizes・pictureなどで画面や解像度に合う画像を配信できます。MDNもレスポンシブ画像を、異なる画面サイズ・解像度で適切に動作させる方法として説明しています。

表

  • 不要な列を減らす
  • 項目ごとにカードへ組み替える
  • 横スクロールできることを示す
  • 見出しセルとデータの関係を保つ
  • 重要な比較内容を表の前後でも説明する

表を小さく縮小して読めなくする方法は避けます。

フォーム

  • ラベルを入力欄の近くに置く
  • 1列を基本にする
  • 入力内容に合うキーボードを呼び出す
  • 必須・任意を明示する
  • エラーを該当項目の近くで説明する
  • 入力値を消さずに修正できる
  • 住所・電話などの自動入力を妨げない
  • 送信ボタンと戻るボタンを間違えにくくする

メニューとページ内導線

スマートフォンでは、メニューを開かないと項目が見えない場合があります。

  • メニューボタンに「メニュー」などのラベルを付ける
  • 開いた状態と閉じた状態を分かりやすくする
  • 背景スクロールや閉じる操作を確認する
  • 項目を階層化しすぎない
  • 電話・予約などの主要操作を必要に応じて案内する
  • 固定ボタンが本文・Cookie表示・フォームを隠さない
  • ページ内目次から戻る方法を用意する

長いページでは、目次、見出し、ページ上部へ戻る操作が役立ちます。ただし、固定部品を増やしすぎて画面を狭くしないようにします。

レスポンシブ対応の実装方法

HTML・CSSで作る場合の基本例です。

viewportを設定する

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

端末の表示幅を基準にレイアウトできるようにします。この設定だけでスマホ対応が完了するわけではありません。

柔軟な幅を使う

.container {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}

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

固定幅だけにせず、画面幅に合わせて縮む領域と最大幅を設定します。

メディアクエリーでレイアウトを変える

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

狭い画面の1列を基本にし、内容を置ける幅が確保できたら複数列にするモバイルファーストの考え方です。

ブレークポイントは特定の端末名だけで決めず、内容が崩れる幅で設定します。スマートフォン、タブレット、パソコンの3段階だけでなく、その間の幅も確認します。

順番と表示を調整する

CSSで見た目の順番を変えられますが、HTMLの読み上げ順・キーボード順と大きく異ならないようにします。スマホで不要に見える内容も、単に隠す前に本当に不要か確認します。

コード制作の基礎はHTML・CSSでホームページを作成する方法で扱います。

作成ツール・テンプレートで確認する点

ノーコードツールやテンプレートでは、次を実際に編集して確認します。

  • ブレークポイントの種類と追加可否
  • PC・スマホで共通・個別になる設定
  • 要素の並び順
  • 画像トリミングと表示位置
  • 文字サイズ・行間
  • 横並び・縦並び
  • メニューの種類
  • 表・フォーム・埋め込み
  • PCだけ・スマホだけの表示条件
  • 固定ヘッダー・固定ボタン
  • カスタムCSSの可否

PCとスマホで別要素を作る機能は便利ですが、内容の更新漏れや重複読み込みが起こることがあります。可能な範囲で共通内容を使い、表示方法を変えます。

ホームページテンプレートの選び方では、契約前の確認項目を整理しています。

実機・ブラウザー・テストツールでの確認

ブラウザーの開発者ツール

画面幅を連続して変え、次の幅で崩れないか確認します。

  • 小さなスマートフォン
  • 一般的なスマートフォン
  • 横向き
  • タブレット相当
  • 小型ノートパソコン
  • 大型画面

端末プリセットだけでなく、幅をゆっくり動かして、文字切れや不自然な空白が出る位置を探します。

実機

開発者ツールは表示の確認に役立ちますが、実際のタップ、キーボード、ブラウザーUI、通信環境を完全には再現しません。可能な範囲でiOS・Androidの実機を使います。

  • メニュー開閉
  • 電話・地図・メールリンク
  • フォーム入力と送信
  • 画面回転
  • 文字拡大
  • コピー・選択
  • 動画・PDF・外部サービス
  • 戻る操作
  • ソフトウェアキーボード表示時の崩れ

複数ブラウザー

Safari、Chrome、Firefox、Edgeなど、利用者が使う主な環境で確認します。最新だけでなく、対象者の利用環境とサポート方針を決めます。

公開URL

ローカル・編集画面だけでなく、https://の公開URL相当のプレビュー環境で確認します。キャッシュ、外部ファイル、フォーム、Cookie、リダイレクト等は環境によって動作が変わります。

スマホ表示でよくある不具合

不具合 主な原因 確認・対処
横スクロール 固定幅、長いURL、表、画像 はみ出す要素を特定し柔軟な幅へ変更
文字が小さい PC用サイズの縮小 本文・注記を端末で調整
見出しが切れる 改行禁止、固定高さ 自動改行、文字サイズ、余白を見直す
画像がつぶれる 幅・高さを固定 比率維持、トリミング方法を調整
ボタンを押せない 小さい、重なり、間隔不足 サイズ・間隔・重なり順を確認
メニューが閉じない JavaScript・フォーカス制御 実機とキーボードでテスト
表が読めない 多列を縮小 列削減、カード化、横スクロール
フォームが拡大する 入力文字が小さいなど 入力文字、viewport、レイアウトを確認
固定部品が隠す ヘッダー・固定ボタン・Cookieなど 高さ、重なり、余白を調整
動画が重い 大容量・自動再生 静止画、圧縮、遅延読み込みなどを検討

特定幅だけ直す対症療法を繰り返すとCSSが複雑になります。共通ルール、コンポーネント、ブレークポイントを見直します。

表示速度とアクセシビリティの確認

表示速度

  • 画像を表示サイズに合わせて圧縮する
  • 次世代形式を用途に応じて使う
  • 画面外画像の遅延読み込みを検討する
  • 不要なスクリプト・フォント・プラグインを減らす
  • 大きな動画・スライダーを見直す
  • キャッシュ・配信設定を確認する
  • 実際のモバイル回線でも確認する

速度の数値だけを追い、必要な画像や機能を無条件に削るのではなく、利用者の目的とバランスを取ります。

アクセシビリティ

  • 文字と背景のコントラスト
  • 文字拡大・画面拡大
  • 画像の代替テキスト
  • 見出し・ランドマークの構造
  • キーボード操作とフォーカス
  • ボタン・リンクの大きさ・間隔
  • フォームのラベルとエラー
  • 動画の字幕・再生制御
  • 動きを減らす設定への対応
  • 色だけに依存しない情報

スマートフォンの見た目が整っていても、読み上げ・キーボード・拡大で利用できない場合があります。自動テストと人による操作確認を組み合わせます。

デザイン全体の基準はホームページデザインの基本、必要機能はホームページに必要な機能で確認できます。

よくある質問

レスポンシブ対応とスマホ専用サイトは同じですか

異なります。レスポンシブは同じURL・HTMLを画面幅に応じて調整する方法です。スマホ専用サイトは別URL・別HTMLなどで提供する方法を指す場合があります。

作成ツールなら自動でスマホ対応できますか

土台は自動対応する場合がありますが、長い文章、画像、表、フォーム、メニューは実際の内容で確認が必要です。自動配置後の順番や余白も調整します。

ブレークポイントは何pxにすればよいですか

特定端末の数値だけで決めず、内容が窮屈になる幅で設定します。相対単位も検討し、幅を連続的に変えて確認します。

スマホ版では文章を減らしてもよいですか

読みやすく要約・分割することはできますが、重要な内容をスマホだけ削除すると利用者と検索に影響します。主要内容と機能は同等に提供します。

スマホ対応を確認するには実機が必須ですか

開発者ツールで多くの表示を確認できますが、タップ、キーボード、ブラウザーUIなどは実機確認が重要です。少なくとも主要なiOS・Android環境で確認します。

スマホでホームページを作る方法とは別ですか

別です。このページは閲覧画面をスマホへ対応させる方法です。スマートフォン自体を制作端末として使う方法はスマホ・アプリでホームページを作成する方法で解説します。

次に確認するガイド

ホームページデザインの基本と実践のコツこのガイドを確認する ホームページに問い合わせフォームを作成する方法このガイドを確認する ホームページ作成で行うSEO対策の基本このガイドを確認する

設計・デザインのガイドへ戻る

参考情報