最近めっきりトレンドとなってしまったフラットデザインですが、様々な有名企業がこぞって採用したことから非常に話題を呼び、今では目にしないことの方が珍しくなってしまいました。しかし、フラットデザインは、どのようにして生まれ、どのようにして発展してきたのでしょうか？ 何故、ウェブの世界で採用されているのでしょうか？ あまねくデザインに関して言えることですが、スタイルや技術が生まれたきっかけ、そして、歴史を知ることで、そのデザインの採用に関して、情報に基づいた決断をしっかりと下すことが出来るようになります。それでは、そんな、フラットデザインの意味や、影響を受けた過去のデザイン、そして、人気を得た経緯などを探っていきましょう。
この用語を聞いたことがない人はあまりいないかもしれませんが、一応説明します。これは、デザインの要素が、スタイルの機能を持たないため、非常にシンプルに見えるデザインの事を指します。
要するに、ドロップシャドウ、傾斜、質感、そして、その他の3D感を出すための要素を排除したデザインと言います。
現代のデザイナー達は、鮮明で、現代的に映るため、そして、なによりも、コンテンツとメッセージに焦点を絞ることが出来るため、フラットデザインに魅入られているようです。
デザインの年代が一目で分かるような、デザインを採用するとそのデザイン自体が時代遅れになった場合にサイト全体が古臭く感じてしまうことが多くありますが、そうした装飾を排除することによって、デザインが古くなる事態を防ぎ、長期間に渡って新しさを維持することが可能になります。また、言うまでもなく、フラットデザインは、作業効率を高め、余計なものを排除する効果もあります。
フラットデザインと対局にあるデザインを語らずして、フラットデザインを語る事は出来ませんよね。これらはフラットデザインと対照的なデザインであることから「リッチデザイン」と呼ばれています。リッチデザインは、斜角、反射、ドロップシャドウ、そして、傾斜等のデザイの飾りを加えるスタイルを指し、このような要素は、立体的に見せ、ウェブサイトを移動しているユーザーやアプリを利用しているユーザーの使いやすさを考慮すると言った理由から、単に目立たせたい、注目を集めたいといった理由で用いられることが多いです。
また、そんな中でも、現実の物理的なアイテムに似せて意図的に親しみやすさを感じさせるデザインのことをスキューモーフィズムといいます。これはAppleが初期に採用していたデザインの一つで、実際の物体に似せたインターフェースにすることによってまるで物を扱うかのように直感的に使えるだろうというという思想に基づいてのものでした。
フラットデザインだけでなく、全てのウェブデザインの起源の殆どは、印刷媒体や芸術をルーツとしたものであることが多いです。そうしたデザイン自体の出発点や、生まれた場所などを特定する事は非常に難しいものの、フラットデザインがインスピレーションを得たデザインや、芸術の時代に関しては幾つかモチーフとなるものがあります。
スイススタイルは、フラットデザインの歴史が話題に上がると、すぐに思い浮かぶデザインです。スイススタイルは、スイスを発祥とし、1940年代から1950年代にかけて、一世を風靡したデザインです。
スイススタイルは、主に、グリッド、サンセリフ体、そして、コンテンツとレイアウトの明確な階層の利用を特性としており、明瞭なイメージとタイポグラフィーの美しさから今でも高い評価を受けているコンセプトです。1940年代、そして、1950年代、スイスデザインは、大きな写真とシンプルでちっちゃなフォントを組み合わせるといった手法で隆盛を極めました。
そうした中でフォントの中では伝説的とも言えるヘルベチカ体が誕生し、同年代、様々なデザインで多用されていました。これは今でも、ブラウザのフォント指定などで候補に上がることが多く、更には沢山の派生フォントを生み出しました。特に有名なのがArialというフォントで、ほぼ全てのWEBを利用する人間が目にしているフォントだと思います。
これらのフラットデザインはMicrosoftとAppleによって人気が高まる以前から存在していたのですが、同じようにスイスデザインもまた、1920年代のドイツにも存在していたことが分かっています。しかし、そのコンセプト自体が人気になったのが、名前を獲得したスイスであったということでしょう。
ミニマリズムの歴史もまた、今のフラットウェブデザインに大きな影響を与えています。「ミニマリズム」と言う用語は、現代のフラットデザインに代わって用いられることもありますが、ウェブが単なる概念であった時代なんかよりも遥か以前に、ミニマリズムは殆どの支持を集めていたのでした。このミニマリズムは、建築、視覚芸術、そして、デザインにおいて、昔から採用されている概念で、フラットデザインが特に影響を受けたのは、デザイン、そして、視覚芸術の分野であります。ミニマリズムは、必須不可欠な要素、そして、求められている要素を残して、全部削除するというデザインとして知られています。幾何学的な形態、明るい色、そして、明確な線は、大半のミニマリズムのデザインに共通して見られます。スイスデザインとミニマリズムのデザインの組み合わせは、現代のデジタル世界のデザインに多大なる影響を与え、「フラットデザイン」を生み出したと言っても過言ではないでしょう。
歴史は繰り返されます。今のフラットデザインの流行にも同じことが言えます。既に説明したように、フラットデザインは、1920年代まで遡ることが可能ですので、今のフラットデザインの適応に影響を与えてきた。
大勢のデザイナーは、ウェブサイトやその他のデザイン作品を生み出す際に、フラットデザインに向かっていったものの、数年の間にの間にフラットデザインをスターダムに持ち上げたのは、MicrosoftやAppleであります。
Microsoftによるフラットデザインの利用は、今の「Metro」デザインが「Metro」と呼ぶ前から行われていました。Appleの大ヒット作「iPod」に対抗するため、Microsoftは、2006年の後半にZuneメディアプレイヤーをリリースしました。
Zuneは、メニューで大き目の小文字のフォントを、そして、背景にイメージを採用していたことから、するユニークなデザインを採用していました。メディアプレイヤーと併せて登場したZuneのデスクトップソフトウェアもまた、同じデザインのスタイルに従い、総合的なUXを作り出していました。
ZuneのOSのデザインは、当時Microsoftが提供していたその他の製品のデザインとは大範囲に異なり（つまりWindows）、MicrosoftがWindows Phone 7を2010年の10月に発売した際、同社は、Zuneのデザインで得た教訓を生かしました。Windows Phone 7のデザインは、大きく、鮮やかで、グリッドのような形態を持ち、シンプルなサンセリフ体、そして、フラットなアイコンを基調としていました。
このようなデザインは、クリエイター、つまりMicrosoftによって、すぐに「Metro」と呼称されるようになりました。
Metroは日本においては賛否両論があったものの、評判が高く、Microsoftは、このようなデザインのスタイルを維持し、Windows 8のOSにも導入した — コンテンツのグリッドの塊、鋭利な角、明るい配色、サンセリフ体、そして、背景の画像。全く同じデザインのスタイルは、Xbox 360、そして、今のウェブサイトを含む、おおかた全ての同社のソフトウェアおよびデバイスで用いられています。
Microsoftがフラットデザインのスタイルに取り組む中、Appleも密かにデザインに関する戦略を練っていました。Appleは、スキューモーフィズムから距離を置く方針を仄めかすと、2013年の夏にリリースしたiOS 7で、完成されたスキューモーフィズムを完全に排除し、よりフラットなデザインを採用しました。
Appleは、新しいデバイスとテクノロジーのアーリーアダプターを大勢抱えているため、iOS 7によって、フラットデザインは、たった一晩で、これまでに無いレベルで知名度が高くなりました。
Appleのデザイン美学は、ウェブサイトやアプリのデザインに多大なる影響を与えることが多いです。何故なら、大半のデザイナーはAppleのデザインが魅力的で、現代的であると感じているためです。Appleがよりフラットなデザインのスタイルに切り換えると、スキューモーフィズムは、一瞬のうちに時代遅れとなって、このようなスタイルを利用しているウェブサイトやアプリは、デザイン変更の必要性を痛感するようになりました。
このような動向は、iOS 7との相性を良くするためにアップデートしたアプリに色濃く反映されている — iOS 7のユーザーがOS全体で見慣れているフラットなデザイン美学に従うようになりました。
フラットデザインが、数年の間にの間に人気者になった訳として、レスポンシブデザインが発展した点も挙げられます。ウェブに接続するデバイスが増え、様々なスクリーンのサイズやブラウザーの制約を受けるようになり、デザイナー達は、試行錯誤の上導き出された、質感、ドロップシャドウ、そして、固定した画像に大範囲に依存したデザインが、小さくなる表示域に合わせて縮小する際に、うまく変換することが出来ない点に気づくのでした。
フラットデザインは、より効率の良いウェブデザインを可能にする効果があります。余分なデザインの要素が存在しないため、ウェブサイトは、スピーディーに読み込まれ、サイズを変更し、コンテンツに合わせて形を作りやすくなります。
フラットデザインは、スクリーンの高解像度化が進み、明確な画像を表示する必要性に迫れられている現状にも有効であります。鮮明なボックスやフォントを表示する方が、複数の異なる画像を各種のデバイスや特性に合わせるなんかよりも、遥かに楽であります。
未来を正確に推測する事は出来ないものの、その他の様々なデザインのスタイルが過去に歩んだように（例示すると、スキューモーフィズム）、フラットデザインも、いずれ、その役目を終え、新しく、刺激的なデザインに取って代わる日がやって来るのではないでしょうか。
デジタル世界では、フラットデザインに対する欠点も指摘されているものの（例示すると、クリック可能かどうかを特定する上で必須な視覚的な手掛かりを排除してしまう点）、デザイナー達が、実験、テスト、そして、学習を重ねていくにつれ、フラットデザインは進化し、最終的にフラットデザインを圧倒する新しいスタイルが登場することになるでしょう。
フラットデザインの未来を占う手掛かりとして挙げられるのが、Googleの今のデザインです（主にモバイルアプリ）。Googleのアプリからは、フラットデザイン化の兆候が見られるものの、ドロップシャドウ等の要素を排除するようには見えません。また、今でも、それとなく傾斜を利用しています。Googleは、フラットデザインとリッチデザインの長所を有効に活用しているようにも思えます。(これはマテリアルデザインと呼ばれています)
フラットデザインは、新しく、刺激的なスタイルですので、急激に人気が高まっていると感じるかもしれませんが、デザインの歴史においては、新しいスタイルではないのです。スイスデザインとミニマリズムから影響を受けたフラットデザインは、印刷媒体の祖先が、デジタルの世界で生まれ変わっただけなのですから。
例えばキャンペーンサイトをフラットデザイン、スキューモーフィックデザインそれぞれでデザインした場合、フラットデザインのサイトに関しては、洗練された印象を与えるものの「楽しそうな感じ」や「盛り上がっている感じ」などの演出に欠ける部分がありました。情報整理と演出、おのおののデザインの良いところを適宜利用するのが望ましく、安易に流行に乗れば良いという話ではないことがわかりました。また、フラットデザインはシンプルであるがゆえに配色やタイポグラフィーのレイアウトなどのセンスが非常に問われるというデメリットもあります。つまり、フォントに関する知識がかけていたり、色彩に関して詳しくない場合は、せっかく流行に乗っているのにダサいかつ使いづらいといったどうしようもないサイトになってしまう危険性もはらんでいるのです。