フラットデザイン
ナビゲーションに移動
検索に移動
フラットデザインについてのまとめです。
フラットデザインの特徴[編集]
いわゆる凝った作りを「リッチデザイン」といい、その方向性に反する形で注目されているのが「フラットデザイン」である。
～フラットデザインの特徴～[編集]
- ・ドロップシャドウやグラデーションによって立体感を表現しない。
- ・グラデーションやテクスチャを使って素材感を表現せず、単色を使用する。
- ・強いハイライトで光沢や反射を表現しない。
- ・現実世界にあるものをリアルに表現せず、抽象的に表現する。
- ・罫線、枠線、囲み、角丸はあまり用いず、余白を活用する。
スマートフォン普及によるフラットデザインの必要性[編集]
フラットデザインが注目されるようになった背景にはスマートフォンの普及がある。
スマートフォンによるタッチ操作は、マウスクリックのようにポイントを正確に示すことが難しく、タップの瞬間はボタンが隠れてしまう。したがって、タッチで操作しやすくするには、必然的にタップする領域を大きくする必要がある。
その際、過剰に装飾された立体的なデザインがスマートフォンの小さな画面上に並ぶと、ゴチャゴチャして複雑さが増してしまい、UIとしては使い勝手が悪い。いわゆる「暑苦しいデザイン」だと、スマートフォンではユーザーに負担がかかってしまう。
そういった観点から見て、シンプルなUIとしてのフラットデザインが求められるようになった。
PCとスマートフォンの閲覧環境の違い[編集]
PCとスマートフォンでは閲覧環境やユーザーの行動特性が大きく異なる。
- ・スマートフォンはPCに比べて画面が小さい。
- ・スマートフォンはタッチで操作する。（ロールオーバーがない）
- ・PCに比べてスクロールしやすい。（ドラッグによる加速スクロールができ、長いページも閲覧しやすい）
- ・ピンチアウト操作で、ページを拡大して見ることができる。
- ・高解像度ディスプレイが搭載されているものが多い。
- ・ユーザー数と使用時間が拡大した。（ユーザーが常に端末を持っていて、どこでも閲覧できる）
レイアウトがシンプルになった理由[編集]
フラットデザインでは1カラムレイアウトが多いが、それは下記の理由がある。
- ・PCサイトではスクロールは嫌われるため、一覧性を重視し、ファーストビューに(ナビゲーションも含めた)重要な情報を収める必要があった。
- ・タッチデバイスは画面が小さく、なぞるだけで簡単にスクロールできる。そのため、PCに比べてスクロールが普通の動作として浸透している。
- ・小さい画面でスクロールを前提にすると、1ページの流れは1本にするのが好ましい。
上記のような理由で、段組みを使った複雑なレイアウトから、ワンカラムのレイアウトに移行する例が増えた。