フラットデザインに関する基礎知識

フラットデザインの基本的な説明は下記などに丁寧にまとめられていますので、ご覧になってください。

<疑問1>リッチデザインは飽きられた？

「リッチデザイン」とはフラットデザインと対比する用語で、シャドウ・ハイライト・テクスチャ・グラデーション・まで非常に細部まで作り込み、リアルさを追求したデザインのこと。また、リッチデザインに良く似ているようで違う「スキュアモーフィズム」という実世界にある物の特徴をリアルに再現することを目指したデザイン手法のこと。
ざっくり言ってしまえば、この2つがこれまでのWEB・UIおけるデザインをひっぱって来たのではないでしょうか。
Windows Vistaが登場した時は「アクアボタン」なんてものが流行りましたね。

そんなこれまで引っ張って来た「リッチデザイン」「スキュアモーフィズム」は飽きられたのか(´･ω･`)？
もう古くなったということなのでしょうか(´･ω･`)？

デザイナーはユーザーをストレス無く、目的とする情報へ導かなければいけない役割があり、その時々に応じて最も最適なデザインは？を日々考えます。
必ずそこには何らかの理由があり、飽きや流行りでデザインを作ることはありません。

<疑問2>なぜフラットデザインは増えているの？

Microsoft社がInternet ExplorerをWindows95と共に無料配布した1995年のインターネットブームから、18年が経ちました。そんな時代の中で、人間の意識の中に勝手に擦り込まれたルールというものが出来ています。例えば、

• メール＝封筒
• インターネット＝地球
• 電話＝受話器
• 捨てる＝ゴミ箱

それぞれを表現する時に、ごく自然に決まった実世界の物が思い浮かぶはずです。

決まったものが思い浮かぶということは、ごちゃごちゃと説明する必要は無いということ。
メールであればリアルな封筒をデザインする。それすら、説明的すぎて逆に煩わしく感じる。分かってるよ;;といった感じでしょうか。
メールがリアルな封筒（UIが主張し過ぎ）であるが為に、本当に伝えたい情報や、コンテンツを邪魔しているのではないか？
「本当にユーザー伝えたいことは何なのか？」という事を考えた時に、電子書籍であれば文章そのものであり、動画サイトであれば、動画そのもの。という結論に辿り着き、結果、邪魔にならない最低限のビジュアルで分かる「フラット」というデザインに落ちたと考えられます。

Windows8、iOS7、Android4.0、これらにフラットデザインが採用されたのは、コンテンツを邪魔しないように、ユーザーへの配慮・気配りとも捉えられます。

<疑問3>フラットデザインは、いつどこで使うの？

実体験で、フラットデザインをした（結果的にフラットにせざるを得なくなった）時の特徴がいくつかあるので、書き出してみます。

• 直感的に操作したい
• 閲覧時の快適さ（スピード）重視したい
• 各OSに最適化したい
• タブレットならではの操作を生かしたい（タップ、フリック等）

これらの要望があるとすると、必然的に画像を極力使用せず、コードで書ける表現にする必要がありました。
デザインデータも当然Photoshopではなく、svgに変換する為illustratorでベクターのデータを用意しました。
アニメーションになる部分は、コマ送りの要領で処理する為、動きがなめらかに見えるコマ数のデザインを用意しました。
svgに出力する際、使用出来る効果はドロップシャドウ、グラデーション、透明に限られます。乗算、オーバーレイ、光彩等の描画モードは出力出来ない為一切使えなくなります。つまりデザインに制約が出来てしまい、表現が限られてしまう。

結果、フラットにならざるを得ない。そんなこともありました。

まとめ

さて、私たちデザイナーはこれからフラットデザインに移行しなければいけないのか？
決してそうではないと思います。フラットとリッチは両方これからも時々に応じて必要とされ、どちらが最適かをデザイナーが選択しなければならない、という苦労はあるかもしれません。

PC、タブレット、スマホが普及し、特にスマホ・タブレットは今後進化し続けていくことでしょう。
進化の度に解像度が変わる煩わしさがあり、デザイナー含め制作者は毎度頭を悩まされる………
これって、一から作り替え(´･ω･`)？
そんなことにならないよう、進化に耐えうる汎用性高いデザイン手法の一つが「フラットデザイン」。
というまとめで終わらせて頂きます。