教材2-② AIによるアイデア発想と素材作成フロー: 素材作成編
3章 オリジナル制作課題
INDEX
目次

3章 オリジナル制作課題

この章の目安学習時間:2時間

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

  • 学んだAI素材作成ワークフローを応用し、オリジナルの要件に基づいたデザインアセット一式を制作できる。
  • 自身のポートフォリオに掲載可能な、AIを活用した質の高い制作実績を作ることができる。

【3-1】イントロダクション:学んだワークフローを応用し、自分だけの作品を創る

目安の学習時間:10分

本章のゴールと進め方

この章は、本教材「素材作成編」の総仕上げです。
これまでに学んだ全ての知識とスキルを総動員し、オリジナルのデザイン課題に挑戦します。

2章の「追体験」で学んだワークフローを、今度は自分自身の力で実践することがこの章のゴールです。

課題の要件定義書を読み解き、AI活用の戦略を立て、素材を制作し、最終的なデザインカンプを完成させるまでの一連のプロセスを通じて、実践的なスキルを確固たるものにしていきましょう。
ポートフォリオの主役となる作品を創る
  • この章で制作するオリジナル作品は、あなたのスキルを証明する重要な実績となります。
  • 単なる課題としてではなく自身のポートフォリオの主役となる作品を創り上げるという意識で、全力で取り組みましょう!

【3-2】課題説明:要件定義書の選択

目安の学習時間:20分

挑戦する課題を選ぶ

これから取り組むオリジナル制作課題として、3つの異なる要件定義書を用意しました。
自身の興味や、ポートフォリオに掲載したい作品の方向性に合わせて、いずれか1つを選択してください。
要件定義書
  • 実際のデザインの仕事で、クライアントから受け取る「依頼書」のようなものです。
  • プロジェクトの背景、目的、ターゲット、デザインの要望、必要な要素などが記載されています。
  • この内容を正確に読み解き、デザインに反映させる能力は、デザイナーにとって不可欠なスキルです。
  • 課題A: IT系スタートアップの採用LP用デザインアセット一式制作
  • 課題B: 地方都市の観光プロモーション用LPのデザインアセット一式制作
  • 課題C: 新発売されるオーガニック食品のECサイト誘導用LPのデザインアセット一式制作
各課題の詳細は、以下の「見本」で定義される要件定義書(PDFを想定)をよく読んで確認してください。

【課題A】IT系スタートアップ 採用LP要件定義書

タイトル
内容
タイトル補足情報
  • 制作物:IT系スタートアップ「NextLeap Inc.」採用LP(ランディングページ)
  • 概要:自社開発のAIチャットサービス「ConnectAI」の事業拡大に伴う、Webデザイナー・エンジニア向けの採用LP。
制作物を通じて達成したい目的
  • 優秀なWebデザイナー・エンジニアからの採用応募数を増やすことが最終ゴール。
  • 単なる応募数増加だけでなく、「企業の理念や文化に共感し、共に成長したい」という意欲の高い候補者からの応募を質・量ともに最大化する。
  • 「NextLeap Inc.」が持つ「先進性」「オープンな企業文化」「個人の裁量を尊重する風土」を伝え、ブランディングを強化する。
ターゲットデモグラ情報
  • 年齢:20代後半~30代前半
  • 性別:問わない
  • 居住地:問わない(フルリモート勤務が可能なため)
  • 職業:Webデザイナー、フロントエンドエンジニア、UI/UXデザイナーなど
ペルソナ情報
◾️ライフスタイル・価値観
  • 現在の職場である程度経験を積んだが、技術的な挑戦の機会や裁量権の少なさに物足りなさを感じている。
  • 技術ブログ(Zenn, Qiitaなど)やテック系カンファレンスで常に新しい情報を収集しており、知的好奇心が旺盛。
  • 年功序列よりも、フラットな組織で実力や成果が正当に評価される環境を好む。
  • 仕事とプライベートのバランスを重視し、フルリモートやフレックスタイムなど自由な働き方に魅力を感じる。
◾️課題とニーズ
  • 「自分のスキルが本当に世の中の役に立っているのか」という実感を得たい。
  • 自分の技術力やアイデアを、事業やプロダクトの成長にダイレクトに反映させたい。
  • 優秀で刺激的な仲間と切磋琢磨しながら、自身の市場価値を高めたい。
◾️情報収集
  • 企業の技術ブログやGitHub、役員のX(旧Twitter)などをチェックし、その企業が持つ技術力やカルチャーのリアルな情報を探している。
キャッチコピー・文言案と優先順位
  • ①:そのスキル、退屈させてないか?
  • ②:コードで、未来の輪郭を描け。
  • ③:『いつか』じゃない。『今』創る仲間を探している。
マイクロコピー案
  • ボタン文言:「まずはカジュアルに話を聞いてみる」「私たちの開発スタックを見る」
  • 補足情報:「平均年齢32歳」「フルリモート・フルフレックス」
LPの構成要素(必須)
  • キービジュアル:会社の先進性や未来感を表現する。
  • 事業紹介:AIチャットサービス「ConnectAI」が解決する課題と今後の展望。インフォグラフィック等で視覚的に。
  • ポジション紹介:募集する職種(Webデザイナー/エンジニア)の具体的な役割と求めるスキル。
  • 働く環境:フルリモート、フレックス、使用PCスペック、学習支援制度などをアイコンを用いて分かりやすく紹介。
  • 社員インタビュー:経歴の異なるデザイナーとエンジニア各1名が登場。入社の決め手や現在の仕事のやりがいを語る。
  • CTA(Call To Action):カジュアル面談への申し込みフォームへの導線。
色味
  • メインカラー:ダークブルー(#0A192F)やブラックを基調とし、信頼感と専門性を表現。
  • アクセントカラー:サイバーな印象の青緑(#64FFDA)やエレクトリックパープルを使用し、先進性とワクワク感を演出。
与えたい印象
  • 先進性、プロフェッショナル、信頼感、オープンな文化、挑戦的
使用する素材の要件
  • キービジュアルには、特定の個人が強く出すぎない、抽象的でスタイリッシュなビジュアル(例:幾何学模様、データの流れ、ネットワーク図)を推奨。
  • 社員インタビューでは、自然な表情で議論している様子の写真を使用。過度な演出は避ける。
  • アイコンは、シンプルでモダンなラインアイコンで統一する。

【課題B】地方都市観光プロモーションLP要件定義書

タイトル
内容
タイトル補足情報
  • 制作物:架空の地方都市「美空町(みそらちょう)」観光プロモーションLP
  • 概要:「次の週末、時間を忘れる旅」をコンセプトに、都会の喧騒から離れて心癒される体験ができる町の魅力を伝える。
制作物を通じて達成したい目的
  • 最終ゴールは、LP経由での「美空町オリジナル観光パンフレット(PDF)」のダウンロード数を増やすこと。
  • 「美空町」という町の認知度を向上させ、20代~30代の週末旅行の候補地としての地位を確立する。
  • LPを通じて町の持つ「癒やし」「ノスタルジック」な世界観を伝え、ファンを醸成する。
ターゲットデモグラ情報
  • 年齢:20代後半~30代
  • 性別:男女問わず
  • 居住地:都心及びその近郊
  • 職業:デスクワーク中心のオフィスワーカー
ペルソナ情報
◾️ライフスタイル・価値観
  • 平日は仕事に追われ、情報過多な日々に少し疲れを感じている。
  • 休日はデジタルデトックスを兼ねて、自然豊かな場所や静かな場所で過ごしたい。
  • 単に有名な観光地を巡るよりも、その土地ならではの文化や人との触れ合い、ローカルな体験に価値を感じる。
  • Instagramで「#週末旅行」「#古民家カフェ」「#日本の風景」などのハッシュタグをフォローし、次の旅先を探している。
◾️課題とニーズ
  • 心からリラックスでき、明日への活力を充電できるような場所に行きたい。
  • 派手さはないけれど、心に残るような美しい風景を見たい、美味しいものを食べたい。
  • 次の週末にふらっと行けるような、アクセスの良い旅先を探している。
◾️情報収集
  • 旅行系のWebメディアや個人の旅行ブログ、Instagramで行き先の情報を集める。特に写真の雰囲気を重視する。
キャッチコピー・文言案と優先順位
  • ①:何もない、が心地いい。週末、美空町へ。
  • ②:心に余白をつくる、二日間の物語。
  • ③:次の週末、時間を忘れる旅に出よう。
マイクロコピー案
  • ボタン文言:「旅のしおりをダウンロード(無料)」「モデルコースを見る」
  • 補足情報:「都心から電車で2時間」「#美空町でみつけた」
LPの構成要素(必須)
  • キービジュアル:町のコンセプトを象徴する、情緒的な風景写真または動画。
  • イントロダクション:LP全体のコンセプトを伝える短い文章。
  • 3つの魅力紹介:
    • 「豊かな自然」:朝霧のかかる山、透明な川のせせらぎなど。
    • 「歴史的な街並み」:古民家を改装したカフェ、静かな神社、酒蔵など。
    • 「地元の食」:採れたて野菜のランチ、名物の和菓子などシズル感のある写真。
  • モデルコース提案:「のんびり自然満喫コース」「レトロ街歩きコース」など、具体的な過ごし方を提示。
  • アクセス:主要駅からの所要時間や交通手段を分かりやすく図示。
  • CTA:パンフレットダウンロードへの導線。入力フォームはメールアドレスのみなど、ハードルを低く設定。
色味
  • メインカラー:アースカラー(生成り、ベージュ、ブラウン、モスグリーン)を基調とし、落ち着きと温かみを表現。
  • アクセントカラー:澄んだ空の青や、夕焼けのオレンジを差し色として使用し、情緒的な雰囲気を加える。
与えたい印象
  • 癒やし、ノスタルジック、温かみ、発見、オーセンティック
使用する素材の要件
  • 全体的に彩度を少し抑え、フィルム写真のような質感や空気感が伝わる写真素材を厳選して使用する。
  • 人物が写る場合は、後ろ姿や顔がはっきり見えないカットにし、ユーザーが自分自身を投影しやすくする。
  • テキストフォントは、温かみのある明朝体や手書き風フォントを効果的に使用する。

【課題C】オーガニック食品EC誘導LP要件定義書

タイトル
内容
タイトル補足情報
  • 制作物:新発売オーガニックグラノーラ「朝のめぐみ」ECサイト誘導LP
  • 概要:商品のこだわりや魅力を伝え、ブランドへの信頼を醸成し、ECサイトでの初回購入を促進する。
制作物を通じて達成したい目的
  • 最終ゴールは、LPからECサイトへ遷移させ、「初回限定お試しセット」を購入してもらうこと。
  • 商品の認知度を高めると同時に、「なぜこのグラノーラは体に良いのか」という理由を伝え、価格への納得感を醸成する。
  • 「丁寧な暮らし」や「ウェルネス」といった価値観を持つターゲット層とのエンゲージメントを深める。
ターゲットデモグラ情報
  • 年齢:30代~40代
  • 性別:女性
  • 職業:問わない(有職者・専業主婦どちらも)
  • ライフステージ:独身、DINKS、または子育て中の母親
ペルソナ情報
◾️ライフスタイル・価値観
  • 健康や美容への意識が高く、口にするものには気を使っている。オーガニック、無添加といった言葉に惹かれる。
  • 忙しい毎日の中でも、食生活を通じて自分や家族の体を労りたいと考えている。
  • Instagramやライフスタイル系の雑誌で、素敵な暮らしや体に良い食品の情報をチェックしている。
  • 多少高くても、品質が良く、背景にストーリーのあるものを選びたい。
◾️課題とニーズ
  • 忙しい朝でも、手軽に栄養バランスの取れた朝食をとりたい。
  • 市販のシリアルは砂糖や添加物が気になるため、子どもにも安心して食べさせられるものを探している。
  • 罪悪感なく食べられる、ヘルシーなおやつが欲しい。
◾️情報収集
  • ECサイトのレビューや、インフルエンサーの口コミを参考に商品を選ぶことが多い。商品の原材料や製造プロセスに関する情報を重視する。
キャッチコピー・文言案と優先順位
  • ①:罪悪感ゼロの、よくばりな朝。
  • ②:一口ごとに、私が整う。太陽のグラノーラ。
  • ③:その一口が、未来の私をつくる。
マイクロコピー案
  • ボタン文言:「お得に試してみる(送料無料)」「購入はこちら」
  • 補足情報:「白砂糖・人工甘味料不使用」「管理栄養士推奨」
LPの構成要素(必須)
  • キービジュアル:朝の光が差し込むナチュラルな雰囲気の食卓で、商品が美味しそうに見えるシーン。
  • 問題提起と共感:「忙しい朝、食事を抜いていませんか?」などターゲットの悩みに寄り添う。
  • 解決策の提示:本商品がその悩みをどう解決するかを提示。
  • 3つの特長紹介:
    • 「厳選素材」:有機オーツ麦や天日干しフルーツなど、素材の写真を大きく見せ、こだわりを伝える。
    • 「手作り製法」:製造工程の写真を数枚見せ、丁寧な仕事ぶりをアピール。
    • 「栄養バランス」:含まれる栄養素(食物繊維、ビタミンなど)をインフォグラフィックで分かりやすく解説。
  • お客様の声(レビュー):実際に商品を試したユーザーの感想を写真付きで紹介。
  • CTA:「初回限定お試しセット」の魅力(価格、内容)を提示し、ECサイトへのボタンを設置。
色味
  • メインカラー:生成り(#F8F5F0)、ベージュ、ライトグリーンなど、ナチュラルで優しい色合いを基調とする。
  • アクセントカラー:商品に含まれるベリー系の赤やオレンジを差し色として使い、食欲をそそり、活気ある印象を与える。
与えたい印象
  • 健康的、ナチュラル、信頼感、少し贅沢、丁寧な暮らし
使用する素材の要件
  • シズル感を最重要視し、グラノーラのザクザクした食感やフルーツの瑞々しさが伝わる写真を使用する。
  • 自然光を活かした、明るく温かみのある写真で統一する。
  • 商品パッケージもデザインの一部として美しく撮影し、掲載する。

【3-3】制作演習

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

AI素材作成ワークフローの実践

このパートは、主に自習形式での制作時間となります。
2章で学んだ「制作フロー追体験」を参考に、選択した課題の要件定義書に基づいて、自分自身のプロジェクトを進めてください。
制作ステップの確認
  1. コンセプトの再確認と素材作成計画:要件定義書を読み解き、1章で学んだ「素材作成計画シート」を作成する。
  2. キービジュアルの制作:Image FXなどを使って、プロジェクトの顔となるビジュアルを生成・編集する。
  3. 補助ビジュアルの制作:Canva AIやFigmaのプラグインを使い、アイコンやバナーなどを作成する。
  4. テキストコンテンツの制作:ChatGPTなどを使い、キャッチコピーや説明文を最終化する。
  5. Figmaへのアセット統合:作成した全てのアセットをFigmaに集め、レイアウトを組む。
注意:行き詰まったら
  • 制作中、AIが期待通りのアウトプットを出さないこともあるでしょう。
  • そんな時は、2章の内容を復習したり、プロンプトを変えて試行錯誤することが重要です。
  • この試行錯誤のプロセス自体が、AIを使いこなす上で最も重要なスキルになります。

【3-4】3章 -章末課題- [オリジナル作品の提出]

目安の学習時間:30分

問題

【3-2】で選択した課題に基づき、制作した「デザインアセット一式を統合したFigmaデザインカンプ」を提出しましょう。
あわせて、どのような戦略で、どの工程でAIをどう活用したかを簡潔にまとめた「制作プロセス解説ドキュメント」も提出してください。
コーチにフィードバックを貰おう!
  • 完成した課題は、コーチに提出してフィードバックをもらいましょう!
【ポイント】
  • Figmaデザインカンプと制作プロセス解説ドキュメント全体について、コーチに具体的なフィードバックを求めましょう。
  • 特に、AIを活用したことでどのような課題が解決され、どのような効果が得られたかについて、具体的なエピソードを交えて説明すると良いでしょう。
  • 今後のデザイン制作において、さらにAIを効率的に活用するためのアドバイスや、ツール連携のヒントについて質問してみましょう。

解答手順

  1. 選択した課題の要件定義書を熟読し、プロジェクトのゴールを完全に理解します。
  2. 2章で学んだワークフローに沿って、各デザインアセット(ビジュアル、テキスト)をAIを活用して制作します。
  3. 制作した全てのアセットをFigma上に配置し、要件定義書の指示に沿ってデザインカンプを完成させます。
  4. 自身の思考の軌跡や、AI活用の工夫点をまとめた、簡潔なプロセス解説ドキュメントを作成します。
  5. Figmaのデザインカンプの共有URLと、解説ドキュメントをセットで提出します。
これで「3章 オリジナル制作課題」の解説を終わります。
お疲れ様でした!
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH