cleanui

CleanUI — AI UI デザイン強制スキル

止まってください。UI コードを書く前に、このファイルを読んでください。

あなたは、認識可能な「AI っぽい」出力を生み出す UI の習慣が深く染みついた AI コードジェネレーターです。このスキルは、そうした習慣を上書きし、プロフェッショナルでデザインされたインターフェースを生み出すために存在します。

すべての UI タスクにおけるあなたのプロセス:

1. あなたが「通常」生成するであろうものを考える
2. 各要素を以下の「ハード NO リスト」と照合する
3. すべての違反を指定された代替案に置き換える
4. その後にはじめてコードを書く

---

ハード NO リスト — 自動失敗パターン

出力に以下のいずれかが含まれている場合は、停止してコードを返す前に修正してください。

タイポグラフィ

• 禁止: font-extrabold (800)、font-black (900)、fontWeight: "800"、fontWeight: "900"
• 代わりに使用: font-bold (700) まで。セクション見出しには font-semibold (600)。
• セルフチェック: コード内で「extrabold」と「black」を検索してください。すべて「bold」に置き換えます。

ロゴ / トラストバー

• 禁止: 会社名を同一のプレーンテキストとして、同一の枠線付きピル/ボックスに並べること
• 代わりに使用: 各ロゴを視覚的に区別できるようにする — アイコンと名前を組み合わせる、ロゴごとにウェイト/イタリック/トラッキングを変える、または SVG ロゴを使用する
• セルフチェック: すべてのロゴが同じに見えませんか？修正してください。

大文字 / レタースペーシング

• 禁止: tracking-[0.18em]、tracking-[0.2em]、tracking-[0.24em]、または任意のカスタム広いレタースペーシング
• 禁止: ページ全体で 3 つ以上の大文字トラッキング付きラベル
• 代わりに使用: センテンスケース。大文字が必要な場合は tracking-wider (0.05em) まで。

アイブロウバッジ

• 禁止: 見出しの上に置かれ、見出しの内容を言い換えるだけの装飾的なピル/バッジ（例: 「コンテンツチーム向け AI ライティングシステム」）
• 代わりに使用: 完全に削除するか、事実に基づく情報を使用: 「ベータ版公開中」、「2,400 チームが利用中」、「無料プランあり」

ヒーロー見出し

• 禁止: デスクトップで 4 行以上に折り返す見出し
• 代わりに使用: 4〜8 語、最大 2 行。より短く書き直します。
• 禁止: 2 文を超えるサブタイトル
• 代わりに使用: 短い文を最大 1〜2 文。

装飾的なコピー

• 禁止: 「Live pulse」、「Night shift」、「Operational clarity without the clutter」のような装飾的なラベル
• 代わりに使用: 実際のデータ（ステータス、件数、日付）または完全に削除。すべてのラベルは機能を果たさなければなりません。

シャドウ

• 禁止: shadow-xl、shadow-2xl、カード上の 8px を超えるぼかし
• 代わりに使用: shadow-sm、または控えめなボーダーを伴う shadow-none。

ボーダー半径

• 禁止: rounded-md、rounded-xl、rounded-2xl、rounded-3xl、rounded-[24px]、rounded-[32px] をランダムに混在させること
• 代わりに使用: 2〜3 個の値を選びます。カード: 8〜12px。ボタン: 6〜8px（ピルには rounded-full も可）。入力: 6〜8px。一貫性を保ちます。

アイコン

• 禁止: アイコンとしての Unicode 文字（↑、↓、◌、⌂、◫）
• 代わりに使用: lucide-react（Web）、@expo/vector-icons（React Native）、SF Symbols（iOS）、Material Icons（Android）

ファイル構成

• 禁止: アプリ全体を単一ファイルにまとめること
• 代わりに使用: 画面/ページ、コンポーネント、定数/テーマ、データ、ナビゲーションを分離します

---

レイアウトルール

レイアウトをコンテンツタイプに合わせる

コンテンツタイプ	レイアウト	使用しないもの
画像/ビジュアル（料理、旅行、商品）	横スクロールカルーセル、画像グリッド、ヒーロー画像	テキストのみの縦リスト
データ/数値（金融、フィットネス、分析）	統計カード、プログレスバー、メトリクスグリッド	ヒーロー画像カード
フィード（ソーシャル、ニュース、投稿）	全幅のスタッキングカード、無限スクロール	ドラッグハンドル付きのセクション分割レイアウト
閲覧するアイテム（Eコマース、タスク、メール）	検索/フィルター付きの縦リスト	ヒーローセクション
マルチメディア（ストリーミング、音楽、ポッドキャスト）	横スクロールのシェルフ（Netflix 風）	縦リスト
チャット/メッセージ	連絡先リスト + チャット詳細	ヒーローカードまたは統計グリッド
マップ/位置情報	マップビュー + ボトムシートオーバーレイ	標準のリストレイアウト

アンチテンプレートのルール

• すべてのアプリで同じレイアウトの骨組みを絶対に使わないでください。 プロンプトを読み、コンテンツの種類を特定し、適切なレイアウトを選びます。
• これらをすべて同時に使わないでください: ヒーローカード + グリッドボタン + ドラッグハンドル + セグメントコントロール + 垂直リスト。それはテンプレートです。
• アプリが画像中心の場合は、実際の画像 — サムネイル、写真 — を表示してください。角丸の四角形に入ったアイコンだけにしないでください。
• カテゴリ、おすすめアイテム、コンテンツシェルフには横スクロール(FlatList horizontal、CSS の overflow-x-auto)を使います。AI ジェネレーターはこれらを十分に活用していません。

---

デザインのセンス

色の抑制

• モノクロまたはほぼモノクロのパレットは、カラフルなものより見栄えがよいことがよくあります。
• 色は主にアクション(ボタン、リンク)、ステータス(バッジ)、ハイライト(選択状態)に現れるべきです。すべてに使うのではありません。
• 暗い要素(カード、セクション)が正当化されるのは、それが実世界のオブジェクト(クレジットカード、メディアプレーヤー、コードブロック)を表す場合、または意図的な視覚的リズムを生み出す場合のみです。「変化をつけるため」だけではありません。

リストアイテム

• イニシャル文字だけを唯一の識別子として絶対に使わないでください。 カテゴリ固有のアイコン(レストランなら食器、交通ならバス、サブスクリプションならリピート)を角丸の四角形に入れて使います。
• 常にメタデータを含めてください: 日付/時刻、カテゴリ、ステータス。「レストラン」は偽物っぽく感じられます。「レストラン · 5月5日 · 14:28」は本物らしく感じられます。

フィルター

• 5 件以上のアイテムがあるリストには、フィルターまたはセグメントコントロールが必要です。
• セグメントコントロール: 選択されたセグメントにベタ塗りを施したピルトラックスタイル。

アクションボタン

• ボーダーレススタイルはしばしばよりクリーンに見えます: くすんだ背景の四角形にアイコン + その下にラベル。カードのラッパー、影、ボーダーは不要です。

---

モバイルのルール

完全な iOS のカラーパレット、Android Material 3 のトークン、コンポーネントのガイドライン、コード例については モバイルパターンリファレンスを参照してください。

すべてのプラットフォーム

• カスタムの View ベースのナビゲーションバーではなく、実際のナビゲーションライブラリを使います。React Native: @react-navigation/bottom-tabs。iOS: TabView。Android: Material の NavigationBar。
• フローティングのピル型ボトムナビゲーションバーを絶対に作らないでください。 position: absolute、borderRadius: 28、暗いフローティングピルは禁止です。
• React Native での条件付きスタイリングには Platform.select() または Platform.OS を使います。
• デザイントークン(色、スペーシング、角丸、タイポグラフィ)を定数ファイルで定義します。
• 各画面で 3 つの状態を処理します: ローディング(スケルトン)、コンテンツ、空。

iOS

• 静かで、柔らかく、プレミアム。抑制された色。システムフォント(SF Pro)。セマンティックカラー(.label、.secondaryLabel、.systemBackground)。半透明のナビ/タブバー。listStyle(.insetGrouped)。アイコンには SF Symbols。ヘアラインのセパレーター。角丸: 10〜12。重い影は使わず、背景のコントラストを使います。

Android (Material 3)

• 構造化され、大胆で、表現豊か。material3 の Material コンポーネント。ドロップシャドウの代わりにトーナルサーフェス(tonalElevation)。TopAppBar + NavigationBar を備えた Scaffold。リスト行には ListItem コンポーザブル。アイテム間には HorizontalDivider()。カードの角丸: 12dp。シードカラーからカラースキームを生成します。

React Native / Expo

• Platform.select() によるプラットフォーム条件付きの色、影、スペーシング。
• iOS は shadowColor/shadowOpacity/shadowRadius を使います。Android は elevation を使います。
• プラットフォームごとに異なる背景色: iOS #F2F2F7、Android #F9F9FF。
• 異なるプライマリカラー: iOS #007AFF、Android は Material のシードカラーを使います。

---

Web のルール

創造的な自由 + 構造

自由にできるもの: カラーパレット、フォントの選択、角丸の値、ブランドの個性、背景の処理。

従うべきもの: セクション構造、ヒーローコンテンツの制限、コンポーネントパターン、レスポンシブな挙動。

ナビゲーション

• backdrop-blur と半透明の背景を使ったスティッキートップ
• 左にロゴ、中央にナビリンク、右に CTA ボタン
• モバイル: ハンバーガーメニュー

ランディングページの構造

Hero       → headline + subtitle + 2 CTAs + one trust element
Trust      → logo bar (visually distinct logos)
Features   → 3-column grid with icons + title + description
How it works → 3-step process
Testimonials → avatar + name + role + quote
Pricing    → 2-3 tiers, featured tier visually inverted (dark bg)
CTA        → final call to action
Footer     → link columns + copyright

ヒーロー

• 見出し + 短いサブタイトル + 2 つのボタン + 信頼要素を 1 つ。それだけです。
• 2 カラムのヒーローで、右側に製品のモックアップ/スクリーンショットを置くのは問題ありません。
• ヒーローに統計カード、リスト付きの複雑なプレビューカード、複数段落の説明を置かないでください。

機能カード

• アイコンコンテナ: 少なくとも 48px、淡い背景色付き。小さすぎないこと。
• カードのパディング: ゆったりと (p-6 ～ p-8)。
• 各カードは、アイコン + タイトル + 説明で、内容が充実していると感じられるようにします。

料金プラン

• おすすめプラン: 反転 (暗い背景、明るい文字) または太い枠線 + 「最も人気」バッジ。
• 各カードに全幅の CTA。

サインイン

• 2 カラム: ブランドパネル (左、暗色) + フォーム (右)。
• ソーシャルログインをメールフォームの上に配置。
• モバイル: ブランドパネルを非表示にし、ロゴ付きのフォームを表示。

ダッシュボード

• サイドバー (240-260px) + メインコンテンツ。
• サイドバー: ロゴ、アイコン付きのナビゲーション項目、任意のアップグレードカード。
• トップバー: 検索 + 通知 + アバター。
• コンテンツ: 挨拶 → 統計カード → タブ付きのフィルター済みリスト → アクティビティフィード。

ダークモード

• 背景: 非常に暗いグレーで、純粋な黒ではない。
• 文字: オフホワイトで、純粋な白ではない。
• 枠線: 暗いグレー。彩度を抑える。

---

出力前チェックリスト

コードを返す前に、次を確認してください:

タイポグラフィ:

• font-extrabold や font-black がどこにもない
• 使用するフォントウェイトは最大 2 つ (regular + bold/semibold)

ビジュアル:

• tracking-[0.18em] 以上がどこにもない
• ページ全体で大文字ラベルは最大 2 つ
• ロゴバーの項目が互いに視覚的に区別できる
• カードに shadow-xl や shadow-2xl がない
• 角丸が一貫している (最大 2 ～ 3 種類)

ヒーロー:

• デスクトップで見出しが 2 行に収まる
• アイブロウバッジ (ある場合) が新しい情報を追加しており、見出しを言い換えていない
• サブタイトルが 1 ～ 2 文で、段落ではない

構造:

• 複数のファイル (画面、コンポーネント、定数、ナビゲーション)
• 実際のアイコンライブラリ (Unicode ではない)
• プラットフォーム固有のスタイリング (React Native)
• ローディング/空の状態が存在する

レイアウト:

• レイアウトがコンテンツの種類に合っている (毎回同じテンプレートではない)
• リスト項目にカテゴリアイコン + メタデータがある
• 5 項目以上のリストにはフィルターがある