おしゃれでモダンなホームページが使っているデザイン原理を学びましょう。ここでは現在の流行であるフラットデザインを紹介し、さらにフラットデザインに至るまでのデザインスタイルの変遷を振り返ることで、より深く理解しましょう。
フラットデザイン
最近のおしゃれなウェブサイトの多くはフラットデザインという手法を取り入れてデザインされています。フラットデザインは2012年にマイクロソフト社がリリースしたWindows 8のデザインとして登場し、多くのデザイナーに注目されました。「これがフラットデザインのルールだ！」というような文章はありませんので、人によってフラットデザインの捉え方は異なりますが、主な特徴は下記のとおりです。
- グラデーションやテクスチャ（木目調やコルクボードのような素材感のある背景）を使わず、単色を使って平坦な面をつくる
- 枠線や囲み線を使わず、色を変えたりスペースをとったりすることでセクションを区切る
- 現実世界の立体的な物質の表現を志向せず、抽象的な表現を好む
- 従来の立体的なボタンではなく、面を活かしたパネルの表現でクリックを促す
単に「フラット」になっているデザインがフラットデザインということではありません。グラデーションや枠線のような装飾を削ぎ落として、単色による面を活かしたデザインにした結果、見る人にフラットで抽象的な印象を与えるデザインになったと考えるべきでしょう。
フラットデザインの代表的な例は、WindowsのUI（ユーザーインターフェース）はもちろん、マイクロソフト社のウェブサイトもフラットデザイン的な表現になっています。また、当サイトもフラットデザインに大きな影響を受けたデザインになっています。
リッチデザインへの反動
フラットデザインは、Windows 8の登場、すなわち2012年以前に流行していた「リッチデザイン」と呼ばれるデザインスタイルへの反動という側面を強く持っています。
リッチデザインでは、立体感や素材感の表現を重視し、2次元のモニターの中に現実世界の物体そのものを表現しようとしていました。これは「スキューモーフィズム（Skeuomorphism）」という考え方に基づくもので、単なるデータであるモニターの表示について、できるだけ現実世界にある物のイメージを「比喩」として用いることで、使いやすい画面ができあがると考えます。ですから、ボタンであれば「現実のボタンのように」立体的に突起していて、いかにも「押せそう」という印象を与えるデザインを目指しました。
現実世界に近づけるため、光の当たり方によって生じるグラデーションや影を描写し、背景にも現実の壁や床が持つ素材感の再現を行いました。結果、画面のデザインは様々な装飾に彩られて「リッチな」印象を与えることになります。
このリッチデザインの傾向はパソコンやウェブの普及とともに長く続いており、技術の進化に歩調を合わせて、どんどん立体的で派手な表現が追求されて行きました。
モバイル端末の普及による状況の変化
リッチデザインの追求が進み、デザイナーの間には「可能なデザインはあらかた出尽くしてしまったのではないか」というある種の飽きが漂っていました。
同時に、ウェブを使うユーザーの状況にも変化が生じます。2007年の初代iphoneの登場を皮切りに、ウェブページはパソコンのモニターで見るものから、スマートフォンで見るものへと一気に変わりました。初期のスマートフォンは「ケータイでもパソコンのサイトが開ける」ことがウリ文句の一つでした。しかし、いざ小さな画面でリッチデザインのページを見てみると、ごてごてとした装飾がギチギチに並んでしまい、暑苦しく見づらいページになってしまいました。
こうした状況の中、Windows 8が示したフラットデザインの方向性は、小さな画面でも詰まった印象を与えず、読みやすいページが作れるうえに、リッチデザインに飽き始めていたデザイナー達の心を捉えたわけです。
今後どこまでフラットデザインの流行が続くのかは誰にも分かりませんが、まだまだ若いスタイルであり、当分は表現の可能性が模索され続けることでしょう。
まとめ
従来流行していたリッチデザインでは、現実世界の物が持つ質感や立体感の表現を重視しており、様々な装飾を凝らしたページが作られていました。
しかし、スマートフォンの普及で、パソコンのモニターではなく小さなスマホ画面でウェブページを見ることが普通になると、リッチデザインは暑苦しいものになってしまいます。
そこに現れたフラットデザインは、単色による面を活かしたデザインで、装飾も削ぎ落としたデザインでした。フラットデザインは小さな画面でも読みやすいページをデザインできるうえに、見るものに与える抽象的なイメージの新鮮さがデザイナー達の心を捉え、現在のウェブデザインの主流になったのでした。