スマホ対応は見た目だけではない｜3サイトを320px・390pxで実測した改善事例
みかもデジタルホームページのスマホ対応は、画面幅に収まって見えるだけでは完了しません。本文が読める、重要な条件が省略されない、電話や予約を押せる、検索やリンクが動く、固定ボタンが本文を隠さないところまで実機相当の幅で確認する必要があります。
みかもデジタルは2026年8月12日、株式会社みかもが運営するM-NET、みかも喫茶、みかもレンタカーの3サイトを改善し、320px・390px・1440pxの表示幅で本番確認しました。3サイトとも水平方向のはみ出しがないことに加え、各事業で最も重要な操作を実際に検証しています。
今回の改善対象と確認幅
確認幅は、小さなスマートフォンを想定した320px、一般的なスマートフォンの一例として390px、デスクトップとして1440pxです。一つの端末だけで整っていても、文字量やボタン数が変わると別の幅で崩れるため、幅をまたいで同じ機能を確認しました。
Googleはモバイル版の内容をインデックスに使います
Google Search Centralは、モバイル版のコンテンツを主としてクロール・インデックスに使うモバイルファーストインデックスを案内しています。重要なのは、スマホ版を短い別ページにすることではなく、主要な本文、見出し、画像の代替テキスト、メタ情報、構造化データなどをデスクトップ版と同等に保つことです。
そのため今回も、見栄えを整えるために本文や条件を削るのではなく、情報の順番と操作方法を組み直しました。モバイル表示だけ重要な条件が消えていないかを確認することは、利用者だけでなく検索エンジンへ正しい内容を渡すためにも必要です。
M-NET｜171件の実績をスマホで探せるようにする
M-NETでは、買取事例ページに公開済み記録171件を表示し、車種・地域検索、地域別フィルター、12件ずつの追加表示を実装しました。スマホでは一覧を縦に眺める時間が長くなるため、上部で条件を絞り、必要な事例へ早く到達できる構成にしています。
件数表示と検索結果を同じデータから出す
総件数171件、三好市3件、三好郡168件という表示は、公開事例のデータから集計します。説明文へ数字を手入力して別管理すると、記事追加後に数字が食い違います。数字を「飾り」にせず、利用者が検索して確かめられる状態にしました。
本番確認では「サンバー」の検索結果が3件、三好市フィルターが3件になることを操作して確認しました。表示できることだけでなく、入力と結果がつながるところまでがUIの検証です。
M-NET｜固定導線は一操作56px
モバイル下部には「30秒査定」「LINE」「電話」の固定導線を設置し、それぞれの操作領域を56pxで確認しました。ボタンを置くだけでなく、端末下部の安全領域に対応し、本文末尾やリンクが固定導線の裏へ隠れない余白を設けています。
固定導線は多ければよいわけではありません。M-NETで来訪者が次に行う可能性が高い三つへ絞り、押した先が現在も利用できるかを確認しました。
みかも喫茶｜料理とドッグランを同じ強さで伝える
みかも喫茶では、ファーストビューを「愛犬にも、食にも、手を抜かない。」という二本柱へ再設計しました。人工芝のドッグランだけ、料理だけに寄せず、初めての方が店舗の特徴を一画面で理解できる順番にしています。
事実の出典と条件を本文に残す
田口農園の野菜を基本に使うこと、季節や収穫状況によって他の仕入先も使うこと、世界農業遺産の認定対象は地域の農耕システムであり個別農園そのものではないことを分けて記載しました。短いスマホ画面でも、誤読を防ぐ条件を削らない設計です。
モバイルヘッダーは69px、下部固定導線は58pxで確認しました。JavaScriptの読み込みに問題が起きても本文自体を非表示にしない構成とし、装飾の不調が情報消失につながらないようにしています。
みかもレンタカー｜予約前に免許条件を見せる
みかもレンタカーでは、祖谷・大歩危への観光、地域の日常移動、24時間使える「楽のり」という三つの用途を整理しました。そのうえで、海外から利用を検討する方に、日本の運転免許証が必要で、国際運転免許証・外国免許では貸出しないという現在の店舗条件を予約前に表示しています。
これはデザインの問題だけではありません。条件を読まずに予約画面へ進み、貸出日に初めて対象外と分かることを防ぐ業務設計です。英語ページでも、免許条件、予約、受取、給油・返却の順をそろえました。
320pxで見出しと三つの導線を確認
320px幅でも主要見出しが不自然に分断されないよう調整し、モバイル下部の「予約」「English」「電話」は各54pxで確認しました。リンク先が正しい予約導線・英語案内・電話番号になっていることも、本番で確かめています。
横スクロールがないだけでは合格にしない
今回の3サイトは320px・390px・1440pxで水平方向のはみ出しがないことを確認しました。ただし、横スクロールがなければ完了、ではありません。次の項目を一緒に確認します。
- 見出しが一文字だけ次の行へ落ち、意味が読みにくくなっていないか。
- 固定ヘッダーと固定ボタンが本文やリンクを覆っていないか。
- 電話、LINE、予約、地図など主要リンクが正しい先へ進むか。
- 検索、絞り込み、追加表示が指で操作できるか。
- 画像が伸びたり、文字が画像の外へはみ出したりしていないか。
- JavaScriptが使えない・遅い場合でも主要本文が残るか。
見た目・内容・動作の三層で確認する
見た目
幅、文字サイズ、行間、余白、画像比率、固定要素の重なりを確認します。スクリーンショットは比較に役立ちますが、静止画だけでは押せるかどうかは分かりません。
内容
店舗名、住所、電話、営業時間、価格、件数、利用条件、注意書きが、公式情報と一致しているかを確認します。スマホ向けに短くする際も、判断に必要な例外を落としません。
動作
リンク、フォーム、検索、フィルター、固定ボタンを実際に操作します。表示崩れがなくても、電話番号が別店舗につながる、予約先が古い、検索結果が更新されないといった問題は動作確認でしか見つかりません。
検索順位を保証する施策ではありません
モバイル表示を整えても、特定のキーワードでの順位上昇を約束するものではありません。Googleも、サイトごとの順位を一つの要素だけで保証していません。今回の改善は、検索エンジンがモバイル版から主要情報を取得しやすくし、訪問者が行動を完了しやすくする基盤整備です。
SEOでは、技術、内容、運営実績、外部評価、検索意図など複数の要素が関わります。「スマホ対応済み」というラベルより、現在の本番画面で情報と操作が成立しているかを見ます。
地域企業のサイトで、まず測るべき画面
- トップページの最初の一画面
- 料金・メニュー・事例など比較に使うページ
- 電話・LINE・予約・問い合わせへ進む直前
- アクセスと営業時間
- 利用条件・対象外条件・FAQ
アクセス数の多いページだけでなく、来店・契約前に判断を変えるページを優先します。みかもデジタルでは、画面のきれいさと同時に、現場の説明や受付の負担が減るかまで確認します。
関連する実務ガイド
一般的なモバイル表示の確認ポイントは、地域店がまず直すモバイル表示の3点で解説しています。また、自動化しても公開判断を人に残す考え方は、AIで7サイトを運営しても、最後は人が公開を決めるをご覧ください。
今回の記事は、その一般論を実際の3サイトへ適用し、測定幅、操作、結果まで記録したケーススタディです。
よくあるご質問
Q. 320pxでも確認する理由は何ですか？
A. 小さな画面では、長い見出し、三つ並ぶボタン、余白不足などの問題が表面化しやすいためです。390pxだけでなく、より厳しい幅も確認します。
Q. Googleのモバイルフレンドリーテストだけで十分ですか？
A. 一つの自動テストだけでは、電話や予約のリンク先、検索結果、現場条件の正しさまでは確認できません。実ブラウザでの目視と操作を組み合わせます。
Q. 固定ボタンはすべてのサイトに必要ですか？
A. 必須ではありません。主要行動が明確で、本文を隠さず、リンク先を保守できる場合に有効です。目的のない固定ボタンは画面を狭くします。
Q. パソコン版とスマホ版で文章を変えてもよいですか？
A. レイアウトを変えることはできますが、検索や利用判断に必要な主要内容をスマホ版だけ省かないことが重要です。
Q. 改善後は何を継続確認しますか？
A. 主要リンク、フォーム、表示幅、営業時間や料金などの事実、アクセス・問い合わせの変化を定期的に見ます。サイト更新後の再確認も必要です。
確認元と更新日
本稿の数値と結果は、みかもデジタルが2026年8月12日に3サイトの本番画面を320px・390px・1440pxで確認した作業記録に基づきます。検索エンジンに関する説明は、Google Search Centralのモバイルファーストインデックスのベストプラクティスを参照しています。各サイトは継続更新されるため、現在の表示を最新情報としてご確認ください。
