場面3：ストーリーズ用の縦長告知画像を作る | 画像生成AI活用：視覚表現とコンセプト設計の応用 | AI活用概論

この節で学ぶこと

前の節では、SNS投稿に使える1:1の正方形画像を作りました。

今回は、Instagramストーリーズ、LINE告知、スマホ用チラシなどで使える9:16の縦長画像を作ります。

この節で新しく習得する技術は、次の1つです。

9:16の縦長画像を、スマホで見やすい告知画像として設計する

正方形画像は、SNSの投稿一覧やフィードで見やすい形でした。

一方、縦長画像はスマホ画面いっぱいに表示されます。

そのため、見る人の目に入りやすく、イベント告知やお知らせに向いています。

なぜ縦長画像を作るのか

専門学生の皆さんも、スマホで情報を見ることが多いと思います。

たとえば、次のような場面です。

場面	縦長画像が使える理由
Instagramストーリーズ	画面いっぱいに表示される
LINEでのお知らせ	スマホで見やすい
学校イベントの告知	友達に共有しやすい
サークル募集	雰囲気を一瞬で伝えやすい
作品展示の案内	ポスターのように見せやすい
アルバイト先のキャンペーン	店舗SNSやLINE配信に使いやすい

縦長画像は、スマホで見る人に向けた「小さなポスター」のようなものです。

ただし、画像生成AIで縦長画像を作るときは、気をつけることがあります。

それは、上下の余白を意識することです。

ストーリーズでは、上部や下部にアプリ側のボタン、アカウント名、返信欄などが表示されることがあります。

そのため、大事な情報を画面の端に置きすぎると、見えにくくなる場合があります。

今回作るもの

今回は、次のような縦長告知画像を作ります。

項目	内容
作るもの	ストーリーズ用の縦長告知画像
画像サイズ	9:16
使う場所	Instagramストーリーズ、LINE告知、スマホ用チラシ
テーマ	学校イベントの告知
見せる相手	クラスメイト、友人、学校関係者
目的	イベントの楽しそうな雰囲気を伝える
注意点	重要な文字は後から入れる。上下端に大事な情報を置かない

今回のテーマ

授業では、例として次のテーマを使います。

放課後ミニフードフェス

これは架空の学校イベントです。

実在のイベントではないため、開催日、場所、料金などを勝手に画像内に入れないようにします。

今回作る画像では、次のような雰囲気を目指します。

放課後の学校で、友達と軽食や屋台を楽しめそうな、明るく楽しいイベント告知画像

正方形画像と縦長画像の違い

前回作ったSNS投稿画像と、今回作る縦長画像の違いを整理します。

項目	1:1正方形画像	9:16縦長画像
主な用途	Instagram投稿、Threads投稿	ストーリーズ、LINE告知、スマホチラシ
見られ方	投稿一覧やフィードで見る	スマホ画面いっぱいで見る
構図	中央に主役を置きやすい	上・中央・下の流れを作りやすい
大切なこと	一瞬で雰囲気が伝わる	上下の余白と視線の流れ
文字の入れ方	投稿文で補足しやすい	画像上に短い見出しを重ねることが多い

縦長画像では、見る人の視線が上から下へ流れやすいです。

そのため、次のような構成が使いやすいです。

上：タイトルを入れる余白
中央：イベントの雰囲気が伝わるメインビジュアル
下：日時・場所・CTAを入れる余白

ただし、AIに文字を直接入れさせるのではなく、今回は文字を後から入れられる背景画像を作ります。

1. 縦長告知画像で大切な3つのこと

1. 上・中央・下の役割を分ける

縦長画像は、画面が縦に長いので、エリアごとに役割を分けると使いやすくなります。

上部：
タイトルやキャッチコピーを入れる場所

中央：
イベントの雰囲気を見せる場所

下部：
日時、場所、申し込み案内などを入れる場所

画像生成AIに指示するときも、この構造を伝えると作りやすくなります。

2. 重要な情報は端に置かない

ストーリーズでは、画面の上や下にアプリの表示が重なる場合があります。

そのため、タイトルやCTAを一番端に置くと、見えにくくなることがあります。

避けたい配置：
タイトルが一番上ギリギリ
CTAが一番下ギリギリ
人物や商品が端で切れている

使いやすい配置：
上部に少し余白を残す
下部にも安全な余白を残す
中央にメインビジュアルを置く

このような考え方を、セーフエリアと呼びます。

セーフエリアとは、文字や重要な要素を置いても見切れにくい安全な場所のことです。

3. 文字を後から入れる前提で作る

縦長告知画像では、タイトルや日時を入れたくなります。

しかし、画像生成AIに日本語文字まで入れさせると、文字が崩れる場合があります。

そのため、授業では次のように分けます。

AIで作るもの：
雰囲気のある背景画像

Google SlidesやCanvaで後から入れるもの：
タイトル、日時、場所、参加方法、QRコードなど

この方が、実際に使える告知画像になります。

2. まずは設計メモを作る

今回も、いきなり画像を作るのではなく、先に設計メモを作ります。

ワークシート1：縦長告知画像の設計メモ

告知テーマ：

使う場所：

見せたい相手：

伝えたいこと：

主役：

背景：

雰囲気：

色：

上部に入れたいもの：

中央に見せたいもの：

下部に入れたいもの：

入れたくないもの：

画像サイズ：

記入例

告知テーマ：
放課後ミニフードフェス

使う場所：
Instagramストーリーズ、LINE告知

見せたい相手：
クラスメイト、友人、学校関係者

伝えたいこと：
放課後に気軽に立ち寄れて、友達と楽しめるイベントであること

主役：
学校の中庭に並ぶ小さなフード屋台と、楽しそうな学生のシルエット

背景：
夕方の学校、中庭、やわらかいライト、屋台

雰囲気：
明るい、楽しい、青春感、温かい、少しワクワクする

色：
夕方のオレンジ、白、ネイビー、暖かいライト

上部に入れたいもの：
後からイベントタイトルを入れる余白

中央に見せたいもの：
屋台と学生が集まる楽しい雰囲気

下部に入れたいもの：
後から日時、場所、参加案内を入れる余白

入れたくないもの：
画像内の文字、実在ロゴ、人物の顔のアップ、開催日や料金などの架空情報

画像サイズ：
9:16

3. 設計メモをプロンプトに変える

次に、設計メモをもとにNano Bananaへ入力するプロンプトを作ります。

プロンプト例

InstagramストーリーズやLINE告知で使う、9:16の縦長告知画像を作成してください。

テーマは、架空の学校イベント「放課後ミニフードフェス」です。

見せる相手は、クラスメイト、友人、学校関係者です。
放課後に気軽に立ち寄れて、友達と楽しめるイベントであることが伝わる画像にしてください。

中央には、学校の中庭に並ぶ小さなフード屋台と、楽しそうに集まる学生のシルエットを配置してください。

背景は、夕方の学校、中庭、やわらかいライト、屋台のある雰囲気にしてください。

全体の雰囲気は、明るく、楽しく、青春感があり、温かく、少しワクワクする印象にしてください。

色は、夕方のオレンジ、白、ネイビー、暖かいライトの色を中心にしてください。

上部には、後からイベントタイトルを入れられる余白を作ってください。
下部には、後から日時、場所、参加案内を入れられる余白を作ってください。

重要な要素は画面の端に置かず、上下に安全な余白を残してください。

画像内に文字は入れないでください。
実在する学校名、企業ロゴ、アプリロゴは入れないでください。
人物の顔ははっきり映さず、シルエットや後ろ姿中心にしてください。
開催日、料金、場所などの具体的な情報は入れないでください。

ポイント解説

このプロンプトには、縦長画像ならではの指示が入っています。

指示	役割
9:16の縦長告知画像	ストーリーズ用にする
上部に余白	タイトルを後から入れるため
下部に余白	日時や案内を後から入れるため
中央にイベントの雰囲気	一番見せたい部分を中央に置くため
重要な要素を端に置かない	スマホ表示で見切れにくくするため
文字を入れない	文字崩れを避けるため
具体的な開催情報を入れない	架空情報の混入を避けるため

4. Nano Bananaで画像を生成する

ここから実際に手を動かします。

作業手順

1. Google AI Studioを開く
2. Nano Bananaを使える画像生成モデルを選ぶ
3. プロンプトを貼り付ける
4. 画像サイズを9:16に指定する
5. 画像を生成する
6. 生成された画像を保存する

画像サイズを画面上で選べない場合は、プロンプト内で「9:16の縦長」と明記します。

1回目は、完璧でなくて大丈夫です。

まずは、縦長画像として使いやすいかを確認します。

5. 生成画像をチェックする

生成された画像が、ストーリーズやLINE告知で使いやすいか確認します。

チェックリスト

確認項目	○ / △ / ×	メモ
9:16の縦長になっている
上部にタイトル用の余白がある
中央にイベントの雰囲気がある
下部に案内用の余白がある
重要な要素が端に寄りすぎていない
スマホで見ても雰囲気が伝わる
画像内に変な文字がない
実在ロゴのようなものがない
人物の顔がはっきり映りすぎていない
架空の日時や料金が入っていない

ワークシート2：生成画像の振り返り

良かった点：

気になった点：

ストーリーズで使えそうな理由：

改善したいこと：

記入例

良かった点：
夕方の学校イベントらしい雰囲気が出ていた。
中央に屋台があり、楽しそうな印象が伝わった。

気になった点：
上部の余白が少なく、タイトルを入れにくい。
下部に謎の文字のようなものが入っていた。
人物の顔が少しはっきりしていた。

ストーリーズで使えそうな理由：
スマホで見たときにイベント感が伝わりそう。
背景として使い、あとから文字を入れれば告知画像になりそう。

改善したいこと：
上部と下部の余白を増やす。
画像内の文字をなくす。
人物をシルエット中心にする。

6. 改善プロンプトを作る

1回目の画像を見て、改善プロンプトを作ります。

改善プロンプト例

全体の方向性は良いです。

夕方の学校イベントらしい雰囲気と、屋台の楽しそうな感じはそのまま残してください。

ただし、上部にイベントタイトルを入れたいので、上部の余白をもっと広くしてください。

下部にも日時や場所を入れたいので、下部の余白を広くしてください。

画像内に入っている読めない文字や看板の文字をすべてなくしてください。

人物の顔が少しはっきりしているため、学生はシルエットや後ろ姿中心にしてください。

重要な要素を画面の端に置かず、スマホ表示で見やすい安全な余白を残してください。

ワークシート3：自分用の改善プロンプト

残したい点：

直したい点：

追加したい条件：

改善プロンプト：

7. 2回目を生成する

改善プロンプトを使って、もう一度画像を生成します。

生成したら、1回目と2回目を比較します。

比較表

比較項目	1回目	2回目
上部の余白
下部の余白
中央の見せ場
文字の少なさ
人物の自然さ
スマホでの見やすさ

振り返り

1回目より良くなった点：

まだ気になる点：

上部に入れるタイトル：

下部に入れる情報：

次に直すなら何を直すか：

8. Google SlidesやCanvaで文字を入れる

画像ができたら、Google SlidesやCanvaで文字を入れます。

入れる文字の例

放課後ミニフードフェス

友達と、ちょっと寄り道。

日時：〇月〇日
場所：学校中庭
参加自由

ただし、この教材では架空イベントとして扱うため、実際に使う場合は、日時・場所・参加条件を必ず確認してから入れます。

文字を入れる場所

縦長告知画像では、次のように配置すると見やすいです。

上部：
イベントタイトル

中央：
画像のメインビジュアル

下部：
日時、場所、参加案内、CTA

文字入れのコツ

項目	ポイント
タイトル	大きく、短くする
サブコピー	1行から2行にする
日時・場所	小さくしすぎない
CTA	「詳しくはこちら」「参加する」など短くする
色	背景としっかり差をつける
余白	画面端に寄せすぎない

9. 専門学生におすすめの使い方

縦長画像は、学校生活や仕事の場面でかなり使えます。

使える場面

場面	使い方
学校イベント	ストーリーズで告知する
サークル募集	活動の雰囲気を伝える
展示会案内	作品展示の告知に使う
アルバイト先	新メニューやキャンペーン告知に使う
就職活動	ポートフォリオ更新のお知らせに使う
友人との企画	小さなイベントの案内画像に使う

思ってもみない便利な使い方

1. クラス内の連絡を見やすくする

ただ文章で送るより、縦長画像にすると見やすくなることがあります。

例です。

明日の集合場所
持ち物リスト
発表会の順番
グループワークの案内

背景画像をAIで作り、文字をGoogle Slidesで入れるだけでも、共有しやすくなります。

2. アルバイト先のストーリーズ案を作る

飲食店やカフェで働いている場合、ストーリーズ投稿案を作れます。

雨の日限定メニューのお知らせ
季節のドリンク紹介
テイクアウトできます
本日空席あります

これを画像案として見せると、店長や担当者に提案しやすくなります。

3. 自分の作品展示を告知する

授業で作った作品、卒業制作、個人制作をストーリーズで告知できます。

作品展示のお知らせ
制作過程の紹介
ポートフォリオ更新
展示まであと3日

完成作品の写真がなくても、先に告知用の雰囲気画像を作ることができます。

10. 実習課題

課題内容

自分が告知したいテーマを1つ決めて、9:16の縦長告知画像を作ってください。

テーマ例

番号	テーマ
1	学校イベントの告知
2	サークル募集
3	作品展示のお知らせ
4	アルバイト先の新メニュー紹介
5	ポートフォリオ更新のお知らせ
6	クラス内連絡を見やすくする画像
7	自分で決めたテーマ

提出するもの

1. 告知テーマ
2. 1回目のプロンプト
3. 1回目の生成画像
4. 改善プロンプト
5. 2回目の生成画像
6. 後から入れる文字案
7. 改善して良くなった点
8. まだ直したい点

提出テンプレート

告知テーマ：

使う場所：

見せたい相手：

1回目のプロンプト：

1回目の画像を見て良かった点：

1回目の画像で気になった点：

改善プロンプト：

2回目の画像を見て良くなった点：

後から入れる文字案：

まだ直したい点：

11. この節のまとめ

この節では、InstagramストーリーズやLINE告知に使える9:16の縦長画像を作りました。

大切なポイントは、次の通りです。

縦長画像は、スマホ画面いっぱいに表示される。
ストーリーズやLINE告知では、9:16が使いやすい。
縦長画像は、上・中央・下の役割を分けると作りやすい。
上部にはタイトル用の余白を作る。
中央には一番見せたいビジュアルを置く。
下部には日時や案内を入れる余白を作る。
重要な情報は画面端に置きすぎない。
画像内の文字はAIに入れさせず、後から入れると安全。
架空イベントの場合、日時や場所などの情報をAIに勝手に作らせない。
作った画像は、学校イベント、サークル募集、作品展示、アルバイト先の告知にも使える。

次の節では、アルバイト先や地域のお店を紹介する画像を作ります。

ただきれいな画像を作るのではなく、「お店の雰囲気」や「商品が欲しくなる感じ」をどう画像で伝えるかを学びます。