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

1. コンテンツを意識したデザイン思考
WCAF Vol.11 ALL CONNECT.inc 橘 雄大
13年12月7日土曜日

2. About Me
Yudai Tachibana
@toybox_design
blog
13年12月7日土曜日
toybox-design.net

3. Agenda
1.デザインの目的
2.FLAT UIから学ぶデザイン思考
3.目的達成の為のビジョン共有
13年12月7日土曜日

4. What is Design?
デザインって何?
13年12月7日土曜日

5. デザイン
狭義のデザイン
13年12月7日土曜日
広義のデザイン

6. 狭義のデザイン
設計したものに対し、
具体的な形を作る
13年12月7日土曜日

7. 広義のデザイン
下書きを含みつつ
計画する・企画する
13年12月7日土曜日

8. 広義のデザイン
デザインは日本語では「設計」にもあたり、「形態」や「意匠」と訳されて
きたが、それだけに限らず、人間の行為（その多くは目的を持つ）をより良
いかたちで適えるための「計画」も意味する。人間が作り出すものは特定の
目的を持ち、それに適うようデザイナー（設計者）の手によって計画される
のである。
wikipediaよ
り抜粋
13年12月7日土曜日

9. 何の為のデザイン？
何かものを売る？
ユーザーに楽しんでもらう？
商品を知ってもらう？
13年12月7日土曜日

10. 目標の設定が必要
目標に対してのアプローチの仕方で
コンテンツの善し悪しが決まる
⇩
Design
13年12月7日土曜日
Conversion

11. 訪問
13年12月7日土曜日
観覧
行動

12. ユーザーに対して行動を促す為の
分かりやすい気付きを与える
訪問
13年12月7日土曜日
観覧
行動

13. Skeuomorphism
スキュアモーフィズム
実際に存在するものを
模倣して作られるデザイン
13年12月7日土曜日

14. 感覚的な気付きを与えて
より直感的に行動を促す
Skeuomorphism
見る
13年12月7日土曜日
気付く

15. http://designmodo.com/skeuomorphic-vs-digital-interfaces/
13年12月7日土曜日

16. Skeuomorphismを突き詰める事への限界
3次元を2次元で表現する事への違和感
もはやタッチスクリーンをユーザーに教えることを心配する
必要は無く、若いユーザー始めからデバイスに対する経験を
得ている。
Appleが初めてのユーザーのための設計を停止する必要があ
り、その代わりに、成熟したユーザーベースでデザインを考
える必要がある。
My experience, designed.よ
り抜粋
http://myexperiencedesigned.tumblr.com/
13年12月7日土曜日

17. FLAT DESIGN
13年12月7日土曜日

18. 13年12月7日土曜日

19. 13年12月7日土曜日

20. 13年12月7日土曜日

21. FLAT DESIGN
フラットデザイン
シンプルな要素や図形を用いて
分かりやすさを強調したデザイン
13年12月7日土曜日

22. case
iOS7
License Some rights reserved by Janitors
13年12月7日土曜日

23. Learn from Flat UI
フラットUIから学ぶデザイン思考
13年12月7日土曜日

24. All rights reserved by juzik1980
13年12月7日土曜日

25. 13年12月7日土曜日

26. 13年12月7日土曜日

27. ユーザーに対して分かりやすい
気付きを与える
訪問
13年12月7日土曜日
観覧
行動

28. 行動を起こすまでのステップ数が増加
行動までの道筋を学ばなければ行けない
訪問
13年12月7日土曜日
観覧
触る
予想
行動

29. http://www.flaticon.com/
13年12月7日土曜日

30. 装飾が無くなった代わりに
『スライドでロック解除 』
という文言に
装飾を文字説明で補う
iOS6
13年12月7日土曜日
iOS7

31. 13年12月7日土曜日

32. iOS7はより学習型のコンテンツに
13年12月7日土曜日

33. Merit
・シンプルなためコンテンツに集中出来る
・インタラクティブな仕掛けを行いやすい
・画像のリクエスト数が減り読み込み速度が向上
Demerit
・感覚的な部分を装飾で伝えにくい
・インターフェースに対し、
より学習を伴う
・長期的なユーザーに対し、
対話的な仕掛けが必要
13年12月7日土曜日

34. 13年12月7日土曜日

35. 13年12月7日土曜日

36. 13年12月7日土曜日

37. 機能の視認性が悪い
訪問
見る
触る
曖昧な予想
機能の視認性が悪いと
曖昧な予想のまま、
行動に移してしまう
13年12月7日土曜日

38. 予想と行動に対する、
結果の不一致
行動
結果
経験を足した予想
13年12月7日土曜日

39. UI is preceded Vision
iOS7 カレンダーはUIが先行しすぎた？
13年12月7日土曜日

40. ビジョンというニュアンスの共有
ビジョンがあれば、そのサービス・アプリで必要な UX の基礎を作り出せます。そして、UX は良い UI
（又は他の要素）を導き出すヒントを与えてくれます。このクリエイティブの経路は一方通行で、逆に
進むことはできません。つまり、良い UI を実装すれば、UX になるわけではありませんし、ビジョン
なしでサービス・アプリの UX は担保できません。
UX
http://www.yasuhisa.com/could/article/vision-ux-ui/
13年12月7日土曜日
UI

41. 提供しようとした体験と
最適な体験との不一致
UX
ビジョンから導いたUXが
最適ではなかった？
13年12月7日土曜日
UI

42. Vision for the Conversion
目的達成の為のビジョン共有
13年12月7日土曜日

43. RD and Prototyping
要件定義とプロトタイピング
13年12月7日土曜日

44. 要件定義（実装すべき機能や満たすべき目標を明確にする）
訪問
見る
触る
予想
行動
プロトタイピング
（要件定義の内容を実際にクリア出来るか）
13年12月7日土曜日

45. 要件定義
コンセプトダイアグラム
サイ
トマップ
ワイヤーフレーム
プロ
トタイピング
13年12月7日土曜日

46. 要件定義
Webサイトの制作目的、
『何が必要か』
を明確にする
13年12月7日土曜日

47. コンセプト
・ダイアグラム
ユーザーの行動を予測し、コンテンツがどのように機能するかを洗い出す。
13年12月7日土曜日

48. サイ マップ
ト
実際に作るWebサイトの構造を設計する
13年12月7日土曜日

49. ワイヤー レーム
フ
Webサイトのどこにどのようなコンテンツを置くかを、枠組みだけで作成。
13年12月7日土曜日

50. 要件定義
コンセプトダイアグラム
サイ
トマップ
ワイヤーフレーム
プロトタイピング
13年12月7日土曜日

51. https://popapp.in/
13年12月7日土曜日

52. http://www.invisionapp.com/
13年12月7日土曜日

53. Vision makes Design
ビジョンを明確にして、
コンテンツをデザインする事で、
目的に対して、最適なデザインを作る事が出来る。
13年12月7日土曜日

54. Thanks..
13年12月7日土曜日