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エバンジェリストが総括してみます。

2. OS のフラットデザインを考えてみる
春日井良隆
日本マイクロソフト株式会社
UX エバンジェリスト

3. iOS
iOS7
iOS6

4. iOS
iOS7
iOS6

5. Android 4.4

6. Google Chrome

7. Internet Explorer

8. Yahoo! Japan

10. Zune (2006)

11. Windows Phone (2010)

12. Xbox360 (2011)

13. Windows 8 (2012)

14. Windows 8.1 (2013)

15. IE11 (2013)

16. UI

17. CLI - Command Line Interface

18. GUI - Graphical User Interface

19. GUI - Graphical User Interface

20. Skeuomorphism

21. Skeuomorphism

22. Skeuomorphism

23. Skeuomorphism
http://memo.goodpatch.co/2013/04/about-save-icon/

24. フラットデザイン (と呼ばれる) UIに見られる共通項
1. 不必要な装飾の排除
2. 抽象化、象徴化
3. タイポグラフィ
トレンド ?
メタファーの変化 ?
飽き？

25. GUI - Graphical User Interface

26. Swiss Design

27. devices

32. • Kindleの絵

33. スキューバーダイビングとシュノーケル

34. Content
before
Chrome

36. モバイルの利用状況のデザインヒント
1. 余分なものを削ぎ落とす
2. ちら見しやすいようにデザインする
3. 階層を深くしない
4. 自然な形で接点を見せる
5. 途中で操作を止めても同じところから再開できるようにする
6. 時間軸を使って情報を整理する

37. 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/

38. Android Design Principles
1. Enchant me
2. Simplify My Life
3. Make Me Amazing
http://developer.android.com/design/get-started/principles.html

39. 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

40. 次におこなうのは、その膨らんだ原稿から「なくても
いいところ」を省く作業だ。余分な贅肉を片端からふ
るい落としていく。
文章量は自然に落ち着くべきところに落ち着く。これ
以上は増やせないし、これ以上は削れないという地点
に到達する。エゴが削り取られ、余分な修飾が振い落
とされ、見え透いた論理が奥の部屋に引き下がる。
村上 春樹

41. 完璧だと思えるのは、付け足すものがなく
なった時ではなく、もう何も取り去るものが
なくなったときである。
谷昇
「ル・マンジュ・トゥー」オーナーシェフ

43. Resources

44. Flat UI

45. Pixel Fabric

46. Pinterest

47. UI/UX Flat design

48. Font

49. Color

50. Color

51. COLOURlovers

52. Adobe Kuler

53. Inforgraphic

54. 黄金比
1
1.61803398874989484820458683436

55. グリッドシステム
Copyright © 2008-2012 Antonio Carusone, unless otherwise noted