コラム

HIRAYAMA 記事担当
HIRAYAMA
投稿日:26.10.03 最終更新日:26.10.09

スマホで見にくいホームページは損してる?中小企業が押さえたいモバイル対応の基本

このコラムをSNSでシェア!
スマホで見にくいホームページは損してる?中小企業が押さえたいモバイル対応の基本

「スマホでサイトを開くと、文字が小さくて読みにくい」
「ボタンが小さくて押しづらい」
「ホームページを作ったのはずいぶん前で、スマホ対応がどうなっているか分からない」

中小企業のホームページ運用では、スマホでの見え方が長らく後回しになってきました。

しかし、今の訪問者の多くはスマホからサイトを開いています。パソコンで見て「うちのホームページは大丈夫」と思っていても、スマホでは文字が小さく、ボタンも押しづらく、電話番号もタップできない…と、いうのは珍しくありません。

先に結論を言うと、スマホで見にくいホームページは、それだけで問い合わせを逃しています。デザインの好みではなく、「せっかく見つけてくれた人を離さない」ための基本ラインです。
この記事では、なぜスマホ対応が必要なのか、よくある見にくいパターン、優先して直すべきポイント、対応状況を自分で確認する方法を整理します。

◯こちらの関連記事も読まれています

訪問者の多くはスマホから来ている

訪問者の多くはスマホから来ている

Googleは以前から、検索順位の評価をスマホ向け表示を軸に行う「モバイルファーストインデックス」を採用しています。加えて、業種にもよりますが、中小企業のホームページでも、実際のアクセスの多くはスマホからです。BtoC(一般消費者向け)では特にその傾向が強く、BtoB(企業向け)でも、初回訪問はスマホというケースが増えています。

つまり、「うちはBtoBだからスマホ対応は後でいい」という時代ではなくなっています。スマホで見て使いにくいホームページは、検索順位でも不利になり、訪問者にも離脱されやすいという、二重の損失につながります。

スマホで見にくい。ホームページの典型パターン

スマホで見にくい。ホームページの典型パターン

スマホで開いたときに、次のような状態になっていないかを確認してみてください。

  • 文字が小さく、拡大しないと読めない
  • ボタンやリンクが小さすぎて、隣を押してしまう
  • 電話番号が画像になっていて、タップで発信できない
  • 問い合わせフォームの入力欄が縦にはみ出し、操作しづらい
  • 画像が重くて読み込みが遅く、途中で離脱される
  • メニューが横スクロールで、目的のページに辿り着けない
  • スマホでは表示が崩れて、レイアウトがずれている

これらのうち、複数当てはまるサイトは、スマホ対応が古いか、そもそも対応していない可能性があります。訪問者は「使いにくい」と感じた瞬間に、他社のサイトへ移ってしまいます。

モバイル対応の3つのレベル

スマホ対応と一言で言っても、実装方法にはいくつかの段階があります。

方式特徴おすすめ度
レスポンシブ対応同じHTMLに対して、画面サイズごとに表示を切り替える方式。更新も一元管理でき、運用しやすい◎ 現在の主流
PC・スマホの別サイト運用URLを分けて、それぞれ別のページを用意する昔の方式。更新が二重になりやすく、SEO面でも複雑△ 新規では選ばれにくい
非対応(PC専用)スマホでPC用の表示がそのまま縮小表示される。文字も小さく、操作もしづらい× 事実上の機会損失

これから作るホームページや、リニューアルを検討しているホームページは、原則としてレスポンシブ対応を選ぶことになります。

モバイル対応で優先したい5つのポイント

モバイル対応で優先したい5つのポイント

すでにサイトがある場合、次の5つを優先して見直すだけでも、スマホでの使いやすさが大きく変わります。

1. 文字サイズと行間

スマホでの本文は、目安として16px以上の文字サイズが読みやすいとされています。行間が詰まりすぎると、文章の塊が固く見えるので、適度な行間も欠かせません。

2. ボタン・リンクのタップ領域

指でタップする対象は、隣とぶつからない大きさが必要です。目安として、44px(約1cm四方)程度が押しやすい大きさとされています。文字リンクを並べる場合も、行の高さを確保することで押しやすくなります。

3. 電話番号は「タップで発信できる」形に

スマホからの問い合わせで多いのは、実は電話です。電話番号は画像ではなくテキスト+タップ発信用のリンク(tel:リンク)にしておくことで、思い立ったらすぐ電話につながる状態を作れます。

4. 問い合わせフォームを軽くする

スマホでの入力は、パソコンよりも手間がかかります。項目数を最小限に、入力欄の順序を自然に、キーボードの種類(数字・メールなど)を最適化するだけで、離脱がぐっと減ります。

5. 表示速度

画像の圧縮、不要なスクリプトの整理、キャッシュの設定など、表示速度に影響する要素はいくつもあります。スマホは通信環境も一定ではないため、重いサイトは特に離脱されやすくなります。

対応状況を5分で確認する方法

今のホームページがスマホ対応できているかは、次の3ステップで確認できます。

◯自社のスマホで、実際にホームページを開いてみる(文字サイズ、ボタン、電話タップ、フォーム入力までひととおり試す)

◯Googleの無料ツール「PageSpeed Insights」で、モバイルの表示速度と改善点を確認する

◯Google Search Consoleの「ページ エクスペリエンス」の項目で、Google側から見た指摘を確認する

    これだけで、「どこが問題か」の当たりはかなりつきます。担当者が自社のホームページを最後にスマホで見たのはいつか、を思い出せない場合は、この機会に一度チェックしてみてください。

    スマホで見る訪問者の「行動の特徴」を知る

    スマホで見る訪問者の「行動の特徴」を知る

    スマホで訪問する人は、パソコンで訪問する人とは行動の仕方が少し違います。この違いを踏まえるだけでも、サイトの設計は変わってきます。

    • 移動中や隙間時間の閲覧が多く、時間をかけて読み込まない
    • 気になった瞬間に電話をタップする傾向がある
    • 両手を使えないことも多く、片手で操作できるレイアウトが好まれる
    • 複数タブで比較するより、1サイトずつ順に見て離脱していく
    • 問い合わせフォームは面倒に感じ、電話・LINE・地図確認に流れやすい

    つまりスマホでの訪問者には、「短時間で結論が伝わる」「気になったらすぐ行動できる」設計が向いています。長い挨拶文、細かい表、上下に長いフォームなどは、それだけでハードルになります。

    スマホ対応が甘いことで発生する「見えない損失」

    スマホ対応が甘いことで発生する「見えない損失」

    スマホでの見にくさは、目に見える形で問題として現れないまま、静かに機会損失を生みます。
    どんな損失が発生しているか、代表例を整理します。

    スマホでの問題起きている損失
    文字が小さくて読めない訪問者が中身を読まずに離脱している
    電話番号がタップできない「電話しようと思った人」を逃している
    ボタンが押しづらい問い合わせフォームまで到達しない
    表示が遅いGoogleの評価も下がり、検索順位で不利になる
    レイアウト崩れ「ちゃんとしていない会社」の印象を与える

    いずれも、担当者から見ると「なぜかホームページからの反応が薄い」という漠然とした形でしか見えないため、原因が特定されにくい問題です。

    リニューアルの目安

    一般的に、5年以上前に作られたホームページは、スマホ対応の水準が今の基準に追いついていないことが多くなります。特に、当時の「スマホ対応」はサイズだけ合わせた最低限の対応で、タップ操作やフォームの最適化までは考慮されていないケースもあります。

    「PCで見ている限りは問題ない」「デザインも気に入っている」というホームページでも、スマホでの使い勝手だけで印象が下がることがあります。全面リニューアルではなく、モバイル対応の部分改修だけで済むケースもあるので、まずは現状を確認することが第一歩です。

    スマホ対応でよくある誤解

    スマホ対応でよくある誤解

    「スマホ対応=とにかく小さくすればよい」と思われがちですが、実際には次のような誤解が現場でしばしば見られます。

    誤解1:文字を小さくすれば「スッキリ」する

    スマホは画面が小さいので、文字も小さくした方が整って見える気がしますが、実際は逆です。文字が小さいほど読まれず、離脱が増えます。スマホでは、パソコンよりも文字を大きめにするのが基本です。

    誤解2:PCで見て問題なければスマホでも大丈夫

    パソコンで整って見えるサイトが、スマホでは行間が詰まりすぎたり、画像がはみ出したりすることは珍しくありません。制作会社に依頼するときも、必ず「スマホ表示のプレビュー」を確認しながら進めてもらうのが安全です。

    誤解3:スマホ対応は制作時に一度やれば終わり

    OSやブラウザは常に更新され、以前は動いていたスマホ表示が、時間の経過で崩れることがあります。スマホ対応は「一度やって完了」ではなく、年に1回程度は確認する運用項目のひとつとして扱う方が現実的です。

    スマホで見やすい=集客の底上げ

    スマホで見やすい=集客の底上げ

    スマホ対応は、派手な集客施策ではありません。しかし、スマホで見にくいホームページは、それだけで検索順位・訪問者の印象・問い合わせ数のすべてに影響します。逆に、基本のモバイル対応が整っていれば、SNSからの流入、広告からの流入、検索からの流入、どれを増やしても受け皿として機能します。

    「集客を増やしたい」と考える前に、まずは今の受け皿がスマホでどう見えているかを確認する――。それだけで、次に打つべき手が見えてくることも多いです。もし現状の確認や改修の判断に不安があるなら、モバイル対応の実務まで含めて相談できる制作会社に、一度診断を依頼してみてください。

    執筆者プロフィール

    株式会社エスエムティ WEBディレクター 平山 純一

    みやぎ産業振興機構登録専門家。
    IT業界・WEB業界に20年余従事。様々なWebサイトの企画立案・設計業務、進行管理などを主とするディレクション、コンサルティング業務を担当。ECサイト関連では運用・保守業務他キャンペーン企画等も手がける。仙台・宮城の中小企業の「強み」をWEBで可視化し、成果につなげる支援を得意とする。

    このコラムをSNSでシェア!

    お問い合わせ

    Webサイト制作・運用更新業務、SEOや広告運用でお困りの方はご相談ください。

    専任のWEBコンサルタントがサポート・アドバイスいたします。
    お気軽にお電話またはお問い合わせください。

    電話でのお問い合わせ・ご相談

    022-217-1232月~金 9:00~18:00(祝祭日を除く)