教材3-EX① 特定AIツール深掘り講座_Figma編
4章：実践ワークフローと応用
INDEX
目次
前の章に戻る

4章：実践ワークフローと応用

この章の目安学習時間：1時間20分

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

  • 学んだAI活用術を組み合わせ、一連のワークフローとしてデザインを制作できるようになる
  • AI活用による自身の生産性向上効果を客観的に把握できる
  • 学習したスキルを実務やポートフォリオ制作に応用するための具体的なヒントを得られる

【4-1】総合演習：課題の概要と準備

目安の学習時間：10分

演習課題の全体像

いよいよ最後の章です。この章では、これまでに学んだ全ての知識とスキルを総動員して、一つのプロジェクトを完成させます。
これまでの学習の集大成として、自信を持って取り組みましょう。
  • 課題：以下の「要件定義書」に基づき、「新作オーガニックスキンケアのLP」の主要部分（合計3セクション）のデザインカンプを完成させる。
  • 制作セクション：
    1. ファーストビュー
    2. 商品の特長
    3. お客様の声
  • 制限時間：90分
この演習は、実際のクライアントワークを想定したものです。
以下の要件定義書をじっくり読み込み、誰に、何を、どのように伝えるべきかを考えながら制作を進めてください。
項目
内容
タイトル・概要
  • 制作物：架空のコスメブランド「Verdure（ヴェルデュール）」の新作オーガニックスキンケア美容液LP
  • 概要：肌への優しさと高い保湿力を求める30代女性に向けた、製品の魅力を伝え、初回限定トライアルセットの購入を促進するLP。
制作を通じて達成したい目的
  • 最終ゴール：初回限定トライアルセットの購入申し込み数を最大化する。
  • ブランドの価値観（自然との調和、科学的根拠）を伝え、リピート購入に繋がるファンを獲得する。
  • 「Verdure」ブランドの認知度向上と、高品質で信頼できるイメージの確立。
ペルソナ情報（2章で作成した人物像）
 ◾️ライフスタイル・価値観
  • 30代前半、IT企業勤務の女性。仕事でPCと向き合う時間が長い。
  • 健康や食への意識が高く、休日はヨガやカフェ巡りでリフレッシュしている。
  • SNSで情報収集をするが、広告よりも信頼できる口コミや成分情報を重視する。
  • 多少価格が高くても、自分の肌に合い、質の良いものを長く使いたいと考えている。
◾️課題とニーズ
  • 年齢と共に肌の乾燥やコンディションのゆらぎが気になり始めた。
  • 化学的な成分が強い化粧品は避けたいが、効果もしっかりと実感したい。
  • 忙しい毎日でも手軽に続けられる、本格的なスキンケアを探している。
キャッチコピー案
  • （以下のいずれか、または複数組み合わせて使用）
  • ①：もう、「ゆらぐ肌」に悩まない。10年後も、自信のある素肌へ。
  • ②：大地の恵みを、一滴に込めて。あなたの肌が、深呼吸する美容液。
  • ③：忙しい毎日でも、妥協しない。本物のオーガニックで、満ちる、潤う。
LPの構成要素（必須）
  • ファーストビュー：キャッチコピー、商品の高品質なイメージ写真、権威性（例：「美容雑誌〇〇で第1位」）、CTAボタンを配置。
  • 商品の特長：アイコンなどを使い、「無添加処方」「独自の天然成分」「高い保湿力」といった3つのポイントを視覚的に分かりやすく紹介。
  • お客様の声：ペルソナに近い年代の利用者の写真付きレビューを3名分掲載。評価（星）や満足度も示す。
デザインの方向性
  • 色味：ナチュラルなアースカラー（ベージュ、ソフトグリーン）を基調に、アクセントとして生命力を感じさせるゴールドやテラコッタを使用。
  • 与えたい印象：自然派、信頼感、高品質、癒し、洗練。
  • フォント：可読性の高いゴシック体（例：Noto Sans JP）を基本とする。
使用する素材の要件
  • 写真：自然光を感じさせる、明るく清潔感のある写真。植物や水など、自然のモチーフを取り入れる。
  • アイコン：シンプルで繊細なラインアイコンで統一する。

制作の準備とワークフローの確認

演習を始める前に、これまでの章で作成した成果物を準備しましょう。
Figmaファイル内に、2章で作成した「ペルソナ」や「ユーザーストーリー」、そして3章でRelumeで生成した「ワイヤーフレーム」を整理しておくとスムーズです。

制作は以下のワークフローで進めます。
  1. 要件定義の理解：上記の要件定義書を熟読し、ゴールとターゲットを再確認する。
  2. ワイヤーフレームの配置と調整：Relumeで生成したワイヤーフレームをベースに、3セクションの骨格を組む。
  3. ビジュアルデザイン：アイコン（Iconify）や画像（Magician）を配置し、LPの世界観を作る。
  4. コンテンツ流し込み：キャッチコピーや説明文をChatGPTに考えさせ、Content Reelでダミーデータを挿入する。
  5. 最終調整：レイアウトを整え、Starkでアクセシビリティを最終チェックする。

【4-2】総合演習：LPデザインの実践

目安の学習時間：60分

STEP1：Relumeで生成したワイヤーフレームの配置と調整

まずは3章でRelumeを使い生成したワイヤーフレームの中から、要件定義書に合致する「ファーストビュー」「商品の特長」「お客様の声」の3つのセクションをFigmaのキャンバスに配置します。

この段階で、セクションの順番を入れ替えたり、不要な要素を削除したりして、デザインの土台を整えましょう。

STEP2：ビジュアル要素の配置と生成

次に、ワイヤーフレームに肉付けをしていきます。
要件定義書にあるデザインの方向性や使用素材の要件を意識しながら、3章で作成・収集したアイコンや画像を配置しましょう。

もし、デザインのクオリティを上げるためにもっと素材が必要だと感じたら、Iconifyで追加のアイコンを探したり、ImageFXで新しいイメージ画像を生成したりするのも良い方法です。
応用テクニック：ChatGPTでコンテンツを深める
  • 要件定義書にあるキャッチコピー案をそのまま使うだけでなく、`ChatGPT`にペルソナ情報を与えて「このペルソナに響くように、キャッチコピー案①をリライトしてください」と依頼するのも効果的です。
  • 同様に、「商品の特長」セクションの具体的な説明文なども、AIに下書きを作成させるところから始めると効率的です。

STEP3：リアルなコンテンツの流し込み

Content Reelを使い、デザインにリアルなテキストを流し込みます。
「お客様の声」セクションのレビューなどを挿入することで、デザインが一気に具体的になります。

STEP4：最終調整とアクセシビリティチェック

最後に、全体のレイアウトや配色、文字サイズなどを微調整し、デザインカンプとしての完成度を高めます。
仕上げにStarkを使い、主要なテキストと背景色の組み合わせでコントラスト比が基準を満たしているか、最終確認を行いましょう。

【4-3】総合演習：提出と振り返り

目安の学習時間：10分

成果物の提出

お疲れ様でした。これで総合演習は終了です。
完成したLPデザイン（3セクション分）は、本講座の卒業制作となります。
完成したデザインをコーチに提出しよう
  • 完成したLPデザインは、ポートフォリオの第一歩となる重要な作品です。
  • ぜひFigmaのファイル共有リンクを使ってコーチに提出し、プロの視点から詳細なフィードバックをもらいましょう。
  • 「要件定義書のどの部分を、デザインのどこに、どう反映させたのか」を言語化して伝えることで、デザインの意図を説明する力が飛躍的に向上します。

ワークシートで学習効果を振り返る

最後に、今回の総合演習を通じて、自身の生産性がどれだけ向上したかを振り返ってみましょう。
以下の項目を参考に、自身の言葉でまとめてみてください。この振り返りが、スキルの定着に繋がります。
  • 制作にかかった合計時間は？（例：75分）
  • AIを使わなかった場合、どの工程が最も時間がかかったと思うか？（例：素材探し、お客様の声の作成）
  • AIの活用で、特に時間短縮効果が大きかったと感じる工程は？（例：Relumeでのワイヤーフレーム一括生成）
  • この講座で学んだ中で、最も便利だと感じたプラグインとその理由は？（例：Relume。情報設計からワイヤー作成まで一気通貫でできるから）
  • 今後、AIをどのように自分のデザインワークフローに取り入れていきたいか？

【4-4】まとめと今後のステップ

目安の学習時間：10分

本教材で学んだことの総括

この教材では、Figmaというデザインツールの上で、様々な無料AIプラグインを連携させ、デザインプロセス全体を効率化する具体的なワークフローを学んできました。
情報設計からビジュアルデザインまで、AIはもはや特別なツールではなく、日々の業務を助けてくれる強力な「アシスタント」です。
ここで得たスキルは、今後のデザイン制作において大きな武器となるでしょう。

Figma公式AI（有料）で開ける新たな扉

本教材では無料のツールに焦点を当ててきましたが、Figmaが公式に提供する有料のAI機能を使えば、さらに高度な効率化が可能です。
無料プラグインが「便利な道具」だとすれば、Figma公式AIは「優秀な同僚」のような存在です。
Figma公式AIでできること（一例）
  • デザインの自動生成と編集
    • 簡単な指示から、オートレイアウトが適用済みのUIデザインを複数パターン、即座に生成できます。
    • 既存のデザインシステムに沿った画面の追加や、デザイン全体のテキストのトーンを一括で変更することも可能です。
  • 情報整理の高度化（FigJam AI）
    • 会議の議事録を貼り付けるだけで、要点をまとめたマインドマップやユーザージャーニーマップを自動で生成します。
    • 散らかったアイデア（付箋）を、AIがテーマごとに自動でグルーピングし、整理してくれます。

さらなるスキルアップのために

AIの世界は日進月歩です。
常に新しいツールやテクニックが登場するため、ここで立ち止まらず、継続的に学び続けることが重要です。
発展的な学習
  • 専門的な有料プラグインの探求
    • 世の中には、より専門的な機能を持つ有料プラグインも存在します。
    • 例えば、`Uizard`（手書きスケッチからデザイン生成）や、`Attention Insight`（ユーザーの視線を予測するヒートマップ作成）などです。
    • 自分の目的に合ったツールを探求することで、さらなる効率化が図れます。
  • デザイン原則の深化
    • AIは強力なツールですが、最終的なデザインの良し悪しを判断するのはデザイナー自身です。
    • レイアウト、配色、タイポグラフィといった、普遍的なデザインの原則を学び続けることが、AIを真に使いこなす上で最も重要になります。
これで「実践ワークフローと応用」の解説を終わります。
お疲れ様でした！
前の章に戻る
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH