ダークモードのUIを作ろうとしたとき、思ったより苦労した。
「ダークモードで」とプロンプトに書けば、それっぽいものが出てくると思っていた。確かに出てくる。でも「使えるレベルのダークモードUI」を安定して生成するまでには、思っていたより試行錯誤が必要だった。
この記事は、その試行錯誤の記録だ。何がうまくいかなかったか、どう対処したか、最終的に落ち着いた方法を正直に書く。
一言で言えば、ダークモード生成で詰まる原因のほとんどは「色の指定が曖昧」なことにある。「ダークモードで」という一言では足りない。背景・カード・テキスト・ボーダーのHEXコードを具体的に指定することが、安定したダークモードUIを生成するための近道だ。
最初に遭遇した問題
ダークモードのダッシュボードUIを作ろうとして、最初のプロンプトに「ダークモード」と書いた。
出てきたのは、確かにダークな画面だった。背景が暗くなっていた。でも見た目が「重い」「暗すぎる」「テキストが読みにくい」という問題があった。
何度か再生成してみたが、毎回微妙に違う「暗い色」が出てきた。「ダークモード」という指定だけでは、Google Stitch が毎回違うダーク系の色を選ぶため、同じプロンプトでも一貫したデザインが出てこないことが分かった。
なぜ「ダークモードで」だけでは足りないのか
考えてみると当然だった。「ダークモード」という言葉が示す色の範囲は広い。真っ黒（#000000）から濃いグレー（#1E1E1E）まで、「暗い」色は無数にある。どのトーンの暗さにするか、背景とカードの明度差をどう設定するか——これを指定しないと、AIが毎回異なる解釈で生成してしまう。
試行錯誤の過程
最初の失敗から、どう解決していったかを時系列で書く。
試み1：有名サービスのダークモードを参考にする
「GitHub のダークモードのような配色で」「Visual Studio Code のダークテーマのような色調で」という指定を試した。
結果は「そこそこそれっぽい」レベルだった。有名サービスのダークモードの雰囲気は出るが、完全に一致するわけではない。参考にはなるが、精度が低い。
試み2：「ダーク」の形容詞を詳しくする
「深みのあるダークモード」「モダンなダークUI、チャコールグレー基調」のような形容詞を追加した。
少し改善されたが、まだ「毎回違う」という問題は解消されなかった。形容詞は方向性を示すが、正確な色を指定する力がない。
試み3：HEXコードで全色を指定する
これが解決策だった。
「ダークモード配色：背景#0F172A、カード背景#1E293B、サイドナビ背景#1E293B、テキスト（プライマリ）#F1F5F9、テキスト（セカンダリ）#94A3B8、ボーダー#334155、プライマリボタン#3B82F6、ホバー時#2563EB。」
この指定をプロンプトに含めると、毎回ほぼ同じトーンのダークモードUIが生成されるようになった。色が明示されているため、AIが解釈で迷う余地がなくなる。
実際に私がこの方法に落ち着いたのは、4〜5回の失敗試行を経てからだった。最初からHEXコードを用意すれば良かったと思うが、「曖昧な指定でもなんとかなるだろう」という甘さが無駄な時間を生んだ。
ダークモード生成でよく起きる問題と対処法
問題1：コントラストが低すぎてテキストが読めない
ダークモードで特に起きやすい問題が「テキストが背景に溶け込んでいて読みにくい」というものだ。
原因はプレースホルダーテキストや補助テキストが薄いグレーで生成されることが多く、ダーク背景との差が小さくなるためだ。
対処法：プロンプトに「テキストのコントラスト比をWCAG AA基準（4.5:1）以上に設定する」と明示する。また、生成後にブラウザの開発者ツールを使って実際のコントラスト比を確認する。
問題2：アクセントカラーがダーク背景で浮きすぎる
ライトモード用に設定したアクセントカラー（例：明るいブルー）をそのままダークモードに使うと、背景とのコントラストが強すぎて「目が痛い」ような印象になることがある。
対処法：ダークモード用のアクセントカラーは、ライトモードより少し落ち着いた（彩度を下げた）バージョンを用意する。例えばライトモードが#3B82F6（明るいブルー）なら、ダークモードは#60A5FA（少し明るめのブルー）にするなど。
問題3：ページ内の要素が「平坦」に見える
ダークモードでは背景・カード・モーダルなどの要素の「層の違い」が分かりにくくなる。ライトモードでは「白の背景に白いカード」という組み合わせは使わないが、ダークモードでも「黒い背景に黒いカード」になってしまうと要素の区別がつかない。
対処法：背景色・カード色・その上のモーダル色を、明度を少しずつ変えて設定する。例えば「背景:#0F172A」→「カード:#1E293B」→「モーダル:#334155」のように、明度を段階的に上げることで「層の奥行き」を表現できる。
問題4：アイコン・画像がダーク背景で見えにくい
ライトモード用に作られたアイコン（黒いアイコン）をダークモードに使うと、ダーク背景で見えなくなることがある。
対処法：プロンプトに「アイコンはホワイト（#FFFFFF）またはライトグレー（#CBD5E1）を使用」と明示する。Google Stitch が生成するアイコンは指定した色で出やすくなる。
安定したダークモードUIを作るためのプロンプトテンプレート
試行錯誤を経て作ったダークモード用プロンプトテンプレートを共有する。
「【ダークモード配色設定】ページ背景:#0F172A / カード・パネル背景:#1E293B / サイドナビ背景:#1E293B / ボーダー・区切り線:#334155 / プライマリテキスト:#F1F5F9 / セカンダリテキスト:#94A3B8 / プレースホルダー:#64748B / アクセントカラー（ボタン・リンク）:#60A5FA / 成功色:#4ADE80 / エラー色:#F87171 / アイコン色:#CBD5E1 / シャドウ:subtle（暗背景のためほぼ不要）。WCAG AA コントラスト基準を満たすこと。」
このテンプレートをベースに、各ページ固有の要件を追加することで、統一感のあるダークモードUIが安定して生成できるようになった。
よくある質問（FAQ）
Q1. ライトモードとダークモードの両方を作るのに、それぞれ別のプロンプトが必要ですか？
はい、基本的に別のプロンプトが必要です。色の指定が全く異なるため、一つのプロンプトで両方を生成することは難しいです。ライトモード用とダークモード用のスタイルテンプレートをそれぞれ用意して、ページの構造指定は共通、色指定だけ切り替えるという方法が効率的です。
Q2. ダークモードとライトモードで同じレイアウトのUIを作るには？
まずライトモードでUIを生成して確定させます。その後、「このレイアウトをそのままダークモードに変換してください。色のみ変更（【ダークモード配色設定】）。」というプロンプトで生成すると、レイアウトを維持しつつ色だけ変わったUIが出やすくなります。ただし毎回完全に同一になるとは限らないため、微調整が必要な場合があります。
Q3. ダークモードのUIをFigmaで調整する際の注意点はありますか？
FigmaにインポートしたダークモードUIは、エディタの白い背景の中に表示されるため、色の見え方が実際のダーク背景でどう見えるかと異なる場合があります。Figmaの「Presentation」モードやプロトタイプビューで確認するか、ブラウザで直接確認することをおすすめします。
Q4. ダークモードで特に難しいUIの種類はありますか？
グラフ・チャート類が最も難しいです。データの色がダーク背景で見えやすいかどうかの確認が必要で、プロンプトだけでは全ての色の視認性を担保するのが難しいです。グラフのデータ色については生成後に手動で確認・調整することをおすすめします。
Q5. ダークモードのブランドカラーの決め方に迷っています。アドバイスをください。
基本的な考え方は「ライトモードの色を暗背景に合うよう調整する」です。具体的には①背景は純黒（#000000）を避け、深めのネイビーやチャコールグレーを選ぶ、②テキストは純白（#FFFFFF）を避け、オフホワイトやライトグレーにすると目が疲れにくい、③アクセントカラーは彩度をやや抑えてダーク背景で主張しすぎない色にする、の3点を意識すると扱いやすいダークモードになります。
Q6. ダークモード生成では何回くらい試行が必要ですか？
HEXコードを事前に用意していれば、2〜3回の試行で使えるレベルのものが出てきます。指定なしで「なんとなくダークモードで」という方法では、5〜10回以上試行してもなかなか安定しないことがあります。最初の準備（色の設定）に5〜10分かけることで、後の試行回数を大幅に減らせます。
Q7. ダークモードUIのアクセシビリティ確認ツールはありますか？
はい、いくつかあります。ブラウザの開発者ツール（Chrome）のアクセシビリティ検査、WebAIM Contrast Checker（コントラスト比を確認できるWebツール）、Figmaのプラグイン（Stark、Contrast など）が代表的です。HEXコードが決まったら事前にコントラスト比を確認してからプロンプトに含める方法も有効です。
Q8. ダークモードとライトモードを切り替えるUIのデザインも生成できますか？
はい、「右上にダーク/ライトモード切り替えトグルボタンを配置」のように指定することで、切り替えUIを含んだデザインが生成できます。ただし実際の切り替え動作（CSSの切り替えロジック）は別途実装が必要です。
苦労した分だけ、使い方が分かった
ダークモード生成で苦労した経験から学んだのは、「AIへの指示は曖昧であるほど出力がブレる」という、当たり前のことだった。
「ダークモードで」という一言の曖昧さが、どれだけ大量の試行を生み出したか。逆に言えば、HEXコードを5〜6個用意するだけで、その試行がほぼなくなった。「準備に使う5分が、後の1時間の試行を防ぐ」というのが、ダークモード生成から得た一番の学びだ。
ダークモードUIを作る予定がある方は、まずダークモード用のカラーパレットを用意してからGoogle Stitch を開いてほしい。その順番が、作業時間を大きく左右する。
