フラットデザイン

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

フラットデザインの特徴

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

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

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

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

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

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

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

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

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

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

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

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

• ・PCサイトではスクロールは嫌われるため、ファーストビューに重要な情報を収める必要性があった。

• ・タッチデバイスの場合、画面をのぞるだけでスクロールできるので、PCに比べてスクロールの抵抗がない。

• ・スマートフォンだと元々画面が小さいので、スクロールしながら見るのが普通の動作になっている。

• ・スクロールを前提にすると、ナビゲーションを減らすことができし、1ページの流れは1本にしたい。

• ・そういう流れで段組を使った複雑なレイアウトから、ワンカラムのレイアウトに移行する例が増えた。