Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

interface design

11,290 views

Published on

インターフェイスデザイン講義の資料です。
主な対象は業務支援システムを開発されている方です。

Published in: Design
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

interface design

  1. 1. インターフェイスデザイン講座 2008.12.11 インターフェイスデザイン講座 合同会社CGFM 1
  2. 2. 序章 講義の流れ インターフェイスデザイン講座 合同会社CGFM 2
  3. 3. 第1章 デザインは何故必要か? 序章 講義の流れ 第2章 デザイン・ルールについて 第3章 快適なインターフェイスに必要なもの 講義まとめ 質疑応答 (休憩) インターフェイスデザイン講座 合同会社CGFM 3
  4. 4. 第1章 デザインは何故必要か? 4
  5. 5. ユーザーが 快適に 迷わずに ミスなく 操作できるようサポートするため。 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 5
  6. 6. システムありきで管理画面の インターフェイスを設計してしまうと… システムの設計から 導かれた画面遷移 ユーザー インターフェイス 操作の完了 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 6
  7. 7. システムありきで管理画面の インターフェイスを設計してしまうと… システムの設計から 導かれた画面遷移 ユーザー インターフェイス 操作の完了 操作ミス エラー イライラ 次は どうすれば いいの? 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 6
  8. 8. ユーザーありきで管理画面を設計することで… ユーザー視点で 導かれた画面遷移 ユーザー インターフェイス 操作の完了 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 7
  9. 9. ユーザーありきで管理画面を設計することで… ユーザー視点で 導かれた画面遷移 ユーザー インターフェイス 操作の完了 ミス減少 次は こうすれば いいのね 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 7
  10. 10. インターフェイスに求められること 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 8
  11. 11. インターフェイスに求められること 迷わせない1 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 8
  12. 12. インターフェイスに求められること 迷わせない1 2 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 8
  13. 13. インターフェイスに求められること 迷わせない ミスを防ぐ 1 2 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 8
  14. 14. インターフェイスに求められること 迷わせない ミスを防ぐ 3 1 2 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 8
  15. 15. インターフェイスに求められること 快適な操作性 迷わせない ミスを防ぐ 3 1 2 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 8
  16. 16. インターフェイスに求められること 迷わない道の条件 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 9
  17. 17. インターフェイスに求められること 迷わない道の条件 交通整理されていること 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 9
  18. 18. インターフェイスに求められること 迷わない道の条件 交通整理されていること 迷わないインターフェイスの条件 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 9
  19. 19. インターフェイスに求められること 迷わない道の条件 交通整理されていること 迷わないインターフェイスの条件 情報整理されていること 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 9
  20. 20. システム インターフェイスに求められること インターフェイス ユーザー 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 10
  21. 21. システム インターフェイスに求められること 情報整理が必要 インターフェイス ユーザー 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 10
  22. 22. システム インターフェイスに求められること 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 11
  23. 23. システム インターフェイスに求められること ユーザーの自然な行動に基づいた 情報デザイン 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 11
  24. 24. システム インターフェイスに求められること ユーザーの自然な行動に基づいた 情報デザイン 必要な情報の 取捨選択 第1章 デザインは何故必要か? 迷わせない1 インターフェイスデザイン講座 合同会社CGFM 導線の整理 11
  25. 25. システム インターフェイスに求められること 迷わせない1 ユーザーの自然な行動に基づいた 情報デザイン 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 12
  26. 26. システム インターフェイスに求められること 迷わせない1 ユーザーの自然な行動に基づいた 情報デザイン ビジュアルデザイン レイアウト インターフェイス フォント 言葉遣い アイコン配色 情 報 量 の 減 少 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 12
  27. 27. インターフェイスに求められること ミスを防ぐ2 コンテンツ面でのフォロー 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 13
  28. 28. インターフェイスに求められること ミスを防ぐ2 コンテンツ面でのフォロー 操作説明(ヘルプ)を充実させる 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 13
  29. 29. インターフェイスに求められること ミスを防ぐ2 コンテンツ面でのフォロー 操作説明(ヘルプ)を充実させる ミスしそうな箇所に 注意書きや操作のヒントを掲載する 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 13
  30. 30. インターフェイスに求められること もしミスした場合でも、 焦らずに訂正できるような仕組みがあると尚良いです。 第1章 デザインは何故必要か? ミスを防ぐ2 インターフェイスデザイン講座 合同会社CGFM 14
  31. 31. インターフェイスに求められること もしミスした場合でも、 焦らずに訂正できるような仕組みがあると尚良いです。 どこをミスしたのか、 きちんとエラー表示する 第1章 デザインは何故必要か? ミスを防ぐ2 インターフェイスデザイン講座 合同会社CGFM 14
  32. 32. インターフェイスに求められること もしミスした場合でも、 焦らずに訂正できるような仕組みがあると尚良いです。 どこをミスしたのか、 きちんとエラー表示する 前の画面に戻った時に、 再入力させない。(入力の手間) 第1章 デザインは何故必要か? ミスを防ぐ2 インターフェイスデザイン講座 合同会社CGFM 14
  33. 33. インターフェイスに求められること 快適な操作性3 迷わず、ミスを誘発しない インターフェイスであれば 最低限の快適さは確保できます。 第1章 デザインは何故必要か? インターフェイスデザイン講座 合同会社CGFM 15
  34. 34. インターフェイスに求められること 第1章 デザインは何故必要か? 快適な操作性3 インターフェイスデザイン講座 合同会社CGFM 16
  35. 35. インターフェイスに求められること 第1章 デザインは何故必要か? 感性、心理的な面の印象を良くすることで 快適さを提供することが可能です。 配色 レイアウト フォント 快適な操作性3 インターフェイスデザイン講座 合同会社CGFM 16
  36. 36. 第2章 デザイン・ルールについて 17
  37. 37. 6つの要素に分けて解説します。 第2章 デザイン・ルールについて インターフェイスデザイン講座 合同会社CGFM 18
  38. 38. 6つの要素に分けて解説します。 第2章 デザイン・ルールについて レイアウト1 配色2 色3 フォント4 言葉遣い5 アイコン・ピクトグラム6 インターフェイスデザイン講座 合同会社CGFM 18
  39. 39. 第2章 デザイン・ルールについて レイアウト1 人の目線の流れを考える。 インターフェイスデザイン講座 合同会社CGFM 19
  40. 40. 第2章 デザイン・ルールについて レイアウト1 人の目線の流れを考える。 インターフェイスデザイン講座 合同会社CGFM 19
  41. 41. 第2章 デザイン・ルールについて レイアウト1 人が処理できる情報量の 限界を考慮する。 情報を載せすぎてもダメ。 インターフェイスデザイン講座 合同会社CGFM 20
  42. 42. 第2章 デザイン・ルールについて レイアウト1 人が処理できる情報量の 限界を考慮する。 情報を載せすぎてもダメ。 情報の取捨選択が必要。 インターフェイスデザイン講座 合同会社CGFM 20
  43. 43. 第2章 デザイン・ルールについて レイアウト1 情報の重要度に合わせて強弱をつけ、 可読性を高める。 インターフェイスデザイン講座 合同会社CGFM 21
  44. 44. 第2章 デザイン・ルールについて レイアウト1 情報の重要度に合わせて強弱をつけ、 可読性を高める。 全部読まないと 理解できそうに ないなぁ… インターフェイスデザイン講座 合同会社CGFM 21
  45. 45. 第2章 デザイン・ルールについて レイアウト1 情報の重要度に合わせて強弱をつけ、 可読性を高める。 全部読まないと 理解できそうに ないなぁ… 見出しで 大まかな内容は 把握できるね インターフェイスデザイン講座 合同会社CGFM 21
  46. 46. 第2章 デザイン・ルールについて 配色2 色の三属性 インターフェイスデザイン講座 合同会社CGFM 22
  47. 47. 第2章 デザイン・ルールについて 配色2 色相 明度 彩度 色味 明 る さ 色の三属性 インターフェイスデザイン講座 合同会社CGFM 鮮 や か さ 22
  48. 48. インターフェイスデザイン講座 合同会社CGFM 第2章 デザイン・ルールについて 配色2 色の面積の ツボをおさえて バランスよく 23
  49. 49. インターフェイスデザイン講座 合同会社CGFM 第2章 デザイン・ルールについて 配色2 色の面積の ツボをおさえて バランスよく ベースカラー アソートカラー アクセントカラー 70%程度 20∼30%程度 5%程度 23
  50. 50. 第2章 デザイン・ルールについて 配色2 色の面積 インターフェイスデザイン講座 合同会社CGFM 24
  51. 51. 第2章 デザイン・ルールについて 配色2 色の面積 ベースカラー 彩度の低い色(白、淡いグレー、ベージュなど) アソートカラー ベースカラーと同系色で濃いめの色 アクセントカラー ベースカラー・アソートカラーと色相で 反対側の色。 強調したい箇所に使う。多用してはダメ。 インターフェイスデザイン講座 合同会社CGFM 24
  52. 52. 第2章 デザイン・ルールについて 色3 色の文法を活用する。 色の持つイメージ、お約束 インターフェイスデザイン講座 合同会社CGFM 25
  53. 53. 第2章 デザイン・ルールについて 色3 色の文法 赤 危険 情熱 黄 注意 陽気 緑 安全 自然 青 指示 冷静 インターフェイスデザイン講座 合同会社CGFM 26
  54. 54. 第2章 デザイン・ルールについて フォント4 インターフェイスデザイン講座 合同会社CGFM 27
  55. 55. 第2章 デザイン・ルールについて フォント4 1画面で使用するフォントの種類は絞る 強調する箇所は太めのゴシック系で フォント独自のイメージを利用 インターフェイスデザイン講座 合同会社CGFM 27
  56. 56. 第2章 デザイン・ルールについて 4 フォント独自のイメージを利用 フォント インターフェイスデザイン講座 合同会社CGFM 28
  57. 57. 第2章 デザイン・ルールについて 4 フォント独自のイメージを利用 堅さ、力強さ 美しい 美しい ゴシック系 美しい 美しい 明 朝 系 エレガントさ フォント インターフェイスデザイン講座 合同会社CGFM 28
  58. 58. 第2章 デザイン・ルールについて 言葉遣い5 インターフェイスデザイン講座 合同会社CGFM 29
  59. 59. 第2章 デザイン・ルールについて 言葉遣い5 使用する用語を統一する 専門用語を多用しない 文章として成立させる インターフェイスデザイン講座 合同会社CGFM 29
  60. 60. 第2章 デザイン・ルールについて 言葉遣い5 使用する用語を統一する インターフェイスデザイン講座 合同会社CGFM 30
  61. 61. 第2章 デザイン・ルールについて 言葉遣い5 使用する用語を統一する ユーザーが混乱する原因にもなります。 「TOP」「HOME」「ホーム」? 「新規作成」「新規追加」「新規登録」? 「上書き保存」「編集」? よくある例 インターフェイスデザイン講座 合同会社CGFM 30
  62. 62. 第2章 デザイン・ルールについて 言葉遣い5 専門用語を多用しない 利用するユーザー層に レベルを合わせた表現を心がける。 ※どうしても必要な場合は、補足説明を入れる。 インターフェイスデザイン講座 合同会社CGFM 31
  63. 63. 第2章 デザイン・ルールについて 言葉遣い5 文章として成立させる ユーザーが読んで「?」となる 文章になっていないかチェックする。 なるべく要点を押さえた簡潔な文章を心がける。 インターフェイスデザイン講座 合同会社CGFM 32
  64. 64. 第2章 デザイン・ルールについて アイコン・ピクトグラム6 http://www.iconspedia.com/ インターフェイスデザイン講座 合同会社CGFM 33
  65. 65. 第2章 デザイン・ルールについて アイコン・ピクトグラム6 http://www.iconspedia.com/ インターフェイスデザイン講座 合同会社CGFM 33
  66. 66. 第2章 デザイン・ルールについて アイコン・ピクトグラム6 インターフェイスデザイン講座 合同会社CGFM 34
  67. 67. 第2章 デザイン・ルールについて アイコン・ピクトグラム6 直感的に操作を促す機能がある 「色のルール」を利用して アイコンの意味付けを強化できる フリーのアイコン集等を 利用するのも効果的 インターフェイスデザイン講座 合同会社CGFM 34
  68. 68. この辺で休憩しましょう 35
  69. 69. この辺で休憩しましょう 35
  70. 70. 快適なインターフェイスに 必要なもの 第3章 36
  71. 71. システム 第3章 快適なインターフェイスに必要なもの 第1章でのおさらい 37
  72. 72. システム ユーザーの自然な行動に基づいた 情報デザイン ビジュアルデザイン 第3章 快適なインターフェイスに必要なもの 第1章でのおさらい インターフェイス 37
  73. 73. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM 38
  74. 74. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移1 画面に必要な要素の選定2 操作説明(ヘルプ)の充実3 38
  75. 75. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移 1 人の自然な行動を素人目線で考える 39
  76. 76. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移 1 人の自然な行動を素人目線で考える 「素人力」 素人だったら、どう動くだろう? を想像する力。 39
  77. 77. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移 1 人の自然な行動を素人目線で考える エラー回避の 仕組みを考える ヒューマンエラー の予測 素人目線から見えてくるもの。 「素人力」 素人だったら、どう動くだろう? を想像する力。 39
  78. 78. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移 1 可能であれば、ユーザビリティテストもお勧めです。 40
  79. 79. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移 1 可能であれば、ユーザビリティテストもお勧めです。 ユーザビリティテストで分かること 40
  80. 80. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM ユーザーの自然な行動に基づく画面遷移 1 可能であれば、ユーザビリティテストもお勧めです。 ユーザビリティテストで分かること トライ&エラーで画面設計を改良して いいインターフェイスに仕上げていく。 エラーを起こしやすい箇所 導線の不備や無駄 40
  81. 81. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM 画面に必要な要素の選定 2 その画面において ユーザーに求める操作は? という視点で要素を洗い出す 不要な要素は外す 不要な要素も含まれた 煩雑な画面 41
  82. 82. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM 画面に必要な要素の選定 2 その画面において ユーザーに求める操作は? という視点で要素を洗い出す 不要な要素は外す 不要な要素も含まれた 煩雑な画面 必要な要素に絞って すっきりした画面 41
  83. 83. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM 操作説明(ヘルプ)の充実 3 操作手順、説明ガイドの準備 ミスしそうな箇所には注意書きなど ミスをしても修正しやすい画面設計 (再入力の手間を省く など) 42
  84. 84. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM 理想的なインターフェイスは 「ヘルプ」を見なくても操作できる 操作説明(ヘルプ)の充実 3 43
  85. 85. 第3章 快適なインターフェイスに必要なもの インターフェイスデザイン講座 合同会社CGFM 理想的なインターフェイスは 「ヘルプ」を見なくても操作できる 操作説明(ヘルプ)の充実 3 43
  86. 86. 講義まとめ おわりに… 44
  87. 87. 講義まとめ インターフェイスデザイン講座 合同会社CGFM 45
  88. 88. 講義まとめ インターフェイスデザイン講座 合同会社CGFM ユーザー視点を忘れずに(素人力) 色・配置のコツは身につけられる 引算が大事(色・文字・要素) デザイナーをチームに入れる場合は、 仕様確定前の打ち合わせ段階からが理想。 45
  89. 89. ご清聴ありがとうございました。 46
  90. 90. 質疑応答タイム 47
  91. 91. 質疑応答タイム 47

×