この記事はAdvent Calendar 2015における、Webデザインセオリー二日目の記事です。
全体的なレイアウトに対する視線誘導
Webデザインに限らず、デザインにおいて視線誘導はとても大事で、レイアウトで取り入れられるZ型、F型といったグーテンベルク・ダイヤグラムが有名ですよですね。
グーテンベルク・ダイヤグラム
グーテンベルク・ダイヤグラムは、「均一に配置された同質の情報を見るときの視線の流れのパターン」である。グーテンベルク・ダイヤグラムでは媒体を4つ のエリアに分割し、上方左側を「最初の視覚領域」、下方右側を「終着領域」、上方右側を「強い休閑領域」、下方左側を「弱い休閑領域」とする。
IDIA.JPより「Zの法則、Fの法則」 http://www.idia.jp/report/the-law-of-z-and-the-law-of-f/
Z型・・・視線が左上から右へ流れ、その後左下から右へ流れる形がアルファベットのZに似ているためこう呼ばれています。
このブログでも本文の下に設置している、Relatedのブロックで採用しているのですが、Webデザインではよくあるレイアウトの一つですよね。要素を順番に見ていくことで、自分に関係のある情報かを判断していきながら見ていく視線になります。
F型・・・視線が左上から始まるのはZ型と変わりませんが、視線が左から右へ流れた後、元の開始位置より少し下側から視線が始まり、以降それを繰り返します。
ポータルサイトのような情報量が多いサイトでは、こういった視線の流れから、ざっと全体を通して目線を流すことで、どういった情報が掲載されているのか？を抽象的に捉え、自分に関係のある情報があるかの判断を行います。
これらはWebサイトの全体的なレイアウトを考えるときに採用する考え方で、主にトップページやカテゴリページなどをデザインする際にこれらを活用し、ユーザーの求めるコンテンツへの動線（バナーやテキストリンクなど）を配置していきます。
ランディングページなどのコンテンツで考える視線誘導
ここ数年で、コンテンツが大事！という言葉をやたらと耳にするようになりました。
コンテンツが大事なんて当たり前の事じゃないか？と思うのですが、そもそもWebサイトを持ちたいという企業の声は、昔から「自社の行っているコンテンツを世間に知らせていきたい！」という考え方からサイトを持つのではなく、下記の理由が多かったかと思います。
- 名刺代わりとして、会社の住所や連絡先をインターネット上で見れるようにしたい
- 自社で販売している商品、仕入れしている商品を売りたい
- 周りの会社がホームページを作り出しているから、うちもそろそろ。
この考え方からWebサイトを作る！となるので、最近のように「まずコンテンツ！」という考え方があまりなかったかと思います。（もちろん全ての会社がそうとは言いませんが）
ちょっと話が脱線しましたが、では、コンテンツを知らせていこう！商品を売っていこう！という時に単にサイトに写真を貼って、説明文を入れて・・・というだけでは中々売れませんよね。
それらをうまく達成していくためには、ユーザーの関心を引き込む必要があり、その為にやはり、デザインが欠かせない要素になってきます。
デザインを作ってみる
デザインがどのような考え方で作られるかがわかるように、サンプルを作りました。
今回、とあるハウスクリーニングさんのランディングページを想定して作ってみました。
作業の丁寧さを訴求できるように、実際に作業している写真を載せ、さらに、説明文を文字を大きくして入れました。
また、親しみを与えるために、堅いイメージを与えるフォントは使わず、柔らか目のフォントを採用し、ビジュアルにイラストを採用してみました。
しかし、このデザインでは殺風景な印象が強いのと、写真を並べて文字を置いただけなので、訴求力が弱いですよね？
さらに、業者さんに依頼するユーザーにとってみると、このデザインでは人に任せても大丈夫という安心感があまり感じられません。
ですので、このデザインを元に訴求力を上げる為のブラッシュアップを行います。
現時点での課題をもう一度まとめると
- 親しみを与える印象付けの施策が強すぎる？
- 写真が小さいので訴求力が弱い
- 安心感が少ない
これを考慮して・・・
どうでしょうか？
親しみを込めるための施策はイラストを採用するだけにしました。あまり大きくある必要もないので、見出しの横にさりげなく置く程度にし、代わりに人物の写真を配置することで安心感を訴求できるようにしました。
また、文字の種類を硬い印象を与えるものに変更することで、人物の写真とあいまって、信頼感を与えるビジュアルに仕上げました。
また作業風景の写真は、端までいっぱいに広げて大きく見せるようにし、見る人への訴求力を一層引き上げるようにしました。
ここまででかなり印象は変わったと思いますが、このデザインでは視線誘導を考慮していません。
ですので、これに視線誘導を入れると・・・
こんな感じになりました。
今回考えたのは以下の様なポイントになります。
他にももっと考えることはあるんですが、今回はひとまずここまでとします。
デザインで大事なのは、どのパーツをどのように見せ、コンテンツ全体を見せるのか？という部分です。
僕が今回のサンプルで考えたのは、安心感と信頼感を与えながら、いかにしてユーザーに訴求するか？です。
今回はサンプルですので、この程度の長さですが、実際のランディングページのようなコンテンツは、どうしてもユーザーに訴えるものが多く、ページが縦に長くなっていきます。
制作するのも大変ですが、あまりに長いページは、読み手に対してストレスを与えてしまうため、どうしても途中で離脱されやすくなります。
しかし、途中で離脱される＝コンバージョンに直結しない
ということになるので、こういったページは、いかにユーザーの視線誘導を促し、ユーザーの興味をページに持たせ続けることが出来るか？が重要になります。
その為、Webデザインにおいて視線誘導は、非常に重要な役割を担っていると考えられます。
これらをしっかり考えられるように、日頃から他のランディングページなどを研究して、しっかり視線誘導の技を身に着けたいですね。
以下はランディングページをまとめているサイトです。
- ランディングページ集めました ｜ http://lp-web.com/
- ランディングページWebデザインクリップ｜ http://lp.webdesignclip.com/
- ランディングページブックマーク ｜ http://www.landingpage-link.jp/
お役に立てたらお願いします🙇
Comments