第6回：引き算の美学「スキューアモーフィズム vs フラットデザイン」
〜スマホが変えた美意識〜
導入：小さな画面の中の「UI革命」
第5回で、スマートフォンという「小さな画面」がWebデザインにレスポンシブという制約をもたらした歴史を見ました。
画面が小さくなったことで、デザイナーたちはもう一つの大きな課題に直面します。それは「指で直接触る画面において、ボタンや情報は一体どう見えるべきか？」という UI（ユーザーインターフェース） の根本的な問いでした。
今回は、2010年代に世界中のアプリとWebサイトの見た目を一変させた、デザインの「美意識」の巨大なパラダイムシフトの物語です。
1. 現実を模倣した「スキューアモーフィズム」
初期のiPhoneやスマートフォンが登場した頃、画面上のデザインは スキューアモーフィズム（現実模倣デザイン） と呼ばれる手法で溢れていました。
メモ帳のアプリには「黄色い紙と革のステッチ」が描かれ、本棚アプリには「木目調のテクスチャ」が敷かれ、ボタンは「ガラスのように光を反射してぷっくりと膨らんで」いました。
なぜ、ここまで過剰に現実を再現したのでしょうか？ 理由のひとつは、当時の人々にとって「ガラスの板（スマホ）の上の映像を、自分の指で直接タップする」という操作が 未知の体験 だったことです。
「これは現実のボタンと同じように押せるものですよ」とユーザーに直感的に教えるために、徹底して現実の質感を模倣し、デジタル空間に「偽物の現実」を作り出す必要がありました。加えて、ブランドの世界観やOSらしいリッチな見た目を演出する意図もあった、と考えられます。
2. 引き算の革命「フラットデザイン」とiOS 7の衝撃
しかし、数年が経過して人々がスマートフォンの操作に慣れると、過剰な現実の模倣は、小さな画面の中で ただのノイズ（視覚的な邪魔もの） へと変わっていきました。
ここでデザインの歴史を大きく動かす出来事が起きます。
2013年、Appleが発表した iOS 7 です。Appleはそれまでの革や木目、ガラスの反射といったリッチな装飾をすべて捨て去り、影やグラデーションを抑えた フラットデザイン へとOSの見た目を一新しました。
「ボタンは単なる枠線とベタ塗りの色でいい。装飾よりも、中身のコンテンツ（情報）を主役にすべきだ」
この「引き算の美学」は、Webデザインの世界にも広く波及しました。ボタンから影が消え、余白を広くとった、ミニマルで平面的なデザインが世界中のWebサイトを席巻したのです。
なお、平面的なUI自体は、Microsoftの「Metro UI」（Windows PhoneやWindows 8など）がAppleより数年先に示していた潮流でもあります。iOS 7は、その衝撃を一気に大衆化した転換点だった、と捉えると分かりやすいでしょう。
3. 秩序をもたらした「マテリアルデザイン」
フラットデザインは画面をスッキリさせましたが、行き過ぎた「引き算」は新たな問題を生みました。
「すべてが平面的すぎて、どこが押せるボタンなのか、どれが重要な情報なのか直感的に分からない」という混乱です。
この問題を解決するため、2014年にGoogleがひとつの画期的なデザインガイドラインを発表しました。それが マテリアルデザイン です。
Googleは「画面の中の要素は、現実世界の『紙とインク』のような物理法則に従うべきだ」と定義しました。スキューアモーフィズムのような過剰な質感は持たせない（フラットの良さを活かす）ものの、要素の重なりや階層を表現するために 控えめな「影（ドロップシャドウ）」 だけはルール化して許容したのです。
これにより、Webデザインは「平らだけど、奥行き（Z軸）がある」という、美しさと使いやすさを両立する有力な方向性のひとつへと辿り着きました。
おわりに：デザインは「感覚」から「設計」へ
スキューアモーフィズムからフラットデザイン、そしてマテリアルデザインへ。
この数年間で、Webデザインは「いかに本物っぽく美しく描くかというアート（感覚）」から、「いかに情報を整理してルール化するかというエンジニアリング（設計）」へと、その性質を大きく変化させました。
その後ガイドラインは更新され続けましたが、2014年の時点で示された「平らさの中に奥行きを残す」という方針は、その後のUIにも引き継がれました。
デザインが「論理的なルール」で構成されるようになった時、デザイナーの働き方もまた、劇的に変化する時を迎えます。
次回予告
Photoshopという「一枚の絵」を描くツールの限界。
そして、Webデザインを「レゴブロックのように組み立てる」新時代の覇者の登場。
次回、第7回。
「コンポーネント時代『Figmaの覇権とデザインシステム』 〜デザインが共有される日〜」
📚 参考文献・出典
-
iOS 7 Human Interface Guidelines (2013)
- Appleが2013年に発表し、世界中のアプリとWebサイトに「フラットデザイン」の波を広げた画期的なガイドラインの歴史的発表
-
Google Material Design Guidelines (2014)
- 2014年のGoogle I/Oで発表され、「紙とインク」のメタファーを用いてデジタルデザインに物理的な秩序と影のルールをもたらした、現代UIデザインの基礎
- 現行の公式サイトは Material Design 3です
🤖 執筆協力
本記事の構成案作成および推敲には、生成AIのアシストを活用しています。