フラットデザインって？

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

フラットデザイン？

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

フラットデザインの基礎知識http://liginc.co.jp/web/matome-web/19271

スキューモーフィズム フラット～iOS6 iOS7

なぜAppleはスキューモーフィズムと決別したのか

• スキューモーフィズム：現実に似せることで、理解を促進する。

• 「現実のメタファーを必要とする時代は終わった」という意思表示

• マテリアルオネスティー（＝そのものを尊重した方が長く愛される）という考え方

マテリアルオネスティー

http://all-web.org/ala/material-honesty-on-the-web/

フラットデザインでいいこと

• iOS7のインターフェイスにマッチする。•コンテンツにフォーカスできる。• CSSで見た目を作りやすいので、レスポンシブに対応しやすいし、軽量。

•確かに流行りでもあるので、クリエイティブに敏感なプロダクトに見える。

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

工夫ポイント①　レイヤー構造

✓透過を多様した擬似的な奥行き

✓ドロップシャドウを使わずに、モノが重なっていることを意識させる

半透明なUI要素を使って、奥に何があるか見えるようにする。半透明な要素（たとえばコントロールセンター）には、作業の流れを示し、より詳しい内容があることを認識させ、あるいは一時的な要素であることを明示する働きがあります。iOS 7では、半透明な要素があるとそこだけ

パラフィン紙を置いたように、奥の内容が曇って見えます。～iOS7 ヒューマンインターフェイスガイドラインより～

工夫ポイント② 内容を尊重する

✓画面全体を有効に活用する。✓最も重要なものはなにか。装飾や枠の使い方を再考する。

✓天気アプリは、現在の天気（最も重要な情報）を画面いっぱいにつかい、空いたスペースで1時間毎の天気などを示す。

工夫ポイント③ 明瞭性

✓最も重要な情報や機能が明確に分かり、容易に操作できるようにする

✓鍵となる色で重要箇所と、操作可能であるということを示す。（それ以外に、同じ色を使わない）

✓何もない空間を活かし、重要な情報に目を活かせる

押せるところが同じ青で統一されている

工夫ポイント④ タイポグラフィー

✓コンテンツの重要度を考慮し、重要なものを大きく太く扱う。

✓大きさを変える際に考慮する。✓アプリケーションを通じて同じフォントを使う。スタイルや大きさもごく少数に留める。（ごちゃごちゃしないのでどこを見ればいいのか明快）

日付は小さいまま

工夫ポイント⑤ アニメーション

✓アプリケーション起動時✓たちあがって、元の場所に戻る✓写真アプリ✓詳細からアルバムへ、アルバムから詳細へ

※各位iPhone参照

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

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

おまけ：フラットデザインから生まれた流行

ロングシャドウエフェクト

http://naldzgraphics.net/design-2/evolution-of-flat-design/

おまけ：フラットデザインから生まれた流行

ささやかなグラデーション

http://naldzgraphics.net/design-2/evolution-of-flat-design/

フラットデザイン参考サイト

• http://fltdsgn.com/• http://flatdesignluv.com/• http://www.nnmal.com/2013/05/60-flat-design-websites/