教材3-EX③ 特定AIツール深掘り講座_image-FX
3章：実践的デザインアセットへの統合と総合演習
INDEX
目次
前の章に戻る

3章：実践的デザインアセットへの統合と総合演習

この章の目安学習時間: 1時間30分

この章で到達できるゴール

  • ImageFXで生成し、Photoshopで加工した画像を、Figma上でWeb広告バナーとして完成させられる
  • 複数のツールを連携させた、実践的なデザイン制作フローを完遂できる
  • 生成AI画像の著作権と商用利用に関する基本的な考え方を理解し、安全に活用できる

【3-1】ケーススタディ：Web広告バナー制作

目安学習時間：30分

これまでの章で、ImageFXでの画像生成、Photoshopでの加工スキルを学びました。
この章では、それらの素材をFigmaに統合し、一つの完成されたデザインアセットとして仕上げる方法を学びます。

制作フローの全体像

Webデザインの現場では、複数のツールをその得意なことに合わせて連携させるのが一般的です。

今回のワークフローは以下のようになります。
  1. ImageFX：バナーのメインとなる画像を生成します。
  2. Photoshop：画像のレタッチ、必要なサイズへの調整、Web用に背景を透過させたい場合はその処理を行います。
  3. Figma：加工した画像を配置し、テキストやボタンなどのUI要素を追加して最終的なレイアウトを組みます。
(35024)

Figmaでのレイアウト実践

Photoshopで加工・書き出した画像を、今度はFigmaでデザインに落とし込んでいきます。
  1. 指定されたサイズのフレーム（アートボード）を作成します。
  2. 加工済みの画像をFigmaのカンバスにドラッグ＆ドロップで配置します。
  3. テキストツールでキャッチコピーや説明文を入力し、フォントやサイズ、色を調整します。
  4. シェイプツールでCTA（Call to Action）ボタンの土台を作り、テキストを載せます。
  5. 画像とテキストが互いに引き立て合うよう、配置、サイズ、配色を微調整して完成です。

【3-2】著作権と商用利用について

目安学習時間: 10分

Googleのポリシーを理解する

生成AIを実務で使う上で、著作権は避けて通れない非常に重要な問題です。
ツールの利用規約を正しく理解し、安全に活用しましょう。
  • Googleの基本方針:
    • Googleの生成AIサービスの利用規約では、ユーザーが生成したコンテンツに関する著作権は、原則としてそのユーザーに帰属する とGoogleの生成AIサービスの利用規約ではしています。（この文章を執筆している2025年6月時点）
    • つまり、ImageFXで作成した画像は、基本的には商用利用が可能と考えられます。
しかし、法的な論点はまだ多く残っており、状況は常に変化する可能性があるため、以下の点に十分注意してください。
商用利用時の重要注意事項
  • 規約の確認は自己責任: 本教材の情報は執筆時点のものです。実際に商用利用する際は、必ずご自身の責任で、Googleの最新の利用規約を直接確認してください。
  • 著名人やキャラクター、既存の作品に酷似していないか: 意図せずとも、著作権や肖像権を侵害する可能性のある画像が生成された場合は、絶対に使用しないでください。
  • 法整備は発展途上: 生成AIと著作権に関する法的な議論はまだ始まったばかりです。今後の法改正や判例によって、解釈が変わる可能性があることを常に念頭に置いておきましょう。

【3-3】総合演習：デザインアセット一式の制作

目安学習時間: 50分

問題

お疲れ様でした！いよいよ本講座の総仕上げです。
これまでに学んだ全てのスキルを総動員して、実践的なデザイン制作に挑戦しましょう。
あなたは、架空のオーガニックコスメブランド「Verde」のWebデザイナーです。
新商品の「ボタニカル・セラム」の発売にあたり、以下のデザインアセット一式を制作してください。
▼制作物
  1. LPキービジュアル（PC版 1920x1080px）
  2. Instagram広告用バナー（正方形 1080x1080px）
  3. Webメディア掲載用バナー（レクタングル 300x250px）
▼要件
  • ブランドイメージ：「ナチュラル」「透明感」「上質」
  • キービジュアルとバナーには、ImageFXで生成し、Photoshopで加工した画像をメインに使用すること。
  • LPキービジュアルには、以下のテキスト要素を含めること。
    • キャッチコピー：「森の恵みを、一滴に込めて。」
    • 商品名：「Verde Botanical Serum」
  • バナーには、上記テキスト要素に加え、「新発売」「詳しくはこちら」というCTAボタンを含めること。
  • 全てのアセットで、デザインのトーン＆マナーを統一すること。

解答手順

  1. コンセプト定義: ブランドイメージから、生成すべき画像の具体的なビジュアル（例：朝露に濡れた植物、光が差し込む森、清潔感のあるガラス瓶など）を言語化します。
  2. 画像生成 [ImageFX]: 定義したコンセプトに基づき、複数のプロンプトとスタイルチップを試行錯誤し、キービジュアルとバナーの素材となる画像を生成します。
  3. レタッチ・加工 [Photoshop]: 生成した画像をPhotoshopで開き、色調補正、不要物除去、必要に応じて生成拡張を行い、各用途に合わせたサイズに調整・書き出します。
  4. デザイン統合 [Figma]: Figmaで各サイズのフレームを用意し、加工済みの画像を配置します。テキスト、ロゴ（仮）、CTAボタンなどを配置し、全体のレイアウトを完成させます。
  5. 完成したデザインアセット一式を、専属コーチに提出してフィードバックをもらいましょう。
この総合演習は、本講座で学んだことの集大成です。
ぜひ楽しみながら、ご自身の最高の作品を作り上げてください。
完成した作品は、ポートフォリオの素晴らしい実績の一つになります。
これで「3章：実践的デザインアセットへの統合と総合演習」の解説を終わります。
本講座の学習、大変お疲れ様でした！
前の章に戻る
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH