今まで常識だと思っていた『いつも目にするWEBデザイン』は、人間本来がもつ知覚能力の限界や、認知心理学などのデータを用いて検証していくと、実は使いにくい・わかりにくいデザインだったことに気づかされることでしょう。 UIデザインの基本の基を改めて学び直す、論理的で理に適った「表現」とは何かがわかる2時間です。 キレイなデザインやカッコいいデザインだけじゃない、本当にユーザーの役に立つWEBデザインの仕掛けを理解できます。 毎月、東京神田で開催中！詳しくはこちらをご覧下さい。 東京開催：http://www.continue.jp/lectures/seminar20170121/ 大阪開催：http://www.continue.jp/lectures/seminar20170218osaka/

1. UIデザインの常識を改める「認知学から学ぶUIの基本」

2. 1. 人間はそもそも見える範囲に限界がある

3. 何かに集中しているほど回りが見えていない！

4. 人間が見ることができる有効な視野
適当な眼球
運動の範囲
色、輝度が変化する場合の
色の弁別限界
数、文字の語（ワード）の
意識限界
シンボルの
認識限界
中心視の
範囲
15°
15°
62°
62°
94°
94°
30～60°
30～60°
5～30°
5～30°
5～10°
0°
1°
1°
5～10°
700mm500mm
10°
15°
立体時差方向
座位時差方向
45°以上からの
直射光は気にならない
30°
40°
30°
45°
適当な眼球
運動の範囲
色が弁別
できる限界
視覚表示器の
最適視認範囲
70～80°
視野の下限
視野の上限
50～55°
特定非営利活動法人 人間中心設計推進機構「視野角と弁別能力」
http://www.hcdnet.org/hcd/course_01/04.php?page=2

5. ユーザビリティの世界では著名なヤコブ・ニールセン博士
ナビゲーションは宝探しではない。
行き先が曖昧なリンクを次々にクリックしながら
「ああでもない、こうでもない」と
気長につきあってくれるユーザはまずいない。
ユーザがサイトの構造を
積極的に理解してくれることはほとんどない。
また、こんなフレーズもある。
Jakob Nielsen（ヤコブ・ニールセン）
コペンハーゲンに生まれ、デンマーク工科大学を卒業。ベル研究所やIBMでの研究を経て、
1994年から1998年までサン・マイクロシステムズに勤め、ユーザビリティの分野で発明を行う。
1995年から自身のウェブサイト「useit.com」にてユーザビリティについてのコラム「Alertbox」を公開した。
1998年、ドナルド・ノーマンと共にニールセン・ノーマン・グループを設立。代表となる。
ユーザビリティのガイドラインとして、「ヤコブ・ニールセンの10ヒューリスティック」はあまりにも有名。
ヤコブ・ニールセン博士の主な邦訳著書

6. ヤコブ・ニールセン博士が提唱したＦ型の視線移動
ヘッダー情報 ヘッダー情報 ヘッダー情報
ナビゲーション情報ナビゲーション情報
Nielsen Norman Group F-Shaped Pattern For Reading Web Content
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

7. よ
り
重
要
顧
客
別
の
情
報
誰にで伝わる太い導線
特定ユーザー向け導線
リピーター限定導線
死角サイトロゴサイトロゴ直下の
もっとも
視線を引く場所
視線の移動距離が短いほど
太い導線として価値が高い
死角
視線移動の方向
ファースト
ビューの境界
凡例
メイン情報 画面の中心 関連情報
ヤコブ・ニールセン博士のアイトラッキング調査による57,453回もの視線の滞留の分析結果
http://u-site.jp/alertbox/page-fold-manifesto
ファースト
ビューの境界
セカンド
ビューの境界
スクロールの先でも注目される
視線移動と情報の見つけやすい場所

8. 画面 左側 画面 右側
今見ている視野
視線の先
進行方向
よく見えている
エリア
注視視野から遠くなるほど
見えにくい場所
濃度差など
コントラストが強い情報に
気づきやすい
（視線を引っ張りやすい）
視線の移動と逆になるため、
情報に気づきにくい
（死角になりやすい）
視線の移動方向周辺であれば、視線を誘導できる

9. 3. 短期記憶がカギになるWEB閲覧

11. ガトーショコラ チョコブラウニー
ティラミス
ミルクレープ チョコパイ
マカロン
クッキー
プリンアイスバーガー
ムース
アイスクリーム
▼お菓子のレシピ
11
チャンク
3
チャンク
チョコパイ
マカロン
クッキー
▼焼き菓子レシピ
3チャンク
プリン
アイスバーガー
ムース
▼アイス菓子レシピ
3チャンク
ガトーショコラ
チョコブラウニー
ティラミス
ミルクレープ
▼ケーキレシピ
4チャンク
マジカルナンバー（５±２）

12. 使わないナビゲーションを減らす
トップページ
製品情報
ニュース
リリース
企業情報
株主投資家向け
情報
採用情報
製品
ジャンル
製品
ジャンル
製品
ジャンル
製品
ジャンル
製品
ジャンル
頻繁に利用される
ローカルナビの移動
特定のディレクトリ間でしか
利用されないグローバルナビ
製品情報
トップページ
製品
ジャンル１
製品
ジャンル２
製品
ジャンル３
製品
ジャンル４
製品
ジャンル５
ニュース
リリース
企業情報
株主投資
家情報
採用
情報
一部ユーザーが利用する
カテゴリー移動ナビ
実際カテゴリー間を移動する
利用シーンは少ない
現実的なグローバルナビの
想定移動目的

13. ユーザー行動とナビゲーション
★目的の情報以外、能動的に他の情報は見ない
★画面の上だけにあるナビゲーションは使いにくい
★ローカルナビゲーションの役割が重要になるほど、
グローバルナビゲーションが不要になっていく
★ページ内でボタンが多数あっても、
その時、情報として不要なボタンは押されにくく
結果としてユーザーの混乱を招くだけになる
★もっともいい場所にあるナビゲーションを
もっとも利用頻度の高いツールにして上げる事が
ユーザーのわかりやすさに繋がる

14. 5. 男性と女性の意識の違い

15. 客観的 主観的
男性的な脳と女性的な脳では、根本的に考え方が違う
男性的な脳の考え方 女性的な脳の考え方
♥
自分を中心にして
捉える
主観的、
感情的に捉える
自分を俯瞰して
みられる
論理的、
客観的に捉える

16. 女性を意識した表現の自動車メーカーWEBサイト
日産 デイズ トップページ

17. 女性を意識した表現の自動車メーカーWEBサイト
日産 デイズ トップページ

18. 6. 誰でも使えるわけではない検索機能

19. 記録に残らないアクセスを見極めて、潜在的なニーズ探る
Webサイト
ターゲットユーザー
サイト利用者
サイトに辿り着いた
ユーザー
検索でヒット
しなかったユーザー
検索すら
しない
ユーザー
知りたい情報に
辿り着いたユーザー
内容がわからない
ユーザー
知りたいことが
見つけられない
ユーザー
表面的な利用方法に惑わされない

20. シンプルだからといって、すべての人が使えるわけではない。