ダークモード対応デザインを指示する方法

「ダークモード対応で」だけでは足りない

Claude Designに「ダークモード対応で」とだけ指示すると、背景が黒くなるだけの残念な結果が返ってくることが多い。NANAKAZOKUでも最初はこのパターンで何度も失敗した。

問題の本質は、Claude Designがデフォルトでライトモードを前提に配色を最適化していること。「ダークモードでも」という言葉を付け加えるだけだと、両モードのコントラスト比を犠牲にした中間的な配色が出てきやすい。ブランドカラーが完全に死んだ、全グレーのUIが生成されて茫然としたことが何度かある。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

実際に踏んだ失敗パターン3選

正直に書く。

罠1: 全部グレーになる
「ダークモード対応」と指示すると、ブランドカラーが消えてグレーグラデーションで統一されることがある。確かにダークモードっぽいが、それで良かったのかという話になる。

罠2: テキストのコントラストが死ぬ
背景を #1a1a1a にしたのに、テキストが #666666 で生成されて、ほとんど読めない状態になったことがある。明示的に指示しないとアクセシビリティを考慮してくれないケースが多い。

罠3: ライトモードの仕様が消える
「ダークモードで作って」と言うと、ライトモード版の定義が出力から消える。両方必要な場合は「2パターン別々に出力して」と言わないと、片方しか返ってこない。

効いたプロンプトパターン

これが今のところ一番安定している書き方：

以下の仕様でダークモード用UIデザインを作成してください。

背景: #0f172a（slate-950相当）
カード背景: #1e293b（slate-800）
プライマリテキスト: #f8fafc（コントラスト比 4.5:1以上を維持）
セカンダリテキスト: #94a3b8
アクセントカラー: #6366f1（indigo-500）

WCAG AAレベルのコントラスト比を必ず守ること。
テキストが背景に埋もれていないか確認してから出力すること。

カラーコードを直接渡すのがポイント。「ダーク系で」という曖昧な指示より圧倒的に意図通りになる。コントラスト比の要件まで書くと、アクセシビリティを考慮した選択を返してくれる確率が上がった。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

ライト・ダーク両対応を一度に頼む方法

コンポーネントやCSSとして両対応が必要な場合は、こう頼んでいる：

ライトモードとダークモード両対応のデザイントークンを定義してください。

ライトモード:
- 背景: #ffffff
- テキスト: #0f172a
- ボーダー: #e2e8f0

ダークモード:
- 背景: #0f172a
- テキスト: #f8fafc
- ボーダー: #334155

CSS custom properties（変数）形式で出力し、
prefers-color-scheme メディアクエリで切り替えるコードも添えること。

この形式で頼むと、そのままNext.jsやTailwindのテーマ設定に流用できるアウトプットが返ってくる。コピペして動いたときの達成感は地味に高い。

日本語テキストは別途フォントウェイトを指定する

ダークモードで特に詰まったのが日本語テキストの視認性問題。暗背景に細い日本語フォント（font-weight: 300や400）を乗せると、Retinaディスプレイ以外でほぼ読めなくなることがある。

プロンプトに 日本語テキストはfont-weight: 500以上で指定すること の一文を追加するだけでかなり改善した。日本語フォントのレンダリング問題全般については日本語フォントが崩れる対処法も参照してほしい。

まとめ

ダークモード設計の失敗の8割は「なんとなくダーク系に」という曖昧な指示が原因だった。具体的なカラーコードとコントラスト比の要件を書くだけで、生成品質が別物になる。最初の1回だけ丁寧に書けば、それをテンプレートとして使い回せるので、一度ちゃんと作っておく価値はある。