第8回Creators MeetUp で登壇させて頂きました。そちらのスライドになります。 ブログに内容まとめました。 http://toybox-design.net/creators-meatup-8 セッションの動画がコチラで公開されていますので、詳しく内容を見たい方はこちらへ http://lab.designsatellites.jp/?p=2178

1. 流行に乗っていいの？
フラットデザインの落とし穴
Yudai Tachibana ( Web Designer at ALL CONNECT INC..)
第8回 Creators MeetUp

2. Y u d a i T a c h i b a n a ( W e b D e s i g n e r a t A L L C O N N E C T I N C . . )
@toybox_design blog
toybox-design.net

3. What is
“Flat Design”?１

4. 質感や立体感のない平面的なデザイン
Windows Metro UI / Apple iOS7 / Yahoo! Japan and more...

5. Skeuomorphism
スキュアモーフィズム
実際に存在するものを模倣して
作られる装飾やデザイン

6. Skeuomorphism
実際に存在するものを模倣して
作られる装飾やデザイン
ユーザーの予想を促すため
ユーザビリティ向上に繋がる

7. Flat Design
三次元のものを二次元の画面で
表現することへの違和感
コンテンツに悪影響を及ぼす
無駄な装飾的表現を排除

8. 2Why? “Flat Design”
Diffcult

9. 明快さの欠落
リアリズムを
スキュアモーフィズム以外で
埋めようとする。

10. 訪問 観覧 CV（目的達成）
ユーザーに対して明確な
気付きを与える（わかりやすさ）
グラデーションや
ドロップシャドウなど、装飾的要素で
コンテンツを差別化していた。

11. 訪問 観覧 CV（目的達成）
触るという行程が必要なため、
ユーザーに対する負担が大きくなる。
その結果、目的の達成も困難になる。
インタラクティブな仕掛けで
観覧から行動へ誘導する

12. 見る 行動（触る）予想
見る 行動触る 認識
ユーザーの予測を促した場合の行動
インタラクティブな要素を挟んだ行動

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

14. iOS7になった途端、困り果てる赤ちゃん

15. ユーザーの経験値と作り手のスキル値
製品A 製品B 製品C
ユーザー
満足値
ユーザー
経験値
ユーザー
経験値
ユーザー
経験値
スキル値
スキル値
スキル値

16. ユーザーの経験値と作り手のスキル値
製品A 製品B 製品C
ユーザー
満足値
ユーザー
経験値
ユーザー
経験値
ユーザー
経験値
スキル値
スキル値
スキル値
デザイナーに求められるものが
更に多くなってません？？

17. 表面的な
デザイン
インタラクティブ
デザイン
Webデザイナーに求められる技術
photoshopでのカンプ作成
HTML CSS
Javascript
Webパフォーマンス（速度）
Designing in Browser

18. 3Typography & Layout

19. I LOVE
WEB DESIGN
英語でのタイポグラフィ表現

20. 日本語でのタイポグラフィ表現
WEBデザインを
愛しています。

21. 日本語でのタイポグラフィ表現
WEBデザインを
愛しています。
日本語フォントにした途端
イメージ変わりませんか？

22. 日本語は複雑ですね。
English is easy
雑
E
画数によってボックスが埋まるため、ごちゃつきやすい。
画数が少ない上に、大文字・小文字で文脈を把握しやすい。

23. Typograpy
Content
Image
日本語って
複雑だね
日本語ではフラットデザイン特有の
シンプルさ、洗練さを同等に伝えるのが難しい。

24. http://fltdsgn.com/

25. http://gospecless.com/
1カラムデザインが多い
http://cloudcannon.com/
要素をシンプルに見せる為。グリッドでコンテンツの強弱を付ける。
見出しを分かりやすく表示出来る。

26. Head
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Head
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Head
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Head
Lorem ipsum dolor
sit amet,
consectetuer
adipiscing elit.
Aenean commodo
ligula eget dolor.
Head
Lorem ipsum dolor
sit amet,
consectetuer
adipiscing elit.
Aenean commodo
ligula eget dolor.
Head
Lorem ipsum dolor
sit amet,
consectetuer
adipiscing elit.
Aenean commodo
ligula eget dolor.
Head
Lorem ipsum dolor
sit amet,
consectetuer
adipiscing elit.
Aenean commodo
ligula eget dolor.
small small
small small small small

27. フラットデザイン
日本語タイポグラフィの問題
コンテンツが縮小される程
見出しのジャンプ率も縮小
見出しをスッキリさせるため
カーニングを広めに取る
リアリズムを埋めるために
文章がより説明的に
感覚的な気付きの減少

28. ユーザーの感覚値とデザイン表現
ユーザー
経験値
ユーザー
経験値
フラットな
デザイン
感情の欠落
アイコンや
写真で補う
フラットな
デザイン
ユーザー
感覚値

29. Walk on the street
Go without question. I understand it if I go
Head
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
detail button

30. この道を行く。
迷わず行けよ。行けばわかる。
猪木でも、とってもクールですね。
イメージを伝えるなら写真最強。

31. フラットだからこそ生きるデザイン
フラットだからこそ部分的なグラデーションや、
シャドウ、立体感がアクセントに。

32. フラットな
デザイン
ドロップ
シャドウ
グラデーション 写真
アイコン

33. フラットデザイン
装飾を削るデザインではなく、
フラットな状態から要素を付け足すデザイン。

34. thanks