フラットデザインが与えたものと、失わせたもの。 フラットデザインだけじゃないデザインの変更点について。フラットデザインへの変更メリット／デメリット、何を変えるべきなのか？何を守るべきなのか？ 今後を見据えたデザインを考える。 こちらのセミナーで公開したスライドとなります。 http://atnd.org/event/iOS7FlatDesign

1. フラットデザインだけじゃない
今後を見据えたUIデザインとは？

2. 自己紹介
• Yahoo! Japan / GxYz
UI・UXデザイナー
• Twitter: @saladdays
• 連載：LESSで3倍ラクする
スマートフォンコーディング
http://gihyo.jp/design/serial/01/less
宇野 雄

3. フラットデザインが与えたものと、
失わせたもの

4. iOS7における
フラットデザインの考え方

5. "Skeuomorphism"から"Simplicity"へ
• 根本的かつ抜本的な画期的な変更
• 「現実のメタファーを必要とする時代は終わった」
という意思表示

6. 「押せる感」は、現実とは離れたものに

7. フォントを強調したタイポグラフィ
全画面を意識したデザイン

8. iOS7における
フラットデザインを行う際の難点

9. 操作方法がわかりにくい
文字がないと
操作が想像しにくい

10. 日本語だとダサい

11. 簡単に見えるが、表現手段が少なくなった分バラン
スはより繊細に、細かなクオリティが求められる

12. そもそもiOS7は
フラットデザインか？

13. 実はグラデーションを多用している

14. 「平面」ではなく「立体感がない」デザ
インを意識している

15. 透過を多用し、レイヤー構造をもたせ、
擬似的な奥行きを見せてる

16. フラットデザインだけじゃない
デザインの変更点

17. 全幅のテーブルビューを推奨
両脇にスペースは無い

18. ステータスバーもデザインの一部
ステータスバーが半透明になり
よりデザインに溶け込む形になった

19. Retina Displayオンリーに対応
1pxの線で描かれた
アイコンが多用

20. アイコンの形が微妙に変更

21. アイコンの形が微妙に変更

22. 影響を受けるデザイン
iOS7iOS6

23. 影響を受ないデザイン
iOS7iOS6

24. アイコンの大きさも微妙に変更

25. Safari
1pxスクロールしても消え
ないようになった

26. Safari
実質的なファーストビュー
は狭くなった

27. 何を変えるべきなのか、
何を守るべきなのか

28. フラットデザインへの変更の
メリット／デメリット
×

29. iOS7でもSkeuomorphismを
採用するのはアリ
デザインの役割で
決める

30. iOS7でフラットデザインへ
変更するメリット
• 今風でオシャレ
• OSに溶け込み違和感が少なくなるため利用への障
壁が低くなる
• 「次へ」のアクションへつなぐアプリには向いてる
（ToDoやカレンダー）

31. フラットデザインへ変更するデメリット
• 特徴がより薄くなる／他のアプリに埋もれやすくな
る
• アプリ内の世界観を持たせにくい

32. 何を変えるべきなのか
デザインを変えなくても
対応しなきゃいけないiOS7対応の注意点

33. 標準ジェスチャーとの競合

34. 左右のフリック

35. 上下のフリック
通知センター
コントロール
センター

36. 影響を受けやすいUI例
幅いっぱいのカルーセルだと
誤ってジェスチャーが
発火するかも

37. 何を守るべきなのか
今後を見据えたデザインを考える

38. 旧標準UI（∼iOS6）はいずれなくなるので、
今からその時どのような対応（独自UI or 新標準UI）を
選ぶかは決めておいた方が良い

39. アプリの性質に合わせたデザインをする
• カッコイイからだけじゃダメ
• トレンドに乗ることは大事な場合もある
• ユーザーの要望を叶えるデザインが最優先

40. わかりやすいデザイン
• 操作性を優先してデザインをしない
• オリジナリティが操作性を奪ってはいけない
• 標準UIの良いところは積極的に吸収すべき個性を演
出するべき点を意識してつくる

41. ご静聴ありがとうございました