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

Webデザイン・UIの頼み方

配色

Color palette

使う色を、何色かに決めておくこと。

同じ宿の案内画面を2つ並べています。良い例は紙・薄茶・墨・赤茶の4色だけで、悪い例は緑・黄・青緑・桃色などが混ざってまとまりがありません
見本：同じ宿の案内画面を2つ並べています。良い例は紙・薄茶・墨・赤茶の4色だけで、悪い例は緑・黄・青緑・桃色などが混ざってまとまりがありません。ひとりAIラボが作ったサンプル画面です。

使いどころ　AI任せで色がばらばらになるのを防ぎたいとき。

コピペ用プロンプト

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

日本語

配色は[ベースの色]・[文字の色]・[アクセントの色]の3色だけにしてください。アクセントの色は、ボタンと大事なリンクだけに使います。

English

Use a color palette of three colors only: [base], [text], and [accent]. Use the accent only for buttons and key links.

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

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

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

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

気をつけること

  • Lovable のガイドには、「カラフル」より「鮮やかで彩度の高い色（bold, saturated colors）」のように、具体的にはっきり書くほうが伝わる、とあります。[2]

出典

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

今週の一歩

上のコピペ用プロンプトの日本語版を写して、[ ] を自分の内容に書きかえ、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、前と見くらべてください。

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