AIで「企画を形にする」
このページでやること
このページでは、Google Opalの中にあるAIを使って、自分たちで企画を考え、文章・画像・動画・音声・Webサイトの材料まで作る流れを学びます。
難しい設定はありません。
プログラミングの初期設定もありません。
必要なのは、次の3つだけです。
| 必要なもの | 内容 |
|---|---|
| Googleアカウント | Google Opalを使うため |
| Google Opal | AIを組み合わせて使う場所 |
| 企画テーマ | 自分たちが作りたいイベント・商品・サービス・作品 |
今回の進め方は、いつも通りです。
完成を使う
（コピペ）
↓
一部分だけ変更する
↓
保存する・実行する
↓
画面の変化を見る
↓
次のステップへ進む
最初から完璧に作ろうとしなくて大丈夫です。
まずは、AIに手伝ってもらいながら、企画を見える形にすることを目標にします。
今回使うAIツール
Google Opalの中には、いくつかのAIがあります。
先週までに使ったのは、主にこの2つです。
| ツール | 使う場面 |
|---|---|
| Gemini | 企画、文章、構成、調査、説明文を作る |
| Nano Banana | 画像生成、画像編集をする |
今回から、必要に応じて次のAIも使います。
| ツール | 使う場面 |
|---|---|
| AudioLM | テキストから音声を作る |
| Veo | テキストや画像から動画を作る |
| Lyria | テキストからBGM・音楽を作る |
ただし、全部を必ず使う必要はありません。
まずは、GeminiとNano Bananaだけで企画を作るところから始めます。
余裕がある人だけ、AudioLM、Veo、Lyriaを使って、動画や音声まで広げます。
今日の完成イメージ
このページで作るのは、完成したWebサイトそのものではありません。
まずは、Webサイトを作る前の企画セットを作ります。
| 完成物 | 内容 |
|---|---|
| 企画タイトル | 何の企画か分かる名前 |
| ターゲット | 誰に届ける企画か |
| コンセプト | どんな魅力がある企画か |
| 紹介文 | サイトに載せる説明文 |
| メイン画像案 | サイトの一番上に使う画像案 |
| 動画案 | 15秒〜30秒の紹介動画案 |
| サイト構成案 | どんな順番で見せるか |
つまり、今回作るものは次のようなものです。
企画の名前
企画の説明
サイトに載せる文章
画像のアイデア
動画のアイデア
Webサイトの流れ
ここまでできれば、次のページで実際にサイト制作へ進めます。
1. まず完成プロンプトを使う
最初から自分で全部考えるのは大変です。
まずは、完成しているプロンプトをコピーして使います。
Geminiを開いて、次のプロンプトをそのまま貼り付けてください。
あなたは、学生向けの企画制作を手伝うプロデューサーです。
これから、Webサイトにできる企画を一緒に考えたいです。
条件：
・初心者でも作れる企画にしてください
・学校、地域、お店、イベント、作品紹介のどれかに使える内容にしてください
・最後にWebサイト化しやすい内容にしてください
・文章、画像、動画に展開しやすい企画にしてください
以下の形式で、企画案を3つ出してください。
1. 企画タイトル
2. 誰に届ける企画か
3. 何を伝える企画か
4. サイトに載せるとよい内容
5. 画像にするとよい場面
6. 動画にするとよい場面
7. 初心者でも作りやすい理由
2. 出てきた企画から1つ選ぶ
AIから3つの企画案が出てきたら、その中から1つ選びます。
選ぶときは、難しそうなものよりも、自分が説明しやすいものを選びます。
おすすめのテーマは、次のようなものです。
| テーマ | 作りやすさ |
|---|---|
| 学校イベント紹介 | 作りやすい |
| カフェ紹介 | 作りやすい |
| サークル募集 | 作りやすい |
| 作品展示会 | 作りやすい |
| 地域イベント | 作りやすい |
| 架空の商品紹介 | 少し難しい |
| アプリ紹介 | 少し難しい |
迷ったら、次のどれかにしてください。
オープンキャンパス紹介サイト
放課後カフェ紹介サイト
学生作品展示会サイト
サークル体験会の告知サイト
地域フードイベント紹介サイト
3. 一部分だけ変更する
次に、AIが出した企画を自分用に少しだけ変更します。
全部変える必要はありません。
まずは、次の3つだけ変えます。
| 変更するもの | 例 |
|---|---|
| 企画名 | 放課後カフェマップ |
| ターゲット | 学校帰りに寄れる場所を探している学生 |
| 雰囲気 | 明るい、親しみやすい、少しおしゃれ |
Geminiに次のように入力します。
次の企画を少し変更してください。
企画名：
＿＿＿＿＿＿＿＿＿＿
ターゲット：
＿＿＿＿＿＿＿＿＿＿
雰囲気：
＿＿＿＿＿＿＿＿＿＿
以下の形式で作り直してください。
1. 企画タイトル
2. キャッチコピー
3. 企画の説明文
4. サイトに必要な見出し
5. メイン画像のアイデア
6. 15秒動画のアイデア
記入例
次の企画を少し変更してください。
企画名：
放課後カフェマップ
ターゲット：
学校帰りに友達と寄れる場所を探している学生
雰囲気：
明るい、親しみやすい、少しおしゃれ
以下の形式で作り直してください。
1. 企画タイトル
2. キャッチコピー
3. 企画の説明文
4. サイトに必要な見出し
5. メイン画像のアイデア
6. 15秒動画のアイデア
4. 結果を保存する
Geminiが出した結果は、消えないように保存します。
保存場所は、どれでも大丈夫です。
| 保存場所 | おすすめ度 |
|---|---|
| Googleドキュメント | おすすめ |
| Googleスプレッドシート | 企画を整理しやすい |
| メモアプリ | 簡単 |
| Notion | 使える人向け |
初心者は、Googleドキュメントで大丈夫です。
保存するときは、次の見出しを作って貼り付けます。
企画タイトル：
キャッチコピー：
企画の説明文：
サイトに必要な見出し：
メイン画像のアイデア：
15秒動画のアイデア：
ここまでできたら、まず1つ完成です。
小さくても、もう「企画のたたき台」ができています。
5. Nano Bananaでメイン画像を作る
次に、サイトの一番上に使うメイン画像を作ります。
Google Opalで、画像生成に使うモデルとして Nano Banana または Nano Banana Pro を選びます。
初心者は、まずNano Bananaで大丈夫です。
文字入りの複雑な画像を作りたい場合は、Nano Banana Proを使います。
画像生成用プロンプト
次のプロンプトをコピーして使います。
Webサイトのメインビジュアル用の画像を作ってください。
企画名：
＿＿＿＿＿＿＿＿＿＿
ターゲット：
＿＿＿＿＿＿＿＿＿＿
雰囲気：
＿＿＿＿＿＿＿＿＿＿
画像の内容：
＿＿＿＿＿＿＿＿＿＿
条件：
・横長16:9
・明るく見やすい
・Webサイトの一番上に使いやすい
・文字は入れない
・人物の顔ははっきり写さない
・余白を少し残す
・初心者向けの企画サイトに合う雰囲気
記入例
Webサイトのメインビジュアル用の画像を作ってください。
企画名：
放課後カフェマップ
ターゲット：
学校帰りに友達と寄れる場所を探している学生
雰囲気：
明るい、親しみやすい、少しおしゃれ
画像の内容：
夕方の街角にある小さなカフェ、テーブルの上にノートとドリンク、学生が放課後に立ち寄りたくなる雰囲気
条件：
・横長16:9
・明るく見やすい
・Webサイトの一番上に使いやすい
・文字は入れない
・人物の顔ははっきり写さない
・余白を少し残す
・初心者向けの企画サイトに合う雰囲気
6. 画像を見て一部分だけ直す
1回目で完璧な画像は出ないことがあります。
その場合は、全部作り直すのではなく、一部分だけ直します。
使うプロンプトはこれです。
全体の方向性は良いです。
残したい点：
＿＿＿＿＿＿＿＿＿＿
直したい点：
＿＿＿＿＿＿＿＿＿＿
追加したい条件：
＿＿＿＿＿＿＿＿＿＿
入れたくないもの：
＿＿＿＿＿＿＿＿＿＿
記入例
全体の方向性は良いです。
残したい点：
夕方のカフェの雰囲気は残してください。
直したい点：
人物の顔が目立ちすぎるので、後ろ姿や手元中心にしてください。
追加したい条件：
Webサイトのタイトルを後から入れやすいように、左側に余白を作ってください。
入れたくないもの：
英語の文字や看板の文字は入れないでください。
画像生成は、1回で終わりではありません。
作る
↓
見る
↓
直す
↓
使いやすくする
この流れが大切です。
7. Geminiでサイト構成を作る
次に、企画をWebサイトにするための構成を作ります。
Geminiに戻って、次のプロンプトを貼ります。
次の企画を紹介する1ページWebサイトの構成を作ってください。
企画タイトル：
＿＿＿＿＿＿＿＿＿＿
ターゲット：
＿＿＿＿＿＿＿＿＿＿
企画の説明：
＿＿＿＿＿＿＿＿＿＿
条件：
・初心者が作れるシンプルな構成
・1ページのLPサイト
・見出しは5つまで
・各見出しに短い説明文をつける
・最後に行動してほしいボタン文言も作る
出力形式：
1. ファーストビュー
2. 企画の説明
3. 魅力
4. 参加・利用方法
5. 最後の案内
6. ボタン文言
出てきた結果を保存する
出てきたサイト構成も、Googleドキュメントに保存します。
サイト構成
1. ファーストビュー
2. 企画の説明
3. 魅力
4. 参加・利用方法
5. 最後の案内
ボタン文言：
ここまでできると、企画がかなり形になってきます。
8. 必要ならAudioLMでナレーションを作る
ここからは、余裕がある人向けです。
企画紹介動画を作りたい場合は、まずナレーション文を作ります。
Geminiに次のように聞きます。
次の企画を15秒で紹介するナレーション原稿を作ってください。
企画タイトル：
＿＿＿＿＿＿＿＿＿＿
ターゲット：
＿＿＿＿＿＿＿＿＿＿
伝えたいこと：
＿＿＿＿＿＿＿＿＿＿
条件：
・15秒で読める長さ
・明るく聞き取りやすい
・難しい言葉を使わない
・最後に見てみたいと思える終わり方にする
その後、Google Opalで AudioLM を選び、作ったナレーション原稿を読み上げ用に使います。
AudioLMは、簡単に言うと次の役割です。
文章
↓
音声
つまり、ナレーションを声にするAIです。
9. 必要ならVeoで短い動画を作る
動画を作りたい場合は、Veo を使います。
Veoは、簡単に言うと次の役割です。
文章や画像
↓
動画
まずは、難しい動画ではなく、短い紹介動画を作ります。
15秒の短い動画
画像がゆっくり動く
雰囲気が伝わる
文字はあとから入れる
Veo用のプロンプト例です。
次の企画を紹介する15秒の動画を作ってください。
企画タイトル：
＿＿＿＿＿＿＿＿＿＿
動画の雰囲気：
＿＿＿＿＿＿＿＿＿＿
映したい場面：
＿＿＿＿＿＿＿＿＿＿
条件：
・15秒
・落ち着いたカメラワーク
・Webサイトに載せやすい
・文字は入れない
・人物の顔ははっきり写さない
・明るく前向きな印象
動画は重く考えなくて大丈夫です。
最初は、企画の雰囲気が伝わる短い映像を作れればOKです。
10. 必要ならLyriaでBGMを作る
Lyriaは、テキストから音楽を作るAIです。
簡単に言うと、次の役割です。
音楽のイメージ
↓
BGM
動画にBGMを入れたいときに使います。
Lyria用のプロンプト例です。
次の企画紹介動画に合うBGMを作ってください。
企画タイトル：
＿＿＿＿＿＿＿＿＿＿
雰囲気：
＿＿＿＿＿＿＿＿＿＿
使う場面：
15秒の紹介動画
条件：
・明るい
・前向き
・邪魔にならない
・ナレーションの後ろで流しやすい
・短いプロモーション動画向け
・歌詞なし
初心者は、BGMまで作れなくても大丈夫です。
まずは、文章と画像とサイト構成ができれば十分です。
このページの提出物
このページが終わったら、次のものを提出できる状態にします。
1. 企画タイトル
2. ターゲット
3. キャッチコピー
4. 企画の説明文
5. サイト構成
6. メイン画像
7. 画像を作ったプロンプト
8. 画像を直したプロンプト
9. 余裕があれば、ナレーション原稿
10. 余裕があれば、動画案
チェックリスト
できたところにチェックを入れてください。
| チェック | 内容 |
|---|---|
| Geminiで企画案を3つ出した | |
| 企画を1つ選んだ | |
| 企画名を自分用に変えた | |
| ターゲットを決めた | |
| キャッチコピーを作った | |
| 企画説明文を作った | |
| Nano Bananaでメイン画像を作った | |
| 画像を1回以上改善した | |
| Geminiでサイト構成を作った | |
| Googleドキュメントなどに保存した | |
| 余裕があればナレーション原稿を作った | |
| 余裕があれば動画案を作った |
全部できなくても大丈夫です。
まずは、上から7つできれば合格です。
やる気を保つコツ
AIを使う授業では、最初からすごいものを作ろうとすると止まりやすいです。
大事なのは、完成度よりも前に進むことです。
10点の完成
↓
30点に直す
↓
60点に整える
↓
最後に見せられる形にする
最初の出力が微妙でも大丈夫です。
AI制作は、1回で当てるゲームではありません。
出して、見て、直すゲームです。
このページのまとめ
このページでは、AIを使って企画を形にする流れを学びました。
- Geminiで企画案を作る。
- 企画を1つ選ぶ。
- 一部分だけ自分用に変更する。
- 結果を保存する。
- Nano Bananaでメイン画像を作る。
- 画像を見て改善する。
- Geminiでサイト構成を作る。
- 必要に応じてAudioLMで音声、Veoで動画、LyriaでBGMを作る。
- 最終的には、Webサイト制作につながる材料をそろえる。
次のページでは、この企画セットを使って、実際に紹介サイトの文章と構成を作っていきます。