interface design

インターフェイスデザイン講座

2008.12.11

インターフェイスデザイン講座　合同会社CGFM1

序章

講義の流れ


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

序章講義の流れ

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

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

講義まとめ

質疑応答

（休憩）


第1章

デザインは何故必要か？

4

ユーザーが

快適に

迷わずにミスなく

操作できるようサポートするため。



システムありきで管理画面のインターフェイスを設計してしまうと…

システムの設計から導かれた画面遷移

ユーザー

インターフェイス

操作の完了



システムありきで管理画面のインターフェイスを設計してしまうと…

システムの設計から導かれた画面遷移

ユーザー


操作の完了

操作ミスエラーイライラ

次はどうすればいいの？



ユーザーありきで管理画面を設計することで…

ユーザー視点で導かれた画面遷移

ユーザー


操作の完了



ユーザーありきで管理画面を設計することで…

ユーザー視点で導かれた画面遷移

ユーザー


操作の完了

ミス減少

次はこうすればいいのね



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




迷わせない1




迷わせない12




迷わせない

ミスを防ぐ

12




迷わせない

ミスを防ぐ

3

12




快適な操作性

迷わせない

ミスを防ぐ

3

12




迷わない道の条件


迷わせない1




交通整理されていること


迷わせない1





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


迷わせない1





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

情報整理されていること


迷わせない1


システム



ユーザー


迷わせない1


システム


情報整理が必要


ユーザー


迷わせない1


システム

インターフェイスに求められること第1章デザインは何故必要か？

迷わせない1


システム


ユーザーの自然な行動に基づいた情報デザイン


迷わせない1


システム



必要な情報の取捨選択


迷わせない1

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

導線の整理

11

システム


迷わせない1




システム


迷わせない1


ビジュアルデザインレイアウト


フォント言葉遣い

アイコン配色

情報量の減少




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





操作説明（ヘルプ）を充実させる





操作説明（ヘルプ）を充実させる

ミスしそうな箇所に注意書きや操作のヒントを掲載する




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


ミスを防ぐ2




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


ミスを防ぐ2




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

前の画面に戻った時に、再入力させない。（入力の手間）


ミスを防ぐ2



快適な操作性3

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




快適な操作性3



感性、心理的な面の印象を良くすることで快適さを提供することが可能です。

配色レイアウトフォント

快適な操作性3


第2章

デザイン・ルールについて

17

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



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


レイアウト1配色2色3フォント4言葉遣い5アイコン・ピクトグラム6



レイアウト1

人の目線の流れを考える。



レイアウト1人が処理できる情報量の限界を考慮する。

情報を載せすぎてもダメ。



レイアウト1人が処理できる情報量の限界を考慮する。

情報を載せすぎてもダメ。情報の取捨選択が必要。



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




全部読まないと理解できそうにないなぁ…




全部読まないと理解できそうにないなぁ…

見出しで大まかな内容は把握できるね



配色2色の三属性



配色2

色相明度彩度

色味明るさ

色の三属性


鮮やかさ

22



配色2

色の面積の

ツボをおさえてバランスよく

23



配色2

色の面積の

ツボをおさえてバランスよく

ベースカラー

アソートカラー

アクセントカラー

70％程度

20～30％程度

5％程度

23


配色2 色の面積



配色2 色の面積ベースカラー彩度の低い色（白、淡いグレー、ベージュなど）

アソートカラーベースカラーと同系色で濃いめの色

アクセントカラーベースカラー・アソートカラーと色相で反対側の色。強調したい箇所に使う。多用してはダメ。



色3

色の文法を活用する。

色の持つイメージ、お約束



色3色の文法

赤

危険情熱

黄

注意陽気

緑

安全自然

青

指示冷静



フォント4



フォント4

1画面で使用するフォントの種類は絞る

強調する箇所は太めのゴシック系で

フォント独自のイメージを利用



4フォント独自のイメージを利用

フォント



4フォント独自のイメージを利用

堅さ、力強さ

美しい美しい

ゴシック系

美しい美しい

明朝系

エレガントさ

フォント



言葉遣い5



言葉遣い5

使用する用語を統一する

専門用語を多用しない

文章として成立させる



言葉遣い5使用する用語を統一する



言葉遣い5使用する用語を統一する

ユーザーが混乱する原因にもなります。

「TOP」「HOME」「ホーム」？

「新規作成」「新規追加」「新規登録」？

「上書き保存」「編集」？

よくある例



言葉遣い5専門用語を多用しない

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



言葉遣い5文章として成立させる

ユーザーが読んで「？」となる

文章になっていないかチェックする。

なるべく要点を押さえた簡潔な文章を心がける。



アイコン・ピクトグラム6

http://www.iconspedia.com/インターフェイスデザイン講座　合同会社CGFM

33

http://www.iconspedia.com

http://www.iconspedia.com



直感的に操作を促す機能がある

「色のルール」を利用してアイコンの意味付けを強化できる

フリーのアイコン集等を利用するのも効果的


この辺で休憩しましょう

35

快適なインターフェイスに必要なもの

第3章

36

システム


第1章でのおさらい

37

システム


ビジュアルデザイン


第1章でのおさらい


37



ユーザーの自然な行動に基づく画面遷移1

画面に必要な要素の選定2

操作説明（ヘルプ）の充実3

38



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

39




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

39




エラー回避の仕組みを考える

ヒューマンエラーの予測

素人目線から見えてくるもの。

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

39



ユーザーの自然な行動に基づく画面遷移1可能であれば、ユーザビリティテストもお勧めです。

40




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

40




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

トライ＆エラーで画面設計を改良していいインターフェイスに仕上げていく。

エラーを起こしやすい箇所

導線の不備や無駄

40



画面に必要な要素の選定2その画面においてユーザーに求める操作は？という視点で要素を洗い出す

不要な要素は外す

不要な要素も含まれた煩雑な画面

41



画面に必要な要素の選定2その画面においてユーザーに求める操作は？という視点で要素を洗い出す

不要な要素は外す

不要な要素も含まれた煩雑な画面

必要な要素に絞ってすっきりした画面

41




操作手順、説明ガイドの準備

ミスしそうな箇所には注意書きなど

ミスをしても修正しやすい画面設計（再入力の手間を省く　など）

42



理想的なインターフェイスは「ヘルプ」を見なくても操作できる


43

講義まとめ

おわりに…

44

講義まとめ


講義まとめ


ユーザー視点を忘れずに（素人力）

色・配置のコツは身につけられる

引算が大事（色・文字・要素）

デザイナーをチームに入れる場合は、仕様確定前の打ち合わせ段階からが理想。

45

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

46

質疑応答タイム

47

interface design

Design