3章実践：アイデアの可視化と提案資料の作成

INDEX

前の章に戻る

3章実践：アイデアの可視化と提案資料の作成

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

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

AIを使って、デザインコンセプトを視覚的な方向性（ムードボード）に落とし込める。
AIの支援を受けながら、Webサイトの基本的な構成案とキャッチコピーを作成できる。
これまでの成果を統合し、クライアントへの初期提案資料としてまとめることができる。

【3-1】AIによるムードボード作成

目安の学習時間：30分

コンセプトのビジュアル化

デザイン制作の初期段階で、プロジェクト全体の雰囲気や世界観を視覚的に共有するために作成するのがムードボードです。
このパートでは、2章で作成したコンセプトシートを基に、AIを使ってムードボードを作成する方法を学びます。

ムードボード

デザインの方向性、トーン＆マナー（トンマナ）、世界観などを伝えるために、写真、イラスト、配色、テキストなどを一枚のボードに集めたものです。

関係者間で視覚的なイメージを共有し、デザインのブレを防ぐ役割があります。

コンセプトシートで定義したキーワードをプロンプトに変換し、Image FXやCanva AIなどの画像生成AIを活用することで、従来であれば素材サイトで何時間も探していたようなイメージ画像を、瞬時に、かつ大量に生成することができます。

生成した複数の画像を、Canvaなどのツールのテンプレートを使いコラージュすることで、手早く高品質なムードボードを完成させることができます。

練習問題

問題
2章で作成したコンセプトキーワードの中から3〜5つを選び、それらを組み合わせてImage FXに入力するプロンプトを作成してください。
生成された画像の中から、プロジェクトの雰囲気に合うものを4枚以上選び、Canvaのテンプレートを使って1枚のムードボードとして完成させましょう。

解答

プロンプト例（テーマA：サステナブルファッションブランドの場合）：

透明感と自然な雰囲気、職人による丁寧な手仕事、高品質なリネン生地、柔らかい朝の光、
ミニマルな写真、穏やかで静かな、洗練されたファッションフォトグラフィー

プロンプト

出力結果例

画像1：朝の光が窓から差し込む部屋で、デイリーウェアが並んでいる。

画像2：ブランドを象徴する洋服をきた女性モデル。（複数の画像で構成）

画像3：ブランドの品格を伝えるようなキービジュアル。（ラグジュアリーとデイリーの中間服）

ムードボード作成手順例

1.Canvaを開き、検索窓で「ムードボード」と検索し、好みのテンプレートを選択します。

2.Image FXで生成し、保存しておいた画像を4枚以上アップロードします。

3.テンプレートの画像配置エリアに、アップロードした画像をドラッグ＆ドロップで配置します。

4.全体のバランスを見ながら、画像の大きさや位置を調整して完成です。

制作例

【3-2】AIによる構成案（ワイヤーフレーム）作成

目安の学習時間：20分

デザインの「骨格」を作る

ビジュアルの方向性が固まったら、次はその世界観を伝えるためのWebサイトの骨格、すなわち構成案を作成します。

この段階では、AIにワイヤーフレームのラフ案を作成してもらうのが効果的です。
この段階のワイヤーフレームは、Figmaなどで作成する視覚的なレイアウト図ではなく、掲載すべきセクションを上から順番にテキスト形式でリストアップした「サイト構成案」を指します。

ワイヤーフレーム

Webサイトの設計図であり、どこに何を配置するかを大まかな線や箱で示したものです。

この段階では、色や装飾といったビジュアル要素は含めず、情報の構造やレイアウトの検討に集中します。

FigmaのAI機能やChatGPTに、2章で作成したペルソナとコンセプトを提示し、どのようなセクションが、どのような順番で必要かを提案してもらうことで、ユーザー視点に基づいた構成案のたたき台を素早く作ることができます。

練習問題

問題
2章で作成したペルソナとコンセプトステートメントをAIに提示し、「このペルソナに向けた、このコンセプトのLPについて、掲載すべきセクションを上から順番に提案してください」というプロンプトを作成し、実行してみましょう。

解答

プロンプト例：

あなたは経験豊富なUXデザイナーです。
以下のペルソナとコンセプトに基づき、
LPに掲載すべきセクション構成を提案してください。

ユーザーが最も興味を持つであろう順番で、
各セクションの簡単な説明も加えてください。

【ペルソナ】（2章で作成したペルソナ情報を貼り付け）
【コンセプトステートメント】（2章で作成したステートメントを貼り付け）

プロンプト

出力結果例

ヒーローセクション：ブランドの世界観を伝えるキービジュアルとキャッチコピーを配置。
コンセプト紹介：ブランドの理念や、サステナブルなものづくりへのこだわりを伝えるセクション。
商品ラインナップ：主力商品を美しい写真と共に紹介。各商品ページへの導線を設置。
作り手のストーリー：素材の生産者やデザイナーのインタビューなど、製品の背景にある物語を紹介。
お客様の声：実際に商品を使ったユーザーのレビューを掲載し、信頼性を高める。
FAQ：購入前の疑問や不安（洗濯方法、サイズ感など）に答えるセクション。
CTA（行動喚起）：オンラインストアへの導線や、ニュースレター登録を促す。

掲載すべきセクションの方向性が固まったら、それをFigmaなどのツールを使いワイヤーフレームにしましょう。

制作例（Figmaのプラグイン：Relumeを使用）

【3-3】AIによるコピーライティング

目安の学習時間：20分

デザインに「言葉」を載せる

サイトの骨格ができたら、各セクションに配置する「言葉」、すなわちキャッチコピーや説明文を作成します。
人の心を動かすコピーはデザインの重要な要素であり、ここでもAIは力強い味方になります。
2章で作成したコンセプトとペルソナ、そして前のパートで作成したサイト構成案をAIにインプットすることで、文脈に沿った、ターゲットに響くコピーのアイデアを大量に得ることが可能です。

練習問題

問題
2章で作成したペルソナとコンセプトステートメントをChatGPTに提示し、「このLPのヒーローセクションに掲載する、ペルソナの心に響くキャッチコピー5案と、それに続くリード文（導入説明文・150字程度）2案を提案してください」というプロンプトを作成し、実行してみましょう。

解答

プロンプト例：

あなたはプロのコピーライターです。
以下のペルソナとコンセプトに基づき、
私たちのサステナブルファッションブランドのLPのヒーローセクションに掲載するコピーを作成してください。
ターゲットの心に響き、続きを読むよう促すような、創造的なものを期待しています。
【ペルソナ】（2章で作成したペルソナ情報を貼り付け）
【コンセプトステートメント】（2章で作成したステートメントを貼り付け）
提案してほしいもの：
1. 心を掴むキャッチコピーを5案
2. キャッチコピーに続き、コンセプトの魅力を伝えるリード文（150字程度）を2案

プロンプト

出力結果例

【キャッチコピー案】
1. 10年先も、愛せる一着を。
2. ストーリーを纏う、知的な選択。
3. 頑張る私の、心と体を満たす服。
4. 透明なものづくりを、あなたの日常に。
5. 美しさと心地よさに、嘘はつかない。
【リード文案】
1. （案A）
  作り手の顔が見える、誠実なものづくり。都会の日常に自然に溶け込む、洗練されたデザイン。そして、肌に触れるたびに感じる、オーガニックな素材の心地よさ。私たちは、ただ服を届けるのではなく、あなたの毎日に、長く続くささやかな自信と輝きをお届けします。
2. （案B）
  目まぐるしい日々の中で、本当に大切なものだけを選び取りたい。そんなあなたのための一着です。環境への配慮と、時を経ても色褪せないデザインを両立。未来の地球と、未来の自分を大切にするための、賢い選択をここから始めませんか。