ホームページ作成のスマホ対応｜レスポンシブの基本と確認方法

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

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

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

スマホ対応は見た目だけでなく操作性まで確認する

スマホ対応は、画面幅に収まるだけでなく、文字が読める、ボタンを押せる、フォームを入力できる、重要情報へ迷わず移動できる状態を指します。

実機で縦横表示、メニュー、表、画像、電話・地図・フォームを確認し、パソコン版を縮小しただけの設計にしないでください。

レスポンシブ対応とは何か

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

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

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

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

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

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

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

スマホ対応で確認するポイント

スマホ対応が必要な理由

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

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

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

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

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

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

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

文字・余白・ボタン

文字

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

余白

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

ボタン・リンク

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

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

画像・表・フォーム

画像・動画

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

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

表

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

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

フォーム

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

メニューとページ内導線

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

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

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

スマホ対応の主な方法

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

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

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

スマホで見づらいホームページの例

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

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

作成ツール・WordPressでの確認方法

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

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、リダイレクト等は環境によって動作が変わります。

SEO・問い合わせへの影響

表示速度

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

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

アクセシビリティ

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

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

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

依頼時に確認すべきこと

制作を依頼するときは、スマートフォン用デザインの有無、対応する画面幅・ブラウザー、表やフォームの扱い、実機確認、公開後に表示崩れが見つかった場合の修正範囲を確認します。レスポンシブ対応という言葉だけでなく、検証工程と納品条件を具体化してください。

モバイル専用ページとの違いと性能指標

レスポンシブは同じ内容を画面幅に合わせる方式

レスポンシブWebデザインは、基本的に同じURLと内容を使い、CSSなどで画面幅に応じた配置へ変えます。モバイル専用ページは別URL・別HTMLを用意する方式を指すことがあり、内容や構造化データ、canonical等を一致させる管理が増えます。

Core Web Vitalsは実際の利用体験も確認する

GoogleのCore Web Vitalsは、主なコンテンツが表示されるまでのLCP、操作への応答を示すINP、意図しないレイアウト移動を示すCLSを扱います。目安はLCP 2.5秒以内、INP 200ミリ秒以内、CLS 0.1以下ですが、数値だけでなく、主要ページを実機で操作して遅延やずれを確認します。

制作会社への依頼条件は検収方法まで決める

• 対応する画面幅と主要ブラウザー
• 表・フォーム・メニュー・固定ボタンの確認範囲
• 実機確認に使う端末と向き
• 画像最適化と表示速度の担当範囲
• 公開後に崩れが見つかった場合の修正条件

検索面の基本はSEO対策、公開後の再確認は保守・更新で扱います。

公開環境の確認はホームページ作成のドメイン取得、ホームページ作成のサーバー選び、ホームページ作成のSSL・セキュリティ対策と分けて行います。

よくある質問

レスポンシブ対応とは何ですか

同じURLと内容を基本に、画面幅に応じて文字、画像、列数、メニューなどの配置を変える方法です。単に全体を縮小するのではなく、狭い画面でも読みやすく操作できるように調整します。

スマホ表示は実機で確認する必要がありますか

必要です。開発者ツールは画面幅の確認に便利ですが、タップ、ソフトウェアキーボード、電話・メールリンク、ブラウザーUI、通信環境などは実機でないと分かりにくいためです。

スマホ対応していないと問い合わせに影響しますか

文字やボタンが小さい、入力欄が使いにくい、固定要素が送信ボタンを隠すと、入力途中の離脱につながり得ます。主要な問い合わせ経路を実機で最初から完了までテストしてください。

まとめ

スマホ対応は、パソコン用ページを小さく表示することではありません。レスポンシブ設計を基本に、文字、タップ領域、画像、表、メニュー、フォーム、固定ボタンを狭い画面でも使える状態にします。

開発者ツールだけで終えず、主要なiOS・Android端末、縦横の向き、公開URLで確認します。表示速度とCore Web Vitalsも確認し、制作会社へ依頼する場合は対象端末と検収方法を契約前にそろえてください。