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.

フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大

18,982 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/322/room
ーーーーーーーーーーーーーーーーーーーーーーー

フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大

  1. 1. フラッ トデザインに 出来ること / 出来ないこと 橘 雄大
  2. 2. About Me @toybox_design NAME 橘 雄大 WORK Webデザイナー at ALL CONNECT yuudai.tachibana 商業系のWebサイトを主に制作
  3. 3. 授業の流れ 1.フラッ トデザインとは? 2.フラッ トデザインの問題と解決策 3.iOS7から考えるユーザビリティ 4.より良いUIの為に考えるべき事 5.フラッ トデザインに出来る事/出来ない事
  4. 4. 生徒の皆さんは デザイナー / プログラマー どちらですか? Designer or Programmer
  5. 5. section.1 What is Flat Design フラッ トデザインとは?
  6. 6. Flat Design フラッ トデザイン フラットデザインとは、 シンプルな要素や 図形と共に明るい色を用いて、 シンプルさや、 分かりやすさを強調した デザインである。 Flat Design and Skeuomorphism より引用
  7. 7. なぜフラッ トデザインが 話題になっているの?
  8. 8. Skeuomorphism ※ スキューモーフィズム 実際に存在するものを 模倣して作られるデザイン ※ Skeomorphism スキューモーフィズム / スキュアモーフィズムと発音。
  9. 9. 新しいメディア媒体・デバイスに出会ったとき それに対する扱い方が分からなかった ? ♥ meets
  10. 10. 現実にあるものを取り入れる事で ユーザーに対し感覚的な気付きを与える Skeomorphismというフィルター
  11. 11. 現実にあるものを見せて ユーザーに直感的な気づきを与える ユーザー 認識値 使い方が 分からない… 直感的な 気づき ユーザー 経験値 ユーザー 経験値 スキューモーフィズムを 行わなかった場合 スキューモーフィズムで 直感的な気付きを与える
  12. 12. 行き過ぎたスキューモーフィズム can swipe can’t swipe iBooks iOS adress book 無駄な装飾により、予想と一致しない動きが起こり、 ユーザーに対して混乱をもたらす。
  13. 13. http://www.youtube.com/watch?v=sVLb7dJ8_VY
  14. 14. 無駄な装飾を削ぎ落して コンテンツを最適化 Skeomorphism Flat Design
  15. 15. × Skeomorphism 立体的なものを 平面に直す Flat Design
  16. 16. フラッ トデ ザインがもたらすもの Clean Simple Interactive
  17. 17. http://www.youtube.com/watch?v=IXeFe6M08uw
  18. 18. Figureの特徴 ・豊かなインタラクション ・シンプルな操作性 ・小さな画面の中に  最大限必要な機能 ・動かせば何となく  使い方が分かる
  19. 19. フラッ トなインターフェイス 今までに無かった新たな可能性を秘めている
  20. 20. フラッ トなインターフェイス ? 優れたUIで、 より良いユーザー体験をもたらす
  21. 21. フラッ トデザインって 使いづらくないですか? Yes or No
  22. 22. Merit ・シンプルなためコンテンツに集中出来る ・インタラクティブな仕掛けを行いやすい ・画像のリクエスト数が減り読み込み速度が向上 Demerit ・感覚的な部分を装飾で伝えにくい ・インターフェースに対し、 より学習を伴う ・ユーザーに対し、 対話的な仕掛けが必要
  23. 23. デメリ トについて ッ もっ と深く考える ・感覚的な部分を装飾で伝えにくい ・インターフェースに対し、 より学習を伴う ・ユーザーに対し、 対話的な仕掛けが必要
  24. 24. n1 ectio S まとめ フラッ トデザインとは? ・デバイスを感覚的に使いやすくする為、  スキューモーフィズムが流行った。 ・平坦にするというより、無駄なものを  削るデザイン。 ・デメリッ トの部分をきっちりと理解して  制作を進めないと、 上手く行かない。
  25. 25. section.2 Problems & Solutions フラッ トデザインの問題点と解決策
  26. 26. フラッ トデザインの問題点 ユーザー 認識値 明快さの欠如 気づき値 気づき値 ユーザー 経験値 ユーザー 経験値 Skeomophism Flat Design
  27. 27. ユーザーに対して分かりやすい 気付きを与える visit 訪問 観覧 行動
  28. 28. 対話的な要素で行動を促す 行動までの道筋を学ばなければ行けない visit 訪問 観覧 触る 予想 UIに対しての学習を行う可能性 行動
  29. 29. 目的を達成出来るように誘導 観覧や触るの行動の時点で、直感的に行動を起こさせる仕組みが必要 目的への誘導 visit 訪問 観覧 触る 予想 行動
  30. 30. 付け足しのデザイン
  31. 31. 程よいドロップシャ ドウ 検索
  32. 32. 程よいグラデーション button
  33. 33. 程よい立体感 button
  34. 34. 程よいスキューモーフィズム
  35. 35. どっちがスキューモーフ ィズム ?
  36. 36. 現実のものを模倣という意味では どちらもスキューモーフィズム
  37. 37. フラッ トデザインでは伝える事が出来ない 具体性や感情的表現を、 写真では伝える事が出来る
  38. 38. n2 ectio S まとめ フラッ トデザインの 問題と解決策? ・フラッ トデザインでは抜け落ちてしまった  感覚的な気付きをどう埋めるかが重要。 ・対話的な要素で補う。 ・フラッ トな状態から、 要素を付け足す 。 ・程よいスキューモーフィズム。
  39. 39. section.3 Learn from iOS7 iOS7から学ぶユーザビリティ
  40. 40. iOS7が導き出した新しいアプローチ
  41. 41. レイヤーデザイン フラッ トなレイヤーと 奥行きのある空間デザイン http://gizmodo.com/ios-7-instead-of-flatness-we-got-depth-512291484
  42. 42. レイヤーデザインが もたらすもの ・よりインタラクティブな表現 ・情報の階層への意識 ・アプリと操作画面の分離
  43. 43. ユーザビリティエンジニアリング原論 学習しやすさ エラー ユーザビリティエンジニアリング言論 効率性 記憶しやすさ 主観的満足度 http://www.usability.gr.jp/whatis/definitions/
  44. 44. iOS7はこれらを達成出来てる? ・壁紙によってデザインが左右される ・アイコンをシンプルにした事による弊害 ・今までのUIに対する慣れが大きい ・アプリに対する学習コス トが高い
  45. 45. iOS7はこれらを達成出来てる? ・壁紙によってデザインが左右される ・アイコンをシンプルにした事による弊害 ・今までのUIに対する慣れが大きい ・アプリに対する学習コストが高い
  46. 46. Year Month Week / Day
  47. 47. 2014年に移動するには どうすればよい?
  48. 48. スワイプの方向が予測出来ない or
  49. 49. 機能の視認性が悪い ? visit 訪問 見る 曖昧な予想 機能の視認性が悪いと 曖昧な予想のまま、 行動に移してしまう
  50. 50. 予想と行動に対する、 結果の不一致 行動 正しい動作 経験を足した予想
  51. 51. 予想と行動に対する、 結果の不一致 行動 正しい動作 UIに対する学習 ユーザーに対する負担 経験を足した予想
  52. 52. n3 ectio S まとめ iOS7から考える ユーザビリティ ・レイヤーデザインを通して、  情報レイヤーの切り分けを行った。 ・根本的な使いやすさは考えられているのか? ・機能の視認性が悪いため、 UIに対する  学習コス ト、 ユーザーへの負担が高い。
  53. 53. section.4 For the better UI より良いUIの為に考えるべき事
  54. 54. インターフェイスの前に考える事
  55. 55. 表層 ビジュアル設計 骨格 インターフェイス設計 ナビゲーション設計 構造 インタラクション設計 情報の構造 要件 企画仕様 コンテンツ要件 step エン ドユーザ (サイ ト観覧者) のニーズ 戦略 制作物の目的
  56. 56. 表層 ビジュアル設計 骨格 インターフェイス設計 ナビゲーション設計 構造 インタラクション設計 情報の構造 要件 企画仕様 コンテンツ要件 step 戦略 要件定義書 エン ドユーザ (サイ ト観覧者) のニーズ コンセプト ダイアグラム ・ 制作物の目的
  57. 57. スマートフォン販売サイトの要件定義 目的 スマートフォンの販売 課題 ネッ トで携帯を買うという認識が 定着していない。 コンセプト ユーザー傾向 公式サイ トのような信頼感を 持ちつつ、 お得な情報で惹き付ける ネッ トで全てを簡潔させたい。 面倒な構造だと離脱しそう。
  58. 58. 商材の背景 ・課題 Webサイ トの目的 コンセプト ターゲッ ト ユーザー傾向 ユーザーニーズ コンテンツ 競合 訴求 納期 予想リソース 流入ワード 機能要件 ビジュアルコンセプト コピー案
  59. 59. 考えられるユーザーの行動パターン ユーザーA ユーザーB トップページ トップページ 新しく出たあの機種に変更したい キャリアの乗り換えをしたい 機種一覧 機種詳細 料金詳細 キャンペーン 機種詳細 申し込み 機種詳細 料金詳細 申し込み 機種詳細 申し込み 申し込み
  60. 60. 表層 ビジュアル設計 骨格 インターフェイス設計 ナビゲーション設計 プロ トタイピング 構造 インタラクション設計 情報の構造 要件 企画仕様 コンテンツ要件 step エン ドユーザ (サイ ト観覧者) のニーズ 戦略 制作物の目的
  61. 61. https://popapp.in/
  62. 62. https://popapp.in/
  63. 63. https://popapp.in/
  64. 64. http://www.invisionapp.com/
  65. 65. n4 ectio S まとめ よりよいUIの為に 考えるべき事 ・UIに捕われすぎて、 目的を失ってはいけない。 ・目的 ビジョンを明確にする為に、 ・  要件定義を行う。 ・装飾的な作り込みの前に、  プロ トタイピングで、 機能するかを確かめる。
  66. 66. section.5 Flat design brings フラッ トデザインに出来る事 / 出来ない事
  67. 67. ? Skeomorphism
  68. 68. Flat Design
  69. 69. Flat Design ?
  70. 70. Flat + α
  71. 71. Flat Design コンテンツを邪魔せず、 クリーンで繊細な イ メージを与えられる
  72. 72. フラッ トデザインは あくまでも手段の一つ
  73. 73. 手段が目的になってはいけない フラッ ト デザイン 目的の 達成
  74. 74. 目的のためにどうアプローチをするか 目的の 達成 ユーザー 体験 UI
  75. 75. Flat Design 目的の 達成 ユーザー 体験 UI
  76. 76. Fin
  77. 77. 宿題 フラッ トデザインの Webサイ ・ ト アプリを1 つ取り上げて、 何故フラッ トデザインを 採用しているのかを考えてみよう

×