Webデザインの歴史～スキューモーフィズムからニューモーフィズムへ

1991年、欧州原子核研究機構（CERN）のティム・バーナーズ＝リーがハイパーテキスト・システムを考案し、URL、HTTP、HTMLの設計を行い立ち上げたページ「Info.cern.ch」は、世界初のWebサイトといわれています。

それから30年以上。当時から現在に至るまでそれはもう多くの制作物が世に送り出されてきました。そしてWebデザインもまた、トレンドの変遷とともに確かな文脈を築いてきたといえます。

本記事が取り上げるテーマは、ずばりWebデザインの歴史です。

具体的には（あくまでWebデザインにおける）スキューモーフィズムを分岐点とし、それ以前の話から以後、さらに時を経て生まれたニューモーフィズムの概念、近年注目されるグラスモーフィズムについてまで幅広く紹介します。

スキューモーフィズム勃興前夜まで辿るWebデザインの変遷

いわずもがな、Webサイトは現代の生活に欠かせない重要なツールです。時代とともに人々の生活を大きく変えていきました。けれどもそれは、黎明期からの積み重ねがあってこその結果だと考えます。

前述した「Info.cern.ch」に端を発し今に至るわけですが、当時のWebサイトの中身に関して述べると、現代のそれとはまるで別物です。

構成は簡素なテキストのみ。レイアウト含めデザイン要素は存在しませんでした。1991年は電話回線を用いたダイヤルアップ接続が主流だったこともあり、仕方ないといえばそれまでですが、そもそもデザイン云々以前にインターネット自体がまるで浸透していなかった印象です。

1990年代中期になると状況は変わります。

Webデザイナーたちによって、デザインレイアウトが扱われるようになったのです。この頃、表形式に当てはめてコンテンツを整理することでテキスト以外の視覚的な要素が追加されるなど、徐々に進化の一途が見え隠れするようになります。イラストの挿入、テキストの段組みや列分けなど表現方法にバリエーションが加わり、さらには目次・ナビゲーション・リンクといったWebデザインならではの設計も強化されだしたのも丁度この時期だったかもしれません。

アクセス数の掲載や独自のアニメーションテキスト、GIF……等々、Webサイトでできることが次々と増えてきたなか、1990年代後期からはFlashが市場に導入されたことも当時の大きなトピックだったといえます。従来のHTMLでは不可能だったデザインが作れるようになったことで、インターネットに対する期待値がぐんと伸びたのは明白でしょう。Webサイトのあり方も変わり、一方的に情報を発信するだけでなく、いかにインパクトを与えるかが重視されたムードが少なからずはびこっていたように感じます。

2000年代に突入してまず変わったのは、ユーザビリティに対する優先度です。ユーザーが直感的・視覚的にわかりやすいデザインが重視され始め、開発に要するツールもHTMLだけでなくCSSが取り入れられるようになります。

2000年代中期も重要といえるでしょう。そう、Web2.0による革命の時代です。

ブログやチャットが台頭し、ソーシャルメディアも少しずつ広がりを見せるなか、Web上で誰もが自由に発信できる状況が根付いたことは、良くも悪くもWebデザインに対しても影響を及ぼすことになります。インターネットユーザーに比例するかのように、Webデザインに求められることは増え続け、たとえばカラーバランス、アイコン、タイポグラフィといった一つひとつの要素を細かく洗練していく流れが2000年代後期まで続きます。

そしていよいよ、スキューモーフィズムの概念がWebデザイン業界あるいはその環境を取り巻く周囲で、一つのトレンドとして確立されるのです。

Webデザインにおけるスキューモーフィズムとは？

スキューモーフィズムは、主に2007年〜2012年頃にWebデザイン業界の趨勢を占めた手法、概念です。「リッチデザイン」と呼ばれることもあります。

その定義は端的に述べると、対象についての理解を促すために馴染みのある物質に似せるデザインを施すことです。グラデーションやシャドーを駆使し、実物さながらに仕上げた見栄えは、高級感や親しみやすさなどのコンセプト、加えて、役割や機能を直感的に伝えられるとあって評判を呼びました。Apple社製品で導入されたこともその後の普及に一役買ったといえるでしょう。具体的にはiOS 6のアプリアイコンや純正アプリである電卓・ボイスメモ・コンパスなどで用いられました。

一方、デメリットも無視できません。それは、マルチデバイスに対応するのに多くの手間が掛かる点です。

実物に似せようとするとどうしても細部まで作り込む必要があります。たとえパソコン上で美しく見えたとしても、画面サイズが小さいスマートフォンではそうすんなりとはいきません。線がぼやけたり潰れたりしないために、デバイスごとに調整が生じます。

そうこうWebデザイナーの負担は問題視され、スキューモーフィズムは衰退の一途を辿るわけです。

フラットデザインの台頭

スキューモーフィズムと入れ替わるように台頭してきたのが、フラットデザインです。

スキューモーフィズムとは異なり、立体感や装飾が最小限に抑えられ、それゆえマルチデバイスに対応しやすく、また読み込み速度の向上にも寄与した結果、業界で重宝されることとなります（代表的な採用例は、iOS7）。

ただ一方で、デザインの対象に当たるサービスの特徴や機能、役割などを直感的に判別することは難化。そうしたデメリットが露見しはじめたところで、フラットデザインの趨勢も次第に薄れていきます。

マテリアルデザインの台頭

フラットデザインの次に台頭したのがマテリアルデザインです。スキューモーフィズムほど実物に即したデザインではないにせよ、直感的な判断で識別できる要素が加わります。いわばフラットデザインの課題を補足した形です。アニメーションやエフェクトを用いるケースが多々あり、かといっていたずらにサイトを重くしないよう考慮されたバランスの良いデザインとして人気を博します。が、決して一つの手法に定着しないのがデザインの歴史です。2020年代にかけてまた新たな潮流が出現します。

スキューモーフィズムの進化系「ニューモーフィズム」

2019年後半あるいは2020年初頭にWebデザイン界隈で注目を集めたのがニューモーフィズムです。語源はシンプル。「ニュー」（=新しい）に「スキューモーフィズム」を掛け合わせた言葉です。特徴は背景からの浮き上がりや窪みでしょう。凸凹で奥行きを表現することで、洗練された印象を覚えるとともに、パッと見てその要素が何を意味するかまで伝えています。

つい前述のマテリアルデザインと混合されがちですが、両者のデザインスタイルは似て非なるものです。マテリアルデザインは、背景から離れた位置に要素を配置します。対して、ニューモーフィズムの場合、あくまで要素と背景は地続きです。加えて、基本的に同じ色を使う傾向にあります。

ニューモーフィズムでは、カラーパレットをいかに適切に使用できるかが大事です。凸凹に当たるシャドーは濃淡で作り上げます。背景・要素・シャドーの色合いを統一しつつ、違和感なく立体感を生み出すのがポイントです。仕上がりは控えめに映るかもしれません。同様にコントラストがそう強くないためユーザビリティに懸念を抱く向きもありますが、巷では概して直感的なデザインが多いように考えます。もちろんシャドーをくっきりとつけることで明確に要素の境目が生まれメリハリを効かせることは可能です。

柔らかく、優しく、そして美しく象られるニューモーフィズム。オシャレな側面と機能性の融合が図れているようで、実は日本では主流になるほどは浸透していないも事実。そして容赦なくデザインの歴史は移り変わろうとするのです。

これからはグラスモーフィズム？

ニューモーフィズムからそう時を経ずして出現したのがグラスモーフィズムです。2021年頃から話題となっています。

まるですりガラスのように半透明のレイヤーがベースとなり、そこから要素が浮き出る仕様です。鮮やかな背景に透明度を調整した要素を配置するデザインは、決して目新しいものではありませんが、オブジェクトの境目がわかりやすい点など、視認性の高さは確かに見受けられます。見た目の軽さが涼しげな印象を与える点も人気を博す理由かもしれません。さらにはAppleが「MacOS Big Sur」に採用したことも、注目せざるを得ないポイントの一つだと考えます。いわゆる世界的有名企業が導入したデザイン手法は得てして一時的なトレンドに留まらず歴史的に重要な立ち位置を築く傾向にあるからです。

なお、表現方法はさまざま。レイヤーに半透明のエフェクトを掛けるだけでなく、グラデーションや光彩を重ねる、テクスチャを敷くなど色々と工夫を凝らすことができます。そうした面も含めて可能性に満ちたデザイン手法だといえるでしょう。

Webデザインの歴史が新たなトレンドを生む！

Webデザインの手法は変化こそ多いものの、実は急速に進化しているわけではないと考えます。もちろん、テクノロジーの発達によってできることは増えていますが、ヒントや着想はいつだって歴史のなかにあると感じるからです。

スキューモーフィズム以前以後、そしてニューモーフィズム、グラスモ―フィズムと次々と新しいスタイルが生まれてくるなか、その根本にあるのはやはり冒頭でも触れた文脈ではないでしょうか。

未来を築くことがいわば課題であり、過去を知ることがその解決策になり得てしまうその捻じれた構造こそ、Webデザインの歴史であり不思議な魅力なのかもしれません。この先お目にかかるWebデザインのトレンドもきっと、新たな感触のなかにどこかリバイバルに近い懐かしい風合いが含まれているのでしょう。