トップページは役割を考えて作る｜育つホームページの作り方-08
ranacoホームページ作りのヒントをお伝えするシリーズ。
これまでお伝えしてきたことはコチラ。
[/aside]
目次
トップページは「玄関」
「7. 見やすいページはメリハリが決め手」で個々のページがひとまず形になりました。
次は「トップページ」を作ります。
ホームページはあなたのお店、トップページはその入り口（玄関）です。
多くの人が最初にこの玄関を通ります。
それゆえ、重要な役割を担っています。
第一印象は３秒で決まる
「第一印象は３秒で決まる」と言われています。（メラビアンの法則）
ホームページも第一印象が大事。
読んでもらえるか？そのままページを閉じられてしまうか？を大きく左右します。
第一印象というと、見た目の美しさやテイストといったデザイン面ばかりに気が行きがちですが、もちろんそれも大切です。
しかし、ユーザー（閲覧者）側にとっては、それ以上に重視しているポイントがあります。
自分に関係があるホームページなのか
あなたのホームページを訪れたユーザーが、求めているものは何でしょうか？
「知りたい情報が得られそうか」
「悩みを解決してくれそうか」
「自分にメリットはあるか」
など、自分に関係があるかどうかをトップページを見て判断します。
それが瞬時にわからなければ、たとえトップページ以外の場所にソレがあったとしても、ページを離脱してしまう可能性が大きくなります。
瞬時と言うのは、時間にして３秒。
メラビアンの法則と同じです。
- ターゲットは誰なのか
- 何について書かれたページなのか
- どんなことが得られるのか
- メリットは何か
といったことを真っ先に、わかりやすく伝えなければいけません。
それらは、ヘッダー画像からスクロールして３秒で見られる範囲に集約しておけるといいですね。
どこにその情報が載っているか
求めているものを探すため、ユーザーの目線はトップページのヘッダー画像から順に、下へ下へと移っていきます。
この場合、初見ではトップページを熟読することはありません。
上から下にサーッと素早くスクロールしながら、自分の求めているものがあるかどうかを探します。
あなたもユーザー側の立場になると、同じではありませんか？
つまり、トップページに求められるのは
- 「簡潔さ」
- 「探しやすさ（見つけやすさ）」
- 「目的地への明確な動線」
です。
よく、トップページにダラダラと長く熱い想いやコンセプトを書いているのを見かけますが、これは大NG！
それをやっていいのは１ページ完結のランディングページだけです。
トップページではあくまでも「目次」と「道案内」程度にとどめておき、「導入文を数行書く→リンク先でじっくり読ませる」というパターンにしておきましょう。
運営者側が見せたいものが、必ずしもユーザーが見たいものであるとは限りません。
的確なページ誘導（リンク）
トップページでユーザーが「このホームページは自分に関係がある」と認識したら、その詳細が書かれたページにリンクで誘導します。
文字や画像にリンクを貼る場合、「リンクが貼られている」と一目見てわかるようにしておかなければいけません。
リンクの文字色
たとえば下の５つの文字列うち、パッと見てリンクが貼られていると思うのはどれでしょうか？
- ワードプレスレッスン詳細
- ワードプレスレッスン詳細
- ワードプレスレッスン詳細
- ワードプレスレッスン詳細
- ワードプレスレッスン詳細
実は、４以外はリンクが貼られています。
３と４で迷ったのではないでしょうか？
ホームページ内でリンク文字色を統一しておけば、パッと見て分かりやすいことがおわかりいただけたと思います。
リンクボタン
もう１つ例をご紹介します。
下の画像は、当教室のトップページの一部、サービスメニューへの誘導リンクです。
①～③のそれぞれをパッと見て、どの部分にリンクが貼られていると判断できますか？
①・②・③とも、上の画像にリンクが貼られています。
②と③は、薄茶の背景の長方形にもリンクが貼られています。
おそらく、②または③のほうが、リンクされていることがわかりやすいのではないでしょうか？
では、②と③ではどこが違うでしょう？
上の画像の右端に「≫Click」という文字が有るか？無いか？の違いです。
薄茶の背景の長方形は「クリックできるボタン」だと分かりやすいと思います。
でも、「ワードプレスレッスン」と書かれた横長の画像は、「クリックできるボタン」だとわかりにくい人もいるかもしれません。
リンクを分かりやすく
このように、ユーザーの判断を迷わせないためにも、
- リンク文字色
- リンクボタンのデザイン
- リンク画像のデザイン
を、ホームページ内で統一しておいた方が良いですね。
ページの表示速度の問題
ページの読み込み速度が遅いと、ユーザーはイライラして待てずにページを離脱してしまいます。
その時間、やはり３秒と言われています。
ページの読み込みが遅い原因として考えられるのは
- データ容量の大きな画像の多用
- 読み込みが遅い外部ウィジェットの使用
- サーバーの処理能力
- ブラウザの問題
- インターネットの速度
といった様々なことがあります。
作り手側として注意しなければいけないのは上の２つ。
特に、画像は注意が必要です。
高解像度のキレイな写真をヘッダーに使いたいからといって、データ容量の大きいまま載せてしまうと、ユーザーのネット環境によっては読み込みに時間がかかってしまいます。
適度にリサイズして使うようにしましょう。
※サーバーの処理能力については、ワードプレス作成の場合、上位プランを契約することで解消される場合があります
まとめ
ホームページの顔ともいえるトップページは、ユーザーがその先のページを読んでくれるかどうかを大きく左右する大事な場所です。
雑誌と似ているかもしれません。
表紙と巻頭の目次を見て、買うか買わないかを決めたことはありませんか？
- ターゲットを明確にする
- どんなことが書かれているページなのか簡潔に知らせる
- 他の詳細ページに素早く誘導する
といったことが求められます。
そして、大事なことなのでもう一度繰り返します。
トップページに熱い想いやコンセプト・説明文をダラダラ長く書くと、かえってユーザーの離脱率を挙げる結果になりますので、ほどほどに。
[aside type=”normal”]育つホームページの作り方
NEXT→「9. 足して引いて集めて繋げる」
BACK→「7. 見やすいページはメリハリが決め手」
[/aside]
