デザインをするとき、私は無意識に「自分の好きな色」を選んでいた。青系が好きで、アクセントカラーにオレンジを入れるのが定番パターンだった。それが「正解」だと思っていたわけではなく、ただ「慣れていた」だけだった。
Google Stitch にプロンプトを入れて、最初にカラーパレットが生成されたとき、見たことのない色の組み合わせが出てきた。テール（深みのある青緑）とクリーム色と深いチャコールグレーの組み合わせ。「こういう色もありか」と思いながら、いつもの青とオレンジのパターンと並べてみた。どちらが洗練されているかは、一目では判断できなかった。
その体験が、長いこと使ってきた「自分の配色パターン」を見直すきっかけになった。
結論から言うと
一言で言えば、Google Stitch の配色生成機能は、「自分の癖から外れた選択肢を提示する」という点で、デザイナーにとって意外な価値を持つ。意図的に新しい配色を探したいときに、Stitch は「知っているけど使っていなかった色」の組み合わせを見せてくれる存在になる。
ただし、Stitch が生成する配色が「正解」というわけではない。ブランドのガイドライン・ターゲットの好み・業界のコンテキストと照らし合わせながら判断する必要がある。Stitch は選択肢を出してくれるが、選ぶのはあくまで人間だ。
Stitch の配色生成の仕組み
Google Stitch は、プロンプトに含まれる「ブランドの雰囲気」や「ターゲット」の記述をもとに、プライマリカラー・セカンダリカラー・ニュートラルカラー・アクセントカラーを自動で選定する。
例えば「女性向けウェルネスアプリ、温かみがある、信頼感がある、穏やかな雰囲気」というプロンプトを入れると、Stitch はその方向性に合ったカラーパレットを生成する。16進数カラーコードも含めて出力されるため、DESIGN.mdやFigmaに転記して使いやすい形になっている（Google Labs 公式情報、2026年3月）。
自動生成される色の種類
Stitch が自動生成するカラーパレットには、通常以下の種類が含まれる。プライマリカラー（メインの操作色・ブランドカラー）、セカンダリカラー（補助的な強調色）、テシャリーカラー（3番目のアクセント）、ニュートラルカラー（背景・テキスト・境界線用のグレー系）、セマンティックカラー（エラー・成功・警告の意味を持つ色）だ。
これら5種類が1セットとして提案されるため、ゼロからカラーパレットを組み立てるより格段に速く、整合性の取れた配色案が手に入る。
「雰囲気語」から色を生成する精度
実際に使ってみて分かったのは、「具体的な色名を指定する」より「雰囲気を描写する」方が、Stitch の配色生成が面白い結果を出しやすいということだ。
「青を使ってください」と指定すると、普通の青系の配色が出る。一方「海辺の朝の静けさ、潮の匂い、穏やかな光」と描写すると、見たことのない青緑と砂色と白の組み合わせが出てきた。詩的なプロンプトが予想外の配色を引き出すことがある。
自分の配色の「癖」に気づいた体験
Stitch を使い始めて数ヶ月経った頃、自分の過去の作品を見返す機会があった。気づいたのは、配色のパターンが驚くほど似ていることだった。プロジェクトが違っても、なんとなく同じトーンの青が使われていた。アクセントカラーも、気づけばいつも暖色系だった。
Stitch を使うようになってから、その「癖」が崩れ始めた。AIが提案する配色の中に、自分では選ばなかった色が入ってくる。それを採用するかどうかは別として、「この色の組み合わせもあり得るのか」という気づきを繰り返すうちに、配色の引き出しが増えた感覚がある。
同じプロジェクトで10通りの配色を試す実験
試しに、同一のLPデザインに対して10通りの異なる「雰囲気語」でStitchに配色を生成させた実験をした。
「信頼感があり洗練された」「遊び心があり親しみやすい」「高級感があり落ち着いた」「エネルギッシュで前向き」「自然派でオーガニック」「テクノロジー感があってクリーン」「フェミニンで優しい」「ミニマルでモノクローム」「大胆でコントラスト強め」「懐かしくてレトロな」——10パターン。
結果は面白かった。10通りのカラーパレットが出揃ったとき、自分が「使いたい」と感じたのは3番目の「高級感があり落ち着いた」だった。一方でクライアントに見せると「1番目の信頼感系がいい」という反応が多かった。この「自分の好みとクライアントの好み」のギャップを可視化できたことが、予想外に役立った。
配色を固定するための DESIGN.md 活用
Stitch で配色の方向性が決まったら、それをDESIGN.mdに定義することで以降の生成に一貫して適用できる。配色を「探す段階」から「適用する段階」に移行するための重要なステップだ。
DESIGN.md への配色の書き方
DESIGN.mdへの配色定義例を示す。プライマリカラー：ブランドの主色。ボタン・リンク・重要な操作要素に使用。16進数で定義する。セカンダリカラー：補助的な強調色。ホバー状態やサブアクションに使用。背景色：ページ背景および大きなエリアの背景。テキスト色：本文テキスト。十分なコントラスト比（WCAG 2.1 AA基準：4.5:1以上）を確保する。エラー色：エラーメッセージ・バリデーション失敗の表示。成功色：完了・確認・成功の表示。
このように定義したDESIGN.mdをStitchにインポートすると、以降の生成でブレのない配色が維持される。
よくある質問（FAQ）
Q1. Stitch が生成した配色を商用利用してもいいですか？
色自体には著作権が生じないため、Stitch が生成したカラーコードをそのまま商用プロジェクトで使用することは問題ありません。ただし、生成された配色が既存ブランドのカラーパレットと酷似している可能性があるため、主要競合ブランドの配色と比較確認することを推奨します。
Q2. Stitch の配色をアクセシビリティ基準に合わせるにはどうすればいいですか？
Stitch が生成した配色を、WebAIMのコントラストチェッカー（https://webaim.org/resources/contrastchecker/）などのツールで確認してください。WCAG 2.1 AA基準では、本文テキストと背景のコントラスト比が4.5:1以上必要です。基準を満たさない場合はプロンプトに「コントラスト比4.5:1以上を確保した配色で」と明示して再生成してください。
Q3. 既存ブランドのカラーコードをStitchに反映させるにはどうしますか？
DESIGN.mdにカラーコードを定義する方法が最も確実です。「プライマリカラー：#XXXX（ブランドカラー）、このカラーを基準にセカンダリ・ニュートラルを展開してください」とプロンプトで指定する方法も有効です。既存ブランドの色を起点に、Stitchが調和するパレットを自動補完してくれます。
Q4. ダークモードとライトモードで一貫した配色を保つにはどうしますか？
DESIGN.mdにライトモード用とダークモード用の両方のカラーセットを定義することを推奨します。「ライトモード背景：#FFFFFF、ダークモード背景：#1A1A2E」のように対応関係を明示することで、Stitchが両モードで整合性の取れた配色を生成しやすくなります。
Q5. 業界・ターゲット別の配色傾向はありますか？
一般的な傾向として、金融・医療・法律などの信頼性重視業界では青・ネイビー・グリーン系が多く使われます。エンターテインメント・スポーツ・食品では赤・オレンジ・イエローなど暖色系が多い傾向があります。Stitch にターゲット業界と目標の感情（信頼・活力・癒し等）を明示すると、業界に馴染みつつも差別化できる配色案が出やすくなります。
注意点・失敗しやすいポイント
1. 生成された配色をそのまま使わない
Stitch の配色はあくまで「提案」だ。ブランドガイドライン・業界の慣習・ターゲットの文化的背景などと照らし合わせて、必ず人間が判断する必要がある。「AIが生成したから大丈夫」という発想は危険だ。
2. 毎回違う配色を使ってブランドの一貫性を壊さない
Stitch を使う都度に新しい配色が生成されるため、プロジェクト内でばらばらな色が混在するリスクがある。プロジェクト開始時に配色を確定してDESIGN.mdに固定し、以降は変更しないという運用ルールを決めること。
3. 類似色の組み合わせでコントラストが弱くならないか確認する
AIが生成する配色は視覚的に美しくまとまりやすい反面、類似色を多く使うために情報の優先度が読み取りにくくなることがある。重要なCTAや見出しが背景に溶け込んでいないか、必ずコントラスト確認ツールでチェックすること。
まとめ：配色との向き合い方が変わった
Google Stitch に配色を任せてみて気づいたのは、「自分の選択が習慣になっていた」ということだ。悪い習慣ではないけれど、意識的に選んでいたわけでもなかった。
Stitch が出してくる配色は、毎回新鮮さがある。その新鮮さに触れることで、「この色の組み合わせもあり得るんだ」という発見が積み重なる。採用するかどうかに関係なく、その気づきはデザインの視野を広げる。
配色の「探索」にStitchを使い、「決定」には自分の判断を使う。その使い分けが、今の私の配色設計のやり方になっている。
