フラットデザイン

フラットデザインについてのまとめです。

フラットデザインの特徴

いわゆる凝った作りを「リッチデザイン」といい、その方向性に反する形で注目されているのが「フラットデザイン」である。

■フラットデザインの特徴

• ・ドロップシャドウやグラデーションによって立体感を表現しない。
• ・グラデーションやテクスチャを使って素材感を表現せず、単色を使用する。
• ・強いハイライトで光沢や反射を表現しない。
• ・現実世界にあるものをリアルに表現せず、抽象的に表現する。
• ・罫線、枠線、囲み、角丸はあまり用いず、余白を活用する。

スマートフォン普及によるフラットデザインの必要性

フラットデザインが注目されるようになった背景にはスマートフォンの普及がある。

スマートフォンによるタッチ操作は、マウスクリックのようにポイントを正確に示すことが難しく、タップの瞬間はボタンが隠れてしまう。したがって、タッチで操作しやすくするには、必然的にタップする部分を大きくする必要がある。

その際、過剰に装飾された立体的なデザインがスマートフォンの小さな画面に並ぶと、ゴチャゴチャして複雑さが増してしまい、UIとしては使い勝手が悪い。いわゆる暑苦しいデザインだとどうしてもユーザーに負担がかかる。

そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。

PCとスマートフォンの閲覧環境の違い

• ・スマートフォンはPCに比べて画面が小さい。
• ・スマートフォンはタッチで操作する。（ロールオーバーがない）
• ・PCに比べてスクロールしやすい。（ドラッグによる加速スクロールができ、長いページも閲覧しやすい）
• ・ピンチアウト操作で、ページを拡大して見ることができる。
• ・高解像度ディスプレイが搭載されているものが多い。
• ・ユーザー数と使用時間が拡大した。（ユーザーが常に端末を持っていて、どこでも閲覧できる）

レイアウトがシンプルになった理由

フラットデザインでは1カラムレイアウトが多いが、それは下記の理由がある。

• ・PCサイトではスクロールは嫌われるため、一覧性を重視し、ファーストビューに(ナビゲーションも含めた)重要な情報を収める必要があった。

• ・タッチデバイスは画面が小さく、なぞるだけで簡単にスクロールできる。そのため、PCに比べてスクロールが普通の動作として浸透している。

• ・小さい画面でスクロールを前提にすると、1ページの流れは1本にするのが好ましい。

上記のような理由で、段組みを使った複雑なレイアウトから、ワンカラムのレイアウトに移行する例が増えた。