Vibe codingでの配色テクニック＋見本帳

こんにちは。DXソリューション営業本部の吾妻です。



最近注目を集めているVibe coding（バイブコーディング）では、自然言語でAIに指示を出し、直感的にアプリケーションを構築していくことから、エンジニアの開発体験を劇的に変化させつつあります。

しかし、実際にVibe codingを試してみると、デザイン、特に「配色」が思い通りにならないことが多いように思います。「モダンな雰囲気で」「信頼感のある青色で」といった抽象的な指示では、AIの学習データに依存した、どこか既視感のあるデザインや、ブランドイメージと乖離した配色が出力されがちです。

そこでこの記事では、Vibe codingのスピード感を損なわずに、雰囲気（Vibe）を正確に伝えるためのテクニックについてご紹介します。

なぜ、AIへの色指定は難しいのか

相手が人間のコミュニケーションであっても、色のイメージを言葉だけで共有するのは難しく、AI相手であればより一層難しいといえます。これには主に2つの要因があります。

言語の解像度が低い

人間やAIに対して「明るい赤」と伝えたとき、それがパステル調の赤なのか、ビビッドな朱色なのか、蛍光色に近い赤なのか、言葉だけで厳密に定義するのは非常に困難です。人間は経験則から、AIは確率的に、最もそれらしい色を選定しますが、それが話し手の頭の中にある色と一致する保証はありません。

コンテキストの欠如

共通認識（コンテキスト）がない初期状態のAIは、自社のブランドカラーや、デザインガイドラインに関する知識を持っていません。そのため、一般論としての「良い配色」は提案できても、「自社向けに特化した配色」「プロダクトに適切な配色」を導き出すことはできません。

このため、Vibe codingにおいては、構造や機能は「雰囲気」で指示し、色は「仕様」として厳密に渡すというハイブリッドなアプローチが有効です。

記述する際のテクニック

テクニック①：具体的なカラーコード・変数で縛る

最も基本となるのが、自然言語での曖昧な指定を避けて、16進カラーコードのような具体的な値を指定するテクニックです。

16進カラーコードで表現できる色の数は 約1,677万色（256 × 256 × 256） もあって選ぶのに悩んでしまうと思うので、以下の基本ルールを覚えて大まかに見当をつけるようにすると、思い通りの色を見つけやすくなるかと思います。

・暖色 → 明るい・やさしい・活動的
・寒色 → 静か・落ち着く・知的
・彩度低め（くすみ） → 大人っぽい・控えめ
・彩度高め → 元気・ポップ
・暗めの色 → 重厚感・高級


また、はじめから色数がある程度絞り込まれている、BootstrapやTailwind CSSのカラーパレットを参考にしてみるのも手だと思います。

テクニック②：参考画像を渡す

「具体的なカラーコードは決まっていないが、イメージに近いサイトや画像がある」という場合は、AIのマルチモーダル機能（画像認識）を活用します。

既存の自社アプリのURLを提示するか、スクリーンショットなどの画像ファイルを添付して、以下のようなプロンプトを入力します。

このように指示することで、単色だけでなく、色の組み合わせやコントラスト比、余白の構成といった「非言語的な情報」を一括で指示できるので、雰囲気を伝えるのに適しているといえます。

テクニック③：最小限の色のみを指定する

AIが生成する配色デザインの揺らぎを抑えるために、あえてAIへの指示に含める色数を絞り込むことも考えられます。

また、一般に、画面内の色が多すぎると、「どこを見ればいいか」「どれが重要か」を直感的に捉えにくくなります。メインカラー（ブランドカラー）、アクセントカラー（メインカラーの補色など）、ニュートラル（背景・余白）の3色に絞ることで、統一感を生むと同時に、自然と情報の優先順位が明確になります。比率はニュートラル（約70%）：メイン（約25%）：アクセント（約5%）もしくは、多少増減させても大丈夫です。

テクニック④：色の質感を指定する

色そのものだけではなく色の質感、シチュエーション、具体的なメタファーを伝えるのもテクニックの1つです。16進カラーコードで一意に定義した色でも、質感やシチュエーションが変わるだけで雰囲気が大きく変わります。

Vibe coding での配色見本帳
プロンプトにそのままコピーして使える具体的な指示例と、それらをもとに生成されるUIの仕上がりイメージを多数掲載した配色見本帳です。「サイバーパンク」から「ノスタルジック」まで、質感やメタファーを変えることでAIがどのようにアウトプットを変化させるか、サンプルをご確認ください。
 

まとめ

今回は、Vibe codingのスピード感を損なわずに、雰囲気（Vibe）を正確に伝えるためのテクニックについてご紹介しました。

Vibe codingとは、決して「AIに適当に任せる」ことではありません。むしろ、「人間の意図（Intent）を、いかに素早く正確にAIに翻訳させるか」というスキルが問われる手法といえます。

特に配色は、アプリケーションの印象を決定づける重要な要素です。 曖昧な言葉での指示から脱却し、「カラーコードの明示」「画像によるイメージ共有」を組み合わせることで、手戻りを減らし、爆速で高品質なUI開発を実現できるはずです。

QESでは、このような最新のAI開発ツール活用から、Azureを中心とした堅牢なエンタープライズシステムの構築まで幅広く支援しています。「PoC（概念実証）を素早く行いたい」「クラウドネイティブな開発を始めたい」というご希望があれば、ぜひお問い合わせください。