デザインの配色（カラースキーム）をAIと相談してみた

こんにちは、Vitalify AsiaのNihei です。普段は、PMやAI Specialistとして、生成AIなど、AIを使った案件のお手伝いをさせていただいています。

今日は、アプリで使用する色を決めるときに、AIと相談しながらできないかな、と思い、検証してみました。

まずAIにこのように質問をしました

おすすめのアプリの色の構成と割合を考えてHTMLで出力ください。
医療をDXするようなアプリ！

(gpt-o1 model)

そうすると、このようなHTMLが出てきました

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>医療系アプリの配色例</title>
  <style>
    /* ベースとなるフォントや全体の余白設定 */
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background-color: #FAFAFA; /* 薄いグレー系ベース */
      color: #333333; /* 主要テキスト用のダークグレー */
    }

    /* メインカラー（ティール系）を適用したヘッダー */
    header {
      background-color: #009688; /* ティール系の例 */
      color: #FFFFFF; 
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
      font-size: 1.5rem;
    }

    /* コンテンツ部分のスタイル */
    main {
      padding: 20px;
    }

    section {
      background-color: #FFFFFF; /* 清潔感を保つ白背景 */
      margin-bottom: 20px;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影で区切りをわかりやすく */
    }

    /* 見出しスタイル */
    h2 {
      margin-top: 0;
      color: #333333;
    }

    /* ボタン例 - アクセントカラー（オレンジ系） */
    .cta-button {
      display: inline-block;
      background-color: #FFA000;  /* アクセントカラー例：やや落ち着いたオレンジ */
      color: #FFFFFF;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      margin-top: 10px;
      font-weight: bold;
      transition: background-color 0.2s;
    }
    .cta-button:hover {
      background-color: #FFCA28;  /* ホバー時に少し明るいトーンに変化 */
    }

    /* アクセントテキスト例（明るいイエロー） */
    .accent-text {
      color: #FFCA28;  /* 明るいイエロー */
      font-weight: bold;
    }

    /* 色の使用割合を視覚的に示すためのサンプルバー */
    .color-ratio {
      display: flex;
      margin-top: 20px;
      height: 30px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    /* 例として、ベース(60%) + メイン(25%) + アクセント(10%) + 残り(5%) を仮設定 */
    .base-color   { flex: 0 0 60%; background-color: #FAFAFA; }
    .main-color   { flex: 0 0 25%; background-color: #009688; }
    .accent-color { flex: 0 0 10%; background-color: #FFA000; }
    .mono-color   { flex: 0 0 5%;  background-color: #333333; }

    /* 参考にするための短い説明文 */
    .ratio-label {
      text-align: center;
      font-size: 0.85rem;
      padding: 4px 0;
    }
  </style>
</head>
<body>

  <!-- ヘッダー（メインカラー） -->
  <header>
    <h1>医療系アプリの配色例</h1>
    <p>ティール系で信頼感・安心感を演出</p>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <!-- セクション1：ベースカラー＆テキスト -->
    <section>
      <h2>ベースカラー & テキスト</h2>
      <p>
        このセクションの背景はホワイト(#FFFFFF)を使用し、清潔感と読みやすさを重視しています。<br>
        テキストはダークグレー(#333333)でコントラストを確保しつつ、真っ黒より目に優しくしています。
      </p>
      <a href="#" class="cta-button">CTAボタン（アクセントカラー）</a>
    </section>

    <!-- セクション2：アクセントカラー例 -->
    <section>
      <h2>アクセントカラー例</h2>
      <p>通知や注意書き、重要なボタンなどはアクセントカラー(#FFA000 / #FFCA28)で強調します。</p>
      <p>
        <span style="color: #FFA000; font-weight: bold;">このテキストはオレンジ系(#FFA000)で、</span>  
        <span class="accent-text">こちらは明るいイエロー系(#FFCA28)です。</span>
      </p>
    </section>

    <!-- 色の使用割合（サンプルバー） -->
    <div class="color-ratio">
      <div class="base-color"></div>
      <div class="main-color"></div>
      <div class="accent-color"></div>
      <div class="mono-color"></div>
    </div>
    <div class="ratio-label">
      ベース(60%) - メイン(25%) - アクセント(10%) - モノトーン(5%) のイメージ
    </div>
  </main>

</body>
</html>

これをGoogle Chrome上で開くとこうなりました。

なんと、雑にしか依頼していないのに、ここまでやってくれるんですね。

ベースカラー & テキスト

このセクションの背景はホワイト(#FFFFFF)を使用し、清潔感と読みやすさを重視しています。
テキストはダークグレー(#333333)でコントラストを確保しつつ、真っ黒より目に優しくしています。

アクセントカラー例

通知や注意書き、重要なボタンなどはアクセントカラー(#FFA000 / #FFCA28)で強調します。

このテキストはオレンジ系(#FFA000)で、 こちらは明るいイエロー系(#FFCA28)です。

ベース(60%) - メイン(25%) - アクセント(10%) - モノトーン(5%) のイメージ

これは…… かなり使えそうですね！正直驚きました笑

他のパターンでも試してみました

かなりいい感じですが、少し単調ですね。。。飽きてきたので、ChatGPTのモデルをo3-mini-highに変更し、追加の要求をしました

なんか単調ですね、HTMLも工夫をしていろいろ見せてください

(gpt o3-mini-high)

このようにヘッダーメニューとヒーローセクションをつけてくれました

かなり曖昧ですが、もう少し要望を伝えてみました

もっとグリッドにしたりさ、そういう感じのオシャレな感じにしたい

以下のような返事とHTMLを教えてくれました

ポイント

ヘッダー・ナビゲーション
グラデーション背景とシンプルなナビゲーションバーで、全体の印象を引き締めています。
ヒーローセクション
背景画像にオーバーレイをかけ、タイトルとキャッチコピーを強調。ワインの世界観を演出します。
グリッドレイアウト
CSS Grid を利用して、ワインカードを美しく並べています。各カードはホバー時に軽く浮き上がるアニメーションを追加して、視覚的な楽しさをプラス。
配色割合バー
ページ下部に、全体の配色割合（背景60%・メイン25%・アクセント10%・テキスト5%）を視覚的に確認できるバーを配置しています。

このHTMLサンプルを元に、さらに細部をカスタマイズしてオシャレなワイン管理アプリのUIを構築してみてください。

そこそこ及第点ではないでしょうか

まとめ

生成AIは、HTMLの生成や、配色の提案をすることが可能なため、例えばデザイナーを支援するツールや、開発会社がお客さんとの商談中にリアルタイムで、「こんな感じですか？」と見せてみて瞬時に実際のイメージを持ってもらう、といった使い方ができそうですね

今回は、かなり曖昧な指示でしたが、さらに詳しいペルソナや利用シーンを指示したり、複数の配色パターンを生成するように指示することで、瞬時に様々なパターンを生成できるため、実際にデザイナーに手を動かしてもらってから、「やっぱりイメージと違う」ということを減らせるような工夫につながるかと思い、この使い方は役に立つかと思いました。

ぜひご参考になりましたら幸いです。

もし「うちでも使ってみたい！」「どうやってカスタマイズできるの？」など、気になることがありましたら、お気軽にお問い合わせください。みなさんのお仕事に、少しでもお役に立てれば嬉しいです。

デザインの配色（カラースキーム）をAIと相談してみた

まとめ

「Generative AI & ML」の関連記事

AI Economist: Reinforcement Learning in Economics

Applying Self Pre-Training Method to GNN for Quantum Chemistry

Transformer with OCR: From Molecule to Manga