AI配色ツール！ChatGPTなどのAIプロンプトを利用して配色できる

@ハクト 2025-12-17 18:12:36に投稿

AI Palette Explorerとは

AI Palette Explorerは、AI連携型のカラーパレット生成＆プレビューツールです。AI技術を活用し、サイトイメージを入力するだけで、Hero Section、モバイルUI、管理画面など、実際のWebレイアウトで配色を確認できます。

AI Palette Explorer

基本情報

対応ブラウザ: Chrome、Edge、Safari、Firefox（最新版）
言語: 日本語・英語
動作環境: デスクトップブラウザ推奨（タブレットも対応）
データ保存: ブラウザのlocalStorage（最大20件）

主な機能7選

1. AIプロンプト自動生成機能

配色生成AIへの指示文を自動生成します。

機能の詳細:

入力項目	説明	入力例
サイトのイメージ	ターゲット・業界・雰囲気を自由記述	「優しく温かみのあるコーポレートサイト、20-40代向け」
パレット数	3〜50個から選択	初回は10個推奨

生成されるプロンプトの特徴:

JSON形式を厳密に指定（AIの出力ブレを防止）
色の順序を明確化（primary、secondary、accent...）
HEXコード形式を強制（#xxxxxx）
余計な説明文の出力を抑制

対応AIツール: プロンプトが入力できるほぼすべてのチャットAIに対応：

ChatGPT（GPT-3.5/GPT-4/GPT-4o）
Claude（Claude 3 Opus/Sonnet/Haiku）
Google Gemini（Gemini Pro/Ultra）
その他のチャットAI（Bing AI、Perplexityなど）

2. 4種類のリアルタイムプレビュー機能

配色を適用した瞬間、4つの実用的なレイアウトで同時にプレビュー表示されます。

① Hero Section（ヒーローセクション）

Webサイトのファーストビュー
CTA（Call To Action）ボタンの視認性確認
ナビゲーション、見出し、背景のバランスをチェック

② Color Palette Details（配色詳細）

ドーナツチャートで各色の使用率を可視化（Primary 15%、Background 40%等）
5色のHEXコード、役割、使用比率を一覧表示

③ Mobile Experience

3種類のスマホUI画面を同時プレビュー:

ECアプリ風: 商品カード、カテゴリチップ、タブバー
ブランドアプリ風: ロゴ、CTAボタン、ミニマルデザイン
設定画面風: フォーム入力、アイコン、テキストの可読性

④ Admin Dashboard UI（管理画面）

トップナビゲーション、サイドバー、統計カード
ボタン、フォーム、チェックボックス、アラート
ログインフォーム、引用ブロック

プレビューの利点:

コーディング不要で実装イメージを把握
クライアント提案時の説得力向上
デザインの手戻りを削減

3. 7色の役割別カラー管理

配色を以下の7つの役割で明確に分類し、一貫性のあるデザインを実現します。

色の役割	使用箇所	推奨使用率	具体例
Primary	メインカラー・ブランドカラー	15%	ロゴ、重要な見出し
Secondary	サブカラー・アクション	20%	CTAボタン、リンク
Accent	強調・ハイライト	10%	バッジ、通知、特別なボタン
Background	ページ全体の背景	40%	body要素、メイン背景
Surface	カード・パネルの背景	15%	カード、モーダル、ヘッダー
Text	本文テキスト	-	段落、ラベル
Muted	補助テキスト・無効化要素	-	キャプション、プレースホルダー

デザインシステムへの応用: これらの役割は、Material Design、Apple Human Interface Guidelinesなど、主要なデザインシステムの概念と互換性があり、そのままデザイントークンとして活用できます。

4. リアルタイムカラーエディター

生成された配色をピクセル単位で微調整できます。

編集機能:

カラーピッカーで直感的に色変更
変更は全プレビューに反映
7色すべて個別に調整可能
元の配色との比較も可能（プリセットに戻す機能）

活用例:

クライアントのコーポレートカラーに微調整
競合サイトとの差別化
アクセシビリティ対応（コントラスト比の調整）

5. 30種類のプリセットパレット

6カテゴリー×5パターン = 30種類の配色を搭載。

カテゴリー	特徴	適用シーン
Gentle / Soft	パステル調、優しい印象	美容・育児・ウェルネス
Modern / Corporate	洗練されたビジネス向け	コーポレート・SaaS・金融
Vivid / Pop	鮮やか・活気のある配色	EC・エンタメ・若者向け
Elegant / Luxury	上品・高級感	ブランド・ホテル・不動産
Nature / Earthy	自然・アースカラー	オーガニック・環境・旅行

ダークモード対応: Modern04、Elegant01、Elegant06はダークモード専用配色として設計されており、背景とテキストのコントラスト比が最適化されています。

プリセットの効果:

配色選択時間を 約60分→3分 に短縮
配色初心者でも失敗しない安心設計
プロジェクトのベースラインとして活用

6. 履歴管理＆比較機能

生成・編集した配色を自動保存し、複数案を効率的に比較検討できます。

履歴機能の詳細:

保存件数: 最大20件（古いものから削除）
保存情報: 生成日時、配色数、サイトイメージ（20文字）
ワンクリック切り替え: 過去の配色を再読み込み
個別削除: 不要な履歴を選択削除

実務での活用:

プロジェクト例：ECサイトリニューアル
├ 履歴1: ピンク系（2024/12/15 14:30）10色
├ 履歴2: ブルー系（2024/12/15 15:12）10色  ← クライアント採用
├ 履歴3: グリーン系（2024/12/16 09:45）5色
└ プリセット: Vivid02（オレンジ系）

クライアントへの提案時、その場で複数案を切り替えながらプレゼンできます。

7. CSS変数一括コピー機能

選択した配色をCSS変数形式で一括コピーし、プロジェクトに適用できます。

出力形式:

:root {
  --color-primary: #4a7ba7;
  --color-secondary: #7eb8d4;
  --color-accent: #f4a261;
  --color-background: #f0f5f9;
  --color-surface: #ffffff;
  --color-text: #2c3e50;
  --color-muted: #95a5a6;
}

使い方:

「カラー編集」パネルの「CSS変数コピー」ボタンをクリック
プロジェクトのCSSファイルに貼り付け
コンポーネントで var(--color-primary) として利用

フレームワーク対応:

Tailwind CSS: カスタムカラーとして設定可能
Bootstrap: SCSS変数に変換して使用
Material-UI: theme.paletteに設定

3ステップで完成：使い方ガイド

全体フロー

Step 1: プロンプト生成（30秒）
   ↓
Step 2: AIで配色生成（1〜2分）
   ↓
Step 3: プレビュー＆調整（2〜3分）
   ↓
完成！CSS変数をコピーして実装へ

【方法A】AI生成配色を使う場合

Step 1: AIプロンプト生成

左サイドバーの 「🪄 AIプロンプト作成」 アイコンをクリック
パネルが開いたら、以下を入力：

入力例1（コーポレートサイト）:

信頼感と安心感のあるIT企業サイト
ターゲット: 30-50代の経営者・決裁者
カラーイメージ: 誠実・先進的・プロフェッショナル

入力例2（ECサイト）:

ナチュラル系コスメのオンラインストア
ターゲット: 20-30代女性
カラーイメージ: 優しい・自然・清潔感

パレット数 を選択（初回は 10個 がおすすめ）
「生成」 ボタンをクリック

Step 2: AIツールで配色生成

方法① Google AI Modeで開く

「AIモードで開く」 ボタンをクリック
Google AI Mode（Gemini）が別タブで起動
プロンプトが自動入力されているので、Enterキーを押すだけ
JSON形式の配色が出力される

方法② 好きなAIツールで実行

「コピー」 ボタンでプロンプトをクリップボードにコピー
ChatGPT、Claude等、お好きなAIツールを開く
プロンプトを貼り付けて実行
出力されたJSONをコピー

成功例（JSON出力）:

[
  ["#4a7ba7", "#7eb8d4", "#f4a261", "#f0f5f9", "#ffffff"],
  ["#5a8a7a", "#8bc9b4", "#f8e5a0", "#f4faf7", "#ffffff"],
  ...
]

エラー例（説明文が混入）:

以下のような配色を提案します：
[["#4a7ba7", ...]]  ← 説明文があるとエラー

→ JSONの配列部分 [[...]] のみをコピーしてください

Step 3: プレビュー＆調整（2〜3分）

AI Palette Explorerに戻る
「Step 3: AIの応答を適用」 欄にJSONを貼り付け
「適用」 ボタンをクリック
全プレビュー画面で配色が反映されます

気に入った配色があれば:

左サイドバーのパレット一覧から選択
「🎨 パレットカラー設定」で微調整
「CSS変数コピー」でエクスポート

【方法B】プリセットパレットを使う場合

時間がない場合や、ベースラインが欲しい場合は、プリセットから選択できます。

Step 1: パレットを選択

左サイドバーに30個のパレットが表示
カテゴリー内の6パターンから選ぶ
クリックすると全プレビューに即反映

Step 2: 微調整

「🎨 パレットカラー設定」アイコンをクリック
カラーピッカーで7色を微調整
「CSS変数コピー」でエクスポート

実装へのコピー手順

CSS変数を使う場合（推奨）

カラーエディターパネルの 「📋 CSS変数コピー」 をクリック
プロジェクトの style.css または globals.css に貼り付け

/* AI Palette Explorerから生成 */
:root {
  --color-primary: #4a7ba7;
  --color-secondary: #7eb8d4;
  --color-accent: #f4a261;
  --color-background: #f0f5f9;
  --color-surface: #ffffff;
  --color-text: #2c3e50;
  --color-muted: #95a5a6;
}

/* 使用例 */
.button-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

個別にHEXコードをコピーする場合

Color Palette Detailsセクションで、各色のHEXコード（例: #4a7ba7）をクリックすると、クリップボードにコピーされます。

コピー成功時の表示:

Copied!

トラブルシューティング

Q. JSONを貼り付けてもエラーが出る

原因: JSON形式が間違っている

解決策:

AI出力から [["#..."]] の配列部分のみを抽出
ダブルクォート " が正しいか確認（シングルクォート ' はNG）
カンマ , の位置を確認

正しい形式:

[["#4a7ba7","#7eb8d4","#f4a261","#f0f5f9","#ffffff"]]

Q. 履歴が消えた

原因: ブラウザのキャッシュをクリアした、または別のブラウザを使用

解決策:

localStorageに保存されるため、同じブラウザ・同じデバイスで使用
重要な配色はCSS変数としてプロジェクトに保存することを推奨

Q. モバイルで使いにくい

解決策:

デスクトップブラウザ（Chrome、Edge、Safari）での使用を推奨
タブレット（iPad等）でも動作しますが、一部機能が制限される可能性あり

技術仕様と対応環境

動作環境

推奨環境

項目	推奨スペック
ブラウザ	Chrome 90+、Edge 90+、Safari 14+、Firefox 88+
デバイス	デスクトップ（1280px以上）、タブレット（768px以上）
OS	Windows 10/11、macOS 11+、iPadOS 14+
画面解像度	1920×1080以上推奨

対応状況

完全対応: デスクトップブラウザ（Chrome、Edge、Safari、Firefox）
基本対応: タブレット（iPad、Android Tablet）
制限あり: スマートフォン（レイアウトが最適化されていない）

データ保存仕様

localStorageの使用

保存先: ブラウザのlocalStorage
保存内容: 配色履歴（最大20件）
データ形式: JSON
保存期間: ブラウザのキャッシュをクリアするまで永続
容量: 約5KB（履歴20件分）

注意事項

ブラウザ依存: 異なるブラウザ間でデータは共有されない
デバイス依存: 異なるデバイス間でデータは同期されない
プライベートモード: シークレットモードではデータが保存されない

推奨: 重要な配色はCSS変数としてプロジェクトファイルに保存してください

セキュリティとプライバシー

データの扱い

サーバー送信なし: すべての処理がブラウザ内で完結
個人情報不要: 登録・ログイン不要
Cookie不使用: Cookieは使用していません（Google Analyticsを除く）
外部連携: AIツールへのデータ送信は、ユーザーが手動でコピー&ペーストする形式

対応機能

キーボード操作（Tab、Enter、Esc）
スクリーンリーダー対応（一部）
カラーコントラスト比の可視化
ハイコントラストモード（部分対応）

技術スタック（参考情報）

フロントエンド: HTML5、CSS3（CSS Variables）、Vanilla JavaScript
アイコン: Font Awesome 6.5.1
フォント: Google Fonts（Inter）
ストレージ: Web Storage API（localStorage）
フレームワーク: なし（Pure JavaScript）

よくある質問（FAQ）

基本的な使い方

Q1. どのAIツールが一番おすすめですか？

A. 用途によって異なります。

AIツール	おすすめ度	特徴
ChatGPT	★★★★★	安定性が高い。精度◎
Claude	★★★★★	配色のバリエーションが豊か。感性◎
Gemini	★★★★☆	無料枠が大きい。レスポンス速度◎

推奨: 初心者は 「AIモードで開く」 ボタンからGeminiで試すのがおすすめです。

Q2. 生成された配色は商用利用できますか？

A. はい、商用利用可能です。

著作権・ライセンスの制限なし
クライアントワークでの使用OK
配色のクレジット表記不要
再配布・改変も自由

ただし、AIツール（ChatGPT等）の利用規約は各自ご確認ください。

Q3. プロンプトを自分でカスタマイズできますか？

A. はい、可能です。

方法:

「生成」ボタンでベースプロンプトを作成
表示されたプロンプトを手動でコピー
テキストエディタで編集
AIツールに貼り付けて実行

カスタマイズ例:

【追加できる要素】
- 特定の色を指定（例: 「プライマリーカラーは #FF5722 に近い色で」）
- 避けたい色（例: 「赤・ピンク系は避ける」）
- 参考サイト（例: 「Apple.comのような洗練された配色」）
- 配色理論（例: 「補色対比を活用」）

Q4. JSONの形式が間違っているとどうなりますか？

A. エラーメッセージが表示され、適用されません。

よくあるエラーと対処法:

エラー内容	原因	対処法
JSON parse error	配列の形式が間違っている	[[...]] の部分のみをコピー
色の数が不足	5色未満しかない	AIに再生成を依頼
HEXコードが不正	# が抜けている、6桁でない	手動で修正するか再生成

正しい形式の例:

[
  ["#4a7ba7", "#7eb8d4", "#f4a261", "#f0f5f9", "#ffffff"],
  ["#5a8a7a", "#8bc9b4", "#f8e5a0", "#f4faf7", "#ffffff"]
]

機能について

Q5. モバイルでも使えますか？

A. スマートフォンでは非推奨です。タブレットは使用可能です。

デバイス	対応状況	推奨度
デスクトップPC	完全対応	★★★★★
ノートPC	完全対応	★★★★★
タブレット（iPad等）	基本対応	★★★☆☆
スマートフォン	閲覧のみ	★☆☆☆☆

理由: サイドバー、プレビュー、エディターを同時表示するため、画面幅1280px以上を推奨しています。

Q6. 配色の保存数に制限はありますか？

A. 履歴は最大20件まで自動保存されます。

21件目以降は、古いものから自動削除
重要な配色はCSS変数としてプロジェクトファイルに保存推奨
エクスポート機能はないため、スクリーンショットやメモも活用

プロの使い方:

プロジェクトごとにスプレッドシートで管理
├ プロジェクト名
├ 生成日
├ CSS変数（コピペ）
└ スクリーンショット

Q7. 他のデザインツールと連携できますか？

A. 直接連携機能はありませんが、HEXコードをコピーして使用できます。

ツール	連携方法
Figma	Color Palette DetailsからHEXコピー → Figmaのカラーパレットに登録
Adobe XD	CSS変数をコピー → XDのカラーアセットにペースト
Sketch	HEXコードを手動入力
Canva	カラーピッカーでHEXコードを入力

Q8. ダークモードとライトモードを同時に設定できますか？

A. 現状、1つの配色のみを保持します。

ワークアラウンド:

ライトモード用配色を生成 → CSS変数コピー
ダークモード用配色を生成（Modern04等） → CSS変数コピー
CSSで条件分岐

/* Light Mode */
:root {
  --color-primary: #4a7ba7;
  --color-background: #f0f5f9;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #2d3748;
    --color-background: #1a202c;
  }
}

トラブルシューティング

Q9. プロンプトをコピーしても、AIが配色を生成してくれない

原因と対処法:

AIの出力制限に達した
プロンプトが長すぎる
AIが指示を誤解している

Q10. 履歴が消えた・見つからない

原因:

ブラウザのキャッシュをクリアした
プライベートモード（シークレットモード）で使用した
別のブラウザまたはデバイスで開いた

対処法:

履歴は復元できません
今後は重要な配色を外部に保存（Notion、スプレッドシート等）

Q11. カラーエディターで変更しても、反映されない箇所がある

原因: 一部のUI要素は固定色を使用している可能性があります。

確認方法:

ブラウザの開発者ツールを開く（F12キー）
該当要素をインスペクト
CSS変数が適用されているか確認

対処不要: プレビューはあくまでイメージ確認用です。実装時に正しく適用されれば問題ありません。

フィードバックはX（旧Twitter）までお願いします。

プロンプトに「JSONのみ出力」を追加
「説明不要」を強調
サイトイメージの文字数を200字以内に短縮
パレット数を10個以下に減らす
無料枠を使い切った可能性
時間を置いてから再試行

フリーランスエンジニアについて図解付きで解説

配色 ai chatgpt プロンプト

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter

AI配色ツール！ChatGPTなどのAIプロンプトを利用して配色できる

目次

AI Palette Explorerとは

基本情報

主な機能7選

1. AIプロンプト自動生成機能

2. 4種類のリアルタイムプレビュー機能

① Hero Section（ヒーローセクション）

② Color Palette Details（配色詳細）

③ Mobile Experience

④ Admin Dashboard UI（管理画面）

3. 7色の役割別カラー管理

4. リアルタイムカラーエディター

5. 30種類のプリセットパレット

6. 履歴管理＆比較機能

7. CSS変数一括コピー機能

3ステップで完成：使い方ガイド

全体フロー

【方法A】AI生成配色を使う場合

Step 1: AIプロンプト生成

Step 2: AIツールで配色生成

Step 3: プレビュー＆調整（2〜3分）

【方法B】プリセットパレットを使う場合

Step 1: パレットを選択

Step 2: 微調整

実装へのコピー手順

CSS変数を使う場合（推奨）

個別にHEXコードをコピーする場合

トラブルシューティング

Q. JSONを貼り付けてもエラーが出る

Q. 履歴が消えた

Q. モバイルで使いにくい

技術仕様と対応環境

動作環境

推奨環境

対応状況

データ保存仕様

localStorageの使用

注意事項

セキュリティとプライバシー

データの扱い

対応機能

技術スタック（参考情報）

よくある質問（FAQ）

基本的な使い方

Q1. どのAIツールが一番おすすめですか？

Q2. 生成された配色は商用利用できますか？

Q3. プロンプトを自分でカスタマイズできますか？

Q4. JSONの形式が間違っているとどうなりますか？

機能について

Q5. モバイルでも使えますか？

Q6. 配色の保存数に制限はありますか？

Q7. 他のデザインツールと連携できますか？

Q8. ダークモードとライトモードを同時に設定できますか？

トラブルシューティング

Q9. プロンプトをコピーしても、AIが配色を生成してくれない

Q10. 履歴が消えた・見つからない

Q11. カラーエディターで変更しても、反映されない箇所がある