社内勉強会用にまとめたフラットデザインの概要と、iOS7で工夫されているフラットデザインのポイントをまとめました。

2. フラットデザインって？

3. イメージをどうぞ
• ぺたっていう。
• どこを押せばいいかわかりにくい。
• たいら。
• すけてるのがおおい。
• レイヤー構造がむずかしそう。
• ミニマルデザインのいろついた版
• アイコンがシンプル

4. フラットデザイン？
フラットデザインの基礎知識
http://liginc.co.jp/web/matome-web/19271
今年絶対おさえておきたいフラットデザインのまとめ
http://liginc.co.jp/web/matome-web/19271

5. ∼iOS6
iOS7
スキューモーフィズム
フラット

6. なぜAppleは
スキューモーフィズムと決別したのか
• スキューモーフィズム：現実に似せること
で、理解を促進する。
• 「現実のメタファーを必要とする時代は終
わった」という意思表示
• マテリアルオネスティー（＝そのものを尊
重した方が長く愛される）という考え方

7. マテリアルオネスティー
http://all-web.org/ala/material-honesty-on-the-web/

8. フラットデザインでいいこと
• iOS7のインターフェイスにマッチする。
• コンテンツにフォーカスできる。
• CSSで見た目を作りやすいので、レスポ
ンシブに対応しやすいし、軽量。
• 確かに流行りでもあるので、クリエイ
ティブに敏感なプロダクトに見える。

9. iOS7に学ぶ
フラットデザイン

10. 工夫ポイント① レイヤー構造
透過を多様した擬似的な
奥行き
ドロップシャドウを使わ
ずに、モノが重なってい
ることを意識させる

11. 半透明なUI要素を使って、奥に何があるか見えるようにする。半透明な
要素（たとえばコントロールセンター）には、作業の流れを示し、より
詳しい内容があることを認識させ、あるいは一時的な要素であることを
明示する働きがあります。iOS 7では、半透明な要素があるとそこだけ
パラフィン紙を置いたように、奥の内容が曇って見えます。
∼iOS7 ヒューマンインターフェイスガイドラインより∼

12. 工夫ポイント② 内容を尊重する
画面全体を有効に活用する。
最も重要なものはなにか。装飾
や枠の使い方を再考する。
天気アプリは、現在の天気（最
も重要な情報）を画面いっぱい
につかい、空いたスペースで1時
間毎の天気などを示す。

13. 工夫ポイント③ 明瞭性
最も重要な情報や機能が明確に
分かり、容易に操作できるよう
にする
鍵となる色で重要箇所と、操作
可能であるということを示す。
（それ以外に、同じ色を使わな
い）
何もない空間を活かし、重要な
情報に目を活かせる
押せるところが同じ青で統一されている

14. 工夫ポイント④ タイポグラフィー
コンテンツの重要度を考慮し、
重要なものを大きく太く扱う。
大きさを変える際に考慮する。
アプリケーションを通じて同じ
フォントを使う。スタイルや大
きさもごく少数に留める。（ご
ちゃごちゃしないのでどこを見
ればいいのか明快）
日付は小さいまま

15. 工夫ポイント⑤ アニメーション
アプリケーション起動時
たちあがって、元の場所に戻る
写真アプリ
詳細からアルバムへ、アルバムから詳細へ
※各位iPhone参照

16. フラットデザインを
制作する上でのポイント

17. フラットで気をつけること
• フラットデザインはごまかしがきかない
• 重要な要素がハッキリわかるように
• 重要なものは思いっきり扱う
• 余白を上手に使う
• 明快な色使いを心がける
• アニメーションなど、フィードバックを
重視する

18. おまけ：
フラットデザインから生まれた流行
ロングシャドウエフェクト
http://naldzgraphics.net/design-2/evolution-of-flat-design/

19. おまけ：
フラットデザインから生まれた流行
ささやかなグラデーション
http://naldzgraphics.net/design-2/evolution-of-flat-design/

20. フラットデザイン
参考サイト
• http://fltdsgn.com/
• http://flatdesignluv.com/
• http://www.nnmal.com/2013/05/60flat-design-websites/