最短で確実に稼げるブログ作成を目指しています

視線の動きを意識したレイアウトで高アクション率を実現する方法!

WRITER
 




この記事を書いている人 - WRITER -
ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです!(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

ブログ記事を書く時に、見出しや画像の配置に悩んだことがあるのではないでしょうか?

最適な配置に迷ったときには、見る人の「視線の動き」を考慮した適切なレイアウトにすることが、より高いアクション率を実現するためにも大切です。

今回は、「視線の動き」を意識したページ作りについての解説です。

 

視線の動きの代表的なパターン

 

ねぇ、akiさん。ブログ記事を書く時に、レイアウトに悩んじゃうんですけど、いい方法ってありますか?

あやっぴ

うん、よく聞く悩みだね。画像の配置やレイアウトに困った時には、「視線の動き」を参考にするといいよ。まず、代表的な「視線の動き」のパターンを説明するね!

aki

 

記事が長文になってくると、テキストや画像、そして申し込みボタンなどのレイアウトによっては、訪問者の目的のアクションをする率が大きく変わってきます。

 

このレイアウトに関しては、利用データや人間工学の観点からさまざまな説が唱えられています。

ここでは、代表的な「視線の動き」のパターンを3つ紹介しましょう。

 

 

▲コンテンツを読む際の利用者の視線の動きを図式化した、代表的な3パターンです。

利用者の視線の動きは、コンテンツの量と性質によって変化します。

 

コンテンツの特徴と視線の動き

 

では、次は各パターンの説明をしていくね!

aki

 

 

短く均質なコンテンツで見られるグーテンベルグ・ダイヤグラム

 

グーテンベルク・ダイヤグラムは、本や雑誌などの出版物を念頭に置いたパターンです。均等に配置された同質のコンテンツを読む際の視線の動きを図式化しています。Webでは、対策のページを開いたとき、スクロールなしで一覧できるぐらい短く、均質なコンテンツに限り、グーテンベルク・ダイヤグラムに従った視線の動きが予想されます

▲視線は左上から右下に移動します。

 

 

斜め読みが難しいコンテンツで見られるZパターン

 

Zパターンは、グーテンベルク・ダイヤグラムよりコンテンツ量が多く、縦スクロールを利用して読み進んでいく際の視線の動きのパターンです。Zパターンは細かく繰り返されることが多く、これは横書きの文章を1行1行読んでいく視線の動きと同じです。Zパターンはある程度しっかりと端から端まで読んでもらえることが予想される、斜め読みが難しいコンテンツで見られる視線の動きといえます

▲視線の軌跡がアルファベットのZを描き、一般的にはその動きが繰り返されます。

 

 

多くのコンテンツで見られるFパターン

 

Fパターンは、Zパターン同様にコンテンツ量が多く、縦スクロールを利用して読み進んでいく際の視線の動きです。ただし、Zパターンとは異なり、流し読みする際の視線の動きになります。基本的にWebコンテンツは端から端まで読まれることはなく、また、スクロールなしでコンテンツの全体が見えることも少ないので、FパターンがWebコンテンツを見る際の、一般的な視線の動きになります

▲視線が下に進むにつれて右方向への動きが少なくなることで、視線の軌跡がアルファベットのFを描きます。

 

スポンサーリンク

 

視線の動きに対応したレイアウトとは?

 

どんなパターンも左上から視線がスタートするので、まずはアイキャッチ画像を設置し、ページのテーマなど、必ず見せたいタイトルは左上に設置しましょう。また、コンテンツのスタート地点には関連したイメージ画像を表示して視線を誘導し、自然な流れでコンテンツを読み始められるようにします。

申し込みボタンなどのアクションに誘導する要素は、グーデンベルグ・ダイヤグラムとZパターンで視線が終わる右下に配置しましょう。一方で、視線が右下にいかないFパターンでは、できるだけページの右上に配置し、下の方に配置したい場合は左寄り、もしくは左右を貫くように配置しましょう。

 

 

 

視線を誘導する工夫をしよう

 

 

サイト利用者の視線を誘導する場合、最も一般的なのは、文字の大きさを変えたり、色や枠囲い、背景色を付けたりして視線を誘導する方法です

ただ、赤や黄色などの目立つ色は視線を誘導する力を持ちますが、利用時には注意が必要です。

それは、横書きのWebコンテンツでは文の流れに合わせ視線も左から右に動くため、視線を引く目立つ色が左端にないと、その要素より左側の要素は、読んでもらえないというリスクがあります。

目立つ色はなるべく左端におき、水平上のコンテンツが読み飛ばされることのないようにしましょう。

視線の動きから、アクションを誘導する要素は左に配置した方が良いとされますが、右手でマウスを操作する場合、カーソルが画面の右に寄るので、アクションを誘導するボタンは右に置いた方が良いという意見もあります。

akiさん、サイト利用者の視線の動きって、レイアウトを考える上でとっても大切なんですね。私も、これからは視線の動きを考慮して配置を考えていきますね!

あやっぴ

視線の動きを理解してくれたようだね。頑張ってどんどん記事を書いていこうね!

aki

 

 

まとめ

 

サイト利用者の視線の動きは、「グーテンベルグ・ダイヤグラム」「Zパターン」「Fパターン」に分類されます。

視線の動きに対応したレイアウトを取ることが大切です。

視線の動きを考慮した適切なレイアウトは、より高いアクション率を実現します。

ここまで、お疲れ様でした。

 

稼げるブログ!

開設方法からSEO対策・収益化までを徹底解説!

しかも、無料で配布しています。

あのWordPressを初心者でも、開設から収益化まで分かりやすくまとめ上げた豪華E-bookです。

是非この機会に、無料でゲットしてください。

しかも!!

今だけ、『超豪華特典』が付いています。

詳しくは、E-bookの最後で。

 

 

あのWordPressの開設から集客・収益化がオンラインで学べる!

WPマーケティングスクール

 

初心者ではハードルが高いと言われるWordPressの初期設定から運営まではもちろん、専門的知識がなくても集客・収益化を学ぶことができます。

WPマーケティングスクールでは、初心者でも自分のペースで学ぶことができ、『正しい方法』を学び実践し続けることで必ず成果が出ます。

 

 

 

今なら、1か月無料!⇩

 

fuwaruyurariおすすめWordPressテーマ

 

 

 

この記事を書いている人 - WRITER -
ふわりゆらりという楽しくも厳しいライフスタイルを送っているブロガーです!(笑)人の何十倍も楽しい人生を送るために、絶対やるべきこと。。やったらいいこと。。やっといたほうがいいこと。。などいろいろ書いてます。

SNSでもフォローお願いします!

 

Facebook

 

 カテゴリー一覧

 

初期設定

>>絶対導入するべき【WordPressプラグイン】導入方法と設定まで!

WordPressを始める場合に、これだけ入れておけば大丈夫というプラグインの紹介と設定方法を解説しています。まず、最初に導入して設定しておきましょう。

★おすすめ記事★

 

SEO対策

>>Googleアナリティクス登録・設定!【All in One SEO pack】に連動する方法!

ブログ運営していくうえでの必需品です。初心者にとっては少し難しいと言われますが、分かりやすく解説しています。是非最初に設定しておき迷う。

★おすすめ記事★

 

設定方法

>>【初心者】WordPressの始め方、”エックスサーバー契約と独自ドメイン”設定方法

WordPressを始めるには、サーバー契約が必要です。おすすめサーバー契約から設定方法まで詳しく解説しています。なぜ「エックスサーバー」がお勧めなのかも読めばわかります。

★おすすめ記事★

プラグイン

>>WordPressのバックアップ!サーバー会社だけに依存は危険?

バックアップはとても重要です。契約サーバー会社によっては有料・無料でやってくれますが、もしもの時を考えるとやはり自分で対処しておくのがお勧めです。

★おすすめ記事★

記事について

>>最後までブログ記事を読んでもらうための構成法

読者さんに記事を最後まで読んでもらうことで初めて集客ができます。そのためには、文章の構成がとても大切になってきます。この記事を読んで記事の構成について理解しましょう。

★おすすめ記事★

アフィリエイトについて

>>Amazonアソシエイトの登録方法!審査が通るのは簡単

みなさんブログを始めたらAmazonアソシエイトに登録しておきたいのではないでしょうか。登録方法とちょっとしたアドバイスを記事にしてみました。

★おすすめ記事★

便利ツール

>>商用利用ができる「Facebookページ」の作成方法【最新版】

ソーシャルメディア時代と呼ばれる現在、ブログ運営においてもFacebookは必需品ともいえますね。ここでは商用利用ができる「Facebookページ」の作成方法を解説しています。

★おすすめ記事★

趣味について

>>なぜ単独行(単独登山)をするのか?一人で山に登ること

趣味の登山について記事を書いてみました。このサイトのコンセプトには関係ないですが、暇なときに読んでみてくださいな。

★おすすめ記事★

  •  
  •  
  •  







Copyright© fuwariyurari , 2019 All Rights Reserved.