デジタルと現代 ―― 画面の中のデザイン史

ねらい

ここは様式編の、そして本書全体の最後のクエストだ。これまで紙のうえのデザイン史をたどってきた。最後は、いまあなたが毎日見ている画面の中のデザイン史を扱う。

スマホのアイコンは、昔は本物の革やフェルトそっくりに作られていた。それがある年、いっせいに「ぺたんこ」になった。なぜか。そしていま、画面のデザインはどこにいるのか。この「現在地」を、歴史の流れとして読めるようにする。

そして最後に、これまでの全章を一本の糸で結ぶ。デザインは発明ではなく継承だ――この本の最初の約束を、画面のデザイン史でもう一度確かめて、本を閉じる。

スキューモーフィズム ―― 現実のフリをして安心させる

話は2007年、初代iPhoneから始まる。指で画面に直接さわる、という体験は当時まったく新しかった。問題は一つ。「これは押せる」「これは動かせる」と、どうやって初心者に分からせるかだ。

アップルの答えがスキューモーフィズムだった。難しい名前だが、意味は単純で「画面のものを、現実の物そっくりに見せる」こと。メモ帳は本物の黄色いメモ用紙（罫線つきの黄色いノート）、本棚は木目、ボイスメモは銀色のマイク、ゲームセンターは緑のフェルト――画面の中に現実の質感を持ち込んだ。この初期iOSのソフト設計を率いたのは、スコット・フォーストールというデザイナーだ（あとで、彼の退任後に画面を一変させる人物が出てくる）。

なぜそうしたか。人は、見たことのある物の扱い方を知っているからだ。本物のスイッチに見えれば、誰も教えなくても「指で切り替えるんだな」と分かる。この「見た目が使い方を教えてくれる」性質を、デザインではアフォーダンスと呼ぶ。スキューモーフィズムは、現実の質感を借りて、初めてさわる人へ使い方の橋を架けたわけだ。

この時代、ボタンには立体感があり、影が落ち、表面が光っていた。「押せそう」に見えることが、最優先の正義だったのだ。スマホがまだ珍しかった時代の、親切な工夫だった。

フラットデザイン ―― 飾りを剥いで、スイスに戻る

ところが2010年前後、流れが逆転する。きっかけは二つあった。

一つはマイクロソフト。2010年、スマホ向けの「Windows Phone」で**Metro（メトロ）**というデザインを出す。これは駅の案内表示のように、立体感や質感をぜんぶ捨て、平らな面と文字とグリッドだけで組まれていた。

もう一つが決定打だ。2013年、アップルがiOS 7で大転換する。指揮したのは伝説のデザイナージョナサン・アイブ。さきほどのフォーストールが退任したあと、ハードもソフトもアイブが束ねることになった。彼は革もフェルトも光沢もすべて剥ぎ取り、画面を一気にぺたんこ（フラット）にした。これがフラットデザインだ。影や立体をやめ、平らな面・シンプルな色・細い線で構成する。

なぜ剥いだのか。理由は二つある。

一つは技術の変化。画面がどんどん高精細になり、いろんな大きさの端末が増えた。こまかい質感や影は、サイズが変わると崩れやすく、描くのも重い。平らな色なら、どの画面でも軽く・きれいに伸び縮みする。

もう一つが大事だ。みんなもうスマホの使い方を覚えた。「押せそう」をいちいち本物そっくりに教える必要が、もう無くなったのだ。橋は、渡り終えたら畳んでいい。

ここで前の章を思い出してほしい。装飾を剥ぎ、平らな面・サンセリフ・グリッドで組む――これは何だったか。スイス・スタイルそのものだ。フラットデザインの正体は、スイス様式が画面に帰ってきたものだと言っていい（くわしくは様式編III章「スイス・スタイル」の掟を見てほしい。あそこの「装飾を足さない・グリッドに乗せる」が、そっくりそのまま画面で起きている）。「足さず、引いて整える」というスイスの掟が、半世紀の時を超えて画面でよみがえったのだ。

マテリアルデザイン ―― 行き過ぎた平らさを、影で立て直す

だが、フラットには弱点があった。平らすぎて、どれが押せるのか分からない。影も立体もないから、ただの色付き文字なのか、押せるボタンなのか、見分けがつかない。アフォーダンスの橋を畳んだら、今度は迷子が出てしまった。

ここでグーグルが折衷案を出す。2014年のマテリアルデザインだ。発想がうまい。「マテリアル」は英語で「素材」のこと。画面の中に**「紙のような素材」が層になって重なっていると考える。紙には厚みがあり、上に浮いた紙は下に影**を落とす。この影で「これは上に浮いている＝押せる」と分かる。

マテリアルは、フラットの軽さ（平らな色・グリッド）と、スキューモーフィズムの親切さ（押せると分かる）の、いいとこ取りだった。完全な引き算でも、完全な足し算でもない。必要な分だけ影を戻す。これが2014年以降、アンドロイドのスマホやグーグルのサービスの標準になり、世界中の画面の見た目を決めていった。

様式は振り子 ―― 歴史は繰り返す

ここまでを並べると、あることに気づく。質感（足す）→ フラット（引く）→ マテリアル（少し戻す）。デザインは足す方向と引く方向を、行ったり来たりしている。これを振り子と呼ぼう。

そして振り子はまだ揺れ続けている。2019〜2020年ごろ、ニューモーフィズムという見た目が話題になった。背景と同じ色のボタンを、ごく薄い影だけでぽこっと浮かせる――やわらかい質感の復活だ。完全な質感（スキューモーフィズム）でも完全な平ら（フラット）でもない、その中間をまた探り始めた。質感は、形を変えて戻ってくる。

大事なのは、これは進歩ではなく循環だということ。新しい様式は古い様式を完全に捨てるのではなく、前の時代への反作用として生まれ、やがてその反作用がまた反作用される。様式編の最初に立てた見方――「新しい様式は、いつも前の時代への反発として生まれる」――が、画面のデザインでもそのまま当てはまる。歴史は繰り返す。だから過去の様式を学ぶことは、次に来るものを読む準備になる。

デザインシステム ―― 一枚絵から「仕組み」へ

振り子の話とは別に、もう一つ、画面のデザインで起きた大きな変化がある。それは作り方そのものの変化だ。

昔は、デザイナーが画面を一枚ずつ絵として描いていた。でもアプリやサイトは画面が何百枚もある。一枚ずつ手で描いていたら、ボタンの色が画面ごとに微妙に違う、なんてことが必ず起きる。そこで生まれたのがデザインシステムだ。

デザインシステムとは、ボタンや見出しや余白を「部品」として一度きちんと決め、全画面でそれを使い回す仕組みのこと。そして、その部品の中身――色のコード、文字の大きさ、余白の数値――を、名前をつけた変数として持っておく。これをデザイントークンと呼ぶ。たとえば「メインの色＝#d6352b」を color-primary という名前にしておけば、その名前を全画面が参照する。色を変えたいときは、その一か所を直すだけで全部に反映される。

これは、UI/UX編で学んだ「コンポーネント設計」の到達点だ（UI/UXとは、画面の見た目と操作する部分＝UIと、それを使ったときの体験＝UXのこと）。そして思想をたどると、ここでもスイスに行き着く。スイス様式の理想は何だったか。個性より再現性、気分より規則だった。「誰がやっても同じになる」ことを目指した。デザインシステムとデザイントークンは、その理想をチームと技術で実現する装置にほかならない。一人の天才の手わざではなく、誰がさわっても揃う。恣意性を殺す――この本が最初に掲げた目標が、現代の制作現場では「システム」という形で実装されている。

楽典全体の回収 ―― デザインは継承である

さあ、本を閉じる前に、これまでの全章を一本の糸で結ぼう。

このクエストで見た画面のデザイン史は、何ひとつゼロから発明されていない。スキューモーフィズムは現実の質感を借りた。フラットはスイス様式に戻った。マテリアルは両者を折衷した。デザインシステムはスイスの「再現性」を仕組みにした。すべて、過去の上に立っている。

これこそ、序論で立てた約束そのものだ。デザインは発明ではなく継承である。新しく見えるものも、たどれば必ず誰かの上に乗っている。だから私たちは、判断のたびに「これは何に基づくか」と問える。それが典拠主義――判断ひとつひとつを「誰が・いつ・何に基づくか」で裏づける、この本の基本の立場だった。

だから、この本の使い方はこうだ。次に何かを作っていて手が止まったとき、この本のどの章を引くかを思い出してほしい。文字で迷えばタイポグラフィ編、散らかって見えればレイアウト編、押せるか分からなければUI/UX編、どの流儀でいくか迷えば様式編。それぞれの章に「掟」があり、その奥に「典拠」がある。

楽典の旅は、ここで一周した。あなたはもう、「なんとなく」で作る人ではない。一つひとつの判断に「これに基づく」と言える人だ。継承の上に立て。その上でなら、自由に崩していい。 それが、この本があなたに渡したかった、たった一つのことだ。

見分け方

最後に、街やアプリで「いまどの様式か」を見抜く目を持とう。次のサインで時代が読める。

• 影が濃く、表面が光り、本物の質感（革・木・フェルト）→ スキューモーフィズム
• 影ゼロ、平らな色面、細い線、グリッド→ フラット（＝画面に戻ったスイス様式）
• 平らだが薄い影で「浮き」を出す→ マテリアル
• 背景と同色のボタンを淡い影でぽこっと→ ニューモーフィズム
• 全画面でボタンや余白がきっちり揃っている→ デザインシステムが効いている

これらは別々の流行ではなく、すべて**「足す↔引く」という一本の振り子**の上にある。様式の名前を覚えるのではなく、「いまは足す側か、引く側か」を見れば、新しい様式が出ても位置が分かる。

譜例

棚（design-gallery）で、いまのWebサイトやアプリがどの様式に立っているか確かめよう。

• 棚：デジタル時代の様式の実例を見る

見るときは、図10の「影の濃さ」に注目する。影が濃いほど質感寄り（足す側）、影が無いほどフラット寄り（引く側）。いま自分がよく使うアプリは、振り子のどこにいるだろうか。

練習・チェック

1. 自分のスマホのアプリを3つ選び、それぞれ「質感寄り／フラット寄り／その中間」のどこにいるか分けてみよう。影の濃さがヒントだ。
2. フラットデザインがスイス様式の子孫だと言える理由を、一文で言えるか。（ヒント：両方とも何を「剥いだ」か）
3. もしいま、まったく新しいスマホ向けの様式を作るとしたら、振り子は次に「足す側」と「引く側」のどちらへ振れると思うか。理由とともに予想してみよう。正解は無い。だが「歴史は繰り返す」を踏まえて考えれば、それは当てずっぽうではなく、典拠のある予想になる。（ヒント：いま振り子はニューモで少し「足す側」に戻っている。だとすると、次の反作用はどちらへ向かう？）