Smartphone スマホ

 
スマホデザイン・UI

【Webデザイナー必見!】視線誘導の3つのパターン&スマホサイトギャラリー4選

・「視線誘導」を取り入れたサイトは、実用性が高くて使い勝手もいい!
・基本は、「グーデンベルグ・ダイアグラム」、「Z型」、「F型」。
・人間の特性(?)を活かした、使える小ワザも使いこなしたい!

ユーザーが見やすく、使いやすいスマホサイトのデザインを考える際に、注意すべきポイントがあります。

そのサイトの目的、特性によって考え方はさまざまですが、今回はユーザーの視線の動きに配慮したデザインの考え方として、

「視線誘導」

の、3つのパターンを紹介します。

「視線誘導」とは、絵画、写真、映画、漫画などの世界の専門用語で、画面を眺める者の視線の流れを、スムーズに誘導するための技術の総称です。

もちろんWebデザインでも使われる言葉で、ユーザビリティの優れたデザインをつくるために重要な要素です。

「視線誘導」のパターンを理解して、スマートフォンサイトデザインの参考にしてみてはいかがでしょうか。

その1 左上から右下へ!基本の「グーテンベルグ・ダイアグラム」

人間の視線が、左上から右下へ流れることを利用した考え方が、「グーテンベルグ・ダイアグラム」です。テキストの比重が高いコンテンツや、画像が均等に並んでいるページ(グリッドデザインなど)では、このレイアウトが最も多いです。

縦長で横書きのコンテンツは左上から右下へ、日本語のように縦書きのものでも、上から下へ視線が移っていきます。

人は、生まれたときからこのように視線が動くというわけではなく、読書などの習慣から、刷り込まれている動きなんだそうです。

「読書重力(ReadingGravity)」とも呼ばれます。

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

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

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

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

その2 むかしから重宝されている「Z型」の使い勝手がいい!

チラシや雑誌などで意識的に活用されているパターンで、内容をしっかり読んでもらいたい時に有効です。

グーテンベルグ・ダイアグラムとの違いは、視線が止まるエリアがあるという点です。

Zの終わりに、「購入」などのリアクションボタンを設置するサイトで、効力を発揮します。
たとえば、左は商品名→値段や入札額→「入札する」のリアクション順に、右は画像→本文→リアクションボタンと、Z型に配置されています。

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

「Z型」のポイント

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

その3 ニュースアプリでよく見かける「F型」は読ませるタイプ

最近のニュースアプリなどでよく使われているのが、この「F型」です。

2006年にUI研究の大家、Jakob Nielsen博士が発表。画像付きリストで構成されているWebサイトは視線が「F」の字に動きます。

左側の要素やテキストはよく見られるが、右側に位置するテキストは読み飛ばされる傾向があるそうです。

横組みのWebサイトなどは視線が「F」の字に動きます。ヒートマップで確認するとよくわかります。
ここで言うヒートマップとは、専用の機械を使って視線を可視化したものです。

色が赤いほどユーザーが凝視し、青色に向かって視線の動きが少ない場所として色が付きます。

まったく見られていないところは無色になります。

F-Shaped Pattern For Reading Web Content
http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

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

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

「F型」のポイント

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

おまけ デザインの小ワザとして使える、視線誘導パターンのルール

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

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

まず大きいものへ視線は動き、その後小さいものへ移ります。画像だけではなく、テキストに対しても同じです。

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

たとえ不自然な並びでも、数字が記されていればその順番に読みます。

ただ、視線の先に予想していたものがないことはユーザーにとってストレスや不安につながります。

見て学ぶのが一番!とっても参考になるギャラリーサイトへGO!

 

一般的に良いとされているスマホサイトを、「視線」の動きに意識して参考にしてみましょう。

あなたはまずどこを見ていますか?

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

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

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

http://spscollection.com/
Mobile Awesomeness

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

UltraUI | UI Design Inspiration

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

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」
https://www.pinterest.com/mobileDesignJp/

 

過去にも優良なギャラリーサイトをまとめた記事があります。
下記も合わせてチェックしてみてください。
【まとめ】webデザイナー必見! スマホデザインの参考になるサイト

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

まとめ・視線誘導を取り入れて、見た目も実用性も高いサイト作りを

いかがでしたでしょうか?

基本の3パターンは必ずおさえておきたいですね!

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

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事