![見出し画像](https://assets.st-note.com/production/uploads/images/103737688/rectangle_large_type_2_bed84f7914e2817b36530dedf4abe7fe.png?width=1200)
GPT-4はスライド配色をつくれるのか
文章生成で驚異的な能力を発揮するGPT4ですが、スライドの配色を作ることはできるのでしょうか。色々なプロンプトを打ち込んで試行錯誤した結果、うまくいった例を紹介しますね。
子供向けプログラミング教室のスライド配色を決める
![](https://assets.st-note.com/img/1682228867839-lUDymukmfW.png?width=1200)
GPT4に「あなたはプロのデザインクリエイターです。子供向けプログラミング教室のスライドの配色を決めたいので、ポップなデザインになるように背景色、文字色、メインカラー、アクセントカラーの4色からなるカラーコードを教えてください。」と入力すると以下のように回答してくれます。
子供向けプログラミング教室のスライドのデザインにポップな配色を取り入れることで、楽しく興味を持ってもらえるでしょう。以下に提案するカラーコードは、背景色、文字色、メインカラー、アクセントカラーの順です。
1. 背景色: #FFFFFF(ホワイト)
2. 文字色: #2E2E2E(ダークグレー)
3. メインカラー: #FF9800(オレンジ)
4. アクセントカラー: #4CAF50(グリーン)
この配色は、明るくポップな雰囲気を演出します。白の背景色に、ダークグレーの文字色を使うことで、見やすさを確保し、オレンジとグリーンのアクセントカラーで子供たちの興味を引くデザインになります。ただし、スライドのコンテンツや教室の雰囲気によっては、配色を微調整することをお勧めします。
モノトーンベースでポップな配色を作ってくれただけでなく、クライアントワークでも活用できそうな説明文もつけてくれました。
カラーコードの生成はプロンプトの条件設定が大切
このプロンプト作成で気をつけたのは以下の部分です。
・質問をする:「スライドの配色を決めたい」「背景色、文字色、メインカラー、アクセントカラーの4色からなる」「カラーコードを教えてください」という言葉で、質問の内容を伝えます。
・役割を明確にする:「あなたはプロのデザインクリエイターです」と役割を決めることで、プロのスライドのようなクオリティの高い配色を作ることができます。
・条件を明確にする:「子供向けプログラミング教室」「ポップなデザイン」というワードで、具体的なイメージを伝えて、テーマにあった配色を作ることができます。
条件のワードを変更することで、自分の目指すイメージの配色が作れるので、ぜひ色々と試してみましょう。
その他の配色バリエーションを教えてもらう
![](https://assets.st-note.com/img/1682228891740-nYmU1NDFEp.png?width=1200)
良い感じに出力できたので、さらに「カラーコードをあと10種類教えてください」とバリエーションを聞いてみます。
もちろんです。こちらに10種類のカラーコードをご紹介します。各配色は、背景色、文字色、メインカラー、アクセントカラーの順で記載しています。
1. #F5F5F5 (ライトグレー), #2C3E50 (ネイビー), #E74C3C (赤), #3498DB (ブルー)
2. #FFFFFF (ホワイト), #34495E (ダークグレー), #F39C12 (イエローオレンジ), #9B59B6 (パープル)
3. #FDFD96 (ペールイエロー), #5E5E5E (グレー), #FFA07A (ライトサーモン), #20B2AA (ライトシーグリーン)
4. #F0E68C (カーキ), #2C3E50 (ネイビー), #FFD700 (ゴールド), #00FA9A (ミディアムスプリンググリーン)
5. #FAEBD7 (アンティークホワイト), #2E2E2E (ダークグレー), #FF69B4 (ホットピンク), #4169E1 (ロイヤルブルー)
6. #FFF0F5 (ラベンダーブラッシュ), #696969 (ダークグレー), #32CD32 (ライムグリーン), #FF4500 (オレンジレッド)
7. #E6E6FA (ラベンダー), #2F4F4F (ダークスレートグレー), #FFB6C1 (ライトピンク), #483D8B (ダークスレートブルー)
8. #F0FFF0 (ハニーデュー), #3C3C3C (グレー), #EE82EE (バイオレット), #00BFFF (ディープスカイブルー)
9. #F0F8FF (アリスブルー), #2E2E2E (ダークグレー), #FF6347 (トマト), #228B22 (フォレストグリーン)
10. #F8F8FF (ゴーストホワイト), #4B4B4B (グレー), #7FFFD4 (アクアマリン), #DC143C (クリムゾン)
これらの配色を組み合わせて、子供向けプログラミング教室のスライドデザインに活用してみてください。また、必要に応じて配色を調整して、最適なデザインを作成してください。
簡単に10種類のカラーバリエーションを作ることができました。これを一から考えるとなると、ものすごい労力が必要ですが、GPT4に沢山配色案を作ってもらえば、その中でイメージに合うものを選ぶだけで、簡単にスライドデザインを作ることができます。
GPT4が考えた配色でスライドを作ってみる
![](https://assets.st-note.com/img/1682229616974-qpMBkg9bR4.png?width=1200)
どれもよさそうですが、最初にGPT4が考えてくれたオレンジとグリーンの配色案でスライドを作ってみました(デザインは拙著「誰でも作れるセンスのいいパワポ」に記載のリンクからDLしたパワポファイルを使い、配色だけを変更しています)。
元々のデザインはラベンダーカラーの落ち着いた配色でしたが、オレンジとグリーンに変更することで、子供向けのポップなスライドデザインができました。
まとめ
![](https://assets.st-note.com/img/1682229896683-TcwJ38vjDr.png?width=1200)
このように、GPT4に上手に質問することでイメージに合ったスライド配色を作ることが可能です。AIをどのように使ったらよいか分からない…という方もまだまだ多いと思いますが、慣れるととても心強い味方になってくれます。ぜひみなさんもAIを活用して素敵な配色を作ってみてくださいね。
1月末に発売した書籍も好評発売中です。どうぞよろしくお願いします↓
この記事が気に入ったらサポートをしてみませんか?