AI活用法 第4回：WEBページの流れがまとまらない？AIに”たたき台”を作ってもらおう
【AI活用法シリーズ 第4回/全5回】
こんにちは、ハナグミのけーくんです！
早いものでこの連載も第4回となりました！
以前の記事はこちら
今回は、ホームページやランディングページなど、複数の情報を整理して見やすくレイアウトする方法についてAIと相談して考えて行きたいと思います。
クライアントから「新サービスのLP（ランディングページ）を作ってほしい」と依頼されたとき、
最初に悩むのが「ページ構成」ではないでしょうか？
「どんな順番でコンテンツを並べればいいんだろう…」
「このサービス、何から説明すればユーザーに伝わるかな…」
「セクションの流れがバラバラで、まとまりがない気がする…」
そんなとき、AIに「たたき台」を作ってもらうと、驚くほどスムーズに作業が進みます。
今回は、Webページ構成の基本から、ChatGPTを使った構成案の出し方、そしてそれをFigmaに落とし込むまでの流れを解説します！
Webページ構成の基本を押さえよう
AIに構成を作ってもらう前に、まずは「良いWebページ構成」の基本を理解しておきましょう。特にランディングページ（LP）やサービス紹介ページには、ある程度の「型」が存在します。
LPの基本構成パターン
一般的なLPは、以下のような流れで構成されることが多いです：
- ファーストビュー（FV）：キャッチコピー+メインビジュアル
- 課題提起：ターゲットの悩みや問題を明確にする
- 解決策の提示：サービスがどう解決するか
- 特徴・機能：具体的な機能や強みを紹介
- 実績・事例：導入事例やユーザーの声
- 料金・プラン：価格情報
- CTA（行動喚起）：お問い合わせや申し込みボタン
この流れは「PASONA（パソナ）の法則」や「AIDMA（アイドマ）の法則」といったマーケティング理論に基づいています。気になる人は検索してみてください！
LPは単一のページですのでユーザーの心理に沿って、自然に「申し込みたい」という気持ちにさせる構成になるのがいいでしょう。
サービス紹介ページの場合
一方、コーポレートサイト内のサービス紹介ページは、少し異なる構成になることもあります：
- サービス概要：何をするサービスか
- 対象ユーザー：誰のためのものか
- 提供価値：どんなメリットがあるか
- 詳細機能：具体的な機能説明
- 導入の流れ：利用開始までのステップ
- FAQ：よくある質問
- お問い合わせ：次のアクション
でも、こういった「型」を知っていても、実際にゼロから構成を考えるのは大変です。
特に、扱うサービスが自分にとって馴染みのない業界だったりすると、どこから手をつけていいか分からなくなりますよね。
ChatGPTに構成を出してもらう方法
ここからが本題です。AIに効果的に構成案を出してもらうには、いくつかのポイントがあります。
基本的なプロンプトの書き方
まず、最もシンプルな依頼方法から見ていきましょう：
あなたはWebデザインの専門家です。
以下のサービスのランディングページの構成案を作成してください。
【サービス内容】
中小企業向けのクラウド型勤怠管理システム
【ターゲット】
従業員30〜100名規模の企業の人事担当者
【訴求ポイント】
- 導入が簡単（最短1週間で運用開始）
- 月額980円/人の低価格
- 複雑なシフト管理にも対応
各セクションのタイトルと、そこに含めるべき要素を箇条書きで教えてください。
このように、サービス内容、ターゲット、訴求ポイントの3つを明確に伝えることで、AIはより具体的な構成案を提案してくれます。
より詳細な指示を加える
さらに詳しい構成案が欲しい場合は、以下のような情報を追加すると良いでしょう：
- ページの目的：資料請求を増やしたい、無料トライアル登録を促したい、など
- 競合との差別化ポイント：他社にない独自の強み
- 避けたい表現：「業界最安値」など使えない表現がある場合
- 参考にしたいページ：似たテイストのサイトURLがあれば添付
【追加情報】
- ページの目的：無料トライアルの申し込みを増やす
- 競合との違い：大手は高機能だが複雑。当社はシンプルで使いやすい
- 避けたい表現：「業界最安値」「No.1」などの最上級表現
- ページの長さ：スクロール5〜6画面分程度を想定
この情報を踏まえて、各セクションの内容をより具体的に提案してください。
このレベルまで情報を渡すと、AIはかなり実用的な構成案を返してくれます。
実例：テーマ別のセクション案出し
実際にChatGPTがどんな構成案を出してくれるか、いくつかのパターンを見てみましょう。
例1：BtoB SaaSサービスのLP
上記の「勤怠管理システム」の例でChatGPTに構成を依頼すると、こんな提案が返ってきます：
セクション1：ファーストビュー
- キャッチコピー：「勤怠管理、もっとシンプルに。」
- サブコピー：導入1週間、月額980円から始める勤怠管理
- メインビジュアル：管理画面のイメージ
- CTAボタン：「無料で試してみる」
セクション2：こんな悩み、ありませんか？
- 紙のタイムカードで集計が大変
- 既存システムが複雑で使いこなせない
- 導入コストが高くて踏み出せない
セクション3：○○（サービス名）なら解決できます
- 3つの特徴をビジュアルで表示
- 導入が簡単（設定画面のスクショ）
- 月額980円の低価格（料金比較表）
- 柔軟なシフト管理（カレンダーUI）
このように、各セクションに「何を見せるべきか」まで提案してくれます。
例2：店舗ビジネスのサービスページ
別の例として、「パーソナルトレーニングジム」のサービスページを依頼してみると：
セクション1：トップビジュアル
- ジムの雰囲気が伝わる写真
- 「あなた専用のプログラムで、理想の体へ」
セクション2：選ばれる3つの理由
- 完全個室のマンツーマン指導
- 栄養士監修の食事サポート
- 手ぶらで通えるレンタルウェア完備
セクション3：トレーニングの流れ
- 無料カウンセリング
- 目標設定とプラン作成
- トレーニング開始
- 定期的な効果測定
セクション4：トレーナー紹介
- 顔写真と経歴、専門分野
セクション5：料金プラン
- 月4回、8回、12回の比較表
セクション6：よくある質問
- 運動経験がなくても大丈夫？
- 予約の変更やキャンセルは？
- シャワーは使える？
セクション7：無料体験のご案内
- 今なら初回カウンセリング無料
- 予約フォームへのリンク
業種やターゲットが変われば、AIも柔軟に構成を調整してくれます。
そのまま使わず、自分で調整する視点の持ち方
さて、ここで重要なポイントです。AIが出してくれた構成案を、そのまま使ってはいけません。
「えっ、せっかく作ってもらったのに？」と思うかもしれませんが、これには理由があります。
AIの提案は「平均的」である
AIは膨大なWebページのデータから学習しているため、「よくあるパターン」を提案してくれます。これは悪いことではありませんが、あなたのクライアントのサービスの「独自性」を完全には理解していないということでもあります。
例えば、AIが「よくある質問」セクションを提案したとしても、そのサービスで本当にユーザーが疑問に思うことは、実際のヒアリングや競合調査を通じてしか見えてきません。
クライアントの「本当の強み」を見極める
AIの提案を見ながら、こんな質問を自分に投げかけてみましょう：
- このセクションの順番は本当にベスト？
- 例：「料金」を先に見せた方が安心感につながる場合もある
- このサービス独自の価値は表現できている？
- 例：「シンプル」が売りなのに、機能説明が長すぎないか？
- ターゲットユーザーの行動動線に沿っている？
- 例：BtoB商材なら「事例」を早めに見せた方が説得力がある
- 不要なセクションはないか？
- 例：スタートアップなら「実績」がないので別の信頼性担保が必要
実際の調整例
例えば、AIが提案した構成：
- ファーストビュー
- 課題提起
- 解決策
- 機能紹介
- 事例
- 料金
- CTA
これを、ヒアリングの結果「価格の安さが最大の武器」だと分かった場合：
- ファーストビュー（価格を大きく打ち出す）
- 料金プラン（先に見せて安心させる）
- 課題提起
- 解決策
- 機能紹介（シンプルに3つだけ）
- 事例（導入のしやすさを証明）
- CTA
このように順番を入れ替えたり、強調するポイントを変えたりすることで、よりクライアントの強みを活かした構成になります。
人間ならではの視点を加える
また、人としての視覚的な判断も重要です。
一般的にUI（ユーザーインターフェイス）やUX（ユーザーエクスペリエンス）と呼ばれるものです。
- この構成だとスクロール量が多すぎないか？
- モバイルでの閲覧体験を考慮
- 似たようなセクションが連続していないか？
- 視覚的なリズムを意識した調整
- CTAの位置は適切か？
- ユーザーが「申し込みたい」と思ったタイミングでボタンがあるか
AIは構造を提案してくれますが、ビジュアルの流れや体験をデザインするのは、人の仕事です。
Figmaなどに落とし込む流れ
けーくんAIで構成案が固まったら、次は実際のデザインツールに落とし込んでいきます。
今回は先ほどの「パーソナルジム」の例でFigmaを使用したLPサイト作成のワークフローを紹介します。
ステップ1：構成案をテキストで整理
まず、調整した構成案を、Figmaのページに箇条書きでペーストします。これが「設計図」になります。
ステップ2：ワイヤーフレームを作成
次に、各セクションの大まかなレイアウトをワイヤーフレームで描いていきます。
ここでは細かいデザインは気にせず、情報の配置と優先順位を決めることに集中します。
Figmaの「Frame」ツールを使って、セクションごとに箱を作り、プレースホルダーのテキストや画像を配置していきましょう。
ステップ3：コンテンツの優先順位をビジュアルで表現
ワイヤーフレームの段階で考えるべきは：
- 見出しのサイズ感：最も重要なメッセージは何か？
- 余白の使い方：どこを「息継ぎ」のスペースにするか？
- 視線の流れ：Z字型？F字型？
例えば、「料金プラン」セクションなら：
- 最もオススメのプランを中央に大きく配置
- 他のプランは左右に小さめに配置
- 「人気No.1」などのラベルで視線を誘導
ステップ4：クライアントと構成の確認
ワイヤーフレームができたら、必ずクライアントに確認してもらいましょう。
この段階で構成の合意を取っておくと、後から「このセクション、いらないかも…」という大きな手戻りを防げます。
確認ポイント
- セクションの順番は適切か？
- 各セクションで伝えたいことが入っているか？
- 不要なセクションはないか？
- 追加すべき情報はないか？
ステップ5：ビジュアルデザインへ
構成が固まったら、ようやくビジュアルデザインに進みます。色、フォント、写真やイラスト、アニメーションなど、視覚的な表現を加えていく段階です。
ここで重要なのは、構成段階で決めた「情報の優先順位」を、デザインでも維持すること。
いくら美しいデザインでも、ユーザーが情報を受け取りにくければ意味がありません。
番外編：AIに次のステップも手伝ってもらう
実は、構成案を作った後も、AIは活躍してくれます：
- キャッチコピーの案出し：「この構成のファーストビューに使えるキャッチコピーを10個考えて」
- プレースホルダーテキストの生成：「この『機能紹介』セクションに入れる説明文のサンプルを書いて」
- CTAボタンの文言案：「申し込みを促すボタンの文言を、5パターン考えて」
こうした「細部のコピーライティング」も、AIに手伝ってもらうことで、デザイン作業に集中できます。
まとめ：構成の”たたき台”としてAIを使う
今回は、Webページの構成づくりにAIを活用する方法を見てきました。
AIの役割は「たたき台」を作ること。
ゼロから考えるのは大変ですが、AIが提案してくれた構成案をベースに、
「ここは順番を変えよう」「このセクションは不要かな」と調整していくことで、効率的に質の高い構成が作れます。
大切なのは
- AIには具体的な情報を渡す（サービス内容、ターゲット、訴求ポイント）
- 提案された構成をそのまま使わず、必ず自分で考える（クライアントの独自性、ユーザーの行動動線を意識）
- デザイナーとしての視覚的な判断を加える（スクロール量、視線の流れ、CTAの位置）
- Figmaで構成を可視化してから、クライアントと合意を取る（手戻りを防ぐ）
AIは強力なアシスタントですが、最終的な判断をするのはあなたです。AIが作ってくれた「たたき台」に、あなたのクリエイティビティとクライアントへの理解を加えることで、本当に価値のあるWebページが生まれます。
次回は、いよいよ最終回。今までに活用したことの総決算！今回構成したWEBサイトをAIでどう効率化してデザイン作成できるか！お楽しみに！
▼ 今回のポイント
- Webページには「型」があるが、それをゼロから考えるのは大変
- AIにサービス情報を渡せば、構成の「たたき台」を作ってくれる
- AIの提案をそのまま使わず、必ず自分で調整することが重要
- クライアントの独自性、ユーザー行動、視覚的な流れを意識して構成を磨く
- Figmaやイラストレーターなどでワイヤーフレーム化し、クライアントと早めに合意を取る
次回予告：第5回「今までに学んだことでLPサイトを作ろう」 実際にWEBサイトのデザインカンプをAIと一緒に作成して仕上げる方法をお届けします！
