人間中心設計を知ろう！ ～知っておくと役立つ「視覚誘導」編

UIやUXデザインで大事な「人間中心設計」ですが、
ではその「人間中心設計」とは何なのか、また「人間中心設計」をするにはどうしたらいいのか、
今後数回にテーマをわけてお話していきたいと思います。

今回は「視覚誘導」編になります。
（ちょっと長いですが最後までお付き合いいただけると幸いです…）

人間中心設計とは？

UXやデザインの勉強を進めていると、「人間中心設計」という言葉を目にすることがあります。
「人間を中心とした設計」と読み取れますが、一体どんな内容なのか概要を説明します。

人間中心設計とは

人間　＝　ユーザー　を中心としたモノ作り

です。

 

人間中心設計の国際規格では、

システムの使い方に焦点を当て、人間工学やユーザビリティの知識と技術を適用することにより、

インタラクティブシステムをより使いやすくすることを目的とするシステム設計と開発へのアプローチ

引用：人間中心設計の国際規格ISO9241-210:2010のポイント（7ページ目）

とされています。

 

要は、「人間にとって使いやすいようにシステムを作りましょう」ってことです。

 

人間中心設計には6つの原則があります。

引用：人間中心設計の国際規格ISO9241-210:2010のポイント（8ページ目）

 

サービスを利用している人の目的や状況に合わせたデザインを、
エンジニア・デザイナー・ディレクターみんながユーザー目線で、
ユーザーに評価を求めては改善するを繰り返しより良いシステムをつくる

というところから、この6つが定められています。

 

簡単ではありますが、以上が人間中心設計についての概要になります。

 

今回は人間中心設計をするにあたり、UI設計で大事な「視覚誘導」という一点にテーマを絞り、
「画面の見やすさ」とは何かをお伝えしたいと思います。

 

「視線を誘導する画面」をつくる

ユーザビリティ（使いやすさ）の向上はシステムの操作性で決まります。
操作性を良くするために重要なのが、「ストレスなく視線を誘導できるかどうか」です。

「視覚誘導」を知って、ユーザーにとって情報が取得しやすい画面を作成できるようになりましょう。

 

では、今からその「視覚誘導」についてお話をしますが、
まずこちら2つの画面設計を見比べてください。

ウェブメディアサイトを前提とした画面になります。

どちらの画面の方が情報が「わかる」でしょうか？

…

「右」ですよね？

左と右の比較を上げてみました。

役割わけや配置で差があるように感じます。
右は、グループ分けや情報の関連付けがしっかりできているから見やすいですね。

 

では、どういった点が見やすいのか、
見やすさのポイントを5つ上げてみました。

1.視線の誘導
人間は画面があると左上から情報を見るようになっています。
そのため左上に重要な要素を置き、
右・下に移動するにつれて重要度を下げていくと自然に情報を読むことができます。

2.レイアウトの整理
ヘッダー、サイドメニュー、リスト、画像というようにレイアウトを整理し、
情報の階層を明確に示すと、ユーザーが求めているコンテンツを探しやすくなります。

3.一貫性の維持
ユーザーインターフェース全体で一貫性を維持することが大切です。
ビジュアル的な一貫性、ブランドの一貫性、アクションの一貫性などがあります。
「よくあるパターン」であることも重要です。

4.カラーとコントラスト
場面にあった色を使い、背景とのコントラストを高めることで視認性を向上させます。
また色を使ってグルーピング化も可能です。
需要度の高いものは色が濃い・明るい・鮮やかな程、目に付きやすい色を選ぶと効果的です。
（赤っぽい暖色や黒地であれば白に近い）

5.シンボルとアイコン
シンボルやアイコンを使用すると、情報を視覚的に示します。
例えば、ゴミ箱アイコンは削除アクションを示し、虫眼鏡アイコンは検索を示します。

 

このポイントを抑えた画面であれば、「視覚誘導」ができているといえます。

 

視覚誘導とは？

視覚誘導とは、

ユーザーの視線の流れをコントロールし、誘導すること

です。

 

視覚誘導の目的は、
正しく配置領域の設計を行い

ユーザーの視線移動をサポートすること

ユーザーに情報を認知してもらうこと

になります。

 

簡単に言うと、「見る順番を意図的にコントロールしよう」ということです。

 

視覚誘導のメリット

視覚誘導を意識して設定するとどんな効果があるのか、
視覚誘導のメリットを5つ上げました。

1.情報の整理と階層化
視覚誘導は情報を整理し、階層化するのに役立ちます。
画面上で重要な要素を際立たせ、ユーザーにとって最も重要な情報に焦点を当てることができます。
これにより、ユーザーは情報の重要性や関連性を理解しやすくなります。

2.ユーザーナビゲーションの向上
UI内で視覚的な案内を提供することで、ユーザーがアプリケーション内をスムーズに移動できるようになります。
メニュー、リンク、ボタンなどの要素を適切に強調し、ユーザーが希望する操作を迅速に実行できるようになります。

3.ユーザーエラーの減少
視覚誘導を使用することで、ユーザーが誤ったアクションを起こす可能性を減少させることができます。
明確なデザインとユーザーフィードバックを提供し、ユーザーが正しい操作を選択できるようになります。

4.ユーザー体験の向上
視覚誘導によって、ユーザーが直感的に操作でき、情報を理解しやすくなります。
ユーザーがポジティブなエクスペリエンスを持つ可能性が高まり、快適な使い勝手を提供できます。

5.目立つコールトゥアクション
主要なアクションやコールトゥアクションを視覚的に強調することで、ユーザーに特定の行動を促すことができます。
これは、コンバージョン率の向上につながります。

 

視線誘導が正しく行われると、ユーザーはストレスなく画面を見ることができます。
また見て欲しい情報から、順番に視線が止まるように設定し、徐々に他の情報に移るように設計すれば、
確実に情報を覚えてもらえます。

 

視覚誘導の法則

ここまではなんとなく知ってる・わかってるポイントも多かったと思います。
では、視覚誘導には法則があることはご存知でしょうか？
今回はUIデザインで役立つ視覚誘導を10種ご紹介します。

 

グーテンベルク・ダイヤグラム

こちらは人の視線移動のパターンを示す指標の1つです。
活版印刷技術の発明者である、ドイツのヨハネス・グーテンベルク氏の名前からつけられました。

同じ種類の情報が均等に配置されている場合、
人の視線は基本的に「左上から斜め下方向」に向かって移動する傾向があります。

上方左側が「最初の視覚領域」、下方右側が「終着領域」、
上方右側が「強い休閑領域」、下方左側が「弱い休閑領域」とされています。

覚えてほしい情報をバラバラに配置すると、ユーザーが読み飛ばしてしまう可能性があるため、
重要な要素を上方左側の「最初の視覚領域」から下方右側を「終着領域」に向かって入れておくことがポイントです。

休閑領域には関連情報を配置すると良いでしょう。

 

この後に紹介する法則もこのグーテンベルク・ダイヤグラムの考え方が基本となっていますので、
頭の隅に置いた上で読んでもらえればと思います。

 

Z型

左上→右上→左下→右下の順に移動するパターンです。
情報の強度が均一である場合に成り立ちます。

Z型は視線が止まるポイントがあるため特にWEBサイトに効果的です。
（バナー広告やチラシなどでもよく用いられる）

新規のユーザーが、初めて触れるデザインや全体の構成を見るときは、
Z型に視線が流れるため、WEBサイトのトップページなどは「Z型」レイアウトになっていることが多いです。

 

 

F型

記事などのテキストが多い読み物や、リスト、SNSなどを見る時に多い視線の動きです。

最も重要な情報は一番目に留まりやすい一番上に、
その次に重要なものは「その右隣」に配置することでスムーズに読むことができます。

F型の欠点は、下の方にいくにつれ、内容が読み飛ばされる可能性は高くなっていきます。
（2006年にアメリカの工学博士ヤコブ・ニールセンが研究結果として発表）

 

N型

縦書きレイアウトで採用されることの多いパターンです。
雑誌や新聞など右開きの紙媒体によく用いられます。
「和」を強調したデザインや、ビジュアルメインで情報量が少ない場合に効果的です。
（特にユーザーの年齢層が高い場合は縦書きの方が馴染みがあるので、N型を検討するのも良い）

線を目で追う

人は線を目で追う傾向があります。（漫画の集中線もその一つ）
線でオブジェクトが結ばれていると、関連する情報であることが強調され、
スムーズな視線の流れが生まれます。矢印も同じです。
線で結ばれていなくても、テーブルリストのように線で区切られていたり囲われていたりすると、
情報を関連付けて見ることができます。

大→小　太い→細い

人は大きい塊に目が惹きつけられ、順に小さいものへと視線が移動します。
大きくすればするほど目を引く可能性が高くなります。これをジャンプ率と言います。
重要である・見せたい情報は左上に大きく（太く）見せると効果的です。
ジャンプ率の利用により、画面全体に活性化をもたらすことができます。
（はみ出るぐらい大きいと背景と化し無視されるため、必要以上に大きくしないことがポイント）

 

数の順序

人は数字が書いてあると無意識に順を追うものなので、
数字で視線を誘導することができます。
要素が整列されていない場合には、数字をふることで順序を明確に示すことができます。
数字をふっていたとしても、ユーザーが予測した先に予測した数字が無いと、
混乱を招きストレスを与えてしまうので注意が必要です。

同形・同色

均一に情報が配置されたとき、
人は無意識に同形、同色を探し出し視線を移動させ、一つのグループとして捉えます。
同じようなコンテンツの数が多いときに同形、同色で並べると効果的です。
複数の色を使わずに色数を2～3色に限定することで、
効果的に視線を集中させることができます。（メイン70％・サブ25％・アクセントカラー5％が一般的）
上から下、大から小の視覚誘導が使えない場合、同形が有効的になります。

余白接近

デザイン基本四原則にも「接近」があるように、
余白接近はデザイン性を高める効果と情報を伝えやすくする役割があります。
人の視線は無意識に近くにある要素同士を見てしまう習性があるため、
関連する要素は接近させることでグルーピングが可能です。
情報をグルーピングすることで、可読性を高めることができます。
隣接するものに目を移しやすいので、最も視覚誘導しやすい手法とも言えます。

人物の目線・口先

人には無意識に、第三者の目線の方向を向いてしまう習性があります。
これは実写の人物だけでなく、イラストや動物の目線にも効果があります。
人物やイラストの素材を使用する際は、
目線や口の向く先に伝えたい情報を配置しましょう。

 

 

以上が視覚誘導の法則パターンになります。

 

まとめ

視覚誘導についてポイント、法則の種類を知ったところで、もう一度最初のデザインを見てみましょう。

左：

画面の中で「マイページ」は、
重要度が高い要素ではないので、左上に位置するのはふさわしいでしょうか？

今のままだとtitle、favorite・fany・awardに関連性があるように見えてしまいますが、
本当にこの配置が正しいのでしょうか？

なんとなく情報がバラバラしているように見えるのは、

・全体としての流れもつかめない
　　F型やZ型が意識されていないので、情報をスムーズに追うことができない

・接近余白がないことでグルーピングされてなく、テキストと画像の関係性がわからない

・小さい画像が大きい画像内のことを表しているのであれば、視線の流れが行ったり来たりになってしまう

右：

全体はF型、コンテンツ内はZ型が意識されている

数字や色、余白・接近でグループ化されている

線で見せたい情報に視線が誘導されている

 

左と、視覚誘導が意識されている右の違いおわかりいただけましたでしょうか？
視覚誘導を駆使することで見やすさが断然変わってきますよね。

 

視覚誘導が正しく行われると、

・見るべき場所の順番が混乱せず、ストレスにならない

・伝えるべき情報が多くても、整理して伝えられる

・情報に優先順位をつけられ、アピールしたい商品やサービスを目立たせることができる

・ストレスなく画面を見られるので、ユーザーが途中で離脱することがなくなり、ページ滞在時間が延びる

 

今回は人間中心設計の中でも「視覚誘導」について深掘りしていきました。

視覚誘導がユーザビリティの向上に繋がることがお伝えできたかと思います。

視覚誘導を知っていれば、UI設計のみならず、バナーやプレゼンスライド、イラスト、写真、映像、漫画にも役立ちます。

みなさんもUI設計やデザインをする機会に、ぜひこの「視覚誘導」を意識してみてください！