見出し画像

ChatGPTはデザインを言語化できるか？

川合卓也｜SHIFT AI

ChatGPTがサムネイルデザインをどこまで詳細に認識してくれるか確認します。サムネイルは、生成AIコミュニティ「SHIFT AI」のプレゼント企画で使用したものです。私が制作しました。

入力したプロンプト

出力結果

デザインの全体概要

  • サイズ: 1280 x 720ピクセル（16:9比率）

  • カラー:

    • 背景: 白のグラデーション

    • テキスト: 黒、白、グリーン、マゼンタ

    • イラスト: 紫、ピンク、青、赤、白

  • レイアウト:

    • 左上にロゴ

    • 中央に大きな見出し

    • 右側にイラスト

    • 左下と右下にサブ見出し

    • 見出しとサブ見出しの間にアイキャッチ的な数字

  • フォント:

    • 見出しとサブ見出し: ゴシック体、太字

    • ロゴとアイキャッチ: ゴシック体、中太

    • ロゴの「SHIFT」の部分はピンク、「AI」の部分は紫

    • 見出しの「ChatGPT」の部分はグリーン

    • 数字は大きく、サブ見出しのフォントより太く

  • 雰囲気: モダンで明るく、効率的な印象

各要素の詳細

  1. 背景:

    • 白のグラデーション

    • 幾何学的なパターンがうっすらと背景に見える

    • 全体的にクリーンで明るい印象

  2. ロゴ:

    • 左上に配置

    • テキスト「SHIFT AI」

    • 「SHIFT」はピンク、「AI」は紫

    • 下にスローガン「Shift to AI era.」がある

    • スローガンのフォントは小さめ

  3. メイン見出し:

    • 中央に配置

    • テキスト「今から使える！ChatGPT業務効率化22選」

    • 「ChatGPT」の部分はグリーン

    • その他は黒

    • フォントはゴシック体、太字

  4. アイキャッチ数字:

    • 中央右寄りに大きく配置

    • テキスト「22」

    • 黒で、白のアウトラインがある

    • フォントはゴシック体、非常に太字

  5. サブ見出し:

    • 左下と右下に配置

    • 左下のテキスト「業務時間が半分に!?」

    • 右下のテキスト「仕事がサクサク片付く」

    • フォントはゴシック体、中太

    • 色は白

    • 背景にマゼンタの吹き出しがある

  6. イラスト:

    • 右側に配置

    • ビジネスマンが笑顔でノートパソコンを持っている

    • 背広は紺色で、ネクタイは赤

    • 背景はピンクのグラデーション

調整やアレンジ

  • サイズの調整:

    • 16:9の比率であれば、サムネイルのサイズは自由に変更できる

  • カラーの調整:

    • 基本の色を保ちつつ、若干の色調整は可能

  • レイアウトの変更:

    • ビジネスマンのイラストを左右に反転するなどの微調整は可能

再現のための具体的な指示

1. 背景

  1. 背景全体を白のグラデーションに設定します。

  2. 幾何学的なパターン（六角形など）を、背景の上に薄く配置します。

2. ロゴ

  1. 左上に「SHIFT AI」のロゴを配置します。

  2. 「SHIFT」はピンク（#FF3366）、「AI」は紫（#9933FF）で、フォントはゴシック体の中太に設定します。

  3. ロゴの下に「Shift to AI era.」のスローガンを、小さめのゴシック体で配置します。

3. メイン見出し

  1. 中央に「今から使える！ChatGPT業務効率化22選」のテキストを配置します。

  2. 「ChatGPT」はグリーン（#00CC66）、その他のテキストは黒で、フォントはゴシック体の太字に設定します。

4. アイキャッチ数字

  1. メイン見出しの右側に大きな数字「22」を配置します。

  2. 数字は黒で、白のアウトラインを追加します。

  3. フォントはゴシック体の非常に太字に設定します。

5. サブ見出し

  1. 左下に「業務時間が半分に!?」のテキストを、右下に「仕事がサクサク片付く」のテキストを配置します。

  2. それぞれマゼンタの吹き出しの中に配置し、テキストは白に設定します。

  3. 吹き出しの形は、テキストに合わせて自然な形にします。

  4. フォントはゴシック体の中太に設定します。

6. イラスト

  1. 右側にビジネスマンのイラストを配置します。

  2. ビジネスマンの服装は紺色の背広に赤のネクタイです。

  3. イラストの背景にはピンクのグラデーションを追加します。

7. 調整

  1. 要素の配置を適切に調整し、全体がバランスの良いレイアウトになるようにします。

この指示を使えば、誰でもこのデザインを完全に再現できるはずです。


「続けて」と入力した際の出力結果

デザインの再現のための具体的な作業手順

Step 1: 背景の設定

  1. 背景のサイズを1280 x 720ピクセルに設定します。

  2. 白のグラデーションを背景全体に適用します。

  3. 幾何学的なパターン（六角形など）を背景に薄く配置します。

Step 2: ロゴの作成

  1. 左上に「SHIFT AI」のテキストロゴを配置します。

  2. 「SHIFT」の部分はピンク（#FF3366）、「AI」の部分は紫（#9933FF）に設定します。

  3. ロゴの下に「Shift to AI era.」のスローガンを配置します。フォントは小さめで、ゴシック体に設定します。

Step 3: メイン見出しの作成

  1. メイン見出しとして中央に「今から使える！ChatGPT業務効率化22選」のテキストを配置します。

  2. 「ChatGPT」の部分はグリーン（#00CC66）、その他のテキストは黒に設定します。フォントはゴシック体の太字に設定します。

Step 4: アイキャッチ数字の作成

  1. メイン見出しの右側に大きな数字「22」を配置します。

  2. 数字は黒で、白のアウトラインを追加します。

  3. フォントはゴシック体の非常に太字に設定します。

Step 5: サブ見出しの作成

  1. 左下に「業務時間が半分に!?」のサブ見出しを配置します。

  2. 右下に「仕事がサクサク片付く」のサブ見出しを配置します。

  3. 両方のサブ見出しをマゼンタの吹き出しの中に配置し、テキストは白に設定します。

  4. 吹き出しの形は、テキストに合わせて自然な形にします。

  5. フォントはゴシック体の中太に設定します。

Step 6: イラストの作成

  1. 右側にビジネスマンのイラストを配置します。

  2. ビジネスマンは笑顔でノートパソコンを持っており、服装は紺色の背広に赤のネクタイです。

  3. イラストの背景にはピンクのグラデーションを追加します。

Step 7: 最終調整

  1. 各要素の配置を微調整して、全体のバランスを整えます。

  2. 必要に応じて、各要素のサイズを微調整します。

フォントとカラーコード

  1. フォント: 全てのテキストにゴシック体を使用します。

  2. カラーコード:

    • ピンク: #FF3366

    • 紫: #9933FF

    • グリーン: #00CC66

    • 黒: #000000

    • 白: #FFFFFF

    • マゼンタ: #CC0099

以上の手順を通じて、元のデザインを完全に再現できます。

上記を基に、画像生成してもらう

縦位置になってしまいましたが、なんとなくのレイアウトができています

タイトル・サブタイトルだけでサムネイルの指示書を作成してもらう

出力結果

それでは、「【GW特別企画】たった3日間で生成AIスキル習得動画講義」というタイトルと「ChatGPTの使い方から画像生成、コンテンツ制作まで最新AIスキルを徹底解説！」というサブタイトルを元に、詳細なデザイン指示を作成いたします。

デザインの全体概要

  • サイズ: 1280 x 720ピクセル（16:9比率）

  • カラー:

    • 背景: 白のグラデーション

    • テキスト: 黒、青、赤

    • イラスト: 青、白、緑

  • レイアウト:

    • 左上にロゴ

    • 中央に大きな見出し

    • 右側にイラスト

    • 下部にサブ見出し

    • 見出しとサブ見出しの間に装飾的なアイコン

  • フォント:

    • 見出しとサブ見出し: ゴシック体、太字

    • ロゴとアイキャッチ: ゴシック体、中太

    • 見出しの「生成AIスキル習得」の部分は青

    • 見出しの「3日間で」の部分は赤

    • サブタイトルは黒

  • 雰囲気: モダンでプロフェッショナル、かつ楽しげな印象

各要素の詳細

  1. 背景:

    • 白のグラデーション

    • 幾何学的なパターンがうっすらと背景に見える

    • 全体的にクリーンで明るい印象

  2. ロゴ:

    • 左上に配置

    • テキスト「SHIFT AI」

    • フォントはゴシック体の中太に設定

  3. メイン見出し:

    • 中央に配置

    • テキスト「【GW特別企画】たった3日間で生成AIスキル習得動画講義」

    • 「生成AIスキル習得」の部分は青

    • 「3日間で」の部分は赤

    • その他のテキストは黒

    • フォントはゴシック体、太字

  4. アイコン:

    • 見出しの下に生成AIのアイコンを配置

    • モダンで楽しげな印象のアイコン

  5. サブ見出し:

    • 下部に「ChatGPTの使い方から画像生成、コンテンツ制作まで最新AIスキルを徹底解説！」のテキストを配置

    • フォントはゴシック体、中太

    • 色は黒

  6. イラスト:

    • 右側にAI技術者のイラストを配置

    • AI技術者は笑顔でタブレットを持っている

    • 背景は緑のグラデーション

再現のための具体的な作業手順

Step 1: 背景の設定

  1. 背景のサイズを1280 x 720ピクセルに設定します。

  2. 白のグラデーションを背景全体に適用します。

  3. 幾何学的なパターン（六角形など）を背景に薄く配置します。

Step 2: ロゴの作成

  1. 左上に「SHIFT AI」のテキストロゴを配置します。

  2. ロゴのフォントはゴシック体の中太に設定します。

Step 3: メイン見出しの作成

  1. メイン見出しとして中央に「【GW特別企画】たった3日間で生成AIスキル習得動画講義」のテキストを配置します。

  2. 「生成AIスキル習得」の部分は青、「3日間で」の部分は赤、その他のテキストは黒に設定します。

  3. フォントはゴシック体の太字に設定します。

Step 4: アイコンの作成

  1. メイン見出しの下に生成AIのアイコンを配置します。

  2. アイコンはモダンで楽しげな印象に設定します。

Step 5: サブ見出しの作成

  1. 下部に「ChatGPTの使い方から画像生成、コンテンツ制作まで最新AIスキルを徹底解説！」のサブ見出しを配置します。

  2. フォントはゴシック体の中太に設定し、色は黒にします。

Step 6: イラストの作成

  1. 右側にAI技術者のイラストを配置します。

  2. AI技術者は笑顔でタブレットを持っており、服装はプロフェッショナルな感じにします。

  3. イラストの背景には緑のグラデーションを追加します。

Step 7: 最終調整

  1. 各要素の配置を微調整して、全体のバランスを整えます。

  2. 必要に応じて、各要素のサイズを微調整します。

フォントとカラーコード

  1. フォント: 全てのテキストにゴシック体を使用します。

  2. カラーコード:

    • 青: #0077CC

    • 赤: #FF3333

    • 黒: #000000

    • 白: #FFFFFF

    • 緑: #00CC66

この指示を使えば、誰でもタイトルとサブタイトルに基づいたサムネイルデザインを再現できます。

目的やターゲットをタイトルから予測し、デザインを提案してもらう

出力結果

タイトルとサブタイトルの内容から、以下の予測と分析を行い、最も効果的なサムネイルを作成するための指示を生成します。

予測と分析

目的

  • タイトルの「特別企画」と「生成AIスキル習得動画講義」から、このサムネイルの目的は、ゴールデンウィーク中にAIスキルを短期間で習得できる特別なオンライン講義のプロモーションであると推測できます。

  • サブタイトルの内容から、この講義では、ChatGPTの使い方や画像生成、コンテンツ制作など、最新のAIスキルを学べることを強調しています。

ターゲット

  • ターゲットは、AI技術や生成AIに興味がある初心者から中級者のビジネスパーソンやクリエイターであると考えられます。

  • この講義を受けることで、彼らが最新のAIスキルを身につけ、業務効率を上げたり、新しいアイデアを生み出したりすることが期待できます。

デザインの方向性

  • 目的とターゲットに基づいて、デザインはプロフェッショナルでありながら、親しみやすい雰囲気にするべきです。

  • カラーは青や緑などの冷色をベースにしつつ、赤をアクセントカラーとして使うことで、信頼性と活気を表現します。

  • イラストやアイコンなどの視覚要素は、テクノロジーと学習を強調するものにします。

デザイン指示

1. 背景

  1. 背景のサイズを1280 x 720ピクセルに設定します。

  2. 白のグラデーションを背景全体に適用します。

  3. 幾何学的なパターンを背景に薄く配置します。

2. ロゴ

  1. 左上に「SHIFT AI」のテキストロゴを配置します。

  2. ロゴのフォントはゴシック体の中太に設定します。

3. メイン見出し

  1. メイン見出しとして中央に「【GW特別企画】たった3日間で生成AIスキル習得動画講義」のテキストを配置します。

  2. 「生成AIスキル習得」の部分は青、「3日間で」の部分は赤、その他のテキストは黒に設定します。

  3. フォントはゴシック体の太字に設定します。

4. アイコン

  1. メイン見出しの下に生成AIに関連するアイコンを配置します。

  2. アイコンはモダンで楽しげな印象に設定します。

5. サブ見出し

  1. 下部に「ChatGPTの使い方から画像生成、コンテンツ制作まで最新AIスキルを徹底解説！」のサブ見出しを配置します。

  2. フォントはゴシック体の中太に設定し、色は黒にします。

6. イラスト

  1. 右側にAI技術者のイラストを配置します。

  2. AI技術者は笑顔でタブレットを持っており、服装はプロフェッショナルな感じにします。

  3. イラストの背景には緑のグラデーションを追加します。

7. 最終調整

  1. 各要素の配置を微調整して、全体のバランスを整えます。

  2. 必要に応じて、各要素のサイズを微調整します。

フォントとカラーコード

  1. フォント: 全てのテキストにゴシック体を使用します。

  2. カラーコード:

    • 青: #0077CC

    • 赤: #FF3333

    • 黒: #000000

    • 白: #FFFFFF

    • 緑: #00CC66

上記を基にデザインを生成する

精度はまだまだですね。試行錯誤の余地があります。ただ、再現性が高いデザイン系の生成AIの登場の方が早いかもしれません。

所感

タイトルを渡すだけでかなり詳細な指示書を作成してくれました。
「SHIFT AI」がロゴであることは教えていないのですが、ロゴと認識している点は驚きました。

今後、日本語が得意なデザイン系生成AIが出てくれば、そのAIに上記の指示書を渡すだけで高品質のサムネイルが作成できると期待しています。

最近は数行で理想のWebサイト、Webアプリケーションが一瞬でできてしまうようになってきているので、グラフィックデザインもこの波に乗りたいですね。

この記事が気に入ったらサポートをしてみませんか？