uncodixfy

Uncodixify

このドキュメントは、UI を構築する際にできるだけ Codex らしくない振る舞いをする方法を学ぶためのものです。

Codex UI は、AI の美学のデフォルトです。柔らかなグラデーション、浮遊するパネル、アイブロウラベル、装飾的なコピー、ダッシュボードのヒーローセクション、大きすぎる角丸、変形アニメーション、ドラマチックな影、そしてプレミアムに見せようとしすぎるレイアウト。これらは、最も安易な道を選んでいるため、「AI が作った」とひと目でわかるビジュアル表現です。

このファイルは、そのパターンを打ち破るためのガイドです。以下に挙げるのは、Codex UI がデフォルトで行うことです。あなたの役目は、こうしたパターンを見分けて完全に避け、人間がデザインしたように感じられる、機能的で誠実なインターフェースを構築することです。

このドキュメントを読むときは、してはいけないことを学んでいます。禁止パターンは危険信号です。通常の実装は設計図です。それらを厳守すれば、また別のありきたりな AI ダッシュボードではなく、Linear、Raycast、Stripe、GitHub のような UI を作れます。

これが Uncodixify です。

普通を保つ（Uncodexy-UI 標準）

• サイドバー：標準的にします（幅は固定で240～260px、背景は単色、右側にシンプルな境界線を付け、浮いたシェルにせず、外側の角は丸めません）
• ヘッダー：標準的にします（シンプルなテキストにし、アイブロウ、すべて大文字のラベル、グラデーションテキストは使わず、適切な階層のh1/h2だけを使います）
• セクション：標準的にします（標準的なパディングは20～30px、ダッシュボード内にヒーローブロックを置かず、装飾的なコピーは使いません）
• ナビゲーション：標準的にします（シンプルなリンクに控えめなホバー状態を付け、トランスフォームアニメーションは使わず、機能上必要な場合を除いてバッジは付けません）
• ボタン：標準的にします（塗りつぶしかシンプルな境界線を使い、角丸は最大8～10pxにし、ピル型やグラデーション背景は使いません）
• カード：標準的にします（シンプルなコンテナーにし、角丸は最大8～12pxに抑え、控えめな境界線を付けます。ぼかし半径8pxを超えるシャドウや浮遊効果は使いません）
• フォーム：標準的にします（標準的な入力欄を使い、フィールドの上に明確なラベルを配置し、凝ったフローティングラベルは使わず、シンプルなフォーカス状態にします）
• 入力欄：標準的にします（単色の境界線とシンプルなフォーカスリングを使い、アニメーション付きの下線や変形するシェイプは使いません）
• モーダル：標準的にします（中央にオーバーレイを表示し、シンプルなバックドロップを使います。スライドインアニメーションは使わず、わかりやすい閉じるボタンを配置します）
• ドロップダウン：標準的にします（シンプルなリストに控えめなシャドウを付け、凝ったアニメーションは使わず、選択状態を明確にします）
• テーブル：標準的にします（すっきりした行にシンプルな境界線を付け、控えめなホバー状態にします。必要な場合を除いてゼブラストライプは使わず、テキストは左揃えにします）
• リスト：標準的にします（シンプルな項目に統一した間隔を設け、装飾的な箇条書きは使わず、階層を明確にします）
• タブ：標準的にします（シンプルな下線または境界線で選択状態を示し、ピル型の背景やスライドアニメーションは使いません）
• バッジ：標準的にします（小さなテキストにシンプルな境界線または背景を付け、角丸は6～8pxにします。光彩は使わず、必要な場合だけ使用します）
• アバター：標準的にします（シンプルな円形または角丸の四角形にし、装飾的な境界線や、機能上必要な場合を除くステータスリングは付けません）
• アイコン：標準的にします（シンプルな形状でサイズは16～20pxに統一し、装飾的なアイコン背景は使わず、モノクロまたは控えめな色にします）
• タイポグラフィ：標準的にします（システムフォントまたはシンプルなサンセリフ体を使い、明確な階層を設けます。セリフ体とサンセリフ体を混在させず、本文は読みやすい14～16pxにします）
• 余白：標準的にします（4/8/12/16/24/32pxの統一したスケールを使い、ばらばらな間隔や過剰なパディングは避けます）
• 境界線：標準的にします（1pxの実線に控えめな色を使い、太い装飾的な境界線やグラデーション境界線は使いません）
• シャドウ：標準的にします（控えめな0 2px 8px rgba(0,0,0,0.1)を上限とし、劇的なドロップシャドウや色付きシャドウは使いません）
• トランジション：標準的にします（100～200msのeaseを使い、弾むアニメーションやトランスフォーム効果は使わず、シンプルな不透明度や色の変化にします）
• レイアウト：標準的にします（標準的なグリッド／フレックスを使い、創造的な非対称レイアウトは避け、予測しやすい構造と明確なコンテンツ階層にします）
• グリッド：標準的にします（列を統一し、標準的な間隔を使います。創造的な重なりは避け、レスポンシブなブレークポイントを設定します）
• Flexbox：標準的にします（シンプルな配置と標準的な間隔を使い、創造的なjustifyの工夫はしません）
• コンテナー：標準的にします（最大幅は1200～1400pxにし、中央に配置して標準的なパディングを使います。独創的な幅にはしません）
• ラッパー：標準的にします（シンプルな包含用divにし、装飾目的ではなく、機能目的にのみ使います）
• パネル：標準的にします（背景の違いはシンプルにし、控えめな境界線を付けます。浮いて切り離されたパネルやガラス効果は使いません）
• ツールバー：標準的にします（シンプルな横並びレイアウトにし、高さは標準的な48～56pxにします。操作を明確にし、装飾要素は使いません）
• フッター：標準的にします（シンプルなレイアウトと標準的なリンクにし、装飾的なセクションは設けず、高さを最小限にします）
• パンくずリスト：標準的にします（区切り文字を使ったシンプルなテキストにし、凝ったスタイルは使わず、階層を明確にします）

Linear、Raycast、Stripe、GitHubをイメージしてください。注目を集めようとはしません。ただきちんと機能します。気を引こうとするのはやめて、普通のUIにしましょう。

• ランディングページには各セクションが必要です。ヒーローが必要ならセクション全体を設け、ダッシュボードが必要ならサイドバーなど、すべてを適切に配置したセクション全体を設けてください。新しいレイアウトを勝手に考案しないでください。
• 内部で考える際は、これが見えていないかのように振る舞い、やろうとすることをすべて列挙し、そしてそれをしないでください！
• Figma／デザイナーが作成したコンポーネントを再現するようにし、独自のものを考案しないでください

絶対に避けること

• いつも慣れ親しんでいることや、あなたにとって基本的に「YES」となることは、すべて避けてください。

• 大きく丸みを帯びた角は使わないでください。

• ピル型の要素を多用しないでください。

• フローティングするグラスモーフィズムのシェルを、デフォルトのビジュアル表現にしないでください。

• センスを装うために、柔らかな企業風グラデーションを使わないでください。

• ありきたりなダーク系 SaaS UI の構成にしないでください。

• 装飾的なサイドバーの塊を使わないでください。

• 明示的に求められない限り、「コントロールルーム」風の演出は避けてください。

• 「プレミアム」感を手軽に出すために、セリフ体の見出しとシステムサンセリフ体のフォールバックを組み合わせないでください。

• 製品ですでに使用している場合を除き、Segoe UI、Trebuchet MS、Arial、Inter、Roboto、または安全策のデフォルトのフォントスタックは使わないでください。

• 情報設計上、本当に必要な場合を除き、左側に固定表示するレールは使わないでください。

• 最初に KPI カードのグリッドを置く発想は避けてください。

• 空間を埋めるだけのダミーのグラフは使わないでください。

• 装飾としての、無意味なグロー、ぼかしのもや、すりガラス風パネル、円錐グラデーションのドーナツは使わないでください。

• 内部 UI に、本当に製品上の理由がない限り「ヒーローセクション」を設けないでください。

• 高級感を演出するためだけに、無駄な空白を生む配置にしないでください。

• 余白を過剰に取らないでください。

• モバイル表示で、すべてを積み重ねただけの、長いベージュのサンドイッチのようなレイアウトにしないでください。

• 製品の語り口に由来しない限り、「ライブパルス」「夜勤」「オペレーターチェックリスト」のような装飾的なラベルは使わないでください。

• ありきたりなスタートアップ風のコピーは使わないでください。

• 生成しやすいという理由でスタイルを決めないでください。

• 見出しは一切使わないでください。

<div class="headline">
  <small>Team Command</small>
  <h2>One place to track what matters today.</h2>
  <p>
    The layout stays strict and readable: live project health,
    team activity, and near-term priorities without the usual
    dashboard filler.
  </p>
</div>

これは禁止です。

• <small> の見出しは禁止です。

• 角丸の span は絶対に使わないでください。

• 青系の色は**使わないでください。ダメです。**暗く落ち着いた色が最適です。

• このカードの構造に似たものは、絶対に避けてください。

<div class="team-note">
  <small>Focus</small>
  <strong>
    Keep updates brief, blockers visible, and next actions easy to spot.
  </strong>
</div>

これは絶対に避けるべきものです。

特に禁止すること（過去の失敗に基づく）

• 全体にわたって、20px〜32px の角丸を使うこと（ はあらゆる箇所で 12px を使っており、多すぎます）
• サイドバー、カード、ボタン、パネルで、同じ角丸の長方形を繰り返し使うこと
• 上部にブランドブロックを置き、その下にナビゲーションリンクを並べた、幅約 280px のサイドバー（: ブランドブロック付きで 248px）
• 外側が丸みを帯びたシェルで囲まれた、浮遊する独立型サイドバー
• 製品固有の理由がないのに、キャンバスグラフをグラス風カードに配置すること
• 根拠の曖昧なパーセンテージを添えたドーナツグラフ
• 階層づけの代わりにグローを使った UI カード
• 一部のコンテンツは左端に寄せ、別のコンテンツは中央付近のブロックに浮かべる、統一感のない配置ルール
• コントラストと明瞭さを損なう、グレーがかった青のテキストの多用
• 実際には、青黒いグラデーションにシアンのアクセントを加えただけの「プレミアムなダークモード」（ は背景にラジアルグラデーションを使用しています）
• テンプレートのように感じられ、ブランドらしさのない UI のタイポグラフィ
• アイブロウラベル（: 文字間隔を広げた大文字の「MARCH SNAPSHOT」）
• ダッシュボード内のヒーローセクション（ は装飾的なコピーを添えた幅いっぱいのヒーローストリップを使用しています）
• ページヘッダーに「雑然とせず、運用を明瞭に」といった装飾的なコピーを使うこと
• UI の機能を説明するセクション注記や小さな注記をあちこちに置くこと
• ホバー時のトランスフォームアニメーション（: ナビゲーションリンクに translateX(2px) を使うこと）
• 大げさなボックスシャドウ（: 0 24px 60px rgba(0,0,0,0.35)）
• ::before 疑似要素で色付きのドットを作るステータスインジケーター
• 大文字と文字間隔の拡大を組み合わせた控えめなラベル（ このパターンを多用しています）
• グラデーションで塗りつぶしたパイプラインバー（: linear-gradient(90deg, var(--primary), #4fe0c0)）
• デフォルトのダッシュボードレイアウトとして、グリッド状に配置した KPI カード（ は 3 列の kpi-grid を使用しています）
• 装飾的な内部コピーを添えた「Team focus」や「Recent activity」パネル
• すべてのステータスにタグバッジを付けたテーブル（ .tag クラスを多用しています）
• サイドバー内に、CTA ボタン付きのワークスペースブロックを置くこと
• グラデーション背景を使ったブランドマーク（: linear-gradient(135deg, #2a2a2a, #171717)）
• 件数や「Live」ステータスを表示するナビゲーションバッジ（ nav-badge クラスを使用しています）
• プログレスバー付きのクォータ／使用状況パネル（ 3 つのクォータセクションがあります）
• メタ情報を記載したフッター行（: 「Northstar dashboard • dark mode • single-file HTML」）
• 色付きのテキストによるトレンドインジケーター（: trend-up、trend-flat クラス）
• 「Today」の予定を載せた右側のレールパネル（ は右側にレール全体を設けています）
• 複数階層のパネル種別（panel、panel-2、rail-panel、table-panel）

ルール

UI の選択が、AI UI にありがちな定番の手法だと感じたら、それを禁止し、より難しくてもすっきりした選択肢を選んでください。

• 色は落ち着いたものにし、互いに主張し合わないようにしてください。

• 色選びは得意ではないため、色を選ぶ際は次の優先順位に従ってください。

1. 最優先： ユーザーのプロジェクトに既存の色があれば、それを使用してください（いくつかのファイルを読んで探せます）。
2. プロジェクトにパレットが用意されていない場合は、以下の定義済みパレットから着想を得てください。
3. 明示的に求められていない限り、ランダムな色の組み合わせを考案しないでください。

必ずしも最初のパレットを選ぶ必要はありません。着想を得るために、ランダムに選んでください。

ダークカラースキーム

パレット	背景	サーフェス	プライマリ	セカンダリ	アクセント	テキスト
ミッドナイトキャンバス	#0a0e27	#151b3d	#6c8eff	#a78bfa	#f472b6	#e2e8f0
オブシディアンデプス	#0f0f0f	#1a1a1a	#00d4aa	#00a3cc	#ff6b9d	#f5f5f5
スレートノワール	#0f172a	#1e293b	#38bdf8	#818cf8	#fb923c	#f1f5f9
カーボンエレガンス	#121212	#1e1e1e	#bb86fc	#03dac6	#cf6679	#e1e1e1
ディープオーシャン	#001e3c	#0a2744	#4fc3f7	#29b6f6	#ffa726	#eceff1
チャコールスタジオ	#1c1c1e	#2c2c2e	#0a84ff	#5e5ce6	#ff375f	#f2f2f7
グラファイトプロ	#18181b	#27272a	#a855f7	#ec4899	#14b8a6	#fafafa
ボイドスペース	#0d1117	#161b22	#58a6ff	#79c0ff	#f78166	#c9d1d9
トワイライトミスト	#1a1625	#2d2438	#9d7cd8	#7aa2f7	#ff9e64	#dcd7e8
オニキスマトリックス	#0e0e10	#1c1c21	#00ff9f	#00e0ff	#ff0080	#f0f0f0

---

ライトカラースキーム

パレット	背景	サーフェス	プライマリ	セカンダリ	アクセント	テキスト
クラウドキャンバス	#fafafa	#ffffff	#2563eb	#7c3aed	#dc2626	#0f172a
パールミニマル	#f8f9fa	#ffffff	#0066cc	#6610f2	#ff6b35	#212529
アイボリースタジオ	#f5f5f4	#fafaf9	#0891b2	#06b6d4	#f59e0b	#1c1917
リネンソフト	#fef7f0	#fffbf5	#d97706	#ea580c	#0284c7	#292524
ポーセリンクリーン	#f9fafb	#ffffff	#4f46e5	#8b5cf6	#ec4899	#111827
クリームエレガンス	#fefce8	#fefce8	#65a30d	#84cc16	#f97316	#365314
アークティックブリーズ	#f0f9ff	#f8fafc	#0284c7	#0ea5e9	#f43f5e	#0c4a6e
アラバスターピュア	#fcfcfc	#ffffff	#1d4ed8	#2563eb	#dc2626	#1e293b
サンドウォーム	#faf8f5	#ffffff	#b45309	#d97706	#059669	#451a03
フロストブライト	#f1f5f9	#f8fafc	#0f766e	#14b8a6	#e11d48	#0f172a

---