実践：企画書からWebサイト設計まで自動で作る | 音声・動画AI活用：AIクリエイティブ企画制作プロジェクト | AI活用概論

このページでやること

このページでは、ここまで学んだ内容を振り返りながら、Google Opalで 「企画制作アシスタント」 を作ります。

このアシスタントに企画テーマを入れると、次の内容がまとめて出るようにします。

作るもの	内容
企画書	コンセプト、ターゲット、見せ方
画像素材案	メインビジュアル、SNS画像のプロンプト
動画案	15秒動画の構成、Veo用プロンプト
音声案	ナレーション、AudioLM用プロンプト
BGM案	Lyria用プロンプト
Webサイト設計	LP構成、見出し、ボタン文言

流れはいつも通りです。

完成を使う
（コピペ）
↓
一部分だけ変更する
↓
保存する・実行する
↓
画面の変化を見る
↓
次のステップへ進む

Opalは、自然な言葉とブロックを組み合わせてAIミニアプリを作れるツールです。Input、Generate、Outputなどのブロックをつなげて、複数のAI処理を1つの流れにできます。

1. 今回作る完成形

今回作るOpalの流れは、これです。

Input
↓
Generate 1：企画書を作る
↓
Generate 2：画像素材案を作る
↓
Generate 3：動画・音声案を作る
↓
Generate 4：Webサイト設計を作る
↓
Output：Webページとして表示する

最初は少し多く見えますが、やることは簡単です。

入力
↓
AIが考える
↓
結果を見る

これだけです。

2. Opalで置くブロック

Opalのキャンバスに、次のブロックを置きます。

ブロック	名前	役割
Input	企画入力	テーマやターゲットを入力する
Generate	企画書作成	コンセプトやターゲットを整理する
Generate	画像素材作成	Nano Banana用プロンプトを作る
Generate	動画音声作成	Veo、AudioLM、Lyria用プロンプトを作る
Generate	LP設計	Webサイト構成を作る
Output	結果表示	最終結果をWebページで表示する

Outputは、まず Webpage with auto-layout を選びます。

これは、結果を見やすいWebページとして表示する形式です。Opalの公式ドキュメントでも、OutputではAIがレイアウトを決める動的Webページや、Google Driveのスプレッドシートへの出力などを選べると説明されています。

3. ブロックのつなぎ方

ブロックは、この順番でつなぎます。

Input
↓
Generate：企画書作成
↓
Generate：画像素材作成
↓
Generate：動画音声作成
↓
Generate：LP設計
↓
Output：Webpage with auto-layout

初心者は、まずこの形だけ覚えれば大丈夫です。

Input → Generate → Generate → Generate → Generate → Output

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

Inputブロックには、次の説明文を入れます。

作りたい企画の情報を入力してください。

分からないところは空欄でも大丈夫です。

入力する内容：
・企画タイトル
・誰に届けたいか
・何を伝えたいか
・見せ方の雰囲気
・使いたい画像のイメージ
・動画で見せたい場面
・見た人にしてほしい行動

実行時に入力するテンプレートは、これです。

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

誰に届けたいか：
＿＿＿＿＿＿＿＿＿＿

何を伝えたいか：
＿＿＿＿＿＿＿＿＿＿

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

使いたい画像のイメージ：
＿＿＿＿＿＿＿＿＿＿

動画で見せたい場面：
＿＿＿＿＿＿＿＿＿＿

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

入力例

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

誰に届けたいか：
学校帰りに友達と寄れる場所を探している学生

何を伝えたいか：
勉強にも休憩にも使えるカフェがあること

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

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

動画で見せたい場面：
学校帰りにカフェへ向かい、席でスマホを見ながら場所を探す

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

5. Generate 1：企画書作成

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

あなたは、学生向けの企画書作成を手伝うAIです。

Inputに入力された内容をもとに、短い企画書を作ってください。

条件：
・初心者にも分かる言葉にする
・長くしすぎない
・Webサイト、画像、動画に展開しやすくする
・発表で読みやすい文章にする

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

1. 企画タイトル
2. コンセプト
3. ターゲット
4. ターゲットの悩み
5. この企画で伝えること
6. 見せ方の雰囲気
7. 最後のひとこと

このブロックでは、企画の土台を作ります。

6. Generate 2：画像素材作成

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

あなたは、AI画像生成のプロンプトを作るクリエイティブディレクターです。

前の企画書をもとに、Nano Bananaで使える画像生成プロンプトを作ってください。

作る画像：
1. Webサイト用メインビジュアル
2. SNS投稿用画像

条件：
・メインビジュアルは16:9
・SNS投稿用画像は4:5
・プロのカメラマンが撮影したようなリアルな写真
・50mmレンズ
・f2.8
・柔らかい自然光
・背景をほどよくぼかす
・文字は入れない
・ロゴは入れない
・人物の顔ははっきり写さない
・後から文字を入れやすい余白を残す

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

1. メインビジュアル用プロンプト
2. SNS投稿用プロンプト
3. 画像編集用プロンプト
4. テロップ案
5. フォントの方向性

ここで出たプロンプトを、あとでNano Bananaに貼れば画像素材を作れます。

7. Generate 3：動画・音声作成

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

あなたは、学生向けプロモーション動画を作るAIディレクターです。

前の企画書と画像素材案をもとに、15秒の紹介動画を作るための設計をしてください。

条件：
・初心者でも作れる
・15秒動画
・9:16の縦長動画
・Veoでは8秒程度の短いクリップを2本作る前提にする
・文字は動画生成時には入れない
・ロゴは入れない
・人物の顔ははっきり写さない
・テロップは後から編集で入れる
・ナレーションは60〜90文字くらい
・BGMはナレーションの邪魔をしない

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

1. 15秒動画の流れ
2. クリップ1のVeo用プロンプト
3. クリップ2のVeo用プロンプト
4. ナレーション文
5. AudioLM用プロンプト
6. Lyria用プロンプト
7. テロップ4つ

ここでは、動画そのものではなく、動画を作るための設計図を作ります。

8. Generate 4：Webサイト設計

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

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

ここまで作成した企画書、画像素材案、動画音声案をもとに、1ページLPの構成を作ってください。

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

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

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

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

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

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

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

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

これで、Webサイト制作に使えるLP設計ができます。

9. Outputブロックの設定

Outputブロックでは、次を選びます。

Webpage with auto-layout

理由は、結果を見やすいWebページ風に表示できるからです。

Opalでは複数のOutputを使うこともできます。提出用に残したい場合は、Outputを追加してGoogle DocsやGoogle Sheetsへ保存する形も使えます。

初心者は、まずこれだけでOKです。

Output
↓
Webpage with auto-layout

余裕がある人は、2つ目のOutputを追加します。

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

10. 実行する

ブロックをすべてつないだら、実行します。

流れは次の通りです。

1. Runを押す
2. Inputに企画情報を入れる
3. 実行する
4. Outputを見る
5. 良さそうなら保存する

最初の結果が微妙でも大丈夫です。

AI制作は、1回で当てるものではありません。

出す
↓
見る
↓
直す
↓
良くする

これが基本です。

11. 出力結果を見るポイント

Outputに結果が出たら、全部を細かく読まなくても大丈夫です。

まずは、次の5つだけ見ます。

見るところ	チェックすること
企画書	何の企画か分かるか
画像プロンプト	Nano Bananaに貼れそうか
動画プロンプト	Veoで短い動画が作れそうか
ナレーション	15秒で読めそうか
LP構成	サイトの流れが分かるか

この5つが分かれば成功です。

12. 一部分だけ直す

出力が長すぎる場合は、Generateブロックに条件を追加します。

文章が長すぎる
↓
「1文を短くする」を追加する

追加する条件の例です。

・1文は短くする
・専門用語を使わない
・初心者がそのまま使える形にする
・出力は見出しごとに整理する

画像プロンプトが弱い場合は、Generate 2に追加します。

・プロの広告写真のようにする
・50mmレンズ、f2.8を入れる
・文字を入れない
・余白を残す

動画プロンプトが難しい場合は、Generate 3に追加します。

・8秒クリップを2本に分ける
・動きはゆっくり
・文字は入れない
・顔ははっきり写さない

13. できたプロンプトを各AIで使う

Opalでまとめて設計ができたら、必要に応じて各AIで実際に作ります。

作りたいもの	使うAI
企画書	Gemini
画像	Nano Banana
動画	Veo
ナレーション	AudioLM
BGM	Lyria
LP構成	Gemini
結果表示	Output

まずは、画像だけ作ってもOKです。

余裕がある人は、動画と音声まで作ります。

14. 提出するもの

この実践では、次のものを提出できればOKです。

1. Opalのブロック構成が分かる画面
2. Outputに表示された企画書
3. Nano Banana用の画像プロンプト
4. Veo用の動画プロンプト
5. AudioLM用のナレーションプロンプト
6. LP構成

余裕がある人は、実際に生成した画像や動画も提出します。

7. メインビジュアル画像
8. SNS投稿画像
9. 15秒動画

15. チェックリスト

チェック	内容
	Inputブロックを置いた
	Generate 1を置いた
	Generate 2を置いた
	Generate 3を置いた
	Generate 4を置いた
	Outputブロックを置いた
	Input → Generate 1 → Generate 2 → Generate 3 → Generate 4 → Outputでつないだ
	Outputで Webpage with auto-layout を選んだ
	企画情報を入力した
	実行した
	企画書が出た
	画像プロンプトが出た
	動画・音声プロンプトが出た
	LP構成が出た
	必要な内容を保存した

最低限、次の3つができれば合格です。

Opalのブロックをつなぐ
Outputに結果を表示する
LP構成まで出す

16. よくあるつまずき

つまずき1：ブロックが多くて分からない

最初はこれだけ覚えます。

Input
↓
Generate
↓
Output

慣れてきたら、Generateを増やします。

企画書
画像
動画音声
LP設計

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

今回はこれです。

Webpage with auto-layout

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

つまずき3：結果が長すぎる

Generateブロックにこれを追加します。

・短く
・見出しで整理
・初心者向け
・そのまま使える形

つまずき4：画像や動画がうまく作れない

最初から全部作らなくて大丈夫です。

まずは画像だけでOKです。

企画書
↓
画像
↓
LP構成

ここまでできれば十分進んでいます。

17. このページのまとめ

このページでは、これまで学んだ内容を1つのOpalアプリにまとめました。

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

Inputに企画情報を入れる。
Generateで企画書を作る。
Generateで画像素材案を作る。
Generateで動画・音声案を作る。
GenerateでWebサイト設計を作る。
Outputは Webpage with auto-layout を選ぶ。

最初から完璧な作品を作らなくて大丈夫です。

企画が、文章・画像・動画・Webサイトの形に変わる。

ここまでできれば、AIを使った企画制作の流れはしっかり身についています。