design

デザイン — アンチ・スロップ UI/UX

デザインセンスを発揮しましょう。ありきたりな AI デザインは敵です。紫色のグラデーション、ストックフォトのヒーロー画像、何でも角丸、理由のないグラスモーフィズム。人間のデザイナーが手がけたように見えるインターフェースを作りましょう。

アンチ・スロップチェックリスト

デザインをリリースする前に、以下の項目が一つも当てはまらないことを確認してください。

AI スロップの兆候	対策
紫や青のグラデーション背景	ブランドカラー、または意図のあるニュートラルな色調を使います
「Welcome to [Product]」と書かれたありきたりなヒーロー	ユーザーの最初のアクション、または重要な指標を前面に出します
どこにでもあるドロップシャドウ付きの角丸カード	一つのエレベーションシステムを選び、一貫して使います
ストックイラスト風のスタイル（Humaaans、unDraw）	実際のスクリーンショットやデータを使うか、何も使いません
グラスモーフィズムやオーロラ効果	ブランドに必要な場合に限ります。それ以外は使いません
47種類ものフォントサイズ	1ページあたり最大4サイズにします。タイプスケールを使うか、使わないかです
虹のように多彩なアクセントカラー	プライマリーカラー1色、セカンダリーカラー1色、破壊的アクション用1色。それだけです
すべての機能に飾りのアイコン	アイコンは理解を助けるために使い、空白を埋めるために使いません
あちこちにある「Powered by AI」バッジ	ユーザーは仕組みではなく、きちんと動くことを重視します

デザイン原則

1. 装飾より明瞭さ。 すべての要素に、そのピクセルを使う価値が必要です。ユーザーの役に立たないなら、取り除きましょう。
2. 何よりも視覚的階層。 1画面につき、主要なアクションは一つ。最初に目が向かうものも一つです。
3. 必要な場所に適切な情報密度を。 ダッシュボードは情報を詰め込みます。オンボーディングには余白を持たせます。違いを理解しましょう。
4. 目新しさより一貫性。 パターンを再利用しましょう。UI では意外性はバグです。
5. 実際のデータに合わせてデザインする。 名前は3〜40文字です。テーブルには200行あります。空の状態も存在します。

色

Background:   neutral-50 or white (light) / neutral-900+ (dark)
Surface:      neutral-100 / neutral-800
Border:       neutral-200 / neutral-700
Text primary: neutral-900 / neutral-50
Text secondary: neutral-500 / neutral-400
Primary:      ONE saturated color from your brand
Destructive:  red-600
Success:      green-600
Warning:      amber-500

ルール：

• 色だけで状態を示さないでください。アクセシビリティのためにアイコンやテキストも追加します
• コントラスト比をテストします。テキストは最低4.5:1（WCAG AA）です
• ダークモードは「すべて反転する」ことではありません。意図的に設計した別のカラーパレットです

タイポグラフィ

役割	サイズ	ウェイト
ページタイトル	24-30px	600-700
セクション見出し	18-20px	600
本文	14-16px	400
キャプション／補助テキスト	12-13px	400

• UI には一つの書体を使います（Inter、system-ui、またはブランドフォント）
• 2つ目の書体を使うのは、使うとしてもマーケティングページだけです
• 行の高さ：本文は1.5、見出しは1.2

レイアウト

• 最大コンテンツ幅： アプリは1280px、テキスト中心のページは720px
• スペーシングスケール： 4pxを基準とします（4、8、12、16、24、32、48、64）
• グリッド： ダッシュボードは12カラム、フォームは1カラム
• モバイルファースト： まず制約のある画面向けにデザインし、その後に拡張します

コンポーネントのパターン

すべてのコンポーネントに必要な状態：

1. デフォルト状態 — 通常の表示
2. ホバー／フォーカス — インタラクションへのフィードバック
3. 読み込み中 — スケルトンまたはスピナー
4. 空の状態 — 役立つメッセージとアクション
5. エラー — 問題の内容と解決方法
6. 無効状態 — 視覚的に薄く表示し、カーソルを not-allowed にする

ナビゲーション

• 項目が5つ未満ならトップナビゲーション
• 項目が5つ以上、または階層が深い場合はサイドバー
• 両方を同時に使わないでください（一方を選びます）

フォーム

• ラベルは入力欄の上に配置します（プレースホルダーとして中に入れないでください）
• インライン検証はすべてのキー入力ごとではなく、フォーカスが外れたときに行います
• エラーメッセージはトーストではなく、該当するフィールドの横に表示します
• 主要なアクションは右側に配置します（モバイルでは全幅）

レビューチェックリスト

UI をレビューするときは、次の点を確認してください。

1. 目を細めて見るテスト — ぼやけた状態でも、重要なものが分かりますか？
2. 5秒テスト — 初めて使うユーザーが、5秒以内に主要なアクションを特定できますか？
3. 実データテスト — 長い名前、空の状態、500件の項目でも問題なく動作しますか？
4. アクセシビリティ — キーボードで操作できますか？ スクリーンリーダー用のラベルがありますか？ コントラスト比は適切ですか？
5. スロップチェック — ありきたりな AI テンプレート集に並んでいても違和感がありませんか？ そうなら、デザインし直してください。