クレイモーフィズムとは？特徴・配色・Webデザインへの活用を解説

クレイモーフィズム（Claymorphism）は2021年末頃からUIデザインコミュニティを中心に急速に広まった、現代のデジタルデザインスタイルです。その名称は、粘土（Clay）で作られたような丸みとふくらみを持つ立体的な質感を、デザイン形態（-morphism）に取り込んだことに由来します。スキューモーフィズムからフラットデザイン、ニューモーフィズムへと続く「UIの質感表現」の潮流の中で、ニューモーフィズムが持つコントラスト不足というアクセシビリティ問題を克服する形で発展しました。

最大の特徴は、オブジェクトが背景から完全に分離して「浮いている」ように見える大きなドロップシャドウと、角が大きく丸められたインフレータブル（膨張した）形状にあります。ニューモーフィズムが背景と溶け合うような凹凸感を表現するのに対し、クレイモーフィズムは背景から明確に切り離されたレイヤー構造を持つため、UIとしての視認性が確保されています。

現在はメタバース・Web3・暗号資産アプリのライト層向けサービスや、子供向けオンライン学習プラットフォーム（EdTech）、スタートアップのブランドビジュアルや3Dアバター・アイコンデザインなど、「親しみやすさ」と「先進感」を同時に必要とする場面で広く採用されています。

• 色鮮やかでポップなパステルカラーやキャンディカラー。明るいハイライトと暗いシャドウの2つのシャドウによる柔らかなグラデーションで立体感を演出
• 形角が大きく丸められた長方形（リッチな角丸）、ふっくらとした丸みを持つ3Dオブジェクト、円、インフレータブル（膨らんだ）形状
• 構図大きな外側のドロップシャドウによって、オブジェクトが背景から完全に「浮遊」しているように見えるレイアウト。レイヤー構造が明確
• 書体丸みのある親しみやすい幾何学的サンセリフ体（Rounded Sans-serif）や、太く存在感のあるモダンなディスプレイフォント
• テクスチャクレイ（粘土）やマットなプラスチック・シリコンを思わせる、光沢感を抑えた滑らかで不透明な質感
• その他ニューモーフィズムと異なり背景と完全に分離しているため、UIとしての視認性（コントラスト）が確保されているのが大きな利点

Big Claymorphism Button

UI Elements: Claymorphic Buttons

• WebPitch — プレゼンテーションツールの公式サイトやUIデザインにおいて、キャッチーな3Dクレイイラストレーションを全面的に採用
• ブランドMeta（旧Facebook） — メタバースや3Dアバター（Meta Avatar）の質感のベースとなるソフトなクレイ調3Dモデリングに採用
• ゲームMonopoly Go! — カジュアル・モバイルゲームにおけるふっくらとした立体感を持つUIボタンやキャラクターデザイン全体
• WebAmie — 生産性向上・カレンダーアプリのビジュアル、アイコン、および世界観を構築するクレイ調グラフィックに一貫して採用
• WebStripe — 一部のリブランディングや特設ページで、親しみやすさを付加するための抽象的な3Dクレイオブジェクトを使用

このスタイルのビジュアルをAIで生成するためのプロンプトです。英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。

英語プロンプト

日本語プロンプト

クレイモーフィズムは暗号資産・Web3関連のライト層向けサービス、子供向けEdTech、クリエイティブ系ツールのLPなどと特に相性が良いスタイルです。ただし3Dオブジェクトのデータ容量が重くなりやすく読み込み速度の低下を招くため、画像の最適化や軽量なCSS実装の検討が必要です。また非常にポップなトーンになるため、金融・法律など厳格な信頼性を求める業種には不向き。組み合わせるならグラスモーフィズムやフラットデザインとの親和性が高いです。