個別ページ設計の考え方

個別ページ設計の考え方

せっかく訪れてくれたアクセス者には、ホームページのコンテンツをよく読んでもらいたいもの。そのためには、トップページ以外のページ(内部ページ)にもさまざまな仕掛けを施し、アクセス者を的確に誘導していく必要があります。

また、アクセス者が作成側の意図したようにコンテンツを読んでくれるとは限りません。そんなアクセス者を重要な情報へ誘導するために、内部ページではさまざまな仕掛けが必要。

こちらでは、内部ページの設計についてお話しいたします。

内部ページのファーストビュー

ファーストビューとは、そのページが表示されたとき、スクロールせずに見えている画面エリアのこと。アクセス者はこのファーストビューを見て、そのページを読み続けるかどうかを判断するため、ホームページの反応を左右する重要なエリアです。

内部ページのファーストビューを設計する際には、大きく次の3つのポイントに注意しましょう。

前のページのリンク文言の内容を目立つ場所に記載

アクセス者は、前のページにあるリンク文言をクリックして、そのページにやって来ます。たとえば、「節税対策について詳しくはこちら」という誘導リンクをクリックするときは、「ここをクリックすると節税対策の情報があるんだな」と思ってやって来るわけです。

それなのに、飛んだページの目立つところに「節税対策」という言葉がなかったら、「あれ?節税対策の情報が知りたかったのに、書いていないのかな?なーんだ、クリックして損した」そんな風に思って立ち去ってしまうかもしれません。

また、よく見かけるのが、「施工事例」というメニューをクリックしたのに、「こだわりの家づくり」という見出しが目に入ってくるような、サイドメニューの文言と飛び先のページの見出しがまったく違うケース。「事例を見ようと思ったのに、なんだ、違うページじゃないか」と一瞬で思われてしまいます。作り手から見れば同じ意味なのかもしれませんが、そんなことはアクセス者には伝わりません。

ですから、アクセス者がクリックしたリンク文言と同じ文言を、ファーストビューの目立つ場所に記載しましょう。「節税対策について詳しくはこちら」をクリックした先のページには「節税対策について」と記載し、「施工事例」をクリックした先のページには「施工事例」と記載するのです。もしも「こだわりの家づくり」という言葉を書きたいのであれば、「施工事例~こだわりの家づくり~」としたほうが良いでしょう。

よく読んでくれればちゃんと書いてあるから……と考えるかもしれませんが、初めて御社のホームページを訪れたアクセス者は、そこまでよく読んではくれません。パッと見てその情報がないと判断すれば、さっさと戻るボタンで立ち去ってしまいます。

ホームページの反応を大きく左右しますので、ぜひ、すぐに見なおしてみてくださいね。

ヘッダー画像の高さはなるべく低く

トップページでは、大きな画像やスライド動画をファーストビューに配置することがよくあります。これは、パッと見て何のホームページかわかるようにするなど、いくつかの重要な目的があるのですが、内部ページで同じことをするのは禁物です。

本来、スクロールせずにアクセス者の目に入るファーストビューは一等地。ですから内部ページでは、そこに大きな画像を配置するより、なるべく上の方にコンテンツ(文書など)を配置し、読んでもらうほうが得策です。

また、全ページ共通で高さの高いヘッダー画像を表示するのも禁物です。高さの高いヘッダー画像は、それだけでファーストビューの大半の面積を占めてしまいます。その結果、別のページへ切り替わったことに気づきにくくなり、「あれ?同じページなのかな?」とアクセス者を混乱させるリスクが高まるのです。きちんとページが切り替わっていることがわかるように、高さの高いヘッダー画像を全ページ共通で設定するのは避けましょう。

画像を置く

ファーストビューには必ず画像を置きましょう。いわゆる「アイキャッチ画像」ですが、これがあるかないかで、ページを読み続けてくれる可能性がだいぶ違ってきます。

ここに置く画像は、できればアクセス者が前のページでクリックしたリンク文言に関連したものが良いでしょう。人間の目は自然と画像に引き寄せられますので、リンク文言に関連した画像が目に入れば、それだけで無意識にページを読もうとするのです。

情報の関連性を視覚的に伝える

関連性のある情報は、ひとかたまりとして見せないとアクセス者の混乱を招きます。どこからどこまでがひとかたまりの情報なのか、視覚的にわかるようにしましょう。ここで言う「ひとかたまり」とは、関連する文書や画像のまとまりのことです。

そのためには、

  1. かたまりとかたまりの間は十分なスペースを取る
    スペースを空けることで、別のかたまりであることを視覚的に表現する。
  2. かたまりに「見出し」を付けて、見出しを目立たせる
    見出しの行頭にアイコンを置き、見出しの文字サイズを大きくすると目立つ。

といった工夫をしましょう。

重要な情報は、何度も記載する

ホームページの文書について会員さんから、「同じことをいろいろなページに何度も書くのはしつこい気がするので、一箇所にしか書かないようにしています」というようなお話をよく伺います。しかしホームページの場合には、重要なことを一箇所にしか書かない、というのはおすすめできません。

意図した順番では読んでくれない

まず、ホームページではアクセス者がどこからどんな順番で読んでくれるのかがわかりません。

本の場合は、前からページをめくって順番に読んでいくのが普通ですから、重要な情報が一箇所にしか書いていなくても、読者がその情報を見てくれる可能性は高いでしょう。しかしホームページの場合、アクセス者は好き勝手にリンクをクリックし、縦横無尽にいろいろなページを渡り歩きます。しかも1ページを上から下まで全部読んでくれるとも限りません。また、検索エンジンの検索結果からアクセスしてきた場合、そのページだけ読んで帰ってしまうこともよくあります。

このように、ホームページの内容をどこからどう読むかはアクセス者次第。重要な情報が一箇所にしか書かれていなければ、たまたまたどり着いた人以外は、重要な情報に気付かない可能性が高いわけです。このようなことを防ぐために、重要な情報は何度も繰り返し書き、さまざまなページに露出させるようにしましょう。

なお、「同じことを何度も書く」といっても、ページの文書をコピーして増やすのは絶対にNGです。検索エンジンから「重複コンテンツ」と見なされてペナルティの対象となってしまう可能性があります。

クリックしてもらえる保証はない

あるページで、ページ内のリンクがクリックされる確率は、高くても10%程度。「ここをクリックしてくれれば次のページに情報は載っているから……」などと考えても、実際にクリックする人は1割にも満たないのが現実。

ですから、アクセス者に見せたい重要な情報は、さまざまなページに露出しておきましょう。

「○○(重要な情報)はここをクリック」とリンクで飛ばすことも必要ですが、極端な話、アクセス者はそのページしか見てくれないかもしれない、という前提で作成します。

読者の「目線」を操作

文章だけが、ただずら~っと並んでいるページは、アクセス者からすると「読む気がしない」思われがち。なぜ「読む気がしない」と思われてしまうかというと、「どこに重要なことが書かれているのかがサッパリわからない」からです。

アクセス者は非常にせっかちですから、ぎっしりと書かれた文章を上から下までじっくり読んでなどくれません。「重要そうな箇所」だけを拾い読みしながら、自分の知りたいことを探し、自分に有益な情報が書かれていればその部分をじっくりと読む……ということをしています。ですから、要所要所で重要なフレーズを目立たせて、「ここで重要な話をしていますよ」というのをアクセス者に知らせるようにしないと、長い文書を読み続けてもらえません。

ここでいう「目線の操作」とは、読者に重要なことが書かれている場所を知らせて、コンテンツの内容を理解する手助けをしてあげることです。そうすることで、文書が長くても、ある程度読んでもらえるようになります。

画像を使った目線の操作

重要なフレーズを目立たせるのに役立つのが「画像」です。画像は人間の目線が留まりやすいため、画像の周辺に重要な情報を書いておくと、アクセス者に読んでもらいやすくなります。

たとえば、見出しの行頭にアイコンを置くと、アイコンに目線が集まり、自然と見出しを読んでもらえます。また、画像の下にキャプション(画像に添えた説明文)を付けるのも効果的。

画像は目が行きやすいため、伝えたい重要なメッセージをキャプションに含めておくようにしましょう。

文字装飾を使った目線の操作

重要なフレーズは、色をつけたり太字にしたりすることで、目線を集めることができます。

アクセス者はせっかちですから、「重要そうな箇所」だけを拾い読みしていることがよくあります。そのことを逆手にとって……というわけではありませんが、拾い読みしたときに重要な情報が伝わるように、文字装飾で目線を誘導するのです。

たとえば、文書内に赤文字の部分が散りばめられていると、拾い読みする読者は、自然とその赤文字を目で追っていきます。その結果、文書をすべて読まなくても、重要な情報だけは伝わるというわけです。

ただ、ここで気を付けたいのは、「過度の文字装飾」をしないということ。文字装飾は諸刃の剣。使い過ぎてしまうと本来目立たせたい語句が埋もれてしまい、どれが重要な箇所なのかわからなくなってしまいますので注意が必要です。

「トップページ以外のページ」の設計テクニックまとめ

内部ページのファーストビュー

前のページでアクセス者があると期待したページの内容をパッと見て伝えるとともに、文書を読み続けてもらえるようにする。

  1. 前のページのリンク文言の内容を目立つ場所に記載
  2. ヘッダー画像の高さはなるべく低く
  3. 画像を置く

情報の関連性を視覚的に伝える

共通の情報をかたまり(関連する文書や画像のまとまり)として認識させることで、読みやすくするとともに内容の理解を補う。

  1. かたまりとかたまりの間はスペースを空ける
  2. かたまりに「見出し」を付けて、見出しを目立たせる

重要な情報は何度も記載する

アクセス者はコンテンツをどこからどう読むかわからないため、重要な情報はできるだけ露出させる。

  1. 意図した順番では読んでくれない
  2. クリックしてもらえる保証はない

読者の「目線」を操作

画像や文字装飾を利用して、重要な情報にアクセス者の目線を誘導する。

  1. 画像を使って目線を操作
  2. 文字装飾を使って目線を操作

【あきばれホームページ】サポートセンター

※ホームページ運営やWEBマーケティング、SEO等に関する個別のご相談は承っておりません。ご了承下さい。

【あきばれホームページ】サポートセンター

03-5388-5985

受付時間 平日 9:30~11:30/13:30~17:00

FAX:03-6704-5229
Mail:help@akibare-hp.jp

ホームページのお引き渡しについて

お引き渡し後にご確認いただきたいことについて、説明しております。