Android Bazaar and Conference 2014 Spring: デザイントラック「UI/UXデザイントレンド 2014」発表資料（2014年3月21日、秋葉原ダイビル+UDX） http://www.android-group.jp/conference/abc2014s/conference/design/

1. デザイン／開発トラック
UI/UX デザイントレンド 2014
UI/UX Design Trends 2014
Nobuya Sato
Experience Designer
March 21st., 2014 – ABC2014 Spring
Twitter: #abc2014s
Copyright © 2014 Secret Lab, Inc. All rights reserved.

2. 自己紹介
• 佐藤 伸哉 (@nobsato)
• UXデザイン、デザイン戦略、IA
– 神戸芸術工科大学卒、1994からWebのデザイン、主に大規模
な企業サイトの情報設計や企業のグローバル戦略を実行
– SONYでグループ横断のAndroidプラットフォーム UX戦略、
タブレット戦略を担当
– 米Seesmicで日本語化やAndroidやWP7のアプリ開発
– UXとデザイン戦略の会社、Secret Lab, Inc.を設立
– 現在、米AKQAの東京オフィスの立ち上げに参画
2

3. 本日のトピック
• デザイントレンド
• ANDROID UI
• ANDROID WEAR UI
3

4. デザイントレンド
過去から現在まで
4

5. 5

6. スキューモーフィズムから
フラットデザインへ
6

7. スキューモーフィズムとは
• 「スキューモーフィズム（skeuomorphism）とは、他の物質に似せるた
めに行うデザインや装飾のことで、たとえば、紙製のカレンダーのよう
な外見に似せたカレンダーのソフトウェアのデザインなどがあては
まる。」（出展：Wikipedia）
7
スキューモーフィズムの例。
この車の模様は木目調である

8. 8http://www.flatvsrealism.com/

9. 9
Kitapps

10. 10
Android Design, Jelly Bean

11. 11
Android Design, KitKat

12. 12
Android 4.4 KitKatAndroid 4.1 Jelly Bean

13. ANDROID UI
トレンドの変遷
13

14. 2011 Design Trends
14
HTC Sensation / Sense UI

15. 2011 Design Trends
15
• 色調が強い背景
• 派手な色
• 白いテキスト
• リアル／立体的なアイコン
• スキューモUI

16. 2011 Design Trends
16
HTC Sense UI

17. 2011 Design Trends
17
au INFOBAR / iida UI

18. 2012 Design Trends
18
EZ Weather

19. 2012 Design Trends
19
• 黒／ダークな背景
• ダークでマットな色
• 水色／白いテキスト
• リアルなアイコン
• グリッドスタイル
• ボーダレスUI

20. 2012 Design Trends
20
Eye In Sky Weather app / cLock Weather Widget UCCW skin

21. 2012 Design Trends
21
• リアルなアイコン
• グリッドスタイル
• ボーダレスUI
• 黒／ダークな背景
• ダークでマットな色
• 水色／白いテキスト
Google Music

22. 2013 Design Trends
22
Google Now

23. 2013 Design Trends
23
• 白／明るい背景
• ビビットな色
• グレー／黒いテキスト
• シンプルなアイコンやイラスト
• カードスタイル
• ボーダレスUI

24. 2013 Design Trends
24
Google Now

25. 2013 Design Trends
25
• 白／明るい背景
• ビビットな色
• グレー／黒いテキス
•
• カードスタイル
• ボーダレスUI
Google Play Music

26. 2014 Design Trends
26
Yahoo! Weather

27. 2014 Design Trends
27
• ／ 背景
• 半透明／ぼかし／グラデーション
• 白／大きなテキスト
• シンプルなアイコン
• カードスタイル
• UI…？（後ほど）

28. 2014 Design Trends
28
Glass Action Bar
https://github.com/ManuelPeinado/GlassActionBar
Fading Action Bar
https://github.com/ManuelPeinado/FadingActionBar

29. 2014 Design Trends
29
Android Wear UI

30. 2014 Design Trends
30
muzei Live Wallpaper

31. 2014 Design Trends
31
• ／ 背景
• 半透明／ぼかし／グラデ
• 白／大きなテキスト
• シンプルなアイコン
• カードスタイル
• UI

32. 32
Android Wear UI

33. 33
2014 Design Trends
Android.com/Wear

34. 34
2014 Design Trends
1. より大きなテキスト
2. 写真・ビジュアルリッチな背景
3. 半透明
4. グラデーション
5. トーンを落としたマットな色
6. サークル UI

35. Thank You
Copyright © 2014 Secret Lab, Inc. All rights reserved. 36
Nobuya Sato
Experience Designer
nobsato@secret-lab.jp
http://twitter.com/nobsato
http://google.com/+nobsato
http://slideshare.com/nobsato