自社のサイトをスマートフォンで開くと、文字が小さくて拡大しないと読めない、表や画像が画面からはみ出す、ボタンが押しにくい。リニューアルの打ち合わせで「スマホは何pxで作りますか」「レスポンシブで対応します」と言われても、何を基準に判断すればよいか分かりにくいものです。
スマホサイトは特定の機種の画面サイズに合わせて作るのではなく、1つのHTMLを画面の幅に応じて組み替えるレスポンシブデザインで、幅320pxの狭い画面から大きな画面まで崩れないように作るのが基本で、Googleもこの方法を推奨しています。
この記事では、スマホサイトとパソコンサイトの違い、画面サイズの考え方、スマホ対応の3つの方法とモバイルファーストインデックス、レスポンシブデザインの作り方と確認方法、読みやすく押しやすくするポイント、既存サイトのチェックと改修の進め方を、発注する側が判断できるように解説します。
スマホサイトとパソコンサイトの違い
スマートフォンとパソコンでは、画面の形と幅、操作の方法、閲覧する場面が違うため、同じ内容でも見せ方と優先順位を変える必要があります。
| 項目 | スマートフォン | パソコン |
|---|
| 画面 | 縦長で幅が狭い。情報は1列で縦に並ぶ | 横長で幅が広い。複数の列や大きな表を並べられる |
| 操作 | 指でタップ・スクロールする。マウスを重ねたときの表示（ホバー）は使えない | マウスとキーボードで操作する |
| 閲覧する場面 | 移動中やすき間時間。電話や地図アプリと行き来する | 業務中の比較検討、資料の確認やダウンロード |
| 通信 | モバイル回線で見られることがあり、重いページは表示に時間がかかる | 固定回線で見られることが多い |
| 重視されること | 読みやすい文字、押しやすいボタン、短いフォーム、表示の速さ | 一覧性、比較表、詳しい資料 |
BtoBの会社では業務時間中にパソコンで比較検討されることもあり、スマホとパソコンのどちらで多く見られているかは、業種や顧客によって違います。まず自社サイトの実際の割合を確かめてから、どちらを優先して設計するかを決めます。
自社サイトのスマホの割合をGA4で確認する
GA4の「レポート」から「テクノロジー」の「ユーザーの環境の詳細」を開き、ディメンションを「デバイス カテゴリ」にすると、スマートフォン・パソコン・タブレットの割合が分かります。「画面の解像度」に切り替えると、自社サイトでよく使われている画面サイズも確認できます。ページごとの離脱や問い合わせの件数をデバイス別に比べると、スマホで成果が落ちているページが見つかります。GA4の基本的な操作はGoogleアナリティクス（GA4）の見方で解説しています。
スマホサイトの最適なサイズの考え方
スマホサイトの最適なサイズは1つの数値で決まるものではなく、Webページ上の幅（CSSピクセル）で320pxの狭い画面から主要な機種の幅まで崩れないことを基準にし、自社のアクセスが多い幅で重点的に確認するのが現実的です。
画面の解像度とCSSピクセルの違い
スマートフォンの仕様に書かれている解像度（物理的な画素の数）と、Webページを作るときに使う幅（CSSピクセル）は一致しません。最近のスマートフォンは画素が細かく、縦横2〜3個ずつの画素をまとめて1ピクセルとして表示しているためです。この比率をデバイスピクセル比と呼びます。
| 機種の例 | Webページ上の幅×高さ（CSSピクセル） | デバイスピクセル比 | 画面の解像度（物理ピクセル） |
|---|
| iPhone SE（第2・第3世代） | 375×667 | 2 | 750×1334 |
| iPhone 12／13／14 | 390×844 | 3 | 1170×2532 |
| iPhone 15／16 | 393×852 | 3 | 1179×2556 |
| iPhone 16 Pro Max | 440×956 | 3 | 1320×2868 |
表は機種の仕様の例で、利用者の割合を示すものではありません。Androidの端末は機種ごとに幅が異なります。物理的な解像度が1170×2532の端末でも、Webページ上の幅は390pxとして扱われるため、デザインとコーディングはCSSピクセルで考えます。写真やロゴは、高精細な画面でぼやけないよう、表示する大きさの2倍程度の画像を用意するか、画面に応じて画像を出し分けます。
どの幅を基準に作るか
実務では、「デザインの基準にする幅」と「崩れないことを確認する幅」を分けて考えます。
- デザインの基準：よく使われている幅の1つ（例：375pxや390px前後）でスマホのデザインを作る
- 最小の幅：320pxでも横スクロールが出ず、文字やボタンが重ならないこと。Webアクセシビリティの国際的なガイドライン（WCAG 2.2）でも、幅320px相当で縦方向のスクロールだけで読めることが求められている
- 大きな幅：大型のスマートフォンやタブレットの縦向き・横向きで、余白が間延びしたり画像が粗くなったりしないこと
- 自社のデータ：GA4の「画面の解像度」で上位に入っている幅を、ブラウザの検証機能と実機で確認する
以前は「iPhone SEの750×1334pxを基準に作る」のように特定の機種を前提にした考え方も見られましたが、画面サイズの種類が増えた現在は、機種ではなく幅の範囲で考えるほうが確実です。レイアウトを切り替える幅（ブレイクポイント）も、機種の幅に合わせるのではなく、デザインが崩れ始める幅で決めます。たとえば「767pxまではスマホ、768〜1023pxはタブレット、1024px以上はパソコン」のように3段階で切り替える設計がよく使われますが、これは目安の一例です。
Service
運用保守・集客改善のご相談はフェニックスデザインへナレッジベースを運営するフェニックスデザインが、今のサイトの数字を見るところから対応します。URLを入れるだけの無料簡易診断から。
スマホ対応の3つの方法とGoogleの推奨
スマホ対応には「レスポンシブデザイン」「スマホ専用サイト（別URL）」「動的な配信」の3つの方法があり、Googleは実装と管理がもっとも簡単なレスポンシブデザインを推奨しています。
| 方法 | 仕組み | URL | メリット | デメリット |
|---|
| レスポンシブデザイン | 同じHTMLを使い、CSSで画面の幅に応じてレイアウトを変える | 1つ | 更新は1か所で済む。検索での評価が分散せず、SNSでも共有しやすい | パソコンとスマホで構成を大きく変えにくい。設計に手間がかかる |
| スマホ専用サイト（別URL） | パソコン用とスマホ用に別々のHTMLを用意し、端末に応じて転送する | 2つ | 端末ごとに作り込める | 更新の手間が2倍になる。転送やタグの設定を誤ると検索での評価に影響する |
| 動的な配信 | 同じURLで、サーバーが端末を判定して別のHTMLを返す | 1つ | URLを1つにしたまま端末ごとに作り込める | 端末の判定を保守し続ける必要があり、技術的に難しい |
出典：Google 検索セントラル（モバイルサイトとモバイルファーストインデックスに関するドキュメント）
新しく作る、または作り直す場合は、レスポンシブデザインを選ぶのが一般的です。スマホ専用サイトを別に持っていると、お知らせや料金を2か所で直す必要があり、片方だけ古い情報が残る原因にもなります。
レスポンシブデザインとは？メリットとデメリット
レスポンシブデザインとは、1つのHTMLとURLのまま、CSSで画面の幅に応じて文字の大きさや列の数、画像の大きさを切り替え、どの端末でも見やすく表示する作り方です。
| メリット | デメリットと対策 |
|---|
| 更新は1か所で済み、パソコン版とスマホ版で情報の食い違いが起きない | パソコンとスマホで構成を大きく変えにくい。スマホで見せる順番は、設計の段階で決めておく |
| URLが1つなので、検索での評価が分散せず、重複コンテンツの心配もない | 幅ごとの表示を確認する手間がかかる。確認する幅と機種を事前に決める |
| SNSやメールでURLを共有したとき、受け取った人の端末に合わせて表示される | 大きな画像をそのまま読み込むと遅くなる。画面に応じた画像の出し分けで防げる |
モバイルファーストインデックスとは
モバイルファーストインデックスとは、Googleがスマートフォンで表示される内容をもとにページを検索結果に登録し、評価する仕組みです。Googleは2024年7月以降、スマートフォン用のクローラーでサイトを巡回しており、スマートフォンで表示できないページは検索結果に表示されなくなるおそれがあります。
注意したいのは、「スマホでは文章や表を省略する」作り方です。スマホ版に載っていない内容は評価の対象になりにくいため、見せ方は変えても、パソコン版と同じ内容をスマホでも読めるようにします。長い説明は開閉式の表示にまとめるなど、内容を削らずに読みやすくする工夫が有効です。
レスポンシブデザインの作り方
レスポンシブデザインは、viewportの指定、画面の幅に応じてレイアウトを切り替えるCSS（メディアクエリ）、伸び縮みするレイアウトと画像、実機を含む検証の組み合わせで作ります。
- viewportを指定する：HTMLのhead内に「<meta name=”viewport” content=”width=device-width, initial-scale=1″>」を書き、ページの幅を端末の画面幅に合わせる。これがないと、スマホでもパソコン用の幅のまま縮小して表示される
- スマホを基本にCSSを書く：まず1列のスマホのレイアウトを作り、「@media (min-width: 768px) { … }」のように、画面が広いときだけ使うCSSを追加する（モバイルファーストの書き方）
- レイアウトを伸び縮みさせる：要素の幅を固定のpxではなく割合などで指定し、横並びの要素は画面が狭くなると縦に並ぶようにする
- 画像と表をはみ出させない：画像は最大幅を100%にし、画面に応じた大きさの画像を出し分ける。横に長い表は、表だけを横にスクロールできるようにするか、スマホでは縦に並べ替える
- 検証する：ブラウザの検証機能で主な幅を確認したうえで、iPhoneとAndroidの実機で、メニュー、フォーム、電話番号のリンク、表の表示を操作して確かめる
| レイアウトの種類 | 仕組み | 特徴 |
|---|
| リキッドレイアウト | 要素の幅を画面の幅に対する割合で指定し、画面に合わせて伸縮させる | どの幅でも隙間なく表示できるが、大きな画面では1行が長くなりすぎる |
| フレキシブルレイアウト | リキッドレイアウトに最大幅・最小幅を設定する | 大きな画面では左右に余白をとり、読みやすい行の長さを保てる |
| ブレイクポイントによる切り替え | 決めた幅を境に、列の数や並び順を切り替える | スマホは1列、パソコンは複数列のように、画面に合った構成にできる |
現在のレスポンシブデザインは、これらを組み合わせて作るのが一般的です。発注する側が細かなCSSを理解する必要はありませんが、「どの幅で確認するか」「横に長い表やフォームをスマホでどう見せるか」は、デザインを確認する段階で制作会社と決めておくと、公開直前の手戻りを防げます。
確認に使えるツール
Googleのモバイルフレンドリーテストと、Search Consoleのモバイルユーザビリティのレポートは、2023年12月に提供を終了しています。現在は次の方法を組み合わせて確認します。
- Google Chromeのデベロッパーツール：Windowsは「Ctrl＋Shift＋I」、Macは「Command＋Option＋I」で開き、デバイスツールバーで画面の幅を切り替えて表示を確かめる
- LighthouseとPageSpeed Insights：スマホでの表示速度やアクセシビリティの問題を確認する（LighthouseはChromeのデベロッパーツールに組み込まれている）
- 実機：iPhoneのSafariとAndroidのChromeで、主要なページとお問い合わせフォームを実際に操作する
スマホで読みやすく、押しやすくするポイント
スマホでは、本文16px前後の文字、指で押しやすい大きさと間隔のボタン、入力しやすい短いフォーム、すぐに見つかる問い合わせの導線が、問い合わせや応募の数を左右します。
| 項目 | 目安・ポイント |
|---|
| 本文の文字 | 16px前後を目安にし、行間は文字の大きさの1.5倍以上をとる。薄いグレーの文字は、背景とのコントラストを確保する |
| 見出し | 本文との大きさの差をはっきりさせる。スマホで3行以上になる長い見出しは短くする |
| ボタン・リンク | WCAG 2.2の最低基準は24×24px。押し間違いを防ぐには44px四方程度を目安にし、隣のボタンとの間隔もとる |
| お問い合わせフォーム | 項目を必要最小限にする。入力欄の文字は16px以上にする（iPhoneでは小さいと入力時に画面が拡大される）。メールアドレスや電話番号の欄は、対応するキーボードが表示される設定にする |
| メニュー | 項目を絞り、お問い合わせや資料請求など重要な導線はメニューの外にも置く |
| 問い合わせの導線 | ページの最後だけでなく、画面下部の固定ボタンや本文の区切りにも置く |
| 横スクロール | 表、画像、長いURLが画面からはみ出していないかを確認する |
| ポップアップ | 画面全体を覆う広告や案内は避ける。Googleも、内容を読みにくくする煩わしい表示を避けるよう案内している |
| 表示速度 | 画像を圧縮し、表示に必要なものから読み込む。スマホの回線でも待たされないようにする |
表示速度は、GoogleのCore Web Vitals（LCP・INP・CLS）で測れます。2024年3月からは、操作への反応の速さを表す指標がFIDからINPに変わっています。具体的な基準と改善の方法はWebサイトの表示速度の基準と改善項目で解説しています。
既存サイトのスマホ対応をチェックして直す手順
既存サイトのスマホ対応は、GA4でスマホの割合と成果が落ちているページを確認し、実機で主要なページとフォームを操作して問題を一覧にしてから、直す範囲を決めると効率よく進められます。
- GA4で、デバイス別のアクセス数、問い合わせの件数、よく見られているページを確認する
- スマホの実機で、トップページ、サービスページ、会社概要、お問い合わせフォームを操作する
- 文字の小ささ、はみ出し、押しにくいボタン、表示の遅さ、フォームの入力しにくさを、ページと画面の写真付きで一覧にする
- CSSの修正で直せるものと、テンプレートや構成から作り直す必要があるものに分ける
- 問い合わせへの影響が大きいページとフォームから直し、修正後に同じ手順で確認する
そもそもレスポンシブデザインになっておらず、スマホでパソコン用の画面が縮小表示されるサイトや、パソコン用とスマホ用の2つのサイトを別々に更新しているサイトは、部分的な修正よりもリニューアルのほうが費用対効果が高いことがあります。判断の進め方はコーポレートサイトのリニューアルの進め方と注意点を参考にしてください。
よくあるご質問
スマホサイトは何pxで作ればよいですか？
デザインは375pxや390px前後など、よく使われている幅の1つで作り、320pxの狭い画面から大型のスマートフォン、タブレットまで崩れないことを確認する進め方が一般的です。特定の機種の解像度に合わせる必要はありません。自社サイトのGA4で「画面の解像度」を確認し、アクセスの多い幅を重点的に確かめてください。
レスポンシブデザインにすると表示が遅くなりますか？
作り方によります。パソコン用の大きな画像をそのままスマホでも読み込むと遅くなりますが、画面に応じた大きさの画像を出し分け、画面の外にある画像を後から読み込むようにすれば、表示速度を保てます。遅さの原因は、多くの場合、レスポンシブデザインそのものではなく、画像の重さや読み込むファイルの多さにあります。
パソコン版とスマホ版で載せる内容を変えてもよいですか？
見せ方や順番は変えてかまいませんが、内容を省くのは避けてください。Googleはスマートフォンで表示される内容をもとにページを評価するため、スマホで省いた文章や表は評価の対象になりにくくなります。長い説明は開閉式の表示にまとめるなど、内容を残したまま読みやすくします。
モバイルフレンドリーテストが使えなくなりました。代わりに何を使えばよいですか？
モバイルフレンドリーテストとSearch Consoleのモバイルユーザビリティのレポートは、2023年12月に提供を終了しました。現在は、Google Chromeのデベロッパーツール（デバイスツールバーとLighthouse）、PageSpeed Insights、実機での操作確認を組み合わせて確認します。
スマホ専用サイトがある場合、レスポンシブデザインに作り直すべきですか？
更新のたびに2つのサイトを直している、パソコン版とスマホ版で内容に差が出ている場合は、作り直しを検討する価値があります。作り直すときは、スマホ専用サイトの各URLから新しいページへ301リダイレクトを設定し、検索での評価とブックマークを引き継ぎます。
まとめ
スマホサイトは機種ごとの画面サイズに合わせて作るのではなく、レスポンシブデザインで幅320pxから大きな画面まで崩れないように作り、自社のアクセスが多い幅と実機で確認することが基本です。
- スマホとパソコンでは画面・操作・閲覧する場面が違うため、見せ方と優先順位を変える
- 設計はCSSピクセルで考え、デザインの基準の幅と、崩れないことを確認する幅を分ける
- スマホ対応はレスポンシブデザインが基本で、Googleも推奨している
- Googleはスマホで表示される内容で評価するため、スマホ版で内容を省かない
- モバイルフレンドリーテストは終了しており、デベロッパーツール、Lighthouse、実機で確認する
- 文字・ボタン・フォーム・問い合わせの導線・表示速度を、問い合わせへの影響が大きい順に直す
当社のWEBサイト運用保守・集客改善では、公開済みのWordPressサイトを対象に、スマートフォン表示の崩れの修正や、表示速度・Core Web Vitalsの計測と改善を行っています。まずは、スマホとパソコンの表示速度と遅い主な原因が分かる無料簡易診断で、今のサイトの状態を確かめてみてください。
関連記事：UXとは？UIとの関係／ホームページの印象を決めるフォントの選び方／ウェブデザインの最適化で大事なこと