AI活用法 第5回：今までに学んだことでLPサイトを作ろう
【AI活用法シリーズ 第5回/全5回】
こんにちは、ハナグミのけーくんです！
いよいよこの連載も最終回となりました！
前回の第4回では、ページの構成を考えてワイヤーフレームを作成するところまで進めました。今回は、これまでの連載で学んだAIツールを総動員して、実際にランディングページのデザインカンプを完成させていきます！
「AIツールはいろいろ使ってみたけど、実際のプロジェクトでどう組み合わせればいいの？」
「ワイヤーフレームはできたけど、ここから先が進まない…」
「デザインカンプを作るのに時間がかかりすぎる…」
そんな悩みを、AIと一緒に解決していきましょう！
過去の連載はこちら
前回のおさらい：ワイヤーフレームまで完成しました
前回は、架空のパーソナルジム「SUGOI GYM」のランディングページを例に、ChatGPTと一緒にページ構成を考えました。
作成した構成：
- ファーストビュー
- 料金プラン（3段階）
- 選ばれる3つの理由
- はじめてでも安心、4段階のステップ
- トレーナー紹介
- よくある質問
- お客様の声
- お問い合わせ
この「骨組み」ができたところで、今回はいよいよこれまでの連載で学んだ知識をフル活用して、デザインカンプを完成させます！
これまでの連載で学んだAIツールをおさらい
今回のデザインカンプ作成では、これまでの連載してきたAIを活用していきます！
第1回：画像生成
第2回：ChatGPTでアイデア出しと対話
第3回：ロゴ作り
第4回：ページ構成とワイヤーフレーム
これらを組み合わせて、実際のデザインカンプを作っていきます！
STEP1：デザインの方向性とコンテンツを決める
ワイヤーフレームに「肉付け」する前に、まずデザインの方向性を明確にしましょう。
ターゲットとブランドイメージを整理する
今回の「SUGOI GYM」の設定：
- ターゲット：30〜40代の男女
- 訴求ポイント：コストパフォーマンスは重視するが、本格的なトレーニングを求めている
- ブランドイメージ：親しみやすいが、安っぽくない。プロフェッショナルで信頼できる
この情報をもとに、AIでコンテンツを膨らませて作成していきます。
ChatGPTでコンテンツを一気に作成
第2回で学んだように、ChatGPTに具体的な指示を出してコンテンツを作成します。
実際に使用したプロンプト例：
1. 選ばれる3つの理由
ジムが選ばれる3つのポイントをそれぞれ150文字程度で作成してください。
【3つのポイント】
- 完全個室のマンツーマン指導
- 栄養士監修の食事サポート
- 手ぶらで通える
合わせて親しみやすいキャッチコピーも加えて作成してください。
これらのコンテンツをChatGPTで一気に作成することで、時間を大幅に短縮できます。
ChatGPTからの提案をベースに、こんな文言が完成しました：
ポイント1：完全個室のマンツーマン指導
周りの目を気にせず、自分のペースでトレーニング。専属トレーナーがあなたの目標や体の状態に合わせて、最適なメニューを組み立てます。
ポイント2：栄養士監修の食事サポート
トレーニングだけでは理想の体は作れません。栄養士がライフスタイルに合わせた無理のない食事プランを提案。続けられるからこそ、結果が出ます。
ポイント3：手ぶらで通える
ウェアもシューズもタオルも、すべてレンタル無料。仕事帰りでも、買い物の合間でも、気軽に立ち寄れます。
2. トレーナー紹介文
体験からの流れのフローを考えたい
【流れ】（STEP形式）
- 無料カウンセリング
- 目標設定・プラン作成
- トレーニング開始
- 定期的な効果測定
各項目に説明を加えてプロフェッショナルな作りにしたい
3. お客様の声（口コミ）
ダミーテキスト作成依頼
パーソナルジムのサイトに掲載できる自然な口コミ文を4パターン
男性2名、女性2名
このように、必要なコンテンツをまとめてChatGPTで作成することで、デザイン作業に集中できます。
STEP2：カラースキームとフォントを決定する
次に、第2回で学んだ方法で使用するカラーやフォントを決定していきます。デザインの視覚的な方向性を決めます。
これらの選択も、ChatGPTに相談することができます：
パーソナルジムのLPに使うカラーとフォントを提案してください。
ターゲットは30〜40代で、信頼感と親しみやすさを両立させたいです。
日本語フォントでお願いします。
STEP3：Figmaでデザインカンプを作成する
いよいよ、Figmaでデザインカンプを作成していきます。
ワイヤーフレームをベースに配置していく
作業の流れ：
- ワイヤーフレームを複製
- 元のワイヤーフレームは残しておく
- 新しいページでデザインカンプ作成
- カラースキームを適用
- セクションごとに背景色を設定
- フォントを適用
- 見出しと本文のスタイルを作成
- 一括で適用して統一感を出す
- コンテンツを配置
- ChatGPTで作成した文章をコピペ
- 文字数に合わせてレイアウトを微調整
- 画像を配置
- 実際の写真素材を配置（またはプレースホルダー）
- 第1回で学んだ画像生成AIも活用可能
実際のデザインカンプ作成のポイント
ファーストビュー：
- 背景に実際のジムの写真を配置
- キャッチコピーを大きく、読みやすく
- CTAボタンはアクセントカラーで目立たせる
料金プラン：
- 3つのプランをカード形式で配置
- 中央のプランを大きくして「おすすめ」を強調
- 価格は大きく、詳細は小さめに
選ばれる3つの理由：
- アイコンまたは写真で視覚的に表現
- 統一感のあるレイアウトで一体感を作る
トレーニングの流れ（STEP形式）：
- 番号を表示して流れを明確に
- 各ステップに写真を添えて具体性を持たせる
STEP4：AIツールで画像素材を調達・生成する
デザインカンプに必要な画像素材も、AIツールで効率的に調達できます。
使用できるツール
1. Unsplash / Pexels（無料素材）
- 「personal training」「gym interior」などで検索
- 高品質な写真が無料で使える
2. DALL-E / Gemini nanobanana（AI画像生成）
- 必要なシーンがストックフォトにない場合
- 「professional personal trainer helping client」などのプロンプトで生成
3. Figmaの画像生成機能（有料）
- 簡単なグラフィックやアイコン作成
今回は「SUGOI GYM」のアイコンの叩き台を作ってもらいました
画像の統一感を意識する
AIで生成した画像とストックフォトを混在させる場合は：
- 色調を統一：Figmaのカラーオーバーレイ機能を使用
- トーンを合わせる：明るさやコントラストを調整
- スタイルを揃える：写真の雰囲気（明るい/暗い、カジュアル/フォーマル）
今回は生成AIの他にUnsplashから著作権フリー・商用利用化の画像を選定して使用しました。
海外の人材を使用した理由としてはジムの画像選定の際海外ぽさが目立ったので統一感を出す為揃えました。
STEP5：最終調整とブラッシュアップ
デザインカンプがほぼ完成したら、最後の調整を行います。
AIに客観的なフィードバックをもらう
実は、完成したデザインについてChatGPTにフィードバックをもらうこともできます。
プロンプト例：
以下のランディングページのデザインについて、UI/UXの観点からフィードバックをください。
【ターゲット】30〜40代の男女
【目的】無料カウンセリングの予約を増やす
【各セクションの構成】
- ファーストビュー
- 料金プラン
- 選ばれる3つの理由
...
改善できる点や、より効果的にするためのアイデアを教えてください。
チェックすべきポイント
1. 視覚的な階層は明確か
- 最も重要な情報が最も目立っているか
- 見出しと本文のコントラストは十分か
2. スクロールの流れはスムーズか
- セクション間の余白は適切か
- 視線がジグザグに動きすぎていないか
3. CTAは目立っているか
- ボタンの色と配置は適切か
- 行動を促す文言は明確か
4. モバイル対応は考えられているか
- レスポンシブデザインの準備はできているか
- スマホで見たときの可読性は確保されているか
今回全ての画像は紹介しきれませんがわかりやすく変化している例として価格表のレスポンシブデザインを貼っておきます。
まとめ：AIツールを組み合わせて効率的にデザインする
今回は、これまでの連載で学んだAIツールを総動員して、実際にランディングページのデザインカンプを完成させました。
重要なポイント：
- AIはあくまで「アシスタント」 – 最終的な判断はデザイナーが行う
- 各ツールの強みを活かす – それぞれのツールが得意な部分を組み合わせる
- 一貫性を保つ – カラー、フォント、トーンを統一する
- ターゲットを常に意識 – 誰のために作っているかを忘れない
【連載を振り返って】
この「AI活用法シリーズ」全5回、いかがでしたか？
第0回：AIツールとの上手な付き合い方 → AI全般における使い方、諸注意など
第1回：その画像、どうやって作った？ → ChatGPTやAdobe Fireflyなどを使っての画像生成の基本
第2回：AIがひらめきを連れてくる → ChatGPTをつかってブレインストーミング。アイディアを出そう。
第3回：ロゴってむずかしい。 → アイディアを形に。ロゴを作成するコツを連載
第4回：ページ構成とワイヤーフレーム作成 → 情報設計、ChatGPTでの構成案出し、Figmaでのワイヤーフレーム作成
第5回：デザインカンプの完成 → 今まで使用したAIの利用方法でコンテンツ作成して実際のLPを作成
AIは、デザイナーの仕事を「奪う」ものではなく、あなたの創造性を引き出し、作業を効率化するパートナーです。
単純作業やアイデア出しはAIに任せて、あなたは本当にクリエイティブな部分—デザインの方向性を決めたり、細かい調整をしたり、クライアントの要望を実現したり—に集中できるようになります。
ぜひ、明日からの制作に活かしてみてください！
▼ 今回のポイント
- ワイヤーフレームができたら、AIで各セクションの文言を作成
- キャッチコピー、説明文、口コミなど、具体的な指示を出す
- AIの提案をそのまま使わず、ターゲットに響く言葉に調整する
- 画像選定もAIに相談できる
- 最終チェックでは、ターゲット目線・分かりやすさ・行動の明確さを確認
この連載が、あなたのデザインワークに少しでもお役に立てば幸いです！
ご愛読ありがとうございました。
また次の記事でお会いしましょう！
