OS のフラットデザインを考えてみる

春日井良隆
日本マイクロソフト株式会社
UX エバンジェリスト
iOS
iOS7

iOS6
iOS
iOS7

iOS6
Android 4.4
Google Chrome
Internet Explorer
Yahoo! Japan
Zune (2006)
Windows Phone (2010)
Xbox360 (2011)
Windows 8 (2012)
Windows 8.1 (2013)
IE11 (2013)
UI
CLI - Command Line Interface
GUI - Graphical User Interface
GUI - Graphical User Interface
Skeuomorphism
Skeuomorphism
Skeuomorphism
Skeuomorphism

http://memo.goodpatch.co/2013/04/about-save-icon/
フラットデザイン (と呼ばれる) UIに見られる共通項

1. 不必要な装飾の排除
2. 抽象化、象徴化
3. タイポグラフィ
トレンド ?

メタファーの変化 ?
飽き?
GUI - Graphical User Interface
Swiss Design
devices
• Kindleの絵
スキューバーダイビングとシュノーケル
Content
before
Chrome
モバイルの利用状況のデザインヒント

1. 余分なものを削ぎ落とす
2. ちら見しやすいようにデザインする
3. 階層を深くしない
4. 自然な形で接点を見せる

5. 途中で操作を止めても同じところから再開できるようにする
6. 時間軸を使っ...
iOS 7 Design Resources
iOS 7 embodies the following themes : Deference, Clarity, Depth
Defer to Content
• Take advantage o...
Android Design Principles

1. Enchant me

2. Simplify My Life
3. Make Me Amazing

http://developer.android.com/design/get-...
Windows 8 design principles

削ぎ落とす

1. Do more with less

とことんこだわる

2. Pride in craftsmanship
3. Be fast and fluid

軽快であれ、...
次におこなうのは、その膨らんだ原稿から「なくても
いいところ」を省く作業だ。余分な贅肉を片端からふ
るい落としていく。
文章量は自然に落ち着くべきところに落ち着く。これ
以上は増やせないし、これ以上は削れないという地点
に到達する。エゴが削り取...
完璧だと思えるのは、付け足すものがなく
なった時ではなく、もう何も取り去るものが
なくなったときである。
谷昇
「ル・マンジュ・トゥー」オーナーシェフ
Resources
Flat UI
Pixel Fabric
Pinterest
UI/UX Flat design
Font
Color
Color
COLOURlovers
Adobe Kuler
Inforgraphic
黄金比

1

1.61803398874989484820458683436
グリッドシステム

Copyright © 2008-2012 Antonio Carusone, unless otherwise noted
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
Upcoming SlideShare
Loading in …5
×

OSのフラットデザインを考えてみる

7,957 views

Published on

CSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)
http://cssnite.jp/lp/lp31/

iOS 7を機に“フラットデザイン”への注目が集まっています。次期Android 4.4 - KitKatでもUIがフラットデザインになると噂されています。Yahoo! Japanのトップページもいつの間にかアイコンが平面的にデザインし直されていました。

いまなぜフラットデザインなのか?

日本では未発売に終わった携帯音楽プレイヤー“Zune”から始まり、Windows Phone、Xbox、Windows 8へとUIを刷新してきた元祖フラットデザイン(注:MSは自社のUIに” フラットデザイン”という言葉を使ったことはありません)のマイクロソフトのUXエバンジェリストが総括してみます。

Published in: Design
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,957
On SlideShare
0
From Embeds
0
Number of Embeds
4,270
Actions
Shares
0
Downloads
63
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

OSのフラットデザインを考えてみる

  1. 1. OS のフラットデザインを考えてみる 春日井良隆 日本マイクロソフト株式会社 UX エバンジェリスト
  2. 2. iOS iOS7 iOS6
  3. 3. iOS iOS7 iOS6
  4. 4. Android 4.4
  5. 5. Google Chrome
  6. 6. Internet Explorer
  7. 7. Yahoo! Japan
  8. 8. Zune (2006)
  9. 9. Windows Phone (2010)
  10. 10. Xbox360 (2011)
  11. 11. Windows 8 (2012)
  12. 12. Windows 8.1 (2013)
  13. 13. IE11 (2013)
  14. 14. UI
  15. 15. CLI - Command Line Interface
  16. 16. GUI - Graphical User Interface
  17. 17. GUI - Graphical User Interface
  18. 18. Skeuomorphism
  19. 19. Skeuomorphism
  20. 20. Skeuomorphism
  21. 21. Skeuomorphism http://memo.goodpatch.co/2013/04/about-save-icon/
  22. 22. フラットデザイン (と呼ばれる) UIに見られる共通項 1. 不必要な装飾の排除 2. 抽象化、象徴化 3. タイポグラフィ トレンド ? メタファーの変化 ? 飽き?
  23. 23. GUI - Graphical User Interface
  24. 24. Swiss Design
  25. 25. devices
  26. 26. • Kindleの絵
  27. 27. スキューバーダイビングとシュノーケル
  28. 28. Content before Chrome
  29. 29. モバイルの利用状況のデザインヒント 1. 余分なものを削ぎ落とす 2. ちら見しやすいようにデザインする 3. 階層を深くしない 4. 自然な形で接点を見せる 5. 途中で操作を止めても同じところから再開できるようにする 6. 時間軸を使って情報を整理する
  30. 30. iOS 7 Design Resources iOS 7 embodies the following themes : Deference, Clarity, Depth Defer to Content • Take advantage of the whole screen. • Reconsider visual indicators of physicality and realism. • Let translucent UI elements hint at the content behind them. Provide Clarity • • • • Use plenty of negative space. Let color simplify the UI. Ensure legibility by using the system fonts. Embrace borderless buttons. Use Depth to Communicate https://developer.apple.com/library/ios/design/
  31. 31. Android Design Principles 1. Enchant me 2. Simplify My Life 3. Make Me Amazing http://developer.android.com/design/get-started/principles.html
  32. 32. Windows 8 design principles 削ぎ落とす 1. Do more with less とことんこだわる 2. Pride in craftsmanship 3. Be fast and fluid 軽快であれ、滑らかであれ 4. Authentically digital 5. Win as one デジタルの本質を採り入れる 一体感を与える http://msdn.microsoft.com/library/windows/apps/hh770552
  33. 33. 次におこなうのは、その膨らんだ原稿から「なくても いいところ」を省く作業だ。余分な贅肉を片端からふ るい落としていく。 文章量は自然に落ち着くべきところに落ち着く。これ 以上は増やせないし、これ以上は削れないという地点 に到達する。エゴが削り取られ、余分な修飾が振い落 とされ、見え透いた論理が奥の部屋に引き下がる。 村上 春樹
  34. 34. 完璧だと思えるのは、付け足すものがなく なった時ではなく、もう何も取り去るものが なくなったときである。 谷昇 「ル・マンジュ・トゥー」オーナーシェフ
  35. 35. Resources
  36. 36. Flat UI
  37. 37. Pixel Fabric
  38. 38. Pinterest
  39. 39. UI/UX Flat design
  40. 40. Font
  41. 41. Color
  42. 42. Color
  43. 43. COLOURlovers
  44. 44. Adobe Kuler
  45. 45. Inforgraphic
  46. 46. 黄金比 1 1.61803398874989484820458683436
  47. 47. グリッドシステム Copyright © 2008-2012 Antonio Carusone, unless otherwise noted

×