UI Style
クレイモーフィズム（Claymorphism）
粘土のような丸い3D形状とパステルカラーで、親しみやすさを出すスタイルです。
丸いカードと立体的なパステル要素で、粘土のような親しみを表します。
30秒でわかる要点
粘土のような丸い3D形状とパステルカラーで、親しみやすさを出すスタイルです。
視覚的特徴
- ・ぷっくりした丸み
- ・パステルカラー
- ・柔らかい3D要素
メリット
- ・親しみやすい
- ・子ども向けや学習系に合う
- ・感情訴求しやすい
デメリット
- ・B2Bや高密度画面では信頼感を損ねる場合がある
- ・装飾が増えると読みづらい
向いている用途
- ・教育アプリ
- ・子ども向けアプリ
- ・オンボーディング
避けた方がよい用途
- ・金融・行政系UI
- ・緊張感が必要な業務UI
関連コンポーネント
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。
アバター（Avatar）アバター（Avatar）は、ユーザーやエンティティを表すアイコン・プロフィール画像コンポーネント。画像がない場合はイニシャルや代替アイコンで表示する。
関連画面
AI実装プロンプト
React + Tailwind CSS
React + Tailwind CSSでクレイモーフィズムの学習アプリカードを作成してください。パステルカラー、ぷっくりした角丸、柔らかい影、親しみやすいアイコンを含めてください。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-20
- レビュー状態
- 未レビュー
参照元
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-20
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-20
- MDN Web Docs - Accessibility参照確認日: 2026-07-20
FAQ
クレイモーフィズムは業務アプリに向きますか？
基本的には向きません。親しみやすさが強いため、教育、子ども向け、カジュアルな体験で使う方が自然です。