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.

コンテンツを意識したデザイン思考

16,138 views

Published on

WCAF vol.11で使用したスライドです。

Published in: Design
  • Be the first to comment

コンテンツを意識したデザイン思考

  1. 1. コンテンツを意識したデザイン思考 WCAF Vol.11 ALL CONNECT.inc 橘 雄大 13年12月7日土曜日
  2. 2. About Me Yudai Tachibana @toybox_design blog 13年12月7日土曜日 toybox-design.net
  3. 3. Agenda 1.デザインの目的 2.FLAT UIから学ぶデザイン思考 3.目的達成の為のビジョン共有 13年12月7日土曜日
  4. 4. What is Design? デザインって何? 13年12月7日土曜日
  5. 5. デザイン 狭義のデザイン 13年12月7日土曜日 広義のデザイン
  6. 6. 狭義のデザイン 設計したものに対し、 具体的な形を作る 13年12月7日土曜日
  7. 7. 広義のデザイン 下書きを含みつつ 計画する・企画する 13年12月7日土曜日
  8. 8. 広義のデザイン デザインは日本語では「設計」にもあたり、「形態」や「意匠」と訳されて きたが、それだけに限らず、人間の行為(その多くは目的を持つ)をより良 いかたちで適えるための「計画」も意味する。人間が作り出すものは特定の 目的を持ち、それに適うようデザイナー(設計者)の手によって計画される のである。 wikipediaよ り抜粋 13年12月7日土曜日
  9. 9. 何の為のデザイン? 何かものを売る? ユーザーに楽しんでもらう? 商品を知ってもらう? 13年12月7日土曜日
  10. 10. 目標の設定が必要 目標に対してのアプローチの仕方で コンテンツの善し悪しが決まる ⇩ Design 13年12月7日土曜日 Conversion
  11. 11. 訪問 13年12月7日土曜日 観覧 行動
  12. 12. ユーザーに対して行動を促す為の 分かりやすい気付きを与える 訪問 13年12月7日土曜日 観覧 行動
  13. 13. Skeuomorphism スキュアモーフィズム 実際に存在するものを 模倣して作られるデザイン 13年12月7日土曜日
  14. 14. 感覚的な気付きを与えて より直感的に行動を促す Skeuomorphism 見る 13年12月7日土曜日 気付く
  15. 15. http://designmodo.com/skeuomorphic-vs-digital-interfaces/ 13年12月7日土曜日
  16. 16. Skeuomorphismを突き詰める事への限界 3次元を2次元で表現する事への違和感 もはやタッチスクリーンをユーザーに教えることを心配する 必要は無く、若いユーザー始めからデバイスに対する経験を 得ている。 Appleが初めてのユーザーのための設計を停止する必要があ り、その代わりに、成熟したユーザーベースでデザインを考 える必要がある。 My experience, designed.よ り抜粋 http://myexperiencedesigned.tumblr.com/ 13年12月7日土曜日
  17. 17. FLAT DESIGN 13年12月7日土曜日
  18. 18. 13年12月7日土曜日
  19. 19. 13年12月7日土曜日
  20. 20. 13年12月7日土曜日
  21. 21. FLAT DESIGN フラットデザイン シンプルな要素や図形を用いて 分かりやすさを強調したデザイン 13年12月7日土曜日
  22. 22. case iOS7 License Some rights reserved by Janitors 13年12月7日土曜日
  23. 23. Learn from Flat UI フラットUIから学ぶデザイン思考 13年12月7日土曜日
  24. 24. All rights reserved by juzik1980 13年12月7日土曜日
  25. 25. 13年12月7日土曜日
  26. 26. 13年12月7日土曜日
  27. 27. ユーザーに対して分かりやすい 気付きを与える 訪問 13年12月7日土曜日 観覧 行動
  28. 28. 行動を起こすまでのステップ数が増加 行動までの道筋を学ばなければ行けない 訪問 13年12月7日土曜日 観覧 触る 予想 行動
  29. 29. http://www.flaticon.com/ 13年12月7日土曜日
  30. 30. 装飾が無くなった代わりに 『スライドでロック解除 』 という文言に 装飾を文字説明で補う iOS6 13年12月7日土曜日 iOS7
  31. 31. 13年12月7日土曜日
  32. 32. iOS7はより学習型のコンテンツに 13年12月7日土曜日
  33. 33. Merit ・シンプルなためコンテンツに集中出来る ・インタラクティブな仕掛けを行いやすい ・画像のリクエスト数が減り読み込み速度が向上 Demerit ・感覚的な部分を装飾で伝えにくい ・インターフェースに対し、 より学習を伴う ・長期的なユーザーに対し、 対話的な仕掛けが必要 13年12月7日土曜日
  34. 34. 13年12月7日土曜日
  35. 35. 13年12月7日土曜日
  36. 36. 13年12月7日土曜日
  37. 37. 機能の視認性が悪い 訪問 見る 触る 曖昧な予想 機能の視認性が悪いと 曖昧な予想のまま、 行動に移してしまう 13年12月7日土曜日
  38. 38. 予想と行動に対する、 結果の不一致 行動 結果 経験を足した予想 13年12月7日土曜日
  39. 39. UI is preceded Vision iOS7 カレンダーはUIが先行しすぎた? 13年12月7日土曜日
  40. 40. ビジョンというニュアンスの共有 ビジョンがあれば、そのサービス・アプリで必要な UX の基礎を作り出せます。そして、UX は良い UI (又は他の要素)を導き出すヒントを与えてくれます。このクリエイティブの経路は一方通行で、逆に 進むことはできません。つまり、良い UI を実装すれば、UX になるわけではありませんし、ビジョン なしでサービス・アプリの UX は担保できません。 UX http://www.yasuhisa.com/could/article/vision-ux-ui/ 13年12月7日土曜日 UI
  41. 41. 提供しようとした体験と 最適な体験との不一致 UX ビジョンから導いたUXが 最適ではなかった? 13年12月7日土曜日 UI
  42. 42. Vision for the Conversion 目的達成の為のビジョン共有 13年12月7日土曜日
  43. 43. RD and Prototyping 要件定義とプロトタイピング 13年12月7日土曜日
  44. 44. 要件定義(実装すべき機能や満たすべき目標を明確にする) 訪問 見る 触る 予想 行動 プロトタイピング (要件定義の内容を実際にクリア出来るか) 13年12月7日土曜日
  45. 45. 要件定義 コンセプトダイアグラム サイ トマップ ワイヤーフレーム プロ トタイピング 13年12月7日土曜日
  46. 46. 要件定義 Webサイトの制作目的、 『何が必要か』 を明確にする 13年12月7日土曜日
  47. 47. コンセプト ・ダイアグラム ユーザーの行動を予測し、コンテンツがどのように機能するかを洗い出す。 13年12月7日土曜日
  48. 48. サイ マップ ト 実際に作るWebサイトの構造を設計する 13年12月7日土曜日
  49. 49. ワイヤー レーム フ Webサイトのどこにどのようなコンテンツを置くかを、枠組みだけで作成。 13年12月7日土曜日
  50. 50. 要件定義 コンセプトダイアグラム サイ トマップ ワイヤーフレーム プロトタイピング 13年12月7日土曜日
  51. 51. https://popapp.in/ 13年12月7日土曜日
  52. 52. http://www.invisionapp.com/ 13年12月7日土曜日
  53. 53. Vision makes Design ビジョンを明確にして、 コンテンツをデザインする事で、 目的に対して、最適なデザインを作る事が出来る。 13年12月7日土曜日
  54. 54. Thanks.. 13年12月7日土曜日

×