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.

UIデザインの基本

124,610 views

Published on

このデザインのどこが悪いか?をより具体的に伝えることができるようになるため、これだけはしっておきたいUIデザインの基本の「き」

Published in: Design
  • Be the first to comment

UIデザインの基本

  1. 1. Basics of UI Design これだけは知っておこう NCデザイン&コンサルティング株式会社 Roy Kim / 金 成哲 @Roy_S_Kim
  2. 2. 自己紹介 金 成哲 / @Roy_S_Kim kim@ncdc.co.jp ソリューションディレクター NCデザイン&コンサルティング株式会社 http://ncdc.co.jp K
  3. 3. 企業システム コンサルティング & ソリューション開発 やっていること スマートフォン & タブレットPC UX Design NCDC
  4. 4. やっていること (コンサルティングの他に) スマートデバイスと 企業システムについて語った 有一の本
  5. 5. やっていること (コンサルティングの他に) Enterprises Mobile BaaS サーバー開発不要! 低コスト、短納期! AppPot
  6. 6. UIデザインの基礎 (基本要素) 基本の中の基本
  7. 7. UIデザインの基本? ‣ UIのヴィジュアルデザインにも論理的思考は存在 する ‣ これをデザインの理論と呼ぶ ‣ デザインの基本的な要素とその背景にある理論 を知るとそれなりのUIデザインはできる。
 (美的センスがなくても最悪のUIにはならない)
  8. 8. UIデザインの基本要素 ‣ 近接 ‣ 整列 ‣ 反復 ‣ コントラスト ‣ フォント 各要素の特性を理解して
 適切に使えばそれなりの
 デザインはできる!
  9. 9. 近接 ‣ 関連が強いものを近くに配置する ‣ 要素間の距離を持って各要素間の関係の強さを 表現する ‣ 情報を視覚的に構造化、組織化することに
 よってユーザーの理解を助ける ‣ 空間(スペース)は近接の大事な要素
  10. 10. 近接 UI要素間の論理的な グルーピング
  11. 11. 近接 余計なスペースが多くて もったいない!?
  12. 12. 近接 ‣ 関連が強いものを近くに配置する ‣ 要素間の距離を持って各要素間の関係の強さを 表現する ‣ 情報を視覚的に構造化、組織化することに
 よってユーザーの理解を助ける ‣ 空間(スペース)は近接の大事な要素 スペースの重要性を 見せましょう!
  13. 13. 近接 ‣関連が強いものを近くに配置する ‣要素間の距離を持って各要素間の 関係の強さを表現する ‣情報を視覚的に構造化、組織化す ることに
 よってユーザーの理解を助ける ‣空間(スペース)は整列の大事な 要素 スペースを排除す るとこうなる!! ものがあふれるリ ビングの例
  14. 14. 近接 適切なスペースで
 余裕と高級感を出す 情報量は増えるが
 窮屈な感じになる
  15. 15. 近接 適切なスペースで
 余裕と高級感を出す 情報量は増えるが
 窮屈な感じになる
  16. 16. 近接の悪い適用例
  17. 17. 整列 ‣ 画面内の全ての要素を意図をもって配置する ‣ 内容が明快に伝わり、洗練されたイメージを
 与える
  18. 18. 整列
  19. 19. 整列 接近の要素も
  20. 20. 反復 ‣ 画面内の要素を統一してそれを繰り返して使う事 でパターン化すること ‣ ユーザーの学習コストを減らし、誤操作を防ぐ ‣ ブランドや世界観を作り出す
  21. 21. 反復の例 Good!
  22. 22. 反復の例
  23. 23. 反復の例 実は全部同じ製品の画面 ですが・・・ No Good!
  24. 24. 反復の誤用例 位置と色の誤用 OKCancel OK Cancel
  25. 25. コントラスト ‣ 画面の要素に特徴を与えて他の要素と
 区別し易くすること ‣ ユーザーの注意を意図した方向に向かせるに
 有効 ‣ 多様な要素を活用してコントラストを生成 ‣ 色、サイズ、形、スペース、フォント等
  26. 26. コントラスト コントラストの強い デザイン コントラストの弱い デザイン
  27. 27. コントラスト生成の例 向き 色
  28. 28. コントラスト生成の例 形サイズ
  29. 29. フォント ‣ 画面に表示する書体で各要素の意味と要素間の 関係を表現する ‣ フォントのイメージを理解し適切に使うことが 大事 ‣ 各環境で使用可能なフォントは異なるので注意
  30. 30. フォント 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと
  31. 31. ITエンジニアに易しい 実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 (Roy S. Kim) @Roy_S_Kim フォント: Hiragino Maru Gothic ProN
  32. 32. ITエンジニアに易しい 実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 (Roy S. Kim) @Roy_S_Kim フォント: Hiragino Gaku Gothic StdN
  33. 33. さらに使い易いUIにするには、 ‣ 近接 ‣ 整列 ‣ 反復 ‣ コントラスト ‣ フォント ‣ インタラクション ‣ メタファー ‣ アフォーダンス ‣ デザイン言語 +
  34. 34. インタラクション ‣ ユーザーの操作に対する適切な反応を示すこと ‣ ボタンのオン/オフ、画面移動のアニメーション等 ‣ 音、振動、光による通知 ‣ 砂時計、プログレスバーによる状況の表示等 ‣ ユーザーに安心感と信頼感、楽しさ等を与える
  35. 35. メタファー ‣ 現実のもの等、ユーザーがその使用方法に慣れ ているものを真似てUIを作成する ‣ ユーザーが分かり易い。(やり過ぎには注意)
  36. 36. アフォーダンス(=シグニファイア) ‣ 物、環境に対する人間の反応を上手く利用する ‣ アフォーダンスを利用してユーザーが気づくようにデザインされた物 をシグニファイアと言う ‣ 「ボタンっぽいのがあれば押したくなる∼」
  37. 37. デザイン言語 ‣ ユーザーが既に慣れているUI要素を利用する これはリンクです。 これはリンクではありません。 何がリンクに見える? 今は多くの人が 知っている「スライドして削除」
  38. 38. これさえ覚えれば、できる ‣ 近接 ‣ 整列 ‣ 反復 ‣ コントラスト ‣ フォント ‣ インタラクション ‣ メタファー ‣ アフォーダンス ‣ 既存デザイン言語 + ような気がする
  39. 39. One More Thing Some more things
  40. 40. ユーザーの特徴を考慮する あなたのユーザー?
  41. 41. デバイスの特徴を考慮する
  42. 42. 使われる環境を考慮する
  43. 43. やってはいけないこと 映画Monsters vs Aliensから ※映画の宣伝にもなるので画像の利用にはご理解を!
  44. 44. やってはいけないこと アメリカ大統領: 「コーヒー飲みたい」
  45. 45. やってはいけないこと 閣僚達: 「やめて下さい!!」Oh My God!!
  46. 46. やってはいけないこと
  47. 47. やってはいけないこと 実は、この人がUIデザイナー: 「このボタンの何が問題なんだ?」
  48. 48. やってはいけないこと 近い!似てる!意味が分からない!寄りかかりたくな る!押し易い!押したくなる!取り返しがつかない!
  49. 49. ユーザーは絶対やっちゃう!!
  50. 50. ユーザーは絶対やっちゃう!! ありがとうございました!

×