【モーフィズムUI系の系譜】スキューモーフィズムからクレイモーフィズムまで

スマホのアプリを開いたとき、ボタンがまるで指で押せそうに膨らんで見えたことはありませんか。
逆に、輪郭線すら見当たらないのに、なぜか『ここが押せる場所だ』とわかるボタンに出会ったこともあるはずです。
同じ『UIのボタン』でも、時代によって驚くほど違う姿をしています。
この記事では、スキューモーフィズムからクレイモーフィズムまで、UIの質感表現がどう移り変わってきたかを、ひとつの系譜として辿っていきます。

2000年代のカレンダーアプリには、リアルな革のバインダーが再現されていました。
2010年代半ばになると、その装飾は一斉に姿を消し、色と文字だけのシンプルな画面に置き換わります。
さらに数年後には、輪郭の代わりに柔らかい影を使ったボタンが現れ、今ではすりガラスのような半透明パネルや、粘土のようにふっくらしたアイコンまで登場しています。
たった20年ほどの間に、UIの『触れそう』の伝え方はこれほど大きく変わってきました。

4つのスタイルの位置関係

この記事で扱う4つのスタイルは、互いに無関係ではありません。
スキューモーフィズムという起点があり、その反動としてフラットデザインが生まれ、両者の間を取り持つ形でニューモーフィズムが登場し、そこから枝分かれする形でグラスモーフィズムとクレイモーフィズムが広がっていきました。
『どちらが優れているか』ではなく、『何を解決しようとして生まれたか』という視点で見ていくと、それぞれの個性がはっきり見えてきます。

【スキューモーフィズム】現実の素材を模す発想

スキューモーフィズムは、デジタルの中に現実の素材感を持ち込むという発想から生まれました。
革張りの質感を再現したカレンダーアプリ、木目調の本棚を模した書籍アプリ、金属の輪郭を持つ計算機。
まだ多くの人にとってタッチスクリーンという操作が未知だった時代、見慣れた素材の質感を借りることで『これは触れるものだ』と直感的に伝える役割を果たしていました。

色は素材ごとにばらつきます。
革なら深いブラウン、紙ならクリーム色、金属ならグレー。
1つのアプリの中に複数の質感が同居することも珍しくなく、統一感よりも『それが何であるか』を伝えることが優先されていました。
初代のスマートフォン向けOSに搭載されていた電卓アプリやメモ帳アプリの多くが、この発想で作られています。
画面の中に現実の道具をそっくり持ち込むことで、まだ操作に不慣れだった人たちの不安を和らげる役割を果たしていました。

【ニューモーフィズム】影だけで立体を語る

タッチスクリーンが当たり前になり、スキューモーフィズムの装飾は次第に『くどい』と感じられるようになりました。
その反動で生まれたのがフラットデザインで、装飾を削ぎ落とし、色と文字だけで情報を伝える方向に振れます。
ところがフラットデザインは、今度は『どこが押せるのかわからない』という新しい課題を抱えることになりました。

ニューモーフィズムは、この2つの間を取り持つ形で登場します。
背景と要素をほぼ同じ色に保ちながら、光と影だけでボタンの膨らみやへこみを表現するという手法です。
使う色は1色に近い淡いグレーやブルーグレーで、彩度を抑えた中間色が好まれます。
装飾は最小限のまま、触覚に近い情報だけを影で語るという、静かな主張の仕方が特徴です。

【グラスモーフィズム】透明感で情報の層を示す

ニューモーフィズムが影で立体を語ったのに対し、グラスモーフィズムは透明感で奥行きを語ります。
すりガラスのような半透明のパネルを重ね、その向こうに鮮やかな背景がぼんやりと透けて見える。
背景そのものは彩度の高いグラデーションであることが多く、紫からピンク、青から緑へと移り変わるような配色がよく使われます。
パネルの縁には薄い光の線が入り、ガラスのような質感を強調します。

この手法が便利なのは、画面の中に『どの情報が手前にあり、どれが奥にあるか』という階層を、色を変えずに示せる点です。
半透明の重なりそのものが階層を語るため、情報量の多い画面でも視覚的な混乱が起きにくいという傾向があります。
通知パネルやウィジェット、音楽アプリの再生画面など、背景となるコンテンツ（アルバムアートや壁紙）を活かしながら、その上に操作要素を重ねたい場面で特に効果を発揮します。
OSレベルのデザイン言語として採用されて以降、対応する背景色を選ばないという扱いやすさもあり、急速に広がりました。

【クレイモーフィズム】粘土のような親しみやすさ

ニューモーフィズムの落ち着いた中間色に対し、クレイモーフィズムはキャンディのような明るいパステルカラーを大胆に使います。
輪郭は丸みを帯び、まるで粘土をこねて作ったような、柔らかく膨らんだ立体感が特徴です。
彩度はニューモーフィズムよりはっきりと高く、見た瞬間に親しみやすさや遊び心が伝わるよう設計されています。

ミニマルで機能的なUIが増えるほど、逆に人は温かみのある手触りを求めるという傾向があります。
クレイモーフィズムは、その揺り戻しの中で存在感を強めてきたスタイルです。

実装環境によるバリエーション

この4スタイルはいずれもUI・デジタル発祥のため、印刷物や動画への自然な展開はほとんどありません。
むしろ興味深いのは、同じスタイルでも実装環境（iOS・Android・デスクトップ・ライトモードとダークモード)によって表情が変わるという点です。

ニューモーフィズムは特に環境の影響を受けやすいスタイルです。
ライトモードでは白に近いグレーの上に柔らかい影が落ち、上品な印象になりますが、ダークモードで同じ手法を使うと、影の視認性が落ちてコントラストの調整が難しくなるという傾向があります。
グラスモーフィズムは逆にダークモードと相性がよく、暗い背景に半透明パネルを重ねると、ガラスの透明感がより際立ちます。

クレイモーフィズムはOSのネイティブUIというより、キャラクター性の強いアプリやゲーム、子ども向けサービスのUIで採用される場面が多く、実装環境というより『ブランドの声のトーン』に近い形で選ばれる傾向があります。
学習系アプリや家計簿アプリなど、本来やや取り組みにくいテーマを親しみやすく見せたい場面で選ばれることが多いスタイルです。

興味深いのは、この4つのスタイルが完全に入れ替わってきたわけではないという点です。
現在の主要なOSやアプリの多くは、フラットデザインを土台にしながら、要所要所でニューモーフィズムやグラスモーフィズムの手法を部分的に取り入れています。
1つのスタイルが次のスタイルに完全に置き換わるというより、これまでの手法の中から場面に応じて選び取る、という使われ方に近づいています。

使いどころと不向きな場面

どのスタイルにも得意な場面と苦手な場面があります。
ブランドの世界観だけで選ぶのではなく、ユーザーが何を求めてその画面を開くのかという視点を重ねると、選び方の精度が上がります。

スキューモーフィズムは、今では全面採用されることは少なくなりましたが、操作に不慣れな層が多いサービス（高齢者向けアプリ等）で、部分的な質感表現として活きる場面があります。

ニューモーフィズムは上品で落ち着いた印象を作れる一方、コントラストが低いためアクセシビリティの面で注意が必要です。
視認性を最優先する金融系・医療系のUIには不向きな場面が多いという傾向があります。

グラスモーフィズムは情報の階層を示すのに優れる一方、背景が単色でコントラストが低い環境では透明感の効果が薄れます。
鮮やかな背景を用意できる場面でこそ本領を発揮します。

クレイモーフィズムは親しみやすさを演出できる一方、フォーマルさや信頼感を優先したいブランドには馴染みにくいという傾向があります。
子ども向け・エンタメ系・カジュアルなライフスタイル系のサービスと相性がよいスタイルです。

デザインの原理としては、『図と地・ゲシュタルトの法則』の記事も参考になります。
半透明のパネルが階層を示すしくみや、影が立体を語るしくみは、この原理から説明できます。
色そのものの心理的な働きに関心のある方は、色彩心理シリーズの入門ページもあわせてご覧ください。