フラットデザインは、シンプリシティ（単純化、簡素化）の考えにそったミニマリズムにもとづく、洗練されたデザインと考えられているでしょう。しかし、フラットデザインにおけるシンプリシティの実現は簡単ではありません。きれいにまとまったビジュアルと機能的なデザインを創り出すことを考慮し、すべての要素を同じ目的のためにデザインしなければなりません。
ユーザーのためになるフラットデザインの活用方法には、どのようなものがあるか見ていきましょう。
見えないデザイン
不要なスタイリングを取り除きましょう
ユーザーが気付かないような、「見えないデザイン」を実践するのは良いことです。なぜなら、ユーザーが毎回デザインに気を取られていては、「体験への没入」の妨げになってしまうからです。ゴールは、特定のアクションやメッセージを、ユーザーに素早く簡単に理解してもらうことのはずです。必要な機能を明らかにするために、デザインの視覚的な要素は削ぎ落とすべきです。
DropboxのフラットなWebサイトはコンテンツだけにフォーカスを当てています。
鮮やかな色
色はフラットデザインの主な効果である
フラットデザインにおいて、色は重要な要素です。色は、Webサイトの雰囲気やアプリの見た目を決定づけます。フラットデザインのカラーパレットは、ほかのアプリやWebサイトのものと比べると、明るくカラフルです。
引用元: Rovane Durso
ヒント：
- Material DesignとFlat UI Colorsは、色を選ぶときに参考になります。
Flat UI Colorsは、フラットデザインの配色を決める最適の場所です。
- 彩度が高過ぎない色を選ぶことで、ユーザーの目を疲れさせることなく、Webサイトを美しく見せることができます。
ソフトな色を用いると、Webサイトで伝えたいメッセージへの注目を損なわずに効果のあるビジュアルを提供してくれます。
- 明るい色は、落ち着いた配色の背景において、アクセントとして使えます。下の画像では、アクセント・カラーがどれだけ目立たせることができるかを確認できます。
暗い背景の中の明るい画像は、印象的です。 Credits: triplagent
- 色のアクセシビリティを考えることは、ビジュアルデザインにおいて重要なポイントです。カラーパレットをテストして、十分なコントラストがあるか確認しましょう。
タイポグラフィに注目する
フォーカスによる美しさのためのデザイン
テキストは、ユーザーにページでもっとも重要なものを示し、使い方を伝えます。タイポグラフィは、シンプルなものを使用することが好ましいでしょう。可読性が高く、読み込みが速く、そしてミニマリズムのスタイルに必要不可欠であるためです。
ヒント：
- フラットデザインのWebサイトで使用する最初のタイポグラフィは、豊富なバリエーションと大きさが選べるシンプルなサンセリフのフォントを検討しましょう。
- フォントのトーンはデザイン全体のテーマに合ったものにしましょう。飾り気がありすぎるフォントは、シンプルなデザインでは少し格好悪く見えてしまうかもしれません。
モーション
モーションは、フラットデザインをよりユーザー中心のものにします
フラットデザインのシンプルさは、モーションと相性が良いです。アプリやWebサイトでのインタラクションにおいて、ユーザーは以下のようなことが気になるかもしれません。
- 「ここで一番重要なものはなんだろう？」
- 「どうしたら次にするべきことがわかるの？」
- 「タスクを完了できたかどうか、どうしたらわかるの？」
このような質問は、ユーザー体験より良いものにするモーションのヒントとなるかもしれません。モーションを使うことで、UXを最適化し上記のような質問に対応することができます。
- モーションはユーザーの注目を集めたり、クリックやジェスチャーを行うことで何が起きるかを予測させたりすることができます。
- ユーザーをインターフェースに慣れさせることができ、ページごとの注目すべき点を示してくれます。
- 視覚的なフィードバックを提供します。
モーションを使ったデザインは、トランジションやアニメーション、奥行きを表現するテクスチャなど、さまざまな形で見られます。
モーションは、ユーザーとのインタラクションを円滑にし、理解しやすくしてくれます。
イラスト
イラストはフラットデザインを拡張するものです
フラットデザインがレイヤー化されるほど、デザインはイラストを含むものになっていきます。
百聞は一見にしかず。イラストは、体験をよりわかりやすくしてくれます。
しっかりと作られたイラストは、コンセプトを解釈しやすいビジュアルに変え、メッセージを明確にします。
Intercomは、情報を含むイラストを用いています。これにより、重要な情報を欠かすことなく、視線をガイドします。
フラットデザイン2.0
インタラクションは、説明が必要ないくらい直感的でなければならない
フラットなUIをデザインすることにおいて最大の問題は、インタラクティブな要素です。ユーザーは、ページ内のどの部分が動かないコンテンツで、どこがクリックのできる部分かを理解しなければなりません。
デザイナーたちは、このような問題点に気付いていました。その結果として、成熟されバランスの取れたフラットデザインの解釈が生まれました。それがフラットデザイン2.0です。
フラットデザイン2.0は、ミニマリズムとスキューモーフィズム両者の良い側面をうまく用いて効果を生み出します。
フラットデザイン2.0は、わずかな影とエッジ効果を活用し、インタラクティビティを暗示します。影とグラデーションは、ユーザーにインターフェース上のどこがクリックできて、どこができない箇所なのかを理解させる効果を持っています。これにより、ユーザーの理解度が向上します。
影は要素の優先順位をユーザーに伝えてくれます。一定のケースにおいて、２つのうち片一方を優先的にする差別化を手助けしてくれます。
以下の一例で、コールトゥアクション（CTA）ボタンの微妙な影が、効果的であることが確認できると思います。
Stripeのホームページでは１つ目と２つ目の両方のCTAボタンが、背景より浮き上がっています。
まとめ
フラットデザインには、Webサイトを機能的かつ美しく見せるための鍵となる特性をすべて持っています。機能性と美しさのバランスがとれた、デジタルデザインの新しい模範へと、私たちを一歩近づけてくれます。
