スマホで見たときに離脱されるページに共通する作りと直す順番
移動中にふと自社のサイトをスマートフォンで開いてみたら、最初の画面に大きな写真だけが表示されていて、何をしている会社なのかが出てこない。指で下へ送ると文字がびっしり詰まっていて、読む前に指が止まる。メニューを開こうとしてタップしたら、隣のリンクに飛んでしまう。パソコンで確認したときには気にならなかったのに、手元の画面だと妙に読みにくく感じます。訪問者の多くが同じ見え方をしていると考えると、放置しづらい状態です。
最初の画面で「何の会社か」が分からない
スマートフォンの最初の画面は、パソコンに比べて表示できる範囲がかなり狭くなります。そこに大きな写真とロゴだけが置かれていると、業種も地域も分からないまま、読む理由が見つからずに閉じられます。
直し方は単純で、最初の画面の中に短い一行を入れることです。「どこで」「誰に」「何をしているか」が分かる書き方にします。「地域の名前+業種+対応している範囲」を並べるだけでも、読み手は自分に関係があるかどうかを判断できます。飾った言い回しより、検索したときに使われそうな言葉をそのまま入れるほうが伝わります。
あわせて、最初の画面から一度も動かさずに、電話と問い合わせのどちらかへ進める状態にしておきます。急いでいる人ほど下までは読まないので、連絡先がページの最下部にしかないと、そこへ届く前に離れてしまいます。
押せない、届かない、間違って押す
パソコンのマウスは狙った一点を正確に指せますが、指は面で触れます。文字リンクが行の中に小さく置かれていたり、リンク同士が上下に詰まっていたりすると、隣を押してしまいます。一度誤タップして戻る操作をさせると、そこで離れる人が出ます。
確認すべきところは決まっています。
- メニューの開閉ボタンが、画面の端すぎて押しにくくなっていないか
- 並んだリンクの上下に、指一本分の隙間があるか
- 電話番号がタップで発信できる状態になっているか
- 問い合わせボタンが、他のボタンと見分けのつく色と大きさになっているか
- 横に広い表や画像が、画面からはみ出して横スクロールを起こしていないか
最後の項目は見落とされがちです。パソコン向けに作った表をそのまま載せると、スマートフォンでは全体が横にずれ、本文まで読みにくくなります。項目数が多い表は、縦に並べ替えるか、主要な列だけに絞ります。
文字と余白が読む気を削っている
紙の資料をそのまま流し込んだページは、画面幅が狭くなると一段落が十数行に伸びます。見た目が壁のようになり、内容の良し悪し以前に読む気が失せます。
手を入れる順番としては、まず一段落を三行程度で切ります。次に、二つか三つの段落ごとに小見出しを入れて、拾い読みできるようにします。最後に、本文の文字の大きさを自分の端末で確かめ、目を近づけないと読めないようなら大きくします。
行間も効きます。行と行がくっついていると、読んでいる場所を見失いやすくなります。文字の大きさに対して、ゆとりが感じられる程度に広げるだけで印象が変わります。
もう一つ、画面の左右に余白がまったくないページは窮屈に見えます。文字が画面の端に触れていると、持ち方によっては指が重なって読めません。左右に少し余白を取るだけでも、読みやすさが上がります。
表示が出るまでの待ち時間
回線の状況が良くない場所では、重いページは白い画面のまま止まります。待たされている間、訪問者には何も起きていないように見えるため、戻って別のページへ移ります。
重くなる原因で多いのは画像です。カメラから出てきたままの大きなファイルを、そのまま何枚も並べていないか確認します。表示される大きさに対してファイルが大きすぎる場合は、縮小して差し替えます。トップページに写真が流れて切り替わる仕掛けがある場合、その分だけ最初の読み込みが増えるので、本当に必要かを見直す価値があります。
外部から読み込んでいる部品の数も効いてきます。地図、動画、各種の埋め込みなどは便利ですが、置いた数だけ待ち時間が延びます。下のほうにあって見られていないものは、思い切って外す判断もできます。
自分で確認するときの見方
パソコンの画面を小さくして確認するだけでは、指の操作までは分かりません。自分のスマートフォンで、実際に指だけを使って一周してみてください。そのとき、次の三つを紙にメモします。
- 手が止まった場所
- 押し間違えた場所
- 読み飛ばした場所
止まった場所には、必要な情報が欠けています。押し間違えた場所は、間隔か大きさの問題です。読み飛ばした場所は、文章の量か見出しの問題です。原因の種類ごとに直す先が違うので、この分け方をしておくと、次に何をすればいいかが決めやすくなります。
まとめ
スマートフォンでの離脱は、デザインの好みというより、読めない・押せない・待てないという具体的な理由から起きています。今日できることを一つ挙げるなら、自分の端末で自社のトップページを開き、一度も下へ動かさない状態で「何の会社か」「どうやって連絡するか」が分かるかどうかだけを確かめてみてください。分からなければ、そこが最初に直す場所です。
IRS WEBスタジオでは、スマートフォン表示の見直しやWebサイトの改修を承っています。どこから手を付けるかの整理からご相談いただけます。