スマートフォンからの閲覧が中心のサイトで、先に直すべき場所
アクセス解析を開いて、スマートフォンからの閲覧が想像より多いことに気づく——これはよくある出発点です。ところが制作会社に確認すると「レスポンシブ対応済みです」と返ってきて、そこで話が止まってしまう。実際、画面幅に合わせて要素が縦に積まれること自体はできていても、スマートフォンで使えるかどうかは別の問題です。読みたい情報にたどり着くまでの手数、表示が出るまでの待ち時間、そして問い合わせまでの動線は、画面幅の対応とは違う観点で見る必要があります。ここでは、どこから来た人が何につまずいているのかを切り分け、限られた予算で先に直す場所を決めるための見方を整理します。
「レスポンシブ対応済み」でも残っている、代表的な不便
レスポンシブ対応は、画面幅に応じてレイアウトを組み替える技術的な対応です。それが済んでいても、中身がPC向けのまま置かれているケースは珍しくありません。特に、日本のサイトでよく残っているのが、テキストを画像として書き出したバナーや見出しです。拡大しないと読めず、検索エンジンからも本文として扱われません。
もう一つ多いのが、資料や価格表がPDFでしか用意されていない状態です。パソコンでは問題なく開けますが、スマートフォンでは読み込みに時間がかかり、拡大縮小しながら読むことになります。少なくとも主要な情報は、HTMLのページとしても用意しておく価値があります。
スマートフォンで実際に触ったときに気づきやすいのは、次のような点です。制作側のチェックリストではなく、来訪者の手が止まる場所として見てください。
- 電話番号が画像やテキストのみで、タップして発信できない
- メニューを開かないと主要なページに移動できない構造
- 入力欄をタップすると画面が拡大され、位置がずれる
- 固定表示のバナーが画面の下部を占有し、本文が読めない
- 住所は書いてあるが、地図アプリを開くリンクがない
- 営業時間や休業日が、トップページから何階層も奥にある
どこから来たかで、直すべき場所は変わります
同じスマートフォンからの閲覧でも、到達経路によって見え方が変わります。検索結果から来た人は、そのページ単体で判断します。トップページを見ずに個別ページに着地するため、そのページだけで「何の会社か」「どこにあるのか」「どう連絡するのか」が分かる必要があります。
SNSやメッセージアプリから来た場合、リンクはアプリ内のブラウザで開かれることが多くなります。アプリ内ブラウザでは、通常のブラウザとは挙動が異なることがあり、地図の埋め込みやファイルのダウンロード、外部サービスを使ったフォームで問題が出ることがあります。ここは机上では判断できないため、実機で一度は開いて確認する必要があります。
名刺やチラシ、店頭のQRコードから来る場合は、遷移先の設計そのものが問題になりがちです。トップページに飛ばすと、来訪者は探し直すことになります。展示会の資料なら該当製品のページ、店舗のPOPならメニューや予約のページ、といった形で、印刷物ごとに遷移先を分けておくほうが確実です。
表示が重くなる原因は、たいてい画像と日本語フォントです
表示速度の話になるとサーバーの性能が疑われがちですが、実際に読み込み時間の大部分を占めているのは、多くの場合が画像です。撮影したままの高解像度写真を縮小表示しているだけ、というサイトは今でもよく見かけます。表示サイズに合わせた書き出しと、現代的な画像形式への変換だけで、体感は変わります。
日本語サイト特有の要因として、和文Webフォントの重さがあります。日本語は収録すべき文字数が欧文と比べて桁違いに多く、フォントファイルのサイズもそれに応じて大きくなります。見出しだけに使う、使用文字を絞ってサブセット化する、あるいは端末に入っているフォントで組む、といった判断が必要です。デザイン上の理由なくWebフォントを全文に適用しているなら、そこは見直しの対象になります。
なお、Google 検索セントラルは、サイトのインデックス登録とランキングにモバイル版のコンテンツを使用すると説明しています（モバイルファーストインデックス）。スマートフォンでの表示は、閲覧者の使い勝手だけでなく、検索エンジンがそのサイトをどう認識するかにも関わる部分です。
スマートフォンからの連絡は、フォームだけではありません
問い合わせ導線をフォームだけに絞っているサイトは、スマートフォン利用者の一部を取りこぼします。移動中や現場からの連絡では、入力より通話のほうが早いためです。電話をタップで発信できるようにし、受付時間を近くに書いておくだけで、問い合わせの取りこぼしは減らせます。
フォーム自体も、項目数がそのまま離脱率に効いてきます。会社名・部署名・役職・住所・電話・ご希望の連絡方法……と並べていくと、片手で入力している人は途中でやめます。最初の接触で本当に必要な項目だけに絞り、残りは返信後のやり取りで聞く形に変えるほうが現実的です。
メッセージアプリ経由の問い合わせについては、受け口を増やすほど社内での記録が散らばるという別の問題が出ます。この点は、問い合わせ情報を一箇所に集める設計の話として、関連記事で扱っています。
スマートフォン向けに、作らなくてよいもの
まず、アプリを作る必要はほとんどありません。来訪頻度が低いサイトの内容をアプリ化しても、インストールという段差が増えるだけです。予約や会員向けの機能が中心で、繰り返し使われることが前提の場合に初めて検討対象になります。
スマートフォン専用に別サイトを用意する方式も、今から選ぶ理由はほとんどありません。更新が二重になり、片方だけが古くなる状態を招きます。既存でこの構成になっている場合は、次のリニューアルで一本化する対象として考えてください。
そして、すべてのページを作り直す必要もありません。アクセスの多い数ページと、問い合わせまでの導線に限って手を入れるだけで、体感は大きく変わります。逆に、更新頻度が低く来訪も少ない下層ページに時間をかけるのは、優先順位として後回しで構いません。
よくある質問
レスポンシブ対応済みかどうかは、どう確認できますか。
実機のブラウザで開き、拡大せずに本文が読めるか、電話番号がタップできるか、フォームが最後まで入力できるかを試すのが確実です。画面幅が変わるかどうかだけでは、使えるかどうかは判断できません。
表示速度は、どのくらいを目安にすればよいですか。
具体的な秒数の目標を一律に置くより、まず自社サイトを携帯回線で開いて、待たされる感覚があるかを確認してください。改善の効果が大きいのは画像とフォントで、順に手を入れると測定値も体感も動きます。
SNSのアプリ内ブラウザで表示が崩れます。原因は何ですか。
アプリ内ブラウザは通常のブラウザと挙動が異なる場合があり、埋め込み要素や外部サービスを使った機能で差が出ることがあります。どのアプリのどの画面で起きるかを記録して制作会社に渡すと、再現と修正が早くなります。
PDFの資料は、すべてHTMLに作り直すべきですか。
すべてではありません。ダウンロードして保存する前提の仕様書や図面はPDFのままで構いません。価格表・サービス内容・会社概要のように、来訪者が読んで判断する情報は、ページとしても用意しておくほうが読まれます。
スマートフォンでの改善は、リニューアルしないとできませんか。
多くの場合、部分的な改修で対応できます。画像の最適化、フォントの見直し、電話タップの追加、フォーム項目の削減は、既存サイトのまま実施できることがほとんどです。全面リニューアルが必要かどうかは、構造の古さによって変わります。
既存サイトを残したままの部分改修から対応できます。Karkium Web はリモートで各国のプロジェクトに対応しており、日本国内に拠点や常駐の担当者はありません。まずは、どのページから手を入れると効果が出そうかの切り分けだけでもお話しできます。