interface design

インターフェイスデザイン講座
2008.12.11
インターフェイスデザイン講座合同会社CGFM
1

序章
講義の流れ
2

第1章デザインは何故必要か？
序章講義の流れ
第2章デザイン・ルールについて
第3章快適なインターフェイスに必要なもの
講義まとめ
質疑応答
（休憩）
3

第1章
デザインは何故必要か？
4

ユーザーが
快適に
迷わずに
ミスなく
操作できるようサポートするため。
5

システムありきで管理画面の
インターフェイスを設計してしまうと…
システムの設計から
導かれた画面遷移
ユーザー
インターフェイス
操作の完了
6

システムありきで管理画面の
インターフェイスを設計してしまうと…
システムの設計から
ユーザー
操作の完了
操作ミスエラー
イライラ
次は
どうすれば
いいの？
6

ユーザーありきで管理画面を設計することで…
ユーザー視点で
ユーザー
操作の完了
7

ユーザーありきで管理画面を設計することで…
ユーザー視点で
ユーザー
操作の完了
ミス減少
次は
こうすれば
いいのね
7

インターフェイスに求められること
8

迷わせない1
8

迷わせない1
2
8

迷わせない
ミスを防ぐ
1
2
8

迷わせない
ミスを防ぐ
3
1
2
8

快適な操作性
迷わせない
ミスを防ぐ
3
1
2
8

迷わない道の条件
迷わせない1
9

交通整理されていること
迷わせない1
9

迷わないインターフェイスの条件
迷わせない1
9

迷わないインターフェイスの条件
情報整理されていること
迷わせない1
9

システム
ユーザー
迷わせない1
10

システム
情報整理が必要
ユーザー
迷わせない1
10

システム
迷わせない1
11

システム
ユーザーの自然な行動に基づいた
情報デザイン
迷わせない1
11

システム
情報デザイン
必要な情報の
取捨選択
迷わせない1
導線の整理
11

システム
迷わせない1
情報デザイン
12

システム
迷わせない1
情報デザイン
ビジュアルデザイン
レイアウト
フォント言葉遣い
アイコン配色
情
報
量
の
減
少
12

ミスを防ぐ2
コンテンツ面でのフォロー
13

ミスを防ぐ2
操作説明（ヘルプ）を充実させる
13

ミスを防ぐ2
操作説明（ヘルプ）を充実させる
ミスしそうな箇所に
注意書きや操作のヒントを掲載する
13

もしミスした場合でも、
焦らずに訂正できるような仕組みがあると尚良いです。
ミスを防ぐ2
14

どこをミスしたのか、
きちんとエラー表示する
ミスを防ぐ2
14

どこをミスしたのか、
きちんとエラー表示する
前の画面に戻った時に、
再入力させない。（入力の手間）
ミスを防ぐ2
14

快適な操作性3
迷わず、ミスを誘発しない
インターフェイスであれば
最低限の快適さは確保できます。
15

快適な操作性3
16

感性、心理的な面の印象を良くすることで
快適さを提供することが可能です。
配色レイアウトフォント
快適な操作性3
16

第2章
デザイン・ルールについて
17

6つの要素に分けて解説します。
18

6つの要素に分けて解説します。
レイアウト1
配色2
色3
フォント4
言葉遣い5
アイコン・ピクトグラム6
18

レイアウト1
人の目線の流れを考える。
19

レイアウト1
人が処理できる情報量の
限界を考慮する。
情報を載せすぎてもダメ。
20

レイアウト1
人が処理できる情報量の
限界を考慮する。
情報を載せすぎてもダメ。情報の取捨選択が必要。
20

レイアウト1
情報の重要度に合わせて強弱をつけ、
可読性を高める。
21

レイアウト1
全部読まないと
理解できそうに
ないなぁ…
21

レイアウト1
全部読まないと
理解できそうに
ないなぁ…
見出しで
大まかな内容は
把握できるね
21

配色2
色の三属性
22

配色2
色相明度彩度
色味
明
る
さ
色の三属性
鮮
や
か
さ
22

配色2
色の面積の
ツボをおさえて
バランスよく
23

配色2
色の面積の
ツボをおさえて
バランスよく
ベースカラー
アソートカラー
アクセントカラー
70％程度
20∼30％程度
5％程度
23

配色2 色の面積
24

配色2 色の面積
ベースカラー
彩度の低い色（白、淡いグレー、ベージュなど）
アソートカラー
ベースカラーと同系色で濃いめの色
アクセントカラー
ベースカラー・アソートカラーと色相で
反対側の色。
強調したい箇所に使う。多用してはダメ。
24

色3
色の文法を活用する。
色の持つイメージ、お約束
25

色3
色の文法
赤
危険
情熱
黄
注意
陽気
緑
安全
自然
青
指示
冷静
26

フォント4
27

フォント4
1画面で使用するフォントの種類は絞る
強調する箇所は太めのゴシック系で
フォント独自のイメージを利用
27

4
フォント
28

4
堅さ、力強さ
美しい
美しい
ゴシック系
美しい
美しい
明朝系
エレガントさ
フォント
28

言葉遣い5
29

言葉遣い5
使用する用語を統一する
専門用語を多用しない
文章として成立させる
29

言葉遣い5
30

言葉遣い5
ユーザーが混乱する原因にもなります。
「TOP」「HOME」「ホーム」？
「新規作成」「新規追加」「新規登録」？
「上書き保存」「編集」？
よくある例
30

言葉遣い5
専門用語を多用しない
利用するユーザー層に
レベルを合わせた表現を心がける。
※どうしても必要な場合は、補足説明を入れる。
31

言葉遣い5
文章として成立させる
ユーザーが読んで「？」となる
文章になっていないかチェックする。
なるべく要点を押さえた簡潔な文章を心がける。
32

http://www.iconspedia.com/
33

34

直感的に操作を促す機能がある
「色のルール」を利用して
アイコンの意味付けを強化できる
フリーのアイコン集等を
利用するのも効果的
34

この辺で休憩しましょう
35

快適なインターフェイスに
必要なもの
第3章
36

システム
第1章でのおさらい
37

システム
情報デザイン
ビジュアルデザイン
第1章でのおさらい
37

38

ユーザーの自然な行動に基づく画面遷移1
画面に必要な要素の選定2
操作説明（ヘルプ）の充実3
38

ユーザーの自然な行動に基づく画面遷移
1
人の自然な行動を素人目線で考える
39

1
「素人力」
素人だったら、どう動くだろう？
を想像する力。
39

1
エラー回避の
仕組みを考える
ヒューマンエラー
の予測
素人目線から見えてくるもの。
「素人力」
素人だったら、どう動くだろう？
を想像する力。
39

1
可能であれば、ユーザビリティテストもお勧めです。
40

1
ユーザビリティテストで分かること
40

1
ユーザビリティテストで分かること
トライ＆エラーで画面設計を改良して
いいインターフェイスに仕上げていく。
エラーを起こしやすい箇所
導線の不備や無駄
40

画面に必要な要素の選定
2
その画面において
ユーザーに求める操作は？
という視点で要素を洗い出す
不要な要素は外す
不要な要素も含まれた
煩雑な画面
41

画面に必要な要素の選定
2
その画面において
ユーザーに求める操作は？
という視点で要素を洗い出す
不要な要素は外す
不要な要素も含まれた
煩雑な画面
必要な要素に絞って
すっきりした画面
41

操作説明（ヘルプ）の充実
3
操作手順、説明ガイドの準備
ミスしそうな箇所には注意書きなど
ミスをしても修正しやすい画面設計
（再入力の手間を省くなど）
42

理想的なインターフェイスは
「ヘルプ」を見なくても操作できる
操作説明（ヘルプ）の充実
3
43

講義まとめ
おわりに…
44

講義まとめ
45

講義まとめ
ユーザー視点を忘れずに（素人力）
色・配置のコツは身につけられる
引算が大事（色・文字・要素）
デザイナーをチームに入れる場合は、
仕様確定前の打ち合わせ段階からが理想。
45

ご清聴ありがとうございました。
46

interface design

Recommended

Recommended

More Related Content

Similar to interface design

Similar to interface design (20)

More from kazuko kaneuchi

More from kazuko kaneuchi (8)

interface design