なんでフラットデザインばかりなの…? WEBデザインはこれからどーなる!?

すっかり定着しているフラットデザイン

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

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

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

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

windows8のフラットデザイン

正反対の「スキューモーフィズム」

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

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

スキューモーフィズム

この重厚な質感が「まさにヴァーチャル」「こんなデザインできるんだ」と、各方面から感動を呼びました。

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

なぜこうも劇的に、デザインの主役は入れ代わったのでしょうかー。

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

●その1:端末の多様化

この時代、ユーザーはどの端末でWEBサイトを見に来るかわかりません。

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

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

これは「レスポンシブ」と呼ばれる手法で可能となります。ちなみにレスポンシブル(=責任)ではないので呼び名には注意しましょう、レスポンシブ(=応答)です。

icon

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

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

いくら見た目がリッチなデザインや動きがあるサイトでも、ユーザーが閲覧できなかったり、端末によってかたちが崩れてしまっては意味がありません。作り手、受け手、時代に求められる要素をほどよく兼ね備えていたのが「フラットデザイン」でした。

レスポンシブとフラットデザインの相性

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

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

かつてパソコンの世界では「仮想現実」へのこだわりが強く、メモ帳や電卓ひとつ取っても「本物のように見せる」ことに力が注がれてきました。それが冒頭のスキューモーフィズムと呼ばれる技法です。リアルに近づけることで、使用方法の説明を省き、パソコン操作への障壁を下げることを狙っていました。

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

そうしたなか、ムダを削ったデザインや案内の方が、

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

というアクションがしやすいのでは、と考えられるようになりました。これは2011年頃、Windowsが大胆なフラットデザインを提唱し大きな一歩を踏み出す前夜のことです。

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

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

フラットデザインの起源はここにありました。

フラットデザインの起源

全世界のサイトがそっくりに

しかし…

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

気づけばあのサイトも、話題のあのブランドも。

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

同じようなサイトその1

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

同じようなサイトその2

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

同じようなサイトその3

ほかにも並べてみましょう。ここにある16個の画像は、全て別のホームページです。

同じようなサイトその4

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

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

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

定番テンプレート

似たようなテンプレートでいい? でも仕方ない?

本来WEBサイトは掲載する商品やサービスの魅力をユーザーに伝えるべく調査や取材を行い、そのうえで緻密なブランディングをすることが重要です。たったひとつのテンプレートで毎回毎回片付くわけがありません。

とはいえ、制作側はアイディア出しに限られた時間しか取れないもの。であれば「アイディアの引き出し」をストックしておくことが大切になってきます。ひらめきに頼っていてはムラが出てしまい、トレンドに寄りかかってしまう可能性もあるからです。

削ぎ落としていくデザインの行末は、どうしても似てきてしまうのでしょうか。

スマートフォンが主流の現在、もはやサイトのデザインはパソコン上でどんなに頑張っても、スマホではタテに並んで終わってしまいます。そういった背景に加え、そこにフラットデザインが必要不可欠となったことで、同じようなサイトの増殖を急速に助長してしまった面もあります。

スマホデザインのなかの限界

長旅の末に

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

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

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

次なるデザインは…?

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

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

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

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

進化した「インフォメーションWEB」の世界

さまざまな見方があり、どの要素も次のWEBデザインを担ってくると考えられます。

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

まるでもう、削るところがないほど進化したかのように見える「インフォメーションWEB」の世界。私たちは深く考えずとも、どこがボタンで、どこがスクロールで、どこが削除ボタンか知っています。たまに分からないほど削ぎ落とされたサイトがあって躊躇するくらい、スリムなデザインが増えてきているほどです。

ムダをなくしたフラットなアイコン=サインたちは確かに最先端です、しかし「みんながわかる道路標識」とさして変わらないという見方もできます。「誰でも認識できるもの」というところからWEBデザインを考えると、意外と答えは身の回りに転がっているのかもしれません。

道路標識もフラットデザイン?

WEBデザインは新たな段階に進む時期

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

デザインの旅、すなわち時代の潮流は目まぐるしく変わっていきます。

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

現在はいったんのフラットデザインが出尽くした感もあり、WEBデザインは新たな段階に進む時期を迎えています。

次なるWEBデザインは、どんな驚きや体験をわたしたちにもたらしてくれるでしょうか。

デザインを理解し、プログラミングやマーケティングも学ぶ

もし本稿で語ってきた「デザイン」を勉強したい、という方はぜひセブ島のIT留学「アクトハウス」のドアを叩いてみてください。

イラストレーター、フォトショップはあくまで「当たり前の基礎技術」として習得し、そこからデザインの奥深い世界をプログラミングやマーケティングと並行し学んでいきます。

ここでは、自分の描いた道を進むためセブ島の地まで来た少数の若者たちが、毎日デザイン、プログラミング、ビジネスや英語の勉強に励んでいます。

View this post on Instagram

— ここで学べるのは、 — ①起業・フリー独立 ②プログラミング ③英語 ④ビジネス ⑤デザイン — 起業家でもフリーランスでも、会社員でも海外移住でも。自分の裁量で生きることができる、稼げるスキルを。 — ➡緊急特報!4月スタート期「1名・男性」空き出ました。インスタからのお問合せはもちろん、プロフィールURLからの募集ページにてLINEやフォームからのご相談もOK。ラストチャンスをお見逃しなく。 — 詳しくはプロフURLからもしくは↓ — ✔「アクトハウス 生徒募集」で検索。募集ページに進めます。緊急ラスト1名枠、ご相談はお早めに。 — #アクトハウス#acthouse#it留学#ビジネススクール#プログラミングスクール#フィリピン留学#セブ留学#セブ島留学#海外起業#海外就職#プログラミング留学#ビジネス留学#IT留学説明会#留学したい#留学する#転職したい#転職する

アクトハウス@IT×英語×ビジネス留学さん(@acthouse)がシェアした投稿 –

ご相談は毎日承っているので、お気軽に、

LINE

フォーム

からどうぞ。

また「IT留学説明会」も実施していますので、そちらもご利用いただけます。

新期生募集の最新情報は下記のリンクからどうぞ。

▶ セブ島のIT留学「アクトハウス」を詳しく見る

著者:清宮 雄
「プログラミング/英語/デザイン/ビジネス」を学ぶIT留学「アクトハウス」代表。

  • このエントリーをはてなブックマークに追加

セブ島のIT留学「アクトハウス」とは?

1日の流れ

カリキュラムについて

住居について

卒業後の進路

体験談

コースと費用

スタートアップの実績

卒業後のサポート

 セブ島のIT留学「アクトハウス」とは?

すべての記事・コラムへ