本文へスキップ
ひとりAIラボ

Webデザイン・UIの頼み方

ダークモード

Dark mode

暗い背景に、明るい文字の配色。

同じ日記アプリを2つ並べています。良い例は墨色の背景に少し落とした白の文字、悪い例は真っ黒な背景に真っ白な文字で、白いままの枠と強い赤のボタンがまぶしく見えます
見本：同じ日記アプリを2つ並べています。良い例は墨色の背景に少し落とした白の文字、悪い例は真っ黒な背景に真っ白な文字で、白いままの枠と強い赤のボタンがまぶしく見えます。ひとりAIラボが作ったサンプル画面です。

使いどころ　夜に見る人が多いアプリで、まぶしさを抑えたいとき。

コピペ用プロンプト

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

日本語

ダークモードに対応してください。最初はOSの設定に合わせて、ヘッダーのボタンで切り替えられるように。暗いときも文字がはっきり読める色で。

English

Support dark mode. Follow the OS setting at first, and let people switch with a button in the header. Keep text easy to read in both themes.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

公式ガイドに載っているか

ダークモードが各社の公式プロンプトガイドに載っているか
ガイド記載
v0載っている[1]
Lovable載っている[2]

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

出典

  1. 1.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
  2. 2.Lovable Docs「Prompt library」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-library

今週の一歩

上のコピペ用プロンプトの日本語版をそのまま貼って、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、前と見くらべてください。

どのAIに頼むか（v0・Bolt などの無料版）は開発する人のAIの使い分け（UI試作）にまとめています。