公開
更新
纐纈智英アストライド-Astride- 代表
自社のWebサイトについて、スマホで文字が読めるか、問い合わせまで操作できるかを、PCの表示だけで判断していませんか？スマホ対応では、画面幅に合わせて表示を調整し、訪問者が情報を読む、選ぶ、入力する一連の操作を実際の端末で確かめます。
この記事では、レスポンシブデザインの仕組みと、自社サイトで対応する範囲を決める判断基準について取り上げます。PCとスマホの表示を比べる設計例、公開前後の確認手順、不具合の直し方、社内と制作会社で分担する際の確認事項もお伝えします。
企業が新しくサイトを制作する際は、同じ情報をPCとスマホで管理しやすいレスポンシブデザインを基本案として検討します。画面幅に合わせて配置を変え、訪問者が文字を読み、メニューやフォームを操作できる状態まで確かめます。
レスポンシブデザインは、同じURLで同じHTMLコードを使い、画面サイズに応じて表示を変える設計手法です。HTMLはページの内容や構造を記述する言語を指します。同じHTMLコードを使うという説明は、各ページをPCとスマホで表示する際の扱いを表しています。
Googleは、レスポンシブWebデザインを、実装と維持が最も容易な設計パターンとして推奨しています（公式資料の更新年月：2025年12月）。採用する理由を、情報の管理と表示確認のしやすさから説明しています。
たとえば、PCで横に並べた項目を、スマホでは縦に並べる方針を採れます。制作会社は、文字や画像の幅、ボタンの配置を調整します。担当者は、画面に収まった状態で内容を読み取れるか、目的の操作を続けられるかを確認してください。
スマホ対応では、訪問者が判断に使う説明を残し、読みやすい配置へ調整します。PCの画面をそのまま縮小すると文字や操作対象も小さくなるため、担当者は情報の欠落と操作のしにくさを分けて確認する必要があります。
Googleは、スマートフォン用の取得プログラムが読み取る内容を、インデックス登録とランキングに使用すると説明しています（2025年12月更新）。インデックス登録は検索対象として内容を記録する処理を指し、方式の採用だけで順位上昇を保証する説明はありません。
担当者は、自社の訪問者が使う端末と、その端末で行う作業からスマホ対応の範囲を決めます。PC利用が多い企業でも、担当者がスマホでの会社情報の閲覧や問い合わせ先の確認を含めて検討すれば、優先して直すページを具体的に選べます。
担当者は、トップページと個別ページの両方から閲覧を始め、会社やサービスの説明に沿って本文、画像内の文字、メニューを確認します。実機では、訪問者が拡大を繰り返さずに内容を追えるかを確かめます。
NTTドコモ モバイル社会研究所の2026年3月公表資料では、携帯電話所有者に占めるスマートフォン比率は98.3%でした。全国15〜79歳を対象とするWeb調査で、調査全体の有効回答数は6,748人です。人口全体の所有率や、自社サイトのアクセス比率とは区別します。
この調査は、スマホで閲覧する場面を検討する背景として使えます。自社の対応順は、訪問者の端末別の利用状況と、社内で把握している閲覧目的から判断します。全国の比率を、そのまま自社の訪問者構成に当てはめる方法は採りません。
問い合わせを受け付ける企業の担当者は、説明を読み、フォームを開いて入力し、送信するまでの操作を確かめます。訪問者が文字を読めても入力欄や送信ボタンを操作できない場合、訪問者はその場で問い合わせを完了できません。
担当者は、画面上のキーボードを表示し、訪問者が入力中の項目と次の操作を確認できるか、必須項目の説明や入力エラーを読み取れるかを調べます。修正範囲を決める前に、問い合わせの開始から完了まで一度操作してください。
PCで情報を比較する場面が多い企業の担当者は、PCでの読みやすさを維持しつつ、スマホでは項目の並べ方を変えて同じ説明へ到達できる構成を検討します。端末ごとの役割を決める際も、担当者は主要な情報を残す方針を保ちます。
既存サイトで特定のページだけに不具合がある場合、担当者はそのページや共通部分の修正から検討できます。複数の種類のページで同じ問題が出る場合は、担当者が共通の表示設定まで確認対象を広げるかを判断します。
PCとスマホの表示を比べる際は、載せる情報と、見せる配置を分けて整理します。以下は想定の例です。企業のサービス説明から問い合わせへ進むページについて、担当者と制作会社が同じ情報を保ちながら、画面幅に応じた構成を検討します。
この例は、PCで本文と補足情報を横に並べ、ページの末尾に問い合わせフォームを設けた構成を前提とする想定です。スマホで文字が小さくなり、補足情報の一部が画面外にはみ出す場合を想定し、構成と表示上の問題を検討する例として扱います。
担当者は、サービスの説明、補足情報、問い合わせに必要な案内を残す方針を制作会社と共有します。制作会社は、スマホで読む順番を保ちながら横方向の移動を減らせるよう、本文と補足情報を縦に並べる案を組み立てます。
| 確認対象 | PCでの構成例 | スマホでの構成例 | 担当者が確かめる内容 |
|---|---|---|---|
| 本文と補足情報 | 横に並べて表示 | 読む順に縦へ並べる | 説明と補足の関係を理解できるか |
| 画像 | 本文の横に表示 | 本文の前後で幅を調整 | 画像内の文字や注記を読めるか |
| メニュー | 項目を横に並べる | 開閉する形式を検討 | 開いたあとに目的の項目を選べるか |
| 問い合わせフォーム | 広い画面で入力 | 入力欄を縦に並べる | 入力、修正、送信まで進めるか |
| ボタン | 周囲の情報と並べる | 幅と間隔を調整 | 隣のリンクを誤って押さないか |
縦に並べる案を採用したあとも、担当者は実際に読み進め、訪問者が補足情報と本文の対応を判断できるかを確かめます。補足情報が本文から遠く離れて分かりにくい場合、担当者は関連する説明の直後へ移し、内容のまとまりを保ちます。
メニューを開閉する形式に変更した場合、担当者は開く操作と項目を選ぶ操作を別々に確かめます。項目が画面の外へはみ出したり、訪問者が閉じる操作を判断できなかったりする場合は、制作会社が表示範囲と操作方法を調整します。
フォームも、入力欄を縦に並べた時点では確認を終えません。担当者は、必須項目の説明、入力エラー、送信後の案内まで操作します。制作会社へは「フォームが使いにくい」とまとめず、止まった操作と画面の状態を共有してください。
レスポンシブ方式では、PCとスマホで同じURLとHTMLコードを使います。別URL方式では、それぞれの表示と情報の一致を確認する対象が生じます。更新作業の手間は管理の仕組みによって変わり、一律に二倍とはいえません。
既存サイトが別URL方式の場合、担当者は双方の説明と問い合わせ操作を比べて問題の有無を記録し、制作会社はGoogle向けの対応関係の設定を確かめます。担当者は、これらの結果から維持できる範囲と修正範囲を比較し、方式の違いと併せて変更の判断に使います。
担当者は、代表ページの選定、スマホでの閲覧・入力、不具合の記録、修正後の再確認の順に進めます。その間、担当者が操作上の問題を整理し、制作会社が表示設定を調べます。測定ツールの結果は、実機の操作確認と区別して使う補助資料です。
担当者は、トップページ、主要なサービス説明、問い合わせフォームなど、訪問者が判断や連絡に使うページを選びます。同じ配置を使うページ群から代表を選ぶと、共通する不具合と、そのページ固有の不具合を分けて整理できます。
担当者は、ページのURL、確認する端末とブラウザ、実施日、試す操作を確認表に記録します。経営者や営業担当者から共有された、問い合わせ前に訪問者へ確認してほしい情報に沿って、Web担当者は操作の順番を組み立てます。
担当者は、本文を読み、メニューを開き、リンクを選んでフォームへ入力し、入力を間違えた場合の修正と送信後の案内まで確かめます。テスト送信の予定は社内の受信担当者と共有し、通常の問い合わせと区別します。
PCのブラウザで画面幅を狭くした表示も確認に使えます。ただし、スマホのキーボードや指での操作は、実機で別に確かめます。担当者は、問題が出た画面を記録し、同じ操作をもう一度行って再現するかを確認してください。
PageSpeed Insightsは、URLを入力して表示性能などを調べるGoogleのツールです。Googleは、実利用データと模擬環境の測定データを扱うと説明しています（公式解説の更新年月：2024年10月）。スマホでの全操作の合否を示す用途とは分けます。
Lighthouseは、ページの性能や使いやすさに関する項目を自動で検査するツールです。Googleの同じ解説では、PageSpeed InsightsがLighthouseを使って模擬環境で分析すると説明しています。担当者は点数に加え、指摘された項目を制作会社へ共有します。
担当者は、「何をしたときに、どこで止まったか」を記録し、メニューを開くと項目が画面外へ出る、入力中に次の欄へ移れないなど、具体的な状況を書きます。制作会社は、その記録をもとに共通設定の問題か、個別ページの問題かを切り分けます。
修正後、担当者は同じ端末と操作で再確認し、共通の表示設定を変更した場合は、同じ設定を使う別ページとPC表示も確かめます。ここまでの確認対象は、訪問者による閲覧と操作です。担当者は、表示速度の詳細な改善を別の確認項目として扱います。
担当者は、スマホ表示の不具合を文字、操作対象、横方向のはみ出し、フォームに分け、問題が起きた条件と修正箇所を整理します。その内容を制作会社へ共有して変更を依頼し、修正後は同じ操作に加えて周囲の表示も確かめます。
PC向けの配置を画面全体で縮小している場合、本文も小さく表示されるため、制作会社は画面幅の扱いと本文の表示設定を確認します。文字を大きくしたあとは、担当者が見出しの折り返しや画像との重なりが起きていないかを調べます。
担当者は、文字サイズの指定だけに注目して画像内の注記やフォームの説明を確認し損ねないよう、本文、注記、入力案内を分けて読み、表示を確かめます。画像内の文字が読みにくい場合、担当者は表示幅の調整や、説明を本文に記載する方法を検討します。
ボタンやリンクが小さく密集すると、訪問者が隣の項目を押す場合があります。制作会社は、見た目の大きさと、実際に押せる範囲を確認します。担当者は、修正後に指で操作し、隣接する項目を誤って選ばないかを確かめてください。
W3Cの2026年5月更新資料では、WCAG 2.2の操作対象に関する基準として、24×24 CSSピクセル以上、または間隔などの例外を示しています。CSSピクセルはWeb上の寸法単位です。担当者は数値を最低条件として参照し、押しやすさも実機で確認します。
本文まで横へ移動しないと読めない場合は、固定幅の画像や要素を制作会社が調べます。幅を画面に合わせたあとも、内容が切れていないか、文字が過度に縮んでいないかを担当者が確認します。はみ出しを隠す処理だけで修正を終えません。
画像や一部の要素を直しても横スクロールが残る場合、制作会社はページ全体の共通設定まで調べます。担当者が問題の出るページと出ないページを記録して共有し、制作会社は両者の違いから原因を切り分けます。
入力欄が狭い、説明が隠れる、エラーの場所が分からない場合、担当者は止まった操作を記録します。制作会社は、その記録をもとに入力欄の幅や説明の表示、エラーの案内を修正し、表示上の問題と操作中の問題を分けて確かめます。
修正後、担当者は入力、エラー修正、送信、画面上の完了表示まで続けて試し、社内での受信も確認して、受信担当者と送信内容を照合します。受信を確認できない場合、担当者は表示の問題と分けて調査を進めます。
社内担当者は、閲覧目的の整理、実機確認、不具合の記録を受け持ち、表示設定を変更できる人に修正を任せる分担を検討します。担当者が変更と再確認まで行える場合は内製、共通設定の調査や実装が必要な場合は外注も含めて選べます。
担当者が管理画面で画像や本文の幅を調整でき、影響するページも把握している場合は、社内で修正を進められます。変更前の状態を記録し、修正後にPCとスマホを確認します。表示が崩れた際に戻す方法も、着手前の確認事項です。
複数のページでメニューやフォームに同じ不具合が出る場合は、共通の表示設定を調べる範囲が広がります。社内で設定を確認できない場合は、制作会社へ調査と修正を依頼します。担当者は、問題が出るURLと操作の記録をそろえてください。
制作会社へ依頼する際は、スマホでも残す説明、優先して直すページ、完了まで確認する操作を共有します。「スマホ対応」という言葉だけでは、画像の調整、メニューの変更、フォームの検証のどこまで含むかが一致しない場合があります。
PCとスマホでURLを分けている場合は、双方の情報更新も依頼範囲に含めるかを確認します。社内担当者は内容の正しさと業務上の目的を受け持ち、制作会社は実装と変更の影響を調べるなど、役割を具体的に分けます。
担当者は、金額を比較する前に依頼範囲をそろえ、対象ページ、メニューとフォームの作業、PC表示の再確認、不具合が残った場合の再修正を項目ごとに比べます。その際、個別ページの修正か、共通設定の修正かも確認します。
公開後に画像や記事を追加する担当者は、更新方法と、更新後のスマホ表示を社内で確かめる手順を制作会社と確認します。この手順の整理も制作会社へ依頼できるため、担当者は修正の完了条件と通常の更新作業を区別して合意できます。
着手前に、担当者は主要なサービス説明と問い合わせフォームをスマホで操作し、問題が出るページと操作を一覧にします。経営者や営業担当者と確認対象を共有すると、訪問者の判断や連絡に関わる箇所から修正範囲を決められます。
個別の画像や本文に問題が限られる場合と、メニューなどの共通部分で問題が起きる場合では、依頼範囲が変わります。PCでの利用が多い場合も、スマホで確認される情報を残し、両方の端末で確認する条件を定めます。
次に確認するのは、社内で変更できる範囲と、修正後の検証を誰が担当するかです。外注する場合は、対象ページ、試す操作、再修正の範囲を同じ条件で整理してから見積もりを比べてください。
担当者は、スマホで行われる閲覧や操作がある場合、その範囲から確かめます。PCからの訪問割合だけで、一律に優先度を決める必要はありません。担当者は、問い合わせ先の確認など、スマホで完了してほしい作業を社内で整理し、先に直すページを選びます。PC利用が多い理由については、スマホで操作できないために訪問者がPCへ移っている可能性も含め、担当者が利用者の声や操作確認から調べます。
別URL方式という理由だけで、変更を決める必要はありません。担当者は、PCとスマホで主要な情報が一致しているか、更新を継続できるかを確認します。Googleも別URL方式を扱い、双方の対応関係などの確認事項を示しています（2025年12月更新）。変更を検討する場合は、表示の修正範囲と管理上の負担を比較します。URL変更や移行の検討は、スマホ表示の調整と分けて進めます。
担当者は、画像の幅を調整したあともメニューや本文、フォームの操作を確認し、画像が画面に収まるかと、訪問者が画像内の文字や注記を読み取れるかを別々に確かめます。画像の縮小によって説明を読めなくなる場合、担当者は制作会社と表示方法を調整します。担当者が説明を本文へ記載する方法も、検討する選択肢です。
点数だけでは、問い合わせの完了やメニューの使いやすさまで確認できません。Googleの2024年10月更新の解説では、模擬環境の測定と実利用データは条件が異なり、良い測定結果が実利用の良さを保証するとは限らないと説明しています。実利用データが表示されない場合も、それだけで不具合とは判断しません。公開直後やデータ不足の場合があるため、担当者は実機での操作確認を続けます。
担当者が記事や画像を追加・変更した場合は、更新したページのスマホ表示も確認します。確認する範囲は、追加した本文、画像、リンクなどです。担当者は、幅の広い画像や長い表記を追加した場合のはみ出しと読みにくさを調べ、共通のメニューやフォームを変更した場合は複数のページで再確認します。公開時に決めた操作手順を残しておけば、担当者は更新後も同じ条件で検証できます。
纐纈智英アストライド-Astride- 代表
WordPress・Wix・Shopify・STUDIO比較｜用途・更新体制・費用で選ぶCMS
Update:2026.10.9
企業のWebサイトにCMSは必要か｜更新の役割と導入・運用の判断基準
Update:2026.10.9
SSLとHTTPSの重要性｜企業サイトの証明書選び・導入・更新管理
Update:2026.10.9
ドメインとサーバーの基礎｜企業サイトの選び方と契約・更新管理のポイント
Update:2026.10.9
Webサイトで顧客ベネフィットを伝える方法｜機能との組み合わせと構成例
Update:2026.10.9
Webサイト制作を経営課題から逆算する方法｜要望・事実・仮説の整理と依頼の進め方
Update:2026.10.9
何をつくるべきか、まだ決まっていなくても大丈夫です。
採用・広報・理念浸透に向けた映像やポッドキャストの活用方法を、30分の無料オンライン相談で一緒に整理します。
ご相談内容がまとまっていなくても大丈夫です。
採用・広報・映像・ポッドキャストに関するお悩みを、まずはお気軽にお聞かせください。
企業の「伝わる発信」を考えるニュースレター
ポッドキャストの更新情報、映像・音声・SNS運用の実践知を、定期的にお届けします。
アストライドは、代表・纐纈が200社以上の経営者インタビューで培ってきたノウハウと対話力を軸に、BtoBマーケティングの視点からクライアント様それぞれのステージに合わせた各種クリエイティブをご提案・制作します。
アストライドは、代表・纐纈が200社以上の経営者インタビューで培ってきたノウハウと対話力を軸に、BtoBマーケティングの視点からクライアント様それぞれのステージに合わせた各種クリエイティブをご提案・制作します。
Astride（アストライド）
〒510-0016 三重県四日市市羽津山町1-6
© Astride All rights reserved.
