拡大しないと読めない文字
指で画面を広げないと本文が読めないなら、訪問者はすでに一度不便を味わっています。PC基準で作った表や料金案内が横で切れる場合も同じです。読むために操作が必要になった時点から離脱が始まります。
Blog · Homepage ·
ホームページのモバイル最適化、何から見るべきですか？
検索から入ってくる訪問者の多くは、移動中や空いた時間にスマートフォンでホームページを開きます。ところが制作と確認は今も大きな画面で行われることが多く、実際の顧客が見る画面だけが誰にも最後まで確認されないまま残ります。この記事では、モバイルで訪問者が離れる箇所と、その画面で先に直すべき要素を扱います。
一言で要約
ホームページのモバイル最適化は画面を小さく縮める作業ではなく、狭い画面でも読めて、押せて、問い合わせできるように情報と導線を配置し直す作業です。文字サイズ、指が届く領域、問い合わせボタンの位置、最初の読み込み速度の4つが出発点です。
こんなサイン
モバイルで訪問者が離れるサイン
指に合わないボタンと入力欄
ボタンが小さかったり隣接していたりすると、押すつもりのないものが押されます。問い合わせフォームの入力欄が狭くて打ち間違えたり、選択項目が画面の外に押し出されたりすることもよくあります。問い合わせ直前の段階ほど、この不便の代償は大きくなります。
ポップアップとバナーが最初の画面を覆う
PCでは余白に置かれていたイベントバナーや通知が、狭い画面では本文全体を覆います。閉じるボタンまで小さければ、訪問者は内容を見る前に戻るボタンを押します。
待ちきれない読み込み
大きな画像や動画をそのまま載せると、移動中の回線では最初の画面が表示されるまで時間がかかります。何が出るかわからない空白の画面を長く待ってくれる訪問者は多くありません。
点検する要素
モバイルで先に直すべきこと
画面幅に合わせて積み直される構造
横に並んでいた要素は、狭い画面では縦に積み直される必要があります。単に縮小して見せる方式は、文字とボタンまで一緒に小さくします。画面幅に応じて配置が変わるよう設計するのが基本です。
読める文字サイズと余白
本文は拡大せずに読めるサイズを基準にし、行間と段落の余白をゆったり取ります。狭い画面では一段落が長いほど読む負担が増えるので、段落を短く分けたほうが読まれます。
親指の範囲にある問い合わせ導線
電話、相談申し込み、予約のように最も重要な行動は、片手で持ったとき親指が届く範囲に置きます。ずっとスクロールしないと出てこない問い合わせボタンは、ないのとあまり変わりません。スクロールしても付いてくる問い合わせボタンを置く方法もあります。
軽い最初の画面
最初の画面に必要な画像は表示サイズに見合った容量で用意し、下のほうの画像はスクロールに合わせて後から読み込むようにします。目に見える画面が先に出るよう順序を決めることが、体感速度を左右します。
チェックする
モバイル点検チェックリスト
- 本文を拡大せずそのまま読める
- 横スクロールなしで表と画像が画面に収まる
- ボタンと入力欄が片手で押すのに十分な大きさと間隔がある
- 問い合わせ・電話ボタンが長くスクロールしなくても手に届く
- 移動中の回線でも最初の画面がもたつかずに表示される
覚えておくこと
5項目のうち2つ以上が崩れているなら、モバイル画面から整理する時期です。ただし、モバイルを整えても訪問や問い合わせの増加を保証することはできません。モバイル最適化は離脱の理由を減らす作業であり、問い合わせにつなげるには最初の画面のメッセージと相談導線まで一緒に整える必要があります。
よくある質問
このテーマでよく確認される内容です
PC用とモバイル用のホームページを別々に作るべきですか？
多くの場合、別々に作らないほうがよいです。ひとつのホームページが画面幅に応じて配置を変えるようにすれば、内容の管理は一度で済みます。アドレスとコンテンツが二つに分かれると、修正漏れと検索露出の管理負担が同時に増えます。
モバイル最適化はデザインの問題ですか、速度の問題ですか？
どちらもです。配置と文字サイズは読めるかどうかを決め、読み込み速度は読む機会が来るかどうかを決めます。ただし順序を決めるなら、最初の画面が表示される速度と本文の読みやすさを先に確認するほうが効率的です。
自社のホームページがモバイルで問題ないかどうか、どう確認しますか？
実際のスマートフォンで検索結果から入り、初めて見る人のように眺めるのが最も正確です。拡大しないと読めない箇所、押し間違えるボタン、問い合わせまでにかかった段階数をメモすれば、それがそのまま直すべき一覧になります。
モバイル最適化は検索露出にも役立ちますか？
役立つことはありますが、順位を保証するものではありません。検索エンジンはモバイル画面を基準にページを評価することが多く、画面が使いにくいと訪問者がすぐ離れ、その信号も一緒に残ります。露出を増やすには、コンテンツと情報構造まで一緒に扱う必要があります。
関連記事
あわせて読みたい記事です
ホームページのファーストビュー、何を見せるべきですか？
訪問者は最初の画面だけで、読み続けるか離れるかを決めます。ヒーローエリアと呼ばれるこの画面に必ず入れるべき4つの要素と、よくある失敗を整理しました。
ホームページから問い合わせが来ない理由
訪問はあるのに問い合わせがないなら、多くの場合ファーストビューのメッセージ、判断材料、問い合わせ導線のどこかで流れが途切れています。途切れる地点の見分け方と整理の順序を案内します。