見やすいホームページの条件 スマホで迷わせない情報の並べ方

見やすいサイトにしてほしい。制作の相談で最も多く出てくる要望です。ただ、何をもって見やすいとするかは人によって違います。文字を大きくすることなのか、余白を取ることなのか、写真をきれいにすることなのか。

訪問者の側から見ると、見やすさは探しているものにすぐ届くかどうかで決まります。デザインの好みより、情報の並び順のほうが体感に効きます。

この記事でわかること

• 見やすさを決める4つの条件
• スマートフォンで最初の画面に置くべき情報
• 業種ごとに先に出すと親切な情報
• 自社サイトを自分で点検する手順

見やすさは好みではなく、届く速さの問題

見やすいホームページとは、訪問者が探している情報に少ない手数でたどり着けるサイトです。デザインの美しさとは別の軸で判断されます。

クリニックのサイトを開く人は診療時間を、不動産会社のサイトを開く人は取り扱い物件を、採用ページを開く人は仕事の内容と条件を確かめに来ています。目的が違えば、優先して置くべき情報も変わります。すべての訪問者に同じ順で見せると、誰にとっても遠くなります。

デザインを整えても問い合わせが増えないという相談の多くは、この並び順が原因になっています。原因の切り分け方はホームページで集客できない原因の切り分け方で整理しています。

見やすさを決める4つの条件

実務で効くのは、読める、探せる、押せる、待たされないの4つです。この順に確認すると、直す優先度が決まります。

読める

文字が小さすぎない、背景と文字の色の差が十分にある、行間が詰まりすぎていない。この3つが基本です。薄いグレーの文字や、写真の上に重ねた白文字は、明るい屋外では読めなくなります。年齢層が高い訪問者が多い業種ほど、ここは効いてきます。

探せる

メニューの項目名が、訪問者の言葉になっているかを確認します。社内の呼び方をそのまま使うと、探す側は理解できません。項目を増やしすぎるのも逆効果で、5つから7つに収まっていると迷いにくくなります。

押せる

電話番号がタップして発信できるか、ボタンが指で押せる大きさか、リンクとただの文字が見分けられるか。スマートフォンでは、押せそうに見えて押せない要素がそのまま離脱につながります。

待たされない

写真が多いページは、読み込みに時間がかかります。開いた瞬間に何も表示されない時間が続くと、戻られます。写真の枚数を絞る、サイズを調整するといった対応で改善できます。

スマートフォンの最初の画面に何を置くか

スマートフォンで最初に表示される範囲は限られています。ここに何が入っているかで、続きを読むかどうかが決まります。

置いておきたいのは、何の会社か、どこで営業しているか、次に何ができるかの3つです。大きな写真とキャッチコピーだけで最初の画面が埋まっていると、業種すら伝わらないまま戻られることがあります。

店舗や医院なら、営業時間と電話番号を早い位置に置いてください。会社のサイトなら、事業内容が1行で分かる文と、問い合わせへの入り口を置きます。スクロールしないと業種が分からない状態は避けたほうが安全です。

パソコンでは横に並べていた情報が、スマートフォンでは縦に積み上がります。パソコンで右側に置いた大事な情報が、スマートフォンでは一番下に回っていることがあります。実機で確認してください。

業種によって先に出す情報は変わる

訪問者が最初に確かめたい情報は業種ごとに決まっています。そこを先頭に持ってくるだけで、見やすさの体感が変わります。

後ろでよい情報が不要という意味ではありません。判断に近い情報を先に、理解を深める情報を後ろに置くという順番です。理念や経歴は、興味を持った人が読み進めた先で効きます。

採用ページの見やすさについては採用サイトに必要なコンテンツでも触れています。

やりがちで、かえって見づらくなること

良かれと思って足した要素が、読みづらさの原因になっていることがあります。

情報を全部トップページに載せる

大事な情報を見逃されたくないという意図で、トップページが縦に長くなります。長いほど、下の情報は読まれません。トップページは案内板と考え、詳しい内容は各ページへ分けてください。

動きのある演出を多用する

スクロールに合わせて要素が現れる演出は、少なければ効果的ですが、連続すると読み進めるテンポを崩します。読む速さが人によって違うことを踏まえて、控えめに使ってください。

写真の上に文字を重ねる

見た目は整いますが、写真によっては文字が読めなくなります。重ねるなら、暗い帯を敷くか、文字を置く場所の写真を単色に近いものにしてください。

メニューを増やしすぎる

ページが増えるたびにメニューへ足していくと、選択肢が多すぎて選べなくなります。訪問者が探す順に並べ、使われていない項目は下層へ移してください。並べ方は中小企業のホームページの構成で説明しています。

自社サイトを自分で点検する手順

専門的なツールがなくても、自分の端末で確認できることがあります。5分ほどで一通り点検できます。

1. 自分のスマートフォンで開く

パソコンではなく実機で開いてください。文字が読めるか、写真が出るまで待たされないか、電話番号が押せるかを見ます。屋外の明るい場所でも一度確認すると、色の薄さに気づけます。

2. 目的を決めて探してみる

営業時間を調べる、料金を確認する、問い合わせるといった目的を一つ決め、何回タップでたどり着くかを数えます。3回を超える場合は、導線を見直す余地があります。

3. 社外の人に見てもらう

社内の人は構成を知っているため、迷いません。取引先や家族に開いてもらい、どこで止まったかを聞いてください。ここが一番早く問題を見つけられる方法です。

4. フォームを実際に送ってみる

入力してみると、項目の多さや分かりにくい表現に気づきます。送信後の画面と、届くメールも確認してください。届いていない状態が長く続いていた例もあります。

作り直す場合に見やすさをどう確認するか

見やすさは、完成品を見るまで判断が難しい部分です。言葉で伝えた要望が、そのまま形になるとは限りません。

見てからwebでは、契約前に動くトップページを最大3案まで無料で制作します。実際にスマートフォンで開いて、読めるか、探せるか、押せるかを確認してから契約を判断できます。必要な情報は基本的に今のホームページのURLだけで、制作の目安は3営業日以内、打合せは2回までです。

制作費は0円で、公開後はLIGHT月額9,900円が1〜2ページ、BUSINESS月額14,900円が3〜7ページ、RECRUIT月額19,900円が8〜12ページです。税別、最低契約6ヶ月、初回は3ヶ月分の先払いになります。月額にはスマートフォン対応、月3回までの更新、SEO、SSL、サーバーとドメインの管理が含まれます。

よくある質問

文字は大きくすればするほど見やすくなりますか

限度があります。大きすぎると1画面に入る情報が減り、スクロールの回数が増えます。読める大きさを確保したうえで、情報の順番を整えるほうが効果的です。

配色はどう決めればよいですか

ロゴや会社の色を基調にし、背景と文字のコントラストを確保してください。色数を増やすほど、どこが大事か分かりにくくなります。強調に使う色は1色に絞ると整います。

スマートフォン対応だけ先に直せますか

今のサイトの作りによります。部分的な調整で済む場合と、構造から作り直す必要がある場合があるため、現状を見てもらってください。

見やすくすれば問い合わせは増えますか

必ず増えるとは言えません。そもそも検索で見つかっていない場合は、見やすさを直しても訪問者が増えないためです。原因を切り分けてから手を付けてください。

他社のサイトを参考にしてもよいですか

参考にする価値はあります。ただし同業だけでなく、自分が使いやすいと感じたサイトも見てください。なぜ使いやすかったかを言葉にすると、制作会社に伝わりやすくなります。

まとめ

見やすいホームページの条件は、読める、探せる、押せる、待たされないの4つです。デザインの好みより、探しているものに何手でたどり着けるかが体感を決めます。

スマートフォンの最初の画面には、何の会社か、どこで営業しているか、次に何ができるかを置いてください。先に出すべき情報は業種によって変わります。

点検は自分の端末で開くところから始められます。社外の人に開いてもらい、どこで止まったかを聞くと、社内では気づけない問題が見つかります。