creatersnest133

Webサイトを見る人の視線の動きを知って制作に活かそう!


“きれい”や”かっこいい”のWebサイト制作ではコンバージョンに繋がらない!
Webデザイナーが知っておきたいユーザーの視線の動き「Z」
視線の動きが分かれば紙媒体からのデザイナーもWebに転身が出来る!
ユーザーを誘導できる配置を検証してみました。

ユーザーの視線の動き「Zの方式」とは

Webデザイナーといっても元々は紙媒体からのデザイナーの転身が多く見受けられます。
デザイナーにとっては使用するソフトもIllustratorにPhotoshopと今までと変わらない作業です。
では、Webサイトは何が違うのか?
ここではWebサイト制作でもっとも重要な「視線」についてご紹介します。
紙媒体の広告でよく取り入れられていた「Zの方式」
人間の視線の動きは『Z』にモノを追って行くという方式でデザイナーの皆様はよく知られている方式です。
チラシや広告などの制作も左上にインパクトのあるものを配置する、一番伝えたいキャッチコピーを入れる。
といった王道のパターンがあります。
Webサイトも同様に「Zの方式」が応用されています。
でも紙とWebでは大きさや長さも違います。では、Webではどういったレイアウトになっているのでしょうか?

視線の動きを応用した「Zパターンレイアウト」とは

まずは、「Zの方式」をご存知ない方のために「Zの方式」について説明します。
Zの方式とはその名の通りアルファベットのZのように視線が動くというもので、左上から水平に右に視線が動き、
斜め左下に移動して、さらに水平に右に動くというものです。

http://ja.wix.com/(テンプレートを加工)

このように方式に従ってレイアウトすることをZパターンレイアウトと言います。

ただし、チラシや広告などは通常A4サイズなどが一般的ですので、「Z」で完結してしまうこともありますが、
Webサイトは下へ下へスクロールしていきます。ランディングページになると、A4で例えるなら2〜3枚くらい、
それ以上になるページもあります。
では、ランディングページのような長い場合はどういった視線の流れになるのでしょうか。
その場合も、Zの動きを繰り返して下へ下へ降りて行きます。
こちらは「ジグザグレイアウト」と呼ばれています。ですが、基本は「Z」の動きです。

Webサイトの視線の動きをクリック数で検証

では、実際に視線の動きは法則通りに動いているのでしょうか?
それを検証するのは数字で見るとよく分かります。
WebサイトではGoogleアナリティクスなどを用いてクリック数を見ることができます。
最近はWEBデザイナーもきれいやかっこいいなどのデザインの要求だけではなく、アナリティクスのように
Web解析の知識も必要とされています。
ここでは、難しい解析の話ではなく、単純にクリック数で視線の動きを判断してみます。
まずは、実際のサイトで実験的に行ったバナーの数字をご紹介します。

web001

こちらのサイトでは12個のバナーを横4、縦3で配置していました。
デザイン的には色もサイズも12個ほぼ似たようなものですが、内容はすべて違います。
数ヶ月このままで数字を取ってみました。
実際のクリック数を順位で表してみると図のようになりました。

web_004

左上が1番クリック数が多く、次は右に移行、右上からは左下に流れ右下が次に多く表示されています。
「Zの方式」は数字上でも証明されるくらい信用度のあるレイアウトのようです。
ちなみに左上の1(海外旅行)と2(国内旅行)を入れ替えてまた数ヶ月見てみると1(海外旅行)より2(国内旅行)
の方がクリック数があがり、左上が1番視線に入ることが検証できました。
1番クリックして欲しいバナーは左上に配置するのがベストのようです。
※クリック数=目線とは限りませんが今回はひとつの捉え方として紹介しました。

まとめ

この法則でWebサイトを見る人の視線の動きが分かれば制作に活かせます。
視線上に重要なコンテンツの配置をしてコンバージョンに繋げましょう。
Webサイトでは実際のクリック数をアナリティクスで見れるため視線の動きを数字という形で把握することができます。紙媒体では印刷してしまうとその後、修正はできません。Webサイトは数字を見て修正・改善していくこともできます。
ユーザーの視線の動きを理解して見ている人を誘導できるようなWebサイトを育てていきましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


yamatama

紙面のデザイナーからWebデザイナーに転身。紙媒体とWebの違いに戸惑いながら制作・Web解析を学んできました。 現在はフリーで活動中。 一児の母(小学生の娘)

Next Article見出しにぴったりなリボン素材まとめ