INDEX
目次
前の章に戻る2章：AIによるアイデア出しと情報設計の自動化
この章の目安学習時間：50分
この章で到達できるゴール：
- ChatGPTを活用して、デザインの要件やアイデアを構造化し、具体的な設計情報に落とし込めるようになる
- Autoflowを活用し、情報設計を効率的にフローチャートとして可視化できるようになる
【2-1】AIによるペルソナとユーザーストーリー作成
目安の学習時間：20分
AIで具体的なペルソナを作成する
質の高いデザインは、具体的なユーザー像、つまりペルソナを定義することから始まります。
ChatGPTに詳細な条件と出力形式を指定することで、思考の出発点となる精緻なペルソナを効率的に作成できます。
今回は「新作オーガニックスキンケアのLP」を制作するという想定で、そのターゲット顧客のペルソナを作成してみましょう。
以下は、その際に使用するプロンプトの例です。
ChatGPTに詳細な条件と出力形式を指定することで、思考の出発点となる精緻なペルソナを効率的に作成できます。
今回は「新作オーガニックスキンケアのLP」を制作するという想定で、そのターゲット顧客のペルソナを作成してみましょう。
以下は、その際に使用するプロンプトの例です。
練習問題：ペルソナを深掘りしてみよう
問題
上記のプロンプト例で作成したペルソナについて、さらに解像度を上げるために、ChatGPTに以下の2つの点を追加で質問してください。
上記のプロンプト例で作成したペルソナについて、さらに解像度を上げるために、ChatGPTに以下の2つの点を追加で質問してください。
- このペルソナが、スキンケア商品を購入する際に「決め手」とするポイントは何か？（3つ挙げさせる）
- このペルソナが、Instagramでどのようなキーワードでスキンケア情報を検索するか？（5つ挙げさせる）
このように深掘りすることで、LPに掲載すべきコンテンツや、使用すべきキーワードのヒントが得られます。
AIでユーザーストーリーを構築する
ペルソナが定義できたら、次はそのペルソナがLPを訪れてから購入に至るまでのユーザーストーリーを作成します。
これにより、LPがどのような情報構成であるべきか、その骨格が見えてきます。
前のパートで作成したペルソナの情報を基に、具体的なユーザーストーリーを構築させましょう。
これにより、LPがどのような情報構成であるべきか、その骨格が見えてきます。
前のパートで作成したペルソナの情報を基に、具体的なユーザーストーリーを構築させましょう。
【2-2】フロー図の効率的な作成
目安の学習時間：10分
Autoflowで情報構成をフロー化する
作成したユーザーストーリーは、LPの情報構成、つまりセクションの順番を考える上で非常に役立ちます。
Autoflowプラグインを使い、ユーザーがLPを上から下に読み進める際の視線の流れや、サイト内の行動フローをチャートとして可視化してみましょう。
AutoflowはAIではありませんが、オブジェクト間の接続を**自動化**することで、フロー図作成の手間を劇的に削減します。
Autoflowプラグインを使い、ユーザーがLPを上から下に読み進める際の視線の流れや、サイト内の行動フローをチャートとして可視化してみましょう。
AutoflowはAIではありませんが、オブジェクト間の接続を**自動化**することで、フロー図作成の手間を劇的に削減します。
練習問題：LPのフローを作成してみよう
問題
Figmaのキャンバス上に、以下の7つのセクション名を書いた長方形を自由に配置し、それらをAutoflow使って上から下の順番で接続し、フローチャートを作成してください。
Figmaのキャンバス上に、以下の7つのセクション名を書いた長方形を自由に配置し、それらをAutoflow使って上から下の順番で接続し、フローチャートを作成してください。
- ファーストビュー(商品の魅力とベネフィット)
- 悩みの提示(こんな悩みありませんか？)
- 解決策の提示(この商品なら解決できます)
- 商品の権威付け(専門家推薦・受賞歴)
- お客様の声
- FAQ(よくある質問)
- 購入フォームへの導線
解答
【2-3】2章 -章末課題- LPの情報設計を完成させる
目安の学習時間：20分
問題
- 課題： この章で学んだテクニックを使い、「新作オーガニックスキンケアのLP」の 情報設計を完成させる。
- 手順1： ChatGPTを使い、このLPのターゲットとなる ペルソナを1名設定する。（テーブル形式で出力）
- 手順2： 手順1で設定したペルソナが「商品を購入する」までの ユーザーストーリーを作成する。
- 手順3： 手順2のユーザーストーリーを基に、ユーザーの行動フローをAutoflowプラグインを使ってFigma上にフローチャートとして作成する。
解答手順
この課題には決まった正解はありません。
ペルソナの気持ちになって、どのような順番で情報を提供されれば心が動くかを考えることが重要です。
以下は、解答の一例です。
ペルソナの気持ちになって、どのような順番で情報を提供されれば心が動くかを考えることが重要です。
以下は、解答の一例です。
手順1
手順2
ステップ1：認知（Awareness）
「敏感肌なユーザーとして、肌にやさしい新作スキンケアを知りたい。なぜなら季節の変わり目に肌荒れが起きやすく、新しい製品をSNSで常にチェックしているからだ。」
Instagramを見ていた佐藤さんは、ナチュラル処方の敏感肌向けスキンケアブランドの広告に目を止める。オーガニック成分や低刺激処方といったキーワード、ミニマルで清潔感のあるビジュアル、さらに美容インフルエンサーが実際に使ってレビューしている様子が目に入り、興味を惹かれる。
「敏感肌なユーザーとして、肌にやさしい新作スキンケアを知りたい。なぜなら季節の変わり目に肌荒れが起きやすく、新しい製品をSNSで常にチェックしているからだ。」
Instagramを見ていた佐藤さんは、ナチュラル処方の敏感肌向けスキンケアブランドの広告に目を止める。オーガニック成分や低刺激処方といったキーワード、ミニマルで清潔感のあるビジュアル、さらに美容インフルエンサーが実際に使ってレビューしている様子が目に入り、興味を惹かれる。
ステップ2：検討（Consideration）
「情報に敏感なユーザーとして、商品の詳しい成分やレビューを確認したい。なぜなら肌が敏感なので、自分に合うかどうかを慎重に判断したいからだ。」
広告のリンクをタップしてLP（ランディングページ）へ移動。そこでは製品の成分や使用方法、アレルギーテスト済みであること、敏感肌のユーザーからのリアルなレビューや、使用前後の写真などが掲載されていた。特に「＠cosmeで★4.8」や「30代女性のリピート率◎」といった実績が、彼女の安心感につながった。
「情報に敏感なユーザーとして、商品の詳しい成分やレビューを確認したい。なぜなら肌が敏感なので、自分に合うかどうかを慎重に判断したいからだ。」
広告のリンクをタップしてLP（ランディングページ）へ移動。そこでは製品の成分や使用方法、アレルギーテスト済みであること、敏感肌のユーザーからのリアルなレビューや、使用前後の写真などが掲載されていた。特に「＠cosmeで★4.8」や「30代女性のリピート率◎」といった実績が、彼女の安心感につながった。
ステップ3：決定（Decision）
「仕事で忙しいユーザーとして、信頼できる商品を今すぐ手軽に購入したい。なぜなら最近の乾燥と肌荒れがつらく、早くケアを始めたいからだ。」
ページ内で送料無料キャンペーンが開催中で、今なら初回限定のトライアルセットが特別価格で手に入ると知り、即決。Instagram広告のインパクトと、信頼できる情報が揃ったLPによって、安心して購入に至った。
「仕事で忙しいユーザーとして、信頼できる商品を今すぐ手軽に購入したい。なぜなら最近の乾燥と肌荒れがつらく、早くケアを始めたいからだ。」
ページ内で送料無料キャンペーンが開催中で、今なら初回限定のトライアルセットが特別価格で手に入ると知り、即決。Instagram広告のインパクトと、信頼できる情報が揃ったLPによって、安心して購入に至った。
手順3（ユーザーストーリー→サイト内のユーザーフローの作成）
以下は、先ほどのユーザーストーリーをもとに構成した、オーガニックスキンケアLP（ランディングページ）における視線の流れとサイト内行動フローの詳細です。
ペルソナである佐藤美香さん（34歳、敏感肌・美容関心高・SNSで情報収集）の行動心理を踏まえています。
ペルソナである佐藤美香さん（34歳、敏感肌・美容関心高・SNSで情報収集）の行動心理を踏まえています。
視線の流れ（LPスクロールに沿った視線誘導）
-
ファーストビュー（注目の入口）
- 視線ポイント: メインビジュアル + キャッチコピー
- 内容例:
- 「敏感肌でも安心。オーガニック処方の新しいスキンケア」
- インフルエンサーの顔写真や使用動画サムネ
- 「今だけトライアルセット30%オフ」のバナー
- ユーザー心理: 「肌にやさしそう」「試す価値ありかも」と関心をもつ
-
商品の特長セクション（信頼感の強化）
- 視線ポイント: イラストや写真 → テキストの流れ
- 内容例:
- 低刺激・無添加・植物由来成分の紹介
- 「敏感肌でも使用可能」「季節の変わり目に最適」といった文言
- ユーザー心理: 「自分の肌にも合いそう」「成分も良さそう」と好感度が上がる
-
レビュー・SNS評価セクション（共感の獲得）
- 視線ポイント: ★評価 → 顔写真付きレビュー → SNS投稿例
- 内容例:
- 「@cosme評価★4.8」や「Instagramで話題！」
- 30代女性のレビュー：使用前後の写真とともに感想記載
- ユーザー心理: 「この人も自分と同じ悩みだったんだ」と共感し、購入意欲が強まる
-
安心材料セクション（リスク排除）
- 視線ポイント: 箇条書きやラベル形式の表記
- 内容例:
- 「アレルギーテスト済」「合成香料・着色料不使用」
- 「医師監修」「返金保証あり」
- ユーザー心理: 「もし合わなくても安心」「試してみようかな」と不安を和らげる
-
限定オファーとCTA（決断の後押し）
- 視線ポイント: 特典バナー → CTAボタン（固定表示含む）
- 内容例:
- 「初回限定トライアルセット1,480円（送料無料）」
- 「今すぐ申し込む」ボタン（目立つカラー）
- ユーザー心理: 「お得だし早めに申し込もう」と決断に至る
- Instagram広告をタップしてLPにアクセス → キャッチコピーと写真で関心を持つ
- 商品の特長や成分を確認 → 自分に合っていそうか吟味
- SNSやレビューで他者の体験をチェック → 自分と似た悩みの人が効果を実感していることを確認
- 安全性・保証内容に目を通す → 敏感肌でも使えそう、返品可能で安心
- 特典・価格に納得して「購入」クリック → CTAボタンでトライアルセット申し込み完了
- 視覚要素の活用：成分やメリットはアイコンで簡潔に見せる
- ストーリーテリング：ユーザーと似た人物が登場するストーリーで感情移入
- スクロール誘導：「詳しく見る」などのアニメーションや下矢印
コーチに相談しよう
- この章末課題で作成した一連の成果物（ペルソナ、ユーザーストーリー、フローチャート）は、デザインの土台となる非常に重要なものです。
- ぜひコーチに共有し、「なぜこのペルソナなのか」「このフローでユーザーの課題は本当に解決されるか」といった点についてディスカッションしてみましょう。
- 客観的な視点からのフィードバックは、思考を深める絶好の機会です。
これで「AIによるアイデア出しと情報設計の自動化」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。