スマートフォンで見る企業サイト：見落とされがちなポイント

多くの経営者は、会社のWebサイトをオフィスのノートパソコンで確認しています。レイアウトは整い、写真も大きく、何も問題がないように見えます。しかし見込み客は、別の形でサイトを開いていることが少なくありません。WhatsAppで届いたリンクをスマートフォンでタップし、会議の待ち時間や現場で見ているのです。

小さな画面では、ノートパソコンでは気づかない問題がはっきり表れます。ボタンが押しにくい、表が切れている、フォームの入力が面倒。この記事では、見落とされやすいポイントと、自分で確認する方法を紹介します。

スマートフォンでの表示が重要な理由

理由は2つあります。1つ目は訪問者です。Google Analyticsなど、お使いの分析ツールでデバイス別の訪問者の割合を確認してください。この数字は会社ごとに違うので、推測するより自社のデータを見るほうが確実です。

2つ目はGoogleです。Googleはサイトのモバイル版をインデックス登録とランキングに使っており、モバイル版とパソコン版で同じコンテンツを載せるよう求めています。スマートフォンで見た目をすっきりさせるために情報を隠すと、その情報はGoogleにも読まれない可能性があります。

小さすぎるボタンとリンク

指はマウスのカーソルほど正確ではありません。小さなボタンが密集していると押し間違いが起き、訪問者はいらだちます。アクセシビリティ指針WCAG 2.2では、タッチ対象の最小サイズを24×24 CSSピクセル、またはそれに相当する十分な間隔と定めています。これは下限であり、理想のサイズではありません。「見積もり依頼」のような主要なボタンは、もっと大きく、親指で押しやすい位置に置きましょう。

見落とされがちな細かい点もあります。

• タップできない電話番号。番号がただの文字だと、訪問者は手で写さなければなりません。tel:リンクにすれば、スマートフォンがすぐに発信を提案します。
• 階層が深すぎるメニュー。マウスなら便利な3階層のメニューも、スマートフォンでは使いにくくなります。メニューを絞り、重要なページには1〜2回のタップで届くようにします。
• 内容を隠すフローティングボタン。WhatsAppボタン、チャットボタン、「ページ上部へ」ボタンが画面の隅に重なり、文字やほかのボタンを隠してしまうことがあります。

画面に収まらない仕様表や資料

製造業や卸売業のサイトには、コード、サイズ、素材、重量、梱包など列の多い仕様表がよくあります。ノートパソコンでは読めても、スマートフォンでは列が切れたり、ページ全体が横にずれてレイアウトが崩れたりします。

対策はいくつかあります。表だけを専用の枠の中で横スクロールさせ、ページ自体は動かないようにする方法。短い表なら、スマートフォンでは1行ずつ小さなカードとして表示する方法。非常に大きな表は重要な列だけを表示し、完全なデータシートをダウンロードで提供する方法です。

大きなPDFの中にしかない情報にも注意が必要です。スマートフォンでは、1行読むためにもファイル全体をダウンロードしなければなりません。

スマートフォンで入力が面倒なフォーム

スマートフォンでの入力はパソコンより遅く、ミスも増えます。見積もり依頼フォームの項目が1つ増えるたびに、途中でやめる理由も1つ増えます。

• 必要なことだけ聞く。最初の問い合わせなら、氏名、会社名、連絡先、ご要望で通常は十分です。ほかの詳細はフォローアップの際に聞けば済みます。
• 適切な入力欄の種類を使う。メールアドレスや電話番号の欄を正しく設定すると、スマートフォンに合ったキーボードが表示されます。メールなら@付きのキーボード、電話なら数字キーです。
• 自動入力を許可する。autocompleteを設定すれば、ブラウザが訪問者のスマートフォンに保存された氏名、メール、電話番号、会社名を入力できます。
• 分かりやすいエラー表示。見えないページ上部ではなく、間違えた欄のすぐ近くに表示します。

画面を覆うポップアップやバナー

ノートパソコンでは画面の一部しか覆わないポップアップも、スマートフォンでは画面全体を覆うことがあります。閉じるボタンが小さければ、訪問者はサイトから離れてしまいます。

Google自身も、ポップアップでページ全体を覆わず、画面のごく一部だけを使うバナーにするよう勧めています。Googleによると、こうした煩わしい要素は検索エンジンがページの内容を理解しにくくし、訪問者の信頼も損ないかねません。法律で表示が義務づけられた通知は例外です。

モバイル回線での表示速度

オフィスのノートパソコンは安定した回線につながっていますが、外出先のスマートフォンはそうとは限りません。大きな製品写真、背景動画、追加スクリプトの多さは、ここで最も影響が出ます。

GoogleはCore Web Vitalsという3つの指標を使っています。「良好」の基準は、メインコンテンツが2.5秒以内に表示されること、タップへの反応が200ミリ秒以内であること、レイアウトのずれが0.1以下であることです。これらはスマートフォンとパソコンで別々に評価されます。無料のPageSpeed Insightsで、スマートフォンとパソコンそれぞれの結果を確認できます。

15分でできるセルフチェック

1. オフィスのWi-Fiではなくモバイル回線で、自分のスマートフォンからサイトを開きます。
2. お客様がよく行う操作を試します。製品を1つ探し、仕様を開き、見積もりを依頼します。
3. 電話番号とWhatsAppボタンをタップします。すぐに使えますか。
4. 最も長い表があるページを開きます。ページ全体が横にずれませんか。
5. フローティングボタンやポップアップが内容を隠していないか確認します。
6. PageSpeed Insightsにサイトのアドレスを入力し、スマートフォンの結果を確認します。
7. 知人など社外の人にも同じことをしてもらいます。自分では気づかない点が見つかります。

企業サイトは、スマートフォンで「開ける」だけでは不十分です。お客様が画面を拡大しなくても、製品を見つけ、仕様を読み、連絡できる必要があります。

企業サイトの表示が遅い原因、見積もり依頼フォームの作り方、邪魔にならないWhatsAppボタンの設置方法もあわせてお読みください。最初からスマートフォンで使いやすいサイトをお望みなら、Webサイト制作サービスをご覧ください。