ホームページやブログを作って、読んでほしい情報もきちんと載せた。それなのに、問い合わせや登録につながらない。読んでほしいところが、そもそも読まれていない気がする。そんな悩みを持っている方は多いです。
こういうとき、文章を書き足したり、デザインを変えたりしたくなります。でも、その前に確かめたいことがあります。読者の目が、ページのどこを通っているかです。
結論から言うと、ウェブサイトを見るとき、人は無意識のうちに、ある程度決まった方向に視線を動かしています。いちばん大事なものは、いちばん見られる場所に置く。そして、その置き方が合っているかを、アクセス解析で確かめる。この2つをセットで行うと、読んでほしいところが読まれるページに近づきます。
この記事では、ウェブサイトの3つの要素、視線の動き方、最初に見られる場所に何を置くか、そして解析で確かめる手順をお伝えします。
ウェブサイトは、文章・画像・動画の3つでできている
ホームページもブログも、突き詰めると、文章・画像・動画の3つの要素でできています。
| 要素 | 得意なこと |
|---|---|
| 文章 | 考え方や手順を、順番に正確に伝える |
| 画像 | ひと目で雰囲気や人柄、全体像を伝える |
| 動画 | 話し方や表情まで含めて、距離を縮める |
この3つのバランスが、ページの魅力を決めます。文章だけのページは、読む前に「長そうだ」と感じられてしまうことがあります。反対に、画像や動画ばかりでは、何を伝えたいのかがぼやけます。
たとえば、考え方をじっくり伝えたい記事なら文章が中心になり、人柄を知ってもらいたいプロフィールのページなら写真や動画の比重が大きくなります。ページの目的によって、ちょうどいい割合は変わります。
どれか1つを増やせばいいのではなく、読者の目がどこを通るかを考えて、それぞれを置く場所を決めていきます。
読者の視線は「左上」から動き始める
ウェブサイトを見るときの視線の動き方には、よく知られている考え方が2つあります。「Fの法則」と「Zの法則」です。
| 法則 | 視線の動き方 |
|---|---|
| Fの法則 | 左上から右へ進み、少し下がってまた右へ。そのあとは左側を縦にたどる。アルファベットのFを描くような動き |
| Zの法則 | 左上から右上へ進み、斜めに左下へ降りて、また右へ。アルファベットのZを描くような動き |
2つの動き方は違いますが、共通していることがあります。どちらも、最初に目が行くのは左上だということです。 私たちがふだん、文章を上から下へ、左から右へと読んでいることを考えると、自然な動きだといえます。
ブログの場合に、この視線の動きをふまえて何をどこに置けばいいかは、ブログ訪問者の視線(Zの法則・Fの法則)と配置の決め方で詳しく解説しています。この記事では、ブログに限らず、ウェブサイト全体で考えるときのポイントを見ていきます。
最初に見られる場所に、何を置くか
左上、そしてページの一番上は、読者が最初に見る場所です。ここに何を置くかで、読者が読み進めるかどうかが大きく変わります。
ただし、置くべきものは、ページの目的によって違います。
| ページの種類 | 最初に見られる場所に置きたいもの |
|---|---|
| ホームページのトップ | 誰の、どんな悩みを解決するのかが一言で分かる言葉と画像 |
| ブログの記事 | 記事の題名と、この記事で何が分かるか |
| ランディングページ | 読者が「自分のための話だ」と感じるキャッチコピー |
| プロフィールのページ | 顔が分かる写真と、何の専門家かが分かる肩書き |
共通しているのは、最初に見られる場所には、「このページは自分に関係がある」と読者が感じるものを置くということです。ここで関係がないと感じられると、どれだけ下に良い情報があっても、読まれる前に閉じられてしまいます。
画像と動画は、視線を引く力が強い
画像や動画は、文章よりも先に目に入ります。視線を引く力が強いのです。
この力は、使い方しだいで良くも悪くも働きます。
- 左上にインパクトのある写真を置くと、読者の目をページに引き込める
- 読んでほしい文章の横に画像を置くと、その文章に目を向けてもらいやすい
- 反対に、目的と関係のない画像を目立つ場所に置くと、読者の注意がそちらに取られる
たとえば、ホームページのトップに、きれいな風景の写真だけを大きく置いたとします。見た目は整いますが、読者は「何のページなのか」が分からないまま、写真を眺めて終わってしまうかもしれません。
画像は、読者の目を「読んでほしい場所」へ運ぶために使います。ランディングページで画像を使うときの考え方は、LPの反応を上げる「画像」の力でまとめています。
法則は「仮説」。実際の読まれ方は解析で確かめる
Fの法則もZの法則も、多くの人に当てはまりやすい考え方です。ただ、あなたのページを訪れる読者が、いつもその通りに動くとは限りません。スマートフォンで見る人が多ければ、画面は縦に一列で流れていきますし、読者によって関心のある場所も違います。
そこで役に立つのが、アクセス解析です。Googleアナリティクスのように、無料で使える解析の道具もあります。解析を入れておくと、たとえば次のようなことが分かります。
- どのページが、いちばんよく見られているか
- 読者が、どこから訪れているか
- どのくらいの時間、ページにとどまっているか
- パソコンとスマートフォンの、どちらで見られているか
視線の法則で「こう見られるはずだ」と考えて置き、解析で「実際にどう見られたか」を確かめる。 この順番で進めると、思い込みで作り直すことがなくなります。
昔は専門の業者にお金を払って調べてもらっていたような情報も、今は自分の好きなときに確かめられます。解析の設置と、最初に見る数字については、アクセス解析を設置して解析できるようにしようで解説しています。
ページを見直す手順と、よくある失敗
今あるページを見直すときは、次の順番で進めてみてください。
- そのページの目的を一文で書く(登録してもらう、問い合わせてもらう、など)
- ページを開いて、左上と一番上に何が置かれているかを確かめる
- そこに「読者が自分に関係あると感じるもの」があるかを見る
- 目的と関係のない画像や動画が、目立つ場所を取っていないかを見る
- スマートフォンでも開いて、最初の画面に何が見えるかを確かめる
- 置き方を変えたら、しばらく解析の数字を見て、変化を確かめる
よくある失敗もまとめておきます。
| よくある失敗 | どう直すか |
|---|---|
| 一番上に、ロゴや飾りの画像だけを置いている | 誰の何のためのページかが分かる言葉を添える |
| 読んでほしい情報がページの下のほうにある | 大事なものから順に、上に置く |
| 目的と関係のない画像が目立っている | 画像は、読んでほしい場所へ目を運ぶために使う |
| パソコンの画面だけを見て配置を決めている | スマートフォンの最初の画面も確かめる |
| 法則だけを信じて、実際の数字を見ない | 置き方を変えたら、解析で変化を確かめる |
まとめ
- ウェブサイトは、文章・画像・動画の3つの要素でできている
- 読者の視線は、Fの法則でもZの法則でも、左上から動き始める
- 最初に見られる場所には、「このページは自分に関係がある」と感じるものを置く
- 画像と動画は視線を引く力が強い。読んでほしい場所へ目を運ぶために使う
- 法則は仮説。実際の読まれ方は、アクセス解析で確かめる
まずは、あなたのホームページやブログのトップを開いて、最初の画面に何が見えているかを書き出してみてください。そこに「誰の、どんな悩みのためのページか」が入っていなければ、そこが最初に直す場所です。


