1. 作る側はパソコン、見る側はスマートフォン
中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。
「パソコンで見たときはきれいなんですけどね。スマホだとちょっと見づらいかな、とは思ってました」
ここに、ホームページのいちばん大きなズレがあります。作る側も確認する側もパソコンの大きな画面で見ているのに、実際に訪れる人の大半はスマートフォンです。
業種によりますが、地域の商売や個人向けのサービスだと、訪問の8割以上がスマートフォンというのは珍しくありません。つまり、パソコンでの見え方を整えることに時間を使うより、スマートフォンでの見え方を1つ直すほうが、10倍効きます。
この記事では、スマートフォンで人が離れる原因を7つ挙げます。どれも、特別な知識がなくても自分で確かめられます。
先にお伝えしておくと、この7つはどれも作り直さずに直せるものです。設計から変えないといけないのは、そもそもスマートフォンに対応していない古いサイトだけで、それ以外は修正で片付きます。「見づらい＝作り直し」ではありません。
問い合わせが来ない原因の切り分け全体は ホームページを作ったのに問い合わせが来ない ― 公開後90日でやること にまとめてあります。
2. ① 開くのが遅い
いちばん多く、いちばん取り返しがつかない原因です。表示に3秒以上かかると、待たずに閉じる人が増えます。
原因はほぼ1つで、写真が大きすぎることです。最近のスマートフォンで撮った写真は1枚で数MBあります。それを縮小せずに10枚並べれば、開くのに何十秒もかかります。
もう1つ、外部から読み込んでいるものが多い場合も遅くなります。地図の埋め込み、SNSの表示、アクセス解析、チャット、フォント。1つずつは小さくても、10個あれば効いてきます。使っていない機能が残っていないかは一度見直す価値があります。
確かめ方
電波の良い場所ではなく、外出先で開いてください。駅、車の中、建物の奥。実際にお客様が見る環境はそこです。Wi-Fiに繋がった自宅で見ても、遅さは分かりません。
直し方
制作会社に「画像を圧縮してください」と伝えれば済みます。見た目を落とさずに、容量だけ10分の1にできます。自分で入れている場合は、縮小してから入れてください。
目安として、1枚あたり200KB以下に収まっていれば、まず問題ありません。トップの大きな写真でも500KBを超えるなら、圧縮の余地があります。
3. ② 横にスクロールしてしまう
指で横に動かせてしまう状態です。表の幅が広すぎる、写真がはみ出している、長い英数字が折り返されていない。このどれかで起きます。
横スクロールが発生すると、文章の右端が切れて読めなくなります。読めない箇所があると、その時点で信用が落ちます。
確かめ方
スマートフォンで開いて、指で左右に動かしてみてください。動くならアウトです。1ページだけでなく、全ページで試します。
とくに起きやすい場所
- 料金表。列が多い表は、スマートフォンでは必ずはみ出します
- メールアドレスやURLをそのまま書いた箇所
- 写真を横に並べたところ
- コピーしやすいように置いた長い英数字（口座番号、型番、登録番号）
料金表については、スマートフォンでは表をやめて、縦に並べるのが確実です。プランごとに区切って、上から順に読ませる形にします。表を無理に押し込むより読みやすくなります。
4. ③ 文字が小さい、行間が詰まっている
拡大しないと読めない状態です。作る側は大きな画面で見ているので、気づきにくい。
目安として、本文は16px前後、行間は本文の1.8倍程度が読みやすいとされます。数字を覚える必要はありませんが、拡大せずに読めるかどうかだけ確かめてください。
あわせて、1行の文字数も効きます。スマートフォンの画面幅で、1行が長すぎると目が滑ります。日本語なら20〜25文字程度で折り返されているのが読みやすい形です。
もう1つ、1行で終わる短い行の連続も読みにくくなります。文の途中で改行が入って、最後の1文字だけが次の行に落ちる。これが何箇所も続くと、読む速度が落ちて、内容が入ってきません。気になる箇所は、文を短く書き直すだけで直ります。
色にも触れておきます。薄いグレーの文字は、パソコンの明るい画面では上品に見えても、屋外のスマートフォンではほぼ読めません。本文は、背景とはっきり差のある濃さにしてください。
5. ④ 押せない、押しづらい
ボタンやリンクが小さすぎる、近すぎる、という状態です。指はマウスカーソルより太いので、パソコンでは押せても、スマートフォンでは隣を押してしまいます。
よくある形
- 電話番号が画像になっている。タップしてもかかりません。これは本当に多いです
- メニューのリンクが縦に詰まっている。隣を押してしまいます
- ボタンが小さい。指1本ぶんの大きさが必要です
- 問い合わせボタンが最下部に1つだけ。そこまでスクロールしない人には存在しないのと同じです
1つ目は、来店型の商売では致命的です。スマートフォンで電話番号を見た人は、タップして電話をかけようとします。そこでかからないと、番号を覚えて電話アプリを開き直す人はほとんどいません。
同じことが住所にも言えます。住所をタップすると地図アプリが開くようにしておくと、来店の手前でつまずきません。画像で住所を置いていると、これもできません。
6. ⑤ 最初の画面で、何の会社か分からない
スマートフォンの最初の画面は、パソコンよりずっと狭いです。そこに入るのは、見出し1〜2行と、あと少し。
ここに抽象的なキャッチコピーだけを置いていると、「何の会社か分からないまま、下にスクロールするかどうかを判断される」ことになります。多くの人はスクロールせずに戻ります。
直し方
最初の画面に、「誰に、何を、どこで」を一文で入れます。
- 「神戸の軽貨物運送。住宅設備の配送に強く、緊急便まで対応します」
- 「尼崎で30年、水回りのリフォーム専門店です」
かっこよさより、通じることが先です。キャッチコピーは、その下で構いません。
もう1つ、最初の画面に大きな写真だけを置いて、文字がその下にあるという構成もよく見ます。パソコンでは写真と文字が同時に見えますが、スマートフォンでは写真だけで1画面が埋まります。写真の上に文字を重ねるか、写真の高さを抑えるかのどちらかが要ります。
7. ⑥ 邪魔なものが出る／⑦ 縦に長すぎる
⑥ 開いた瞬間に何かが出る
ポップアップ、クーポンの案内、LINE登録の誘導。開いた瞬間に画面を覆うものが出ると、閉じるボタンを探す手間が発生します。そして小さい「×」を押し損ねると、そのまま戻られます。
出すなら、読み進めた後にしてください。読む前に出すのは、名乗る前に売り込むのと同じです。
なお、画面を覆う広告や案内は、検索の評価にも影響し得ます。閲覧の妨げになる出し方は好ましくないとされているので、出すなら小さく、下部に、閉じやすく。この3つを守ってください。
⑦ 目的の情報にたどり着くまでが長い
パソコンなら一目で見渡せる内容も、スマートフォンでは縦に長く伸びます。料金を知りたい人が、5回スクロールしても料金にたどり着けないという状態がよく起きます。
対策は2つです。
- 上部にメニューを置く。「料金」「実績」「お問い合わせ」に直接飛べるように
- 重要な情報を上に持ってくる。会社の沿革より、何ができるかと、いくらかを先に
パソコンでの縦の長さと、スマートフォンでの縦の長さは違います。設計するときは、スマートフォンの画面で何画面ぶんになるかで考えてください。
8. 自分で確かめる、10分の手順
専門知識は要りません。この順でやってください。
- Step 1：自分のスマートフォンで、全ページを開く。Wi-Fiを切って、モバイル回線で
- Step 2：各ページで指を左右に動かす。横に動いたら記録
- Step 3：拡大せずに本文が読めるか確かめる
- Step 4：電話番号をタップしてみる。かからなければ記録
- Step 5：問い合わせフォームに1件送ってみる。届くか確かめる
- Step 6：最初の画面だけを見て、何の会社か分かるか。知り合いに見てもらうと確実です
この6つで、たいていの問題は見つかります。見つかったものを制作会社に伝えれば、多くは修正で直ります。作り直しは要りません。
伝えるときは、スクリーンショットを撮って送るのがいちばん早いです。「3ページ目の料金表が右にはみ出します」と文字で書くより、画面を撮って送るほうが確実に伝わります。スマートフォンなら数秒で撮れます。
なお、家族や友人に「10秒だけ見て、何の会社に見えた？」と聞くのがいちばん効きます。社内の人に聞いても、もう知っているので意味がありません。
余裕があれば、60代以上の方にも見てもらってください。文字の大きさとコントラストの問題は、若い人の目では気づけません。お客様の年齢層が高い業種ほど、ここは効きます。
9. 雄喜晃の伴走：スマートフォンから先に組みます
私たち雄喜晃がお作りするサイトは、すべてスマートフォンでの見え方を先に決めてから組み立てています。パソコン用を作ってから縮めるのではなく、順序が逆です。公開前には実機で全ページを開いて、横スクロールが出ていないか、拡大せずに読めるか、電話番号がタップできるかまで確認します。
画像の圧縮も、こちらで行います。お預かりした写真をそのまま置くことはしません。見た目を保ったまま容量を落として、外出先の電波でも開ける状態にします。
一方で、私たちがやらないことも書いておきます。見た目の派手さを優先して、表示を重くすることはしません。動きの多いサイトをご希望なら、そこを得意とする制作会社のほうが合います。私たちが優先するのは、外出先で3秒以内に開くことです。
「スマホで見づらい気はするが、どこを直せばいいか分からない」という会社には、私たちはお役に立てます。作り直さなくても、直すところを挙げるだけで構いません。実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。
10. まとめ：確認する場所を、スマートフォンに移す
スマートフォンでの離脱を減らすために必要なことは、3つです。
- 確認をスマートフォンで行う ― パソコンで整えても、見る人の環境ではありません
- 7つを順に潰す ― 遅い、横スクロール、文字が小さい、押せない、何の会社か分からない、邪魔なものが出る、長すぎる
- 10分の手順を自分でやる ― 専門知識は要りません。指で触るだけです
この3つは、制作会社に頼む前に自分でできます。そして見つかった問題のほとんどは、作り直さずに直せます。新しく作るより、いま動いているものを直すほうが、確実に早くて安いです。
まずは今、ご自身のスマートフォンで自社のサイトを開いて、指で左右に動かしてみてください。動いたら、そこが最初に直すところです。
ぜひ一度、お話を聞かせてください。今のサイトを実機で見るところから、ご一緒します。
