Webサイト設計：LPの構成をAIと一緒に作る | 音声・動画AI活用：AIクリエイティブ企画制作プロジェクト | AI活用概論

このページでやること

このページでは、これまで作った企画・文章・画像・動画を使って、1ページの紹介サイトの構成を作ります。

さらに今回は、Google Opal上で次のような流れのAIミニアプリを作ります。

企画情報を入力する
↓
GeminiがLP構成を考える
↓
Outputで見やすいページとして表示する

Opalは、自然な言葉でAIミニアプリを作り、入力・生成・出力をブロックとしてつなげられるノーコードツールです。公式ドキュメントでも、自然言語で作りたいものを入力すると、編集可能なワークフローを作成できると説明されています。

1. 今回作るOpalの形

今回のOpalは、まずシンプルに3つのブロックだけで作ります。

Input
↓
Generate
↓
Output

ブロック	役割
Input	企画タイトル、ターゲット、コンセプトなどを入力する
Generate	GeminiがLP構成を作る
Output	結果を見やすいページとして表示する

最初から複雑にしなくて大丈夫です。

まずは、入力して、AIが考えて、画面に出すだけでOKです。

2. Opalで新しいアプリを作る

Google Opalを開いたら、新しいアプリを作ります。

操作の流れは次の通りです。

1. Google Opalを開く
2. 新しいアプリを作る
3. 空のキャンバスを開く
4. Inputブロックを置く
5. Generateブロックを置く
6. Outputブロックを置く
7. 線でつなぐ

Googleの紹介では、Opalはプロンプト、モデル、ツールを視覚的につなげてAIミニアプリを作る仕組みとして説明されています。

3. ブロックのつなぎ方

キャンバス上に、次の3つを置きます。

Input
Generate
Output

そして、線でつなぎます。

Input → Generate → Output

つなぎ方

Inputブロックの右側から線を引く
↓
Generateブロックの左側につなぐ
↓
Generateブロックの右側から線を引く
↓
Outputブロックの左側につなぐ

これで、次の流れになります。

入力した企画情報
↓
GeminiがLP構成を作る
↓
結果が画面に表示される

4. Inputブロックに入れる内容

Inputブロックは、ユーザーが最初に入力する場所です。

ここでは、LPを作るための材料を入力できるようにします。

Inputブロックには、次のような説明を書きます。

紹介サイトにしたい企画情報を入力してください。

入力する内容：
・企画タイトル
・ターゲット
・コンセプト
・伝えたいこと
・見せ方の雰囲気
・使う画像
・使う動画
・見た人にしてほしい行動

初心者向けには、入力例も書いておくと親切です。

入力例：

企画タイトル：
放課後カフェマップ

ターゲット：
学校帰りに友達と寄れる場所を探している学生

コンセプト：
学校帰りに、気軽に寄れるカフェを見つける企画

伝えたいこと：
勉強にも休憩にも使える、放課後の居場所があること

見せ方の雰囲気：
明るい、親しみやすい、少しおしゃれ

使う画像：
夕方のカフェ、ノートとドリンク、手元のアップ

使う動画：
15秒の紹介動画

見た人にしてほしい行動：
サイトを見て、行ってみたいカフェを探す

5. Generateブロックに入れる内容

Generateブロックでは、GeminiにLP構成を作ってもらいます。

Generateブロックに、次のプロンプトを入れます。

あなたは、初心者向けにWebサイト設計を手伝うAIです。

Inputに入力された企画情報をもとに、1ページLPの構成を作ってください。

条件：
・初心者でも作れる
・1ページだけ
・セクションは5つまで
・文章は短く
・画像と動画を置く場所も考える
・最後にボタン文言を作る
・難しい言葉を使わない
・スマホで見ても分かりやすい

以下の形式で出してください。

1. LPタイトル
2. ファーストビュー
   ・小さなラベル
   ・大きな見出し
   ・短い説明文
   ・使う画像
   ・ボタン文言

3. この企画について
   ・見出し
   ・短い説明文

4. 魅力・特徴
   ・魅力1
   ・魅力2
   ・魅力3

5. 画像・動画セクション
   ・使う画像
   ・使う動画
   ・見せ方

6. 最後の案内
   ・見出し
   ・説明文
   ・ボタン文言

7. サイト制作に使いやすい短いまとめ

ここでは、Geminiに「LP構成を考える役割」を持たせます。

ポイントは、出力形式を先に決めておくことです。

6. Outputブロックで選ぶメニュー

Outputブロックは、最後に結果をどう見せるかを決める場所です。

Opalの公式説明では、Output stepsは最終結果の見え方を制御するためのもので、AIがレイアウトを決める動的Webページや、Google Driveのスプレッドシートへの出力などを選べると説明されています。

今回の授業では、Outputブロックで次を選ぶのがおすすめです。

Outputメニューの選び方

Outputの種類	使う場面	初心者向けおすすめ度
Webpage with auto-layout	結果を見やすいWebページとして表示したい	とてもおすすめ
Manual layout	表示レイアウトを自分で細かく決めたい	慣れてから
Save to Google Docs	企画書や文章として保存したい	おすすめ
Save to Google Slides	発表資料にしたい	おすすめ
Save to Google Sheets	表や一覧で整理したい	必要な時だけ

第三者のチュートリアルでも、Outputの主な選択肢として、Manual layout、Webpage with auto-layout、Save to Google Docs、Save to Google Slides、Save to Google Sheetsが紹介されています。

今回の選び方

今回は、LP構成を見やすく確認したいので、次を選びます。

Output
↓
Webpage with auto-layout

理由は、次の通りです。

見やすい
初心者でも確認しやすい
LPの流れをイメージしやすい
そのまま発表にも使いやすい

7. 保存用も作りたい場合

授業で提出物として残したい場合は、Outputをもう1つ追加してもよいです。

Input
↓
Generate
↓
Output 1：Webpage with auto-layout
↓
Output 2：Save to Google Docs

ただし、初心者はまず1つだけで大丈夫です。

最初はこの形です。

Input → Generate → Output（Webpage with auto-layout）

余裕がある人だけ、Google Docs保存用のOutputを追加します。

8. 実行する

ブロックをつなげたら、アプリを実行します。

実行すると、Inputに企画情報を入れる画面が出ます。

そこに、前回までに作った企画情報を貼り付けます。

企画タイトル：
＿＿＿＿＿＿＿＿＿＿

ターゲット：
＿＿＿＿＿＿＿＿＿＿

コンセプト：
＿＿＿＿＿＿＿＿＿＿

伝えたいこと：
＿＿＿＿＿＿＿＿＿＿

見せ方の雰囲気：
＿＿＿＿＿＿＿＿＿＿

使う画像：
＿＿＿＿＿＿＿＿＿＿

使う動画：
＿＿＿＿＿＿＿＿＿＿

見た人にしてほしい行動：
＿＿＿＿＿＿＿＿＿＿

実行後、OutputにLP構成が表示されます。

9. 出てきたLP構成を見る

Outputに表示された結果を、全部細かく読む必要はありません。

まずは、次の3つだけ確認します。

見るところ	チェックすること
最初の見出し	何の企画かすぐ分かるか
画像・動画の位置	作った素材を使えそうか
ボタン文言	見た人にしてほしい行動と合っているか

ここが合っていれば、LP設計はかなり良い状態です。

10. 直したいときの流れ

出力結果が少し違う場合は、Generateブロックのプロンプトを直します。

いきなり全部書き換えません。

1か所だけ直します。

見出しが長い
↓
Generateブロックに「見出しは短く」と追加する

例です。

追加する条件：
・見出しは10〜18文字くらいにする
・スマホで読みやすい短さにする

また実行します。

プロンプトを少し直す
↓
保存する
↓
実行する
↓
Outputを見る

11. 初心者向けの完成形

このページで作るOpalの完成形は、これです。

Input
紹介サイトにしたい企画情報を入力する

↓ nốiぐ

Generate
GeminiがLP構成を作る

↓ nốiぐ

Output
Webpage with auto-layoutで表示する

提出時は、次の3つがあればOKです。

1. Opalのブロックが Input → Generate → Output でつながっている
2. Outputが Webpage with auto-layout になっている
3. LP構成が画面に表示されている

12. よくあるつまずき

つまずき1：ブロックをどうつなげばいいか分からない

まずは、これだけ覚えます。

Input → Generate → Output

入力、生成、出力の順番です。

つまずき2：Outputで何を選べばいいか分からない

今回はこれです。

Webpage with auto-layout

迷ったら、これを選んでください。

チェック	内容
	Inputブロックを置いた
	Generateブロックを置いた
	Outputブロックを置いた
	Input → Generate を線でつないだ
	Generate → Output を線でつないだ
	GenerateにLP構成用プロンプトを入れた
	Outputで Webpage with auto-layout を選んだ
	実行した
	LP構成が表示された
	必要ならGenerateの条件を少し直した

このページのまとめ

このページでは、OpalでLP構成を作るミニアプリを作りました。

大切なことは、次の3つです。

ブロックは Input → Generate → Output の順につなぐ。
LP構成を考えるのは Generateブロック。
結果を見るOutputは、まず Webpage with auto-layout を選ぶ。

初心者は、まず見た目を細かく作り込まなくて大丈夫です。

企画情報を入れたら、LPの流れが見える。

これができれば、このページは成功です。