Your SlideShare is downloading. ×
0
流行に乗っていいの?
フラットデザインの落とし穴
Yudai Tachibana ( Web Designer at ALL CONNECT INC..)
第8回 Creators MeetUp
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....
What is
“Flat Design”?1
質感や立体感のない平面的なデザイン
Windows Metro UI / Apple iOS7 / Yahoo! Japan and more...
Skeuomorphism
スキュアモーフィズム
実際に存在するものを模倣して
作られる装飾やデザイン
Skeuomorphism
実際に存在するものを模倣して
作られる装飾やデザイン
ユーザーの予想を促すため
ユーザビリティ向上に繋がる
Flat Design
三次元のものを二次元の画面で
表現することへの違和感
コンテンツに悪影響を及ぼす
無駄な装飾的表現を排除
2Why? “Flat Design”
Diffcult
明快さの欠落
リアリズムを
スキュアモーフィズム以外で
埋めようとする。
訪問 観覧 CV(目的達成)
ユーザーに対して明確な
気付きを与える(わかりやすさ)
グラデーションや
ドロップシャドウなど、装飾的要素で
コンテンツを差別化していた。
訪問 観覧 CV(目的達成)
触るという行程が必要なため、
ユーザーに対する負担が大きくなる。
その結果、目的の達成も困難になる。
インタラクティブな仕掛けで
観覧から行動へ誘導する
見る 行動(触る)予想
見る 行動触る 認識
ユーザーの予測を促した場合の行動
インタラクティブな要素を挟んだ行動
iOS6 iOS7
装飾が無くなった代わりに
『スライドでロック解除』という文言に
装飾を
文字説明で
補う
iOS7になった途端、困り果てる赤ちゃん
ユーザーの経験値と作り手のスキル値
製品A 製品B 製品C
ユーザー
満足値
ユーザー
経験値
ユーザー
経験値
ユーザー
経験値
スキル値
スキル値
スキル値
ユーザーの経験値と作り手のスキル値
製品A 製品B 製品C
ユーザー
満足値
ユーザー
経験値
ユーザー
経験値
ユーザー
経験値
スキル値
スキル値
スキル値
デザイナーに求められるものが
更に多くなってません??
表面的な
デザイン
インタラクティブ
デザイン
Webデザイナーに求められる技術
photoshopでのカンプ作成
HTML CSS
Javascript
Webパフォーマンス(速度)
Designing in Browser
3Typography & Layout
I LOVE
WEB DESIGN
英語でのタイポグラフィ表現
日本語でのタイポグラフィ表現
WEBデザインを
愛しています。
日本語でのタイポグラフィ表現
WEBデザインを
愛しています。
日本語フォントにした途端
イメージ変わりませんか?
日本語は複雑ですね。
English is easy
雑
E
画数によってボックスが埋まるため、ごちゃつきやすい。
画数が少ない上に、大文字・小文字で文脈を把握しやすい。
Typograpy
Content
Image
日本語って
複雑だね
日本語ではフラットデザイン特有の
シンプルさ、洗練さを同等に伝えるのが難しい。
http://fltdsgn.com/
http://gospecless.com/
1カラムデザインが多い
http://cloudcannon.com/
要素をシンプルに見せる為。グリッドでコンテンツの強弱を付ける。
見出しを分かりやすく表示出来る。
Head
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis ...
フラットデザイン
日本語タイポグラフィの問題
コンテンツが縮小される程
見出しのジャンプ率も縮小
見出しをスッキリさせるため
カーニングを広めに取る
リアリズムを埋めるために
文章がより説明的に
感覚的な気付きの減少
ユーザーの感覚値とデザイン表現
ユーザー
経験値
ユーザー
経験値
フラットな
デザイン
感情の欠落
アイコンや
写真で補う
フラットな
デザイン
ユーザー
感覚値
Walk on the street
Go without question. I understand it if I go
Head
Lorem ipsum dolor sit amet, consectetuer adipiscing e...
この道を行く。
迷わず行けよ。行けばわかる。
猪木でも、とってもクールですね。
イメージを伝えるなら写真最強。
フラットだからこそ生きるデザイン
フラットだからこそ部分的なグラデーションや、
シャドウ、立体感がアクセントに。
フラットな
デザイン
ドロップ
シャドウ
グラデーション 写真
アイコン
フラットデザイン
装飾を削るデザインではなく、
フラットな状態から要素を付け足すデザイン。
thanks
Upcoming SlideShare
Loading in...5
×

流行に乗っていいの?フラットデザインの落とし穴

135,458

Published on

第8回Creators MeetUp で登壇させて頂きました。そちらのスライドになります。
ブログに内容まとめました。
http://toybox-design.net/creators-meatup-8

セッションの動画がコチラで公開されていますので、詳しく内容を見たい方はこちらへ
http://lab.designsatellites.jp/?p=2178

Published in: Design
3 Comments
279 Likes
Statistics
Notes
No Downloads
Views
Total Views
135,458
On Slideshare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
353
Comments
3
Likes
279
Embeds 0
No embeds

No notes for slide

Transcript of "流行に乗っていいの?フラットデザインの落とし穴"

  1. 1. 流行に乗っていいの? フラットデザインの落とし穴 Yudai Tachibana ( Web Designer at ALL CONNECT INC..) 第8回 Creators MeetUp
  2. 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. 3. What is “Flat Design”?1
  4. 4. 質感や立体感のない平面的なデザイン Windows Metro UI / Apple iOS7 / Yahoo! Japan and more...
  5. 5. Skeuomorphism スキュアモーフィズム 実際に存在するものを模倣して 作られる装飾やデザイン
  6. 6. Skeuomorphism 実際に存在するものを模倣して 作られる装飾やデザイン ユーザーの予想を促すため ユーザビリティ向上に繋がる
  7. 7. Flat Design 三次元のものを二次元の画面で 表現することへの違和感 コンテンツに悪影響を及ぼす 無駄な装飾的表現を排除
  8. 8. 2Why? “Flat Design” Diffcult
  9. 9. 明快さの欠落 リアリズムを スキュアモーフィズム以外で 埋めようとする。
  10. 10. 訪問 観覧 CV(目的達成) ユーザーに対して明確な 気付きを与える(わかりやすさ) グラデーションや ドロップシャドウなど、装飾的要素で コンテンツを差別化していた。
  11. 11. 訪問 観覧 CV(目的達成) 触るという行程が必要なため、 ユーザーに対する負担が大きくなる。 その結果、目的の達成も困難になる。 インタラクティブな仕掛けで 観覧から行動へ誘導する
  12. 12. 見る 行動(触る)予想 見る 行動触る 認識 ユーザーの予測を促した場合の行動 インタラクティブな要素を挟んだ行動
  13. 13. iOS6 iOS7 装飾が無くなった代わりに 『スライドでロック解除』という文言に 装飾を 文字説明で 補う
  14. 14. iOS7になった途端、困り果てる赤ちゃん
  15. 15. ユーザーの経験値と作り手のスキル値 製品A 製品B 製品C ユーザー 満足値 ユーザー 経験値 ユーザー 経験値 ユーザー 経験値 スキル値 スキル値 スキル値
  16. 16. ユーザーの経験値と作り手のスキル値 製品A 製品B 製品C ユーザー 満足値 ユーザー 経験値 ユーザー 経験値 ユーザー 経験値 スキル値 スキル値 スキル値 デザイナーに求められるものが 更に多くなってません??
  17. 17. 表面的な デザイン インタラクティブ デザイン Webデザイナーに求められる技術 photoshopでのカンプ作成 HTML CSS Javascript Webパフォーマンス(速度) Designing in Browser
  18. 18. 3Typography & Layout
  19. 19. I LOVE WEB DESIGN 英語でのタイポグラフィ表現
  20. 20. 日本語でのタイポグラフィ表現 WEBデザインを 愛しています。
  21. 21. 日本語でのタイポグラフィ表現 WEBデザインを 愛しています。 日本語フォントにした途端 イメージ変わりませんか?
  22. 22. 日本語は複雑ですね。 English is easy 雑 E 画数によってボックスが埋まるため、ごちゃつきやすい。 画数が少ない上に、大文字・小文字で文脈を把握しやすい。
  23. 23. Typograpy Content Image 日本語って 複雑だね 日本語ではフラットデザイン特有の シンプルさ、洗練さを同等に伝えるのが難しい。
  24. 24. http://fltdsgn.com/
  25. 25. http://gospecless.com/ 1カラムデザインが多い http://cloudcannon.com/ 要素をシンプルに見せる為。グリッドでコンテンツの強弱を付ける。 見出しを分かりやすく表示出来る。
  26. 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. 27. フラットデザイン 日本語タイポグラフィの問題 コンテンツが縮小される程 見出しのジャンプ率も縮小 見出しをスッキリさせるため カーニングを広めに取る リアリズムを埋めるために 文章がより説明的に 感覚的な気付きの減少
  28. 28. ユーザーの感覚値とデザイン表現 ユーザー 経験値 ユーザー 経験値 フラットな デザイン 感情の欠落 アイコンや 写真で補う フラットな デザイン ユーザー 感覚値
  29. 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. 30. この道を行く。 迷わず行けよ。行けばわかる。 猪木でも、とってもクールですね。 イメージを伝えるなら写真最強。
  31. 31. フラットだからこそ生きるデザイン フラットだからこそ部分的なグラデーションや、 シャドウ、立体感がアクセントに。
  32. 32. フラットな デザイン ドロップ シャドウ グラデーション 写真 アイコン
  33. 33. フラットデザイン 装飾を削るデザインではなく、 フラットな状態から要素を付け足すデザイン。
  34. 34. thanks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×