ホームページがスマホで見にくい原因は？中小企業が確認したい7つの改善ポイント

・WEBマーケティング

こんにちは。株式会社ラブアンドフリーの高橋です。

「パソコンでは問題なく見えるのに、スマートフォンで開くと文字が小さい」「画像が横にはみ出す」「問い合わせボタンが見つからない」。中小企業のホームページでは、こうした小さな見づらさが相談前の離脱につながることがあります。

僕自身も、自社サイトのバナーや無料動画の案内を見直すとき、PCだけで判断せず、スマホ幅でも確認するようにしています。実際に見比べると、PCでは気にならなかった余白、古い画像、押しにくいボタン、情報の順番が見えてきます。

Googleは、検索のインデックス登録とランキングにスマートフォンでクロールしたモバイル版の内容を使用すると説明しています。また、モバイル端末でコンテンツが適切に表示されているかは、ページ体験を考えるうえでの確認項目の一つです。［出典1］［出典2］

この記事では、難しい技術の話ではなく、中小企業の経営者やWEB担当者が自分のスマホで確認できる7つの改善ポイントを紹介します。

あいちゃん

スマホ対応のホームページなのに、見にくいこともあるんですか？

高橋さん

あるよ。文字や画像が画面に収まっていても、ボタンが押しにくかったり、問い合わせ先が見つからなかったりする。僕は、読者が迷わず使えるかを一つずつ見るのが大切だと考えているよ。

最初に確認するのは「スマホ対応済みか」ではなく「迷わず使えるか」

レスポンシブデザインは、同じURLと同じHTMLを使い、画面幅に合わせて表示を変える方法です。Googleも実装・維持がしやすい方法として推奨しています。しかし、仕組みが対応していても、文字、画像、ボタン、情報の順番がスマホで使いやすいかは別に確認する必要があります。［出典1］

最初の画面では、誰に向けたサービスか、何を提供しているか、どんな悩みを解決するか、次に見てほしいボタンを短く伝えます。

バナーの見た目だけでなく、今のサービス内容と画像の言葉が一致しているかも確認してください。古いキャンペーンや終了したサービスが最初に出ていると、きれいなデザインでも信頼を損ねます。

スマホで左右に画面を動かさないと読めないページは、大きなストレスになります。横長すぎる画像、幅を固定した表、YouTube動画、長いURL、PC用の多列レイアウトを確認しましょう。［出典3］

画像や動画は、単に縮小するだけでなく、スマホでも内容が読めるかを見ます。PC用バナーの細かい文字をそのまま縮めるより、使う場所に合う比率と文字量で作り直す方が伝わります。

Googleは、モバイル版にもPC版と同等の主要コンテンツを含めるよう案内しています。長い内容は削除するのではなく、見出し、段落、箇条書き、必要に応じた開閉表示で整理しましょう。［出典1］

ChromeのLighthouse資料では、タップ領域を48×48ピクセル以上にし、近すぎる要素には間隔を取る改善例が示されています。W3CのWCAG 2.2では、最小24×24 CSSピクセル、または周囲に十分な間隔を設ける基準があります（例外条件もあります）。［出典4］［出典6］

数字だけでなく、親指で押しやすい高さ、隣のボタンとの間隔、ボタンらしい見た目、押した先が予想できる言葉を確認します。「料金と相談の流れを見る」のように、行き先を具体的にしましょう。

長いサービスページなら、最初の説明、料金、実績、ページ末尾など、読者が相談したくなる場所に入口を用意します。ただし、大きな案内で本文を何度も遮らないようにします。

僕は無料動画の案内を見直したとき、派手な演出を増やすより、枠とアイコンで一つの案内として分かる形を選びました。目立たせる目的は、読者が迷わず選べるようにすることです。

PC用とスマホ用を別保存するCMSでは、スマホだけ古いバナーや料金が残ることがあります。サービス名、料金、対象者、対応地域、営業時間、申込み条件、実績、問い合わせボタン、ページタイトルを見比べます。

デザインは端末に合わせて変えても構いません。しかし、判断に必要な情報をスマホだけ減らさないことが大切です。

画像は表示できたかだけでなく、ぼやけていないか、別の画像が出ていないかも見ます。幅400ピクセル前後で表示する画像なら、高密度画面を考え、元画像にはその2倍程度以上の幅を用意するのが一つの目安です。

まずトップページ、主力サービスページ、問い合わせフォームの3ページに絞ります。