INDEX
目次
前の章に戻る2章 AI素材作成フロー追体験
この章の目安学習時間：2時間30分
この章で到達できるゴール：
- 複数のAIツールを連携させ、キービジュアルやアイコンなどのビジュアルアセットを制作するフローを体験できる。
- AIで生成したテキストを、デザインのトーン＆マナーに合わせて調整・リファインできる。
- 生成した全てのアセットをFigma上に統合し、レイアウトするまでの一連の流れを実践できる。
【2-1】イントロダクション：プロのAI活用フローを見て、真似て、学ぶ
目安の学習時間：10分
本章のゴールと学習の流れ
この章では、1章で立てた計画に基づき、いよいよ本格的なデザイン素材の作成に入ります。
架空のプロジェクト「サステナブルな素材を使ったファッションブランドのLP」題材に、講師がAIを使って素材を作成していくプロセスを、ステップバイステップで追体験します。
架空のプロジェクト「サステナブルな素材を使ったファッションブランドのLP」題材に、講師がAIを使って素材を作成していくプロセスを、ステップバイステップで追体験します。
具体的には、以下の4つのステップで、LPの主要な素材を制作し、デザインに落とし込むまでを実践します。
- Step1: キービジュアルの制作
- Step2: 補助ビジュアルの作成
- Step3: テキストコンテンツの最終化
- Step4: Figmaへのアセット統合とレイアウト
【2-2】Step1: キービジュアルの制作
目安の学習時間：40分
Image FXによる高品質な画像生成
プロジェクトの「顔」となるキービジュアルは、デザイン全体の印象を決定づける最も重要な要素です。
ここでは、高品質な画像生成を得意とするImage FXを活用して、オリジナリティあふれるビジュアルを生成します。
重要なのは、1章で作成した「共通プロンプト」をベースに、さらにキービジュアルとして求める具体的な要素（例：人物、構図、シチュエーション）を追加していくことです。
ここでは、高品質な画像生成を得意とするImage FXを活用して、オリジナリティあふれるビジュアルを生成します。
重要なのは、1章で作成した「共通プロンプト」をベースに、さらにキービジュアルとして求める具体的な要素（例：人物、構図、シチュエーション）を追加していくことです。
Photoshop/Canvaによる編集と調整
Image FXで生成した画像は、そのままでも高品質ですが、多くの場合、デザインに組み込むためには編集・調整の工程が必要になります。
-
Photoshopでの調整：
WEBCOACHで学んだ色調補正（レベル補正、トーンカーブ）や、トリミング、簡単なレタッチを行います。 -
Canvaでの調整：
Canva上でも、フィルター機能を使った色味の調整や、トリミング、テキストの追加といった簡易的な編集が可能です。
練習問題
問題
1章で作成した自身のプロジェクトの「共通プロンプト」を基に、LPのキービジュアルとして使用する画像をImage FXで1枚生成してください。
その後、CanvaまたはPhotoshopを使い、LPのヒーローセクションで使いやすいように、横長の構図（例：1440x951px）にトリミングし、全体の明るさを少し調整してみましょう。
1章で作成した自身のプロジェクトの「共通プロンプト」を基に、LPのキービジュアルとして使用する画像をImage FXで1枚生成してください。
その後、CanvaまたはPhotoshopを使い、LPのヒーローセクションで使いやすいように、横長の構図（例：1440x951px）にトリミングし、全体の明るさを少し調整してみましょう。
解答
プロンプト例：
プロンプト例：
高品質なファッション写真、サステナブルなブランドのイメージ、柔らかい朝の光が差し込む、 リネンのシャツを着た女性が穏やかに微笑んでいる、ミニマルでクリーンな構図、背景はシンプルなアースカラーの壁、35mmフィルム風
プロンプト
【2-3】Step2: 補助ビジュアルの作成
目安の学習時間：30分
Canva AIとFigma AIの活用
キービジュアル以外の、アイコンやバナーといった補助的なビジュアルは、手軽さが魅力のCanva AIや、Figmaのワークフローに直結するAIプラグインを活用すると効率的です。
ここでも、1章で作成した「共通プロンプト」のキーワード（例：ミニマルなラインアート, アースカラー）をプロンプトに含めることで、デザイン全体の一貫性を保つことができます。
ここでも、1章で作成した「共通プロンプト」のキーワード（例：ミニマルなラインアート, アースカラー）をプロンプトに含めることで、デザイン全体の一貫性を保つことができます。
練習問題
問題
自身のプロジェクトに必要なアイコンを3つ、そして告知用のバナーを1つ、Canva AIの「Magic Media」などを使って、統一したスタイルで生成してみましょう。
自身のプロジェクトに必要なアイコンを3つ、そして告知用のバナーを1つ、Canva AIの「Magic Media」などを使って、統一したスタイルで生成してみましょう。
解答
- アイコンのプロンプト例（テーマA）：
- サステナブルなファッションブランドのWebサイト用アイコン、ミニマルでシンプルなラインアートスタイル、アースカラー、白背景。モチーフ：高品質なリネンシャツ。
- （モチーフの部分を「オーガニックコットン」「リサイクル素材」と変えて、複数生成する）
- バナーのプロンプト例（テーマA）：
- サステナブルなファッションブランドのWeb広告バナー、ミニマルでクリーンなデザイン、アースカラーを基調とした背景、高品質なリネンシャツの写真を配置、キャッチコピーを入れるための余白を設ける
出力結果例（アイコン）
出力結果例（バナー）
※テキストやロゴに適宜修正を加えた後、レイアウトの変更などを行なっております。
※テキストやロゴに適宜修正を加えた後、レイアウトの変更などを行なっております。
【2-4】Step3: テキストコンテンツの最終化
目安の学習時間：20分
ChatGPTによるコピーライティング
ビジュアル素材の準備と並行して、Webサイトに掲載する最終的なテキストコンテンツを作成します。
「発想支援編」で作成したコピーのたたき台を、デザインのトーン＆マナーやペルソナに合わせて、より洗練された文章にリファインするのがこのパートの目的です。
「発想支援編」で作成したコピーのたたき台を、デザインのトーン＆マナーやペルソナに合わせて、より洗練された文章にリファインするのがこのパートの目的です。
練習問題
問題
自身のプロジェクトのLPの、いずれか1つのセクション（例：「私たちのこだわり」セクション）で使う説明文（約200字）を、ChatGPTを使って生成し、自身の言葉でリライトしてみましょう。
自身のプロジェクトのLPの、いずれか1つのセクション（例：「私たちのこだわり」セクション）で使う説明文（約200字）を、ChatGPTを使って生成し、自身の言葉でリライトしてみましょう。
解答
プロンプト例：
プロンプト例：
あなたはプロのWebライターです。 以下のペルソナとコンセプトに基づき、「私たちのこだわり」というセクションに掲載する説明文を200字程度で作成してください。 作り手の情熱や素材の良さが伝わるような、共感を呼ぶ文章をお願いします。 【ペルソナ】（2-①で作成したペルソナ情報を貼り付け） 【コンセプト】（2-①で作成したコンセプト情報を貼り付け）
入力例
出力結果例：
私たちは、ただの服を作っているのではありません。 10年後も愛着を持って着られる、特別な一着をお届けしたい。 そんな想いから、世界中から厳選したオーガニック素材だけを使い、熟練の職人が一つひとつ丁寧に縫製しています。 肌に触れた瞬間の心地よさと、時を経ても変わらない美しいシルエット。 あなたの日常に、本物の価値と豊かさをお届けすることが、私たちの最大のこだわりです。
出力例
- リライトのポイント：
- 生成された文章を基に、よりブランドらしい言葉遣いに調整します。
- 例えば、より語りかけるような口調にしたり、特定のキーワードを強調したりします。
【2-5】Step4: Figmaへのアセット統合とレイアウト
目安の学習時間：40分
デザインカンプの作成
いよいよこの章のハイライトです。
これまでに作成した全てのビジュアル・テキストアセットを、Figma上に配置し、LPの主要部分のデザインを組み立てていきます。
これまでに作成した全てのビジュアル・テキストアセットを、Figma上に配置し、LPの主要部分のデザインを組み立てていきます。
作成例
この工程は、WEBCOACHで学んだFigmaの基本操作（オートレイアウト、コンポーネント作成など）を実践する絶好の機会です。
AIで生成した多様な素材を、デザイン原則に沿って美しくレイアウトしていきましょう。
AIで生成した多様な素材を、デザイン原則に沿って美しくレイアウトしていきましょう。
【2-6】2章 -章末課題- [指定要素の追加制作]
目安の学習時間：30分
問題
追体験で作成したLPデザインに対し、新たに追加の依頼が来たと想定します。
「ブランドの最も伝えたい価値」を補強するための新しいセクションを考え、そのセクションに必要な挿絵1点と、説明文（100字程度）を追加してください。
この課題は、自身のプロジェクトテーマを選択した受講生も、同様に「自身のプロジェクトの価値を補強するセクション」を考えて作成する形で取り組んでください。
「ブランドの最も伝えたい価値」を補強するための新しいセクションを考え、そのセクションに必要な挿絵1点と、説明文（100字程度）を追加してください。
この課題は、自身のプロジェクトテーマを選択した受講生も、同様に「自身のプロジェクトの価値を補強するセクション」を考えて作成する形で取り組んでください。
解答手順
制作例
これで「2章 AI素材作成フロー追体験」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。