フラットデザインって何だったの? WEBデザインはこれからどうなる?

この数年ですっかり定着したフラットデザイン。

それは文字通り「平坦なデザイン」のことで、質感や立体感を排除したスタイルをさす。

世界的な認知のきっかけは、2012年の「Windows 8」。

まだこの頃はアカ抜けないが、この発表を皮切りにWEBデザインの次なる方向性が示された。

windows8

【その昔は重厚だった】

フラットデザインが出てくるまで隆盛を極めていたのは、正反対の「スキューモーフィズム」(skeuomorphism)と呼ばれる手法だった。

簡単に言えば「本物にいかに近づけるか」に挑んでいるデザインだ。

skeuomorphism

この重厚な質感が「まさにヴァーチャル」「技術もここまできたか」と、各方面から感動を呼んだ。

しかしそのリッチなデザインは、やがて対局のフラットデザインへと時代を奪われた。

なぜこうも劇的に、デザインの覇者は入れ替わったのかー。

flat-design

【フラットデザイン誕生2つの理由】

〜その1:端末の多様化〜

この時代、ユーザーはどの端末でWEBサイトを見に来るかわからない。

▶︎パソコン
▶︎スマートフォン
▶︎タブレット

以上3つのどれで閲覧しても、最適化された形で表示されること。

これは「レスポンシブ」と呼ばれる手法で可能となる。日本全国、世界各国、さまざまなメーカーのモニターやタブレット、多種多様の環境下で閲覧することを可能にした技法だ。

このレスポンシブを採用する際に「フラットデザイン」は相性がいい。読み取りも早く、どの端末でも見やすく印象も変わらない。おまけに配置や配色センスに重きが置かれるため、アイコンの作り込みなど必要とせず、制作サイドの作業も軽減できる。

いくら見た目がリッチなデザインや動きがあるサイトでも、ユーザーが閲覧できなければ意味がない。時代に求められる要素をほどよく兼ね備えていたのが「フラットデザイン」だった。

1.-flat-design

【フラットデザイン誕生2つの理由】

〜その2:ユーザーの成長〜

かつてパソコンの世界では「仮想現実」へのこだわりが強く、メモ帳や電卓ひとつ取っても「本物のように見せる」ことに力が注がれてきた。こうすることで使用方法の説明を省き、パソコン操作への障壁を下げることを狙っていた。

しかし、ユーザーがパソコンやスマホの操作に慣れ、スキルや思考が成長するにつれ、わざわざ時間のかかる凝ったデザインや演出は必要なく、むしろそれらは邪魔になってきた。

ムダを削ったデザインや案内の方が

「ここがボタン」
「ここでスクロール」
「ここで閉じる」
「ここで保存」

というアクションがしやすいのでは、と考えられるようになった。ちょうど2011年頃、冒頭のWindowsが大きな一歩を踏み出す前夜のことである。

「端末=機械」の多様化と「ユーザー=人間」の成長。

「機械側の都合」と「人間側の都合」が重なりあった融合地帯。

フラットデザインの起源はそこにあった。

【しかし】

フラットデザインとレスポンシブが主流になったことで、全世界のサイトがそっくりになってきた。

気づけばあのサイトも、話題のあのブランドも。どれがどれだかわからなくなってきた。

そしてこれらの責任はブランドそのものでなく、それをプロデュースするWEBクリエイターにあるのは言うまでもない。

大きな写真。
中央にキャッチコピー。
そしてボタン。

スクリーンショット 2016-03-16 21.46.17

大きな写真。
中央にキャッチコピー。
そしてボタン。

スクリーンショット 2016-03-16 21.47.22

大きな写真。
中央にキャッチコピー。
そしてボタン。

スクリーンショット 2016-03-16 21.54.32

もったいぶらずに、一気に並べてみよう。ここにある16個の画像は、全て別のホームページだ。

05

実際のサイトは、写真・コピー・ボタン以外の箇所もほとんど一緒だ。

それは、サイトを作る前の下書きが一緒だからである。

ワイヤーフレームと言われる下書き、すでにこの時点で定番テンプレートが存在する。その代表格はこんな形。

スクリーンショット 2016-03-17 3.52.15

本来WEBサイトは掲載する商品やサービスの魅力をユーザーに伝えるべく調査や取材を行い、そのうえで緻密なブランディングをすることが重要だ。

毎度そんな時間はない? ギャラが安い? 

クライアントの課題や強みは百者百様のはず。デザインで事業を支援することが生業ならば、たったひとつのテンプレートで毎回毎回片付くわけがない。

アイディア出しに1分しか時間が取れないのは毎回分かっていること。ならば日常的な「アイディア倉庫」を頭の中にもっておくべきだろう。ビジネスの打開策だけはGoogle検索に出てこないからだ。

どんな客にも同じようなテンプレートを使用し、打合せではそれらしいことを言って、ハイ出来上がり。振込完了で後は知らない。

ITやデザインに詳しくないお客をなめてないか。ユーザーは金太郎飴のような構成のサイトから、その会社や個人の魅力、商品やサービスの本質を感じることができるだろうか。

私たちが期待していた「WEBの世界」は、果たして現在のような同じモノの横並びだっただろうか。

apple-gear-looking-pretty

【長旅の末に】

かつてのアップルにあったリッチなデザイン。
マイクロソフトが仕掛けたフラットなデザイン。

では、次のデザインはどうなるのか。

こういった議論がなされるとき、こんな予想が挙げられる。
 


 

▶︎ フラットとアクションの融合
「マテリアルデザイン」

▶︎ 個々のユーザーにフィットする
「パーソナライズデザイン」

▶︎ 美と機能を融合させた
「エンジニアリングデザイン」

▶︎ 環境に順応する
「アダプティブデザイン」
 


 

どれもそれらしく聞こえ、きっと全て間違いではない。

ITの進化とWEBデザインの融合は「フラットデザイン&レスポンシブ」の結実で、一定の世界観を作り上げた。

まるでもう、削るところがないほど進化したかのように見える「インフォメーションWEB」の世界。私たちは深く考えずとも、どこがボタンで、どこがスクロールで、どこが削除か知っている。

そして皮肉にも、ムダを一切削ぎ落としたフラットなアイコン=サインたちは最先端に見えつつも、実際には私たちが遠い昔から知っている道路標識とさして変わらない。

デザインの旅は果てしなく、時に残酷だ。

sign

極限まで削ぎ落としたシンプルなフラットデザイン、仰々しいまでに凝りまくったインフォキュービズム。

WEBデザイナーたちは世界の両極端を見てきた。そして、次の答えは誰も知らない。

レスポンシブ技術は、サイトの更新作業を楽にするクリエイティブ側の苦肉の策でもあった。しかしやはり、デザイン上での不都合も出てくる技術だった。フラットデザインも、レスポンシブにフィットする手法として浸透した「技術に合わせたデザイン」だった。つまりクリエイティブが、ITの進化についていくのがやっとになっている。

方法が限られてくると、世界中で似たような現象が起こり始める。

表現の単一化だ。
 


 

「物事を見すぎることで、それの持つ意味がまったく見えなくなることを、僕は怖れる」

アンディ・ウォーホール
 


 

方法はひとつではないはずだ。

お客さんの課題、ユーザーの要望がさまざまである限り。
 

▶︎著者:清宮 雄 プロフィール
フィリピン・セブ島在住。IoTそしてA.I.時代の国際的な起業家・ビジネスパーソンを育成するセブ島留学のアクトハウス代表。メンターとして現場でも奮闘中。アクトハウスの体験談はこちら >>>

mg

  目次   
このエントリーをはてなブックマークに追加
限定16名 第4期生募集スタート
体験談:在校生&卒業生
講師インタビュー
2016年度 新期生限定募集
体験談:在校生&卒業生
講師インタビュー