こんにちは。ディレクターの竹本です。
私はWebデザインの先端を語る際、未だ「フラットデザイン」を上げることがあります。これを見た方の中には「古くない？」と言われる方もいらっしゃるかと思います(実際言われることがあります)。フラットデザインはWindows8のスタートページで大きく話題になり、 その後もiOS7やWebサイトのUIデザインに取り入れられ瞬く間に普及して行きました。
今回はそのデザインの素晴らしさとはなんだったのか、そして未だ顕在であると私が思う理由は何か、を書いていきたいと思います。
フラットデザインとは何か。
「フラットデザインとは」とWebで検索すると、
単色・ベタ塗りでメリハリのある色使い、単純で直線的・幾何学的な図形を配置したもの
というような説明が一般的のようです。この説明の通りフラットデザインはユーザーの視覚に対して単純な形状、単純な色彩で直感的にそれぞれの違いを認識させることができ、また当時のUIデザインのビジュアルの中では非常に新しく感じられてとてもインパクトのあるものでした。
ですがこの説明の内容だと、あくまで見た目だけの話しと捉えられて、フラットデザインの持つ、すぐれた概念や機能を見落とされて認識されがちなように思います。
評価する対象物が「デザイン」である以上、「見た目」の評価以外に、 機能性、実現性、経済性、市場動向など、多角的視点から総合的に評価する必要があります。
時代背景と問題、フラットデザインによる「答え」
フラットデザイン以前は、多様化するインターネット環境からスマートフォン、タブレット、ゲーム機、スマートTV、、、などデバイスの種類が急増しました。各ユーザーの環境に対して最適な形で情報を提供する為、多くのコスト、時間、労力を用いて、複数のWebサイトを作らなければならず、レスポンシブなデザインの制作が必要な状況でした。特にスマートフォン、タブレット市場では各社高解像度モニター競争が始まっており、解像度の高いモニターに対する対応が、Webデザインを創るもの、提供するものにとって大きな課題となりました。
しかしフラットデザインはシンプルで直線的なレイアウトであるがゆえに、既存の技術で様々な環境で最適に表示させることができ、それぞれの環境で各コンポーネントを共有しやすく、複雑になりがちなマルチデバイス対応の設計も比較的容易にできるという特性を持っています。この特性により、それまでのリッチデザインと呼ばれるような、複雑なレイアウトを有するデザインと比べると計画や設計に掛かる労力を大きく軽減できる為、経済性も高く、上記のような様々な点でとても高いパフォーマンスを実現していると言えます。
ここで少しまとめると、フラットデザインは以下のような思考の中で、生み出されたデザイン概念であると考えられます。
シンプルで直線的なレイアウト、単色や控えめのグラデーション、シャドウなど、既存の技術(CSSやHTML)で出来る限り可能なビジュアル表現を考え、また直線的な形状の組み合わせを基本としたことでレスポンシブな設計を比較的容易に実現する。
CSS3、HTML5など、端末側の描画機能での表現を主に用いることで、高解像度の環境においても、ぼやける、荒れるような劣化を防ぎながらユーザーの環境に最適な表現、見せ方ができる。実現性で上げたような制約を設けながらもスマートフォンやタブレットでの「タップ」とPCのクリック、というアクションに対して操作しやすく、直感的に認識させるといった機能のビジュアルを表現している。
実現性で上げたそれまで労力の掛かっていた問題をデザインの課題として持ち、解決することで、コストを大きく軽減する。デザインレギュレーションが決まるとビジュアルへの落とし込みやその後の更新性もシンプルになりやすい。
端末の種類、ディスプレイの解像度、サイズなどインターネット閲覧環境の多様化の流れを理解し上記に上げたような問題解決を実現している。
フラットデザインが解決した問題は今も変わらず存在している
多種多様なマルチデバイス対応の問題は、今現在も顕在的に存在しています。 かつてのApple社のRetineディスプレイを皮切りに、現在もスマートフォン、タブレットのディスプレイ市場は高解像度化の競争の渦中にあります。iPhone6のリーク情報には「ウルトラRetinaディスプレイ」とかいう、すごそうなディスプレイの噂が、Samsung Electronicsは2015年には4K(2160*3840)を実装する、という話しも出てきており、ディスプレイのサイズそのものもまだまだ多様化しています。
中でもその機種ごとの多様化が激しい、スマートフォン、タブレットによるインターネット閲覧は、総務省の情報通信白書の平成24年末のデータによれば、インターネット閲覧ユーザーの約39.3%となっており、全体の半数に迫る勢いです。
決して見た目をベタ塗りのアイコンを並べたものにする、というビジュアル面の話しだけではなく、あらゆる閲覧環境が今後も生まれる可能性があります。それらを解決するプロセスとして、フラットデザインが辿る思考や概念、その機能性は未だ顕在であり、Webデザインを創るもの、またそれを評価し提供するもの、双方のデザインクリエイティブに活かされるべきであると思います。
フラットデザイン事例
今回できるだけ視覚的なイメージよりも思考や概念を中心にお伝えした結果、敢えてイメージ画像を使わずに説明しました。それでもイメージがなかなか掴めないという方のために、フラットデザインの代表例といわれるサイトを挙げてみました。PCとスマートフォン、タブレットなどでその差異を実感いただければと思います。（※注意：閲覧いただくタイミングによりデザインが変更されている可能性があります。）
