design-anti-patterns

デザインのアンチパターン（Uncodixfy）

出典：Uncodixfy（2026-03-17 閲覧）

UI コードを書く前に、Uncodixfy のメタ認知チェックを適用してください。デフォルトで採用しそうな UI の判断をリストアップし、以下の禁止パターンに該当するものは採用しないでください。Linear、Raycast、Stripe、GitHub のような、機能的で誠実、見た目の演出に頼らないインターフェースを構築してください。

事前チェック

UI コンポーネントを生成する前に、次の内部チェックを実行してください。

1. このコンポーネントでデフォルトで採用しそうなスタイルの判断をすべてリストアップする
2. それぞれを、このスキルとルール全文のリファレンスにある禁止パターンと照合する
3. 該当するものをすべて、リファレンスに記載された「標準」に置き換える
4. 禁止パターンが一つも含まれていないことを確認する

絶対的な禁止事項

ユーザーが明示的に例外を指定しない限り、次のパターンは決して許容されません。

• いずれかの要素で、角丸の半径を 12px より大きくする
• ピル型のボタンやバッジ
• グラスモーフィズム、すりガラス状のパネル、ぼかしのかかった霞み
• ソフトな企業向けグラデーション（背景、ボタン、テキスト）
• ダッシュボードや社内ツール内のヒーローセクション
• 装飾的なコピー（「雑然とさせずに、運用を明確に」）
• アイブロウラベル（字間を広げた大文字の <small>）
• デフォルトのダッシュボードレイアウトとしての KPI カードグリッド
• 空間を埋めるためだけのフェイクチャート
• ホバー時の変形アニメーション（translateX、scale、bounce）
• 大げさなボックスシャドウ（ぼかしが 8px 超、色付きのシャドウ）
• 外枠が丸みを帯びた、浮遊して独立したサイドバー
• <h2> 見出しブロックの上にある <small> の小見出し
• <small> + <strong> のパターンを使った装飾的なノートカード
• あらゆる UI 要素における、ありきたりなスタートアップ風のコピー
• 曖昧な割合を示すドーナツチャート
• 複数のネストされたパネルタイプ（panel、panel-2、rail-panel）
• 色付きドットの ::before 擬似要素を使ったステータス表示
• 機能的な目的のない「Live」バッジや件数表示のナビゲーションバッジ
• フッターのメタ情報行（「ダッシュボード v2.1 - ダークモード - 単一ファイル HTML」）

標準

すべてのコンポーネントに、次のデフォルトを適用してください。

コンポーネント	標準
サイドバー	幅 240-260px で固定、単色の背景、シンプルな右ボーダー
ボタン	単色の塗りつぶしかシンプルなボーダー、角丸は最大 8-10px
カード	角丸 8-12px、控えめなボーダー、シャドウは最大 0 2px 8px rgba(0,0,0,0.1)
タイポグラフィ	システムフォントまたはシンプルなサンセリフ、本文は 14-16px、明確な階層
余白	4/8/12/16/24/32px のスケールのみ
トランジション	100-200ms ease、透明度や色の変更のみ
コンテナー	max-width 1200-1400px、中央揃え、標準的なパディング
ツールバー	高さ 48-56px を標準とし、シンプルな横並びレイアウト
入力欄	単色のボーダー、シンプルなフォーカスリング、フィールドの上にラベル
モーダル	中央揃えのオーバーレイ、シンプルな背景幕、スライドインアニメーションなし

色の選択

次の優先順位に従ってください。

1. プロジェクトで既に使われている色を使用する — 既存のパレット定義をプロジェクトのファイルから探す
2. 事前定義されたパレットから選ぶ — ルールリファレンスのカラーパレットを参照
3. ユーザーが明示的に求めない限り、ランダムな色の組み合わせを決して作らない

事前定義されたパレットから選ぶ場合は、ランダムに選択し、最初のパレットをデフォルトにしないでください。

クイックリファレンス

具体的に禁止されている実装パターン 30 種類以上、コンポーネントごとの「標準」、および事前定義された 19 種類のカラーパレット（ダーク 10 種類、ライト 9 種類）の全容については、Uncodixfy のルール全文をお読みください。