スマートフォンで読める・使える、レスポンシブサイトへ。

01レスポンシブデザインとは何か｜まず押さえる基礎

レスポンシブデザインは、画面幅などの条件に合わせてレイアウトや表示を変える設計です。同じURLで同じHTMLを使い、柔軟な寸法指定やCSSのメディアクエリなどで、複数の画面サイズに対応します。

CSSメディアクエリや柔軟な表示設計で、画面サイズや利用条件に対応する設計手法であることが公式資料でも説明されています。 出典：Learn Responsive Design  |  web.dev

モバイル向けの構成には、レスポンシブ以外に、同じURLで異なるHTMLを配信する方法や、別URLを用いる方法もあります。方式の名前だけで順位や品質は決まりません。現在の構成と、更新・確認する範囲を把握してください。

「モバイルフレンドリー」との違い

モバイルフレンドリーは「スマホで見やすいか」という結果評価です。レスポンシブデザインはその結果を実現するための代表的な手段です。両者は目的と手段の関係にあると理解してください。

Googleは、実装と維持のしやすさからレスポンシブデザインを推奨しています。導入しただけで全端末の表示が整うわけではないため、実際のコンテンツと操作を複数の画面幅で確認します。

Googleの公式資料は、レスポンシブ・動的な配信・別URLという構成方法と、それぞれで必要な確認を説明しています。 出典：Google：モバイルファーストインデックスに関するおすすめの方法

02利用する端末を、自社の記録で確認する

利用する端末は、自社のアクセスデータから確かめます。業種のイメージで決めず、どの端末で、どのページを、どの経路から見ているかを分けてください。

BtoBでもスマホ閲覧は無視できない

表示の不備と離脱の関係

03検索への情報提供と、ページの体験を分けて考える

Googleが取得できる情報と、利用者の読みやすさ・操作性を、それぞれ確認します。モバイル対応を単一の順位対策として扱わず、次の項目に分けて点検してください。

モバイルファーストインデックス(MFI)の本質

Googleのモバイルファーストインデックスでは、スマートフォンのクローラーが取得したモバイル版の内容を、インデックス登録とランキングに使います。主要な情報がモバイルでも取得できることを確認してください。

Core Web Vitalsとレスポンシブ

Core Web Vitals(コアウェブバイタル)は、読み込み(LCP)・操作応答性(INP)・視覚的安定性(CLS)の3指標でページ体験を測る仕組みです。

Googleの公式資料では、Core Web Vitalsを使った読み込み・応答性・表示の安定性の確認方法が説明されています。 出典：Core Web Vitals と Google 検索の検索結果について | Google 検索セントラル  |  Documentation  |  Google for Developers

良好域の判定は、端末別の実利用データの75パーセンタイルで確認します。単発の検査スコアとは分けて扱ってください。画像などを読み込む前から領域を確保しておくと、読み込み時の表示ずれを抑える設計になります。

URLと内容の対応を確認する

04問い合わせなどの結果と、表示の問題を照合する

表示を直した際は、実際の操作と、問い合わせ・購入など目的に合う結果を確認します。流入の変化や広告内容の変更も、同時に記録しておきます。

スマホとPCのCVR差は自社で測る

離脱だけで、売上の損失を断定しない

閲覧を終えた人がすべて問い合わせを希望していたとは限りません。離脱率をそのまま売上損失に換算せず、情報を読み終えたのか、操作できず止まったのかを実際のページと記録で確認します。

ブランド信頼への波及

画面の印象についても、読者に近い人に見てもらい、どこが分かりにくいかを確かめます。感想と操作上の問題を分けて記録すると、修正内容を共有しやすくなります。

05文字・ボタン・図表・画像・フォームを点検する

スマートフォンで本文を読んだあと、目的の画面まで実際に進んでください。画面上に収まっていても、内容を読めない、操作を完了できない場合は修正が必要です。

図が広い場合は、文字ごと小さく縮める以外に、読みやすい表へ変更したり、説明付きで図だけを横スクロールさせたりする方法があります。ページ全体を左右に動かさないと本文を読めない状態は避けてください。

06自社サイトを点検する｜今すぐできるチェック手順

計測ツールは問題箇所を探す材料になります。数値の確認と、実際の端末での操作を組み合わせて、修正の優先順位を決めます。

無料診断ツールの活用

実機チェックの観点

他社の画面を同じ観点で比較する

他社のサイトも同じ端末と観点で操作すると、案内や情報の並べ方を比較できます。デザインの好みだけで判断せず、必要な情報を見つけられるか、操作しやすいかを記録してください。

07影響と作業範囲から、改修の順序を決める

全面改修か部分改修かを決める前に、問題があるページと作業内容を整理します。使えない操作、誤った情報、読みにくい箇所などの影響を示すと、対応範囲と費用を相談しやすくなります。

ステップ1: ファーストビューと電話導線

主要ページの実際の内容を確認する

次のページへ移るリンクも確認します。主要ページを個別に表示するだけでなく、トップからサービス、条件確認、問い合わせへ進む流れを通して操作してください。

ステップ3: 表示速度の改善

ステップ4: 効果計測の仕組み化

08使いにくい箇所を、再現できる記録にする

レスポンシブ対応では、画面幅に収めることに加え、必要な情報を読み、目的の操作を終えられることを確かめます。検索への情報提供も、利用者の操作と分けて確認してください。

まず、自社サイトをスマートフォンで開き、主要な情報を読んで問い合わせまで進んでみてください。気づいた点を記録し、計測結果と合わせて制作担当者と共有できます。