ウェブサイト、iOS7などで本格化し始めたフラットデザインの傾向と展望

1816viewstombi-aburagetombi-aburage

このエントリーをはてなブックマークに追加
フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

スマートフォンの普及によって、立体感/多色/メタファーなどを重視した
既存のリッチデザインが妥当でなくなり、フラットデザインが流行しはじめた。

本書では、その傾向と展望を解説している。

選択肢をわかりやすく提示する「パネル」スタイル

「入り口」としての機能を重視

メッセージを確実に伝える「タイポグラフィ」スタイル

ファーストビューの情報量は多くなく、スクロールすることで徐々に伝える

大きな写真で引きつける「ラージフォト」スタイル

写真が現実世界との接点として機能する

情報の単位を示した「カード」スタイル

Facebook、Twitterなどの例

サイドバーを隠したワンカラムのレイアウト

右上のメニューボタンを押すとメニューが横から出てくる

情報の単位を「囲み」を使わずに表現する

スペースを区切らないことで広く見せる

色を分けずに広い色面を作る

色を区切らないことで広く見せる

ボタンに「座布団」は必要なのか?

フラットデザインでは「座布団」に変えて4つの段階で表現する

無彩色を中心に構成し、色に意味を込める

アプリごとにキーカラーを決めて、その他の部分での使用を控える

色で情報を分類し、ストーリー性を生み出す

メリハリをつけ、変化をつける

半透明レイヤーで画面を多様に活用する

画面を移動することなく新たな機能や情報を提示する

アップル、グーグルのデザインガイドライン

アップルはフラットデザインに移行。グーグルはこれから。

フラットデザインをもっと知るための情報源

関連まとめ

本のまとめカテゴリー


コメントを書く