Design デザイン・UI

 
スマホデザイン・UI

【Webデザインの参考に】視線誘導の3つのパターン+スマホサイトギャラリー4選

a0001_009265_m
スマホサイトのデザインを考える際、何を指標とすべきでしょうか。そのサイトの目的、特性によって考え方はさまざまですが、今回はユーザーの視線の動きに配慮したデザインの考え方として、「視線誘導」の3つのパターンを紹介します。

「視線誘導」とは、絵画、写真、映画、漫画などの世界の専門用語で、画面を眺める者の視線の流れをスムーズに誘導するための技術の総称です。もちろんWebデザインでも使われる言葉で、ユーザビリティの優れたデザインをつくるために重要な要素です。
「視線誘導」のパターンを理解して、スマートフォンサイトデザインの参考にしてみてはいかがでしょうか。

まずは1つめ「グーテンベルグ・ダイアグラム」

視線が左上から右下へながれることを利用した考え方「グーテンベルグ・ダイアグラム」。テキストの比重が高いコンテンツや画像が均等に並んでいるページ(グリッドデザインなど)では、このレイアウトが最も多いパターンです。
001
縦長で横書きのコンテンツは左上から右下へ、日本語のように縦書きのものでも、上から下へ視線が移っていきます。人が生まれたときからこのように視線が動くということではなく、読書などの習慣から刷り込まれている動きなんだそうです。比喩的に「読書重力(ReadingGravity)」とも呼ばれます。

たとえば、左側のサイトは縦書き、右側は要素を均等に配置したサイトですが、視線の流れは自然と左上〜右下、上〜下に移りますね。
 
gIMG_1974

(左)先輩社員が語る29のことば|東京一番フーズ (右)remy | お腹の底から幸せになろう。

「グーテンベルグ・ダイアグラム」のポイント

・重要な情報は左上、中央、右下に配置する。
・右上と左下に注目を集めたいコンテンツを置くと、目立たなくなる恐れがある。

2つめ、昔から重宝されている「Z型」

チラシや雑誌などで意識的に活用されているパターンで、内容をしっかり読んでもらいたい時に有効です。
002
グーテンベルグ・ダイアグラムとの違いは、視線が止まるエリアがあるという点。Zの終わりに「購入」などのリアクションボタンを設置するサイトで効力を発揮します。

たとえば、左は商品名→値段や入札額→「入札する」のリアクション順に、右は画像→本文→リアクションボタンの順にZ型に配置されています。
 
zリ

(左)モバオク! (真ん中)ナースハッピーライフ (右)tumblar

「Z型」のポイント

・テキスト⇒画像⇒テキストのように、シンプルな構成のデザインに向く。
・「Z」を下に繰り返すことでジグザグパターンとしても応用できる。

3つめ、ニュースアプリなどでよく見かける「F型」

最近のニュースアプリなどでよく使われているのが、この「F型」です。
003
2006年にUI研究の大家、Jakob Nielsen博士が発表。画像付きリストで構成されているWebサイトは視線が「F」の字に動きます。左側の要素やテキストはよく見られるが、右側に位置するテキストは読み飛ばされる傾向があるそうです。
横組みのWebサイトなどは視線が「F」の字に動きます。ヒートマップで確認するとよくわかります。
ここで言うヒートマップとは、専用の機械を使って視線を可視化したものです。色が赤いほどユーザーが凝視し、青色に向かって視線の動きが少ない場所として色が付きます。まったく見られていないところは無色になります。
 
f_reading_pattern_eyetracking

F-Shaped Pattern For Reading Web Content

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

ニュースアプリのように、見出しの短い文章が連続しているものは、さっと全体の情報を見渡すことができ、必要な部分のみじっくり読み込んでもらいたいタイプのサイトデザインにぴったりです。

たとえば・・・
f

(左)twitter (真ん中)コードアワード (右)ログミー[o_O]

「F型」のポイント

・重要な情報は一番上の段に水平に配置すると効果的。
・最後まで読まれないことが多いので注意。

ほかの視線誘導のパターン

ほかにも、デザインの小技として活用できそうな視線誘導のルールを2つ紹介します。

視線は大きいものから小さいものへ

まず大きいものへ視線は動き、その後小さいものへ移ります。画像だけではなく、テキストに対しても同じです。
スクリーンショット 2015-04-24 15.52.36

ユーザーは数字の順番に読んでいく

006


たとえ不自然な並びでも、数字が記されていればその順番に読みます。ただ、視線の先に予想していたものがないことはユーザーにとってストレスや不安につながります。

早速ギャラリーサイトを参考にしてみよう

一般的に良いとされているスマホサイトを、「視線」の動きに意識して参考にしてみましょう。あなたはまずどこを見ていますか?

スマートフォンサイトのデザインリンク集 sps collection

スマートフォンサイトのデザインリンク集 sps collection
1ページに120件までの表示が可能なスマホサイトのキャプチャギャラリー。気になったキャプチャはブックマークして、bookmarkページで、まとめて閲覧できるのもポイントです。

スマートフォンサイトのデザインリンク集 sps collection

http://spscollection.com/

Mobile Awesomeness

Mobile Awesomeness
世界中のスマホサイトを点数をつけて評価しているギャラリーサイト。高得点のサイトがなぜその評価に至ったのか、考えてみるのもいいかもしれません。英語ですが、サイト内に評価の基準も紹介されています。

Mobile Awesomeness

http://mobileawesomeness.com/

UltraUI | UI Design Inspiration

UltraUI   UI Design Inspiration
こちらは、アプリUIのデザインパターン集。アプリは使いやすさを重視し、視線の動きやUIを意識してつくられているので、サイトデザインに使えそうな手法もあります。

Mobile Awesomeness

http://ui.theultralinx.com/

MobileMozaic, a gallery of the very best designed iphone applications

MobileMozaic  a gallery of the very best designed iphone applications
こちらもアプリデザインを集めたギャラリー。「Business」や「Food&Drink」などカテゴリーが豊富なので、作りたいサイトに合わせてどんなデザインが好まれているかチェックしてみると参考になるかもしれません。

MobileMozaic, a gallery of the very best designed iphone applications

http://www.mobilemozaic.com/

Pinterest の 「hi-posi Inc. mobile-design」

Pinterest の 「hi posi Inc. mobile design」
ギャラリーのすべてを閲覧するにはサイト登録が必要ですが、国内のみのスマホサイトを紹介しているサイトです。更新頻度が高いのが特長。

Pinterest の 「hi-posi Inc. mobile-design」

https://www.pinterest.com/mobileDesignJp/

過去にも優良なギャラリーサイトをまとめた記事があります。
下記も合わせてチェックしてみてください。

【まとめ】webデザイナー必見! スマホデザインの参考になるサイト

いかがでしたでしょうか?
漠然と良さそうなデザインを目指すのではなく、「視線」の動きに配慮したサイト設計を行うことで、より良いWebデザインを構築してくださいね。

タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事