スタイルは用途に合わせる
問題
AIはUIを書くとき、いつも同じ美学パターンに固執しがちです：
- 毛ガラスカード（
backdrop-filter: blur()+ 半透明白） - ニューモーフィズムの凸凹シャドウ
- 紫から青のグラデーション、グラデーションボタン、グラデーションテキスト、グラデーションボーダー
- 暗い背景に浮かぶぼんやりしたカラースポット
- ネオン発光の
box-shadow、ホバー時に拡大・浮上・回転 - 各ブロックが24px角丸のカード、タイトル前に絵文字
- 「✨ AI駆動」「🚀 さあ始めよう」といったコピー
結果：財務用の経費承認ツールや運用監視ログビューアーが、ゲームランチャーや暗号通貨LPのように見えてしまう。ユーザーは毎日8時間使うのに、見た目が派手で探し物がしづらく、プロフェッショナルで信頼性のない印象を与えます。
逆もまた然り：友達向けのミニゲーム、おみくじルーレット、ペット日記が、灰色のテーブルにデフォルトの青ボタンで作られ、まったく面白くありません。
スタイルは「見た目が良いか」ではなく、「適切かどうか」の問題です。
ステップ1：プロジェクトに何があるか確認する
優先順位は高い順に：
- プロジェクトの既存デザインシステム / コンポーネントライブラリ / テーマファイル（
tailwind.config、theme.ts、CSS変数、Figmaリンク、ブランドガイドライン）：それに従い、独自のものを作らない。 - プロジェクト内の既存ページ：新しいページはそれらと統一感を持たせる。
- プラットフォームガイドライン：WindowsネイティブアプリはFluent / WinUI、macOSはHIG、AndroidはMaterial Designに従う。プラットフォームガイドラインで定義されたマテリアル（Windows 11のMica / Acrylicなど）は正当であり、プラットフォームが指定する場所（ウィンドウ背景、フライアウトメニュー）でのみ使用し、すべてのカードにブラーをかけるためではない。
- 上記がない場合にのみ、シーンに基づいて判断する。
ステップ2：シーンを判断する
以下のシグナルを見てください：
| シグナル | 控えめ志向 | 賑やか志向 |
|---|---|---|
| 誰が使うか | 従業員、専門家、顧客の顧客 | 一般プレイヤー、友人、子供、ファン |
| どのように使うか | 毎日長時間、同じ操作を繰り返す | 時々開いて、少し遊ぶ |
| 内容 | テーブル、数値、フォーム、ログ、コード | 画像、キャラクター、ストーリー、達成、インタラクション |
| エラーの代償 | 高い：お金、データ、契約、本番環境 | 低い：もう一度やり直せばよい |
| ユーザーが求める感覚 | 信頼性、効率性、プロフェッショナル、邪魔しない | 面白い、驚き、個性、共有したくなる |
ステップ3：シーンに基づいて方向性を選ぶ
ビジネス / 生産性 / 内部ツール / データバックエンド / 開発者ツール
- 配色：ニュートラルカラー（白、薄いグレー、濃いグレー）を基本に、1つのアクセントカラーを主要な操作とキーステータスに使用。ステータスカラー（成功/警告/エラー）は固定された意味を持ち、装飾には使用しない。
- フォント：システムフォント、または洗練されたサンセリフフォント。数字には等幅または
font-variant-numeric: tabular-numsを使用し、列が揃うようにする。 - 密度：情報密度は中〜高、テーブルの行の高さはコンパクトに。余白はグループ化のために使い、「高級感」を出すためではない。
- 装飾：ほぼなし。小さな角丸（4～8px）、細いボーダーまたは非常に薄いシャドウ。グラデーション、発光、毛ガラス、背景スポットは使用しない。
- アニメーション：フィードバック（ローディング、展開、状態変化）のみに使用。150～200ms。エントリーアニメーション、ホバー拡大、パララックスは使用しない。
- アイコン：統一されたラインアイコンセット（Lucide、Fluent Icons、Material Symbols）。絵文字は使用しない。
- コピー：直接的で具体的：「保存」「CSVにエクスポート」「承認待ちのレコード3件」。
エンターテインメント / ゲーム / クリエイティブ / ソーシャル / 子供 / 個人の趣味
- 配色：鮮やかで大胆、カラフルで記憶に残る。テーマカラー、グラデーション、イラスト背景を使用できる。
- フォント：タイトルには個性的なディスプレイフォントを使用可能。本文は読みやすく保つ。
- 装飾：イラスト、ステッカー、テクスチャー、キャラクター、手描き要素を自由に使ってよいが、テーマに沿っていること。汎用的な「かっこいい」効果をそのまま適用するのではない。ピクセルアートゲームならピクセルアートに、おとぎ話テーマならおとぎ話風に。一律の紫ネオンではない。
- アニメーション：より豊かに：弾性、パーティクル、お祝いアニメーション、効果音。操作にご褒美感を与える。
- コピー：トーン、個性、遊び心を持たせてよい。
中間領域
一般消費者向けツール（家計簿、ToDo、カレンダー、フィットネス記録）、ポートフォリオ、製品LP：基本は控えめでユーザビリティ優先。一部の場所（空状態、完了時、ブランドカラー、イラスト）で個性を加える。
賑やかさは、AIの慣習スタイルとは異なります。毛ガラス、紫青グラデーション、ネオンスポットをエンタメシーンに適用しても、「汎用AI風」に過ぎず、そのプロダクトのスタイルではありません。良い賑やかさはテーマ性があるものです。
不確かなときは：ユーザーに確認する
シーンが明確でない、またはユーザーの要件自体に複数の選択肢がある場合、まず質問し、それからコードを書く。質問は具体的で、選択肢を直接提示する。「どんなスタイルが好きですか？」ではなく：
✓ 「このツールのスタイルとして、どれがいいですか？
A. シンプルでプロフェッショナル：明るい背景、ニュートラルカラー、コンパクトテーブル（Linear / Notion風）
B. 親しみやすくリラックス：優しい色合い、柔らかな配色、少量のイラスト（Duolingoの設定ページ風）
C. 個性的：大胆な配色とアニメーション、展示やエンタメ向け
決まらなければ、Aで1バージョン作ります。」
レンダリング環境がある場合は、2～3のサンプル（同じインターフェースで配色とフォントだけ変えたもの）を提示して選んでもらうこともできます。
質問が不要なときは質問しない：ユーザーがすでに用途を明示している（「会社の財務部門用です」）、プロジェクトに既存のスタイルがある、または要件が明らかな（「テトリス風のミニゲームを作って」）場合、判断に従って直接作成し、作業終了時に選択した方向性を伝えてユーザーが修正できるようにします。
ステップ4：完了後に自己チェック
画面上のすべての装飾について自分に問いかけてください：それを取り除いたら、ユーザーは何を失うか？ 答えが「何も失わない」で、これがツール系インターフェースなら、削除します。
1つずつ確認：
- コード内の
backdrop-filter、linear-gradient、box-shadow（カラー発光）、animation、絵文字を検索する。それぞれ意図的に使われているか？ - アクセントカラーは主要操作とキーステータスだけに使われているか？それともあちこちに使われているか？
- スクリーンショットを見て（背景がベージュっぽい？）：最初に目に入るのはコンテンツと主要操作か、それとも装飾か？
- ユーザーの立場で考える：毎日8時間使う／それを10分遊ぶ場合、このスタイルは適切か？
境界
- ユーザーが特定のスタイルを明確に要求した場合（「サイバーパンク風でお願い」「派手にしてください」）、ツール系でもユーザーの指示に従う。
- ユーザーが参考画像、参考サイト、ブランドガイドラインを提示した場合、それを優先する。
- デモ、マーケティング、展示ページは日常ツールよりも表現力豊かでよいが、それでもブランドとターゲットオーディエンスに合わせる。
チェックリスト
- プロジェクトに既存のデザインシステム、テーマ、既存ページはあるか？それに従っているか？
- これはどのシーンか？誰が、どのくらいの頻度で、エラーの代償はどれくらいか？
- シーンが不明確な場合、具体的な方向性を提示してユーザーに質問したか？
- ツール系インターフェース：毛ガラス、紫青グラデーション、ネオン発光、スポット背景、絵文字アイコン、無意味なアニメーションはないか？
- エンタメ系インターフェース：テーマに沿った個性があるか？灰色のテーブルや汎用AIの派手スタイルになっていないか？
- アクセントカラーは必要な場所だけに使われているか？
- すべての装飾に、その存在理由を説明できるか？