縦の短い告知 SNS

通称：縦型ショート動画Vertical Promo

題材
アクセントの色
画面の比

見本の下の帯で、一時停止や好きな位置への移動ができます。題材を選ぶと店の名前・文言・色がまとめて替わり、名前と一言を打ち替えると、見本の動画と指示文に入ります。

最初の1秒で大きな一言を出して目を止め、内容を2カット見せ、最後に「プロフィールのリンクから」へ誘う12秒の縦長の動画です。リールやショートで、指が止まるかどうかを最初の一言に賭ける作りです。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# 作るもの（ここを書き換える）
- 製品・サービス：〈名前と、何をするものかを一言で〉
- 見る人：〈誰に向けた動画か〉
- 素材：〈ロゴ・画面のスクリーンショット・写真があれば添付する。なければ図形と文字で作る〉

# 動画の呼び名
一般に「縦型ショート動画」（Vertical Promo）と呼ばれる動画です。

# 作ってほしい動画
Vertical Promo（縦の短い告知。リール・ショート向け）。店「こむぎ堂」を知らせる 12秒の縦長の動画。最初の1秒で目を止め、内容を2つ見せ、最後にプロフィールのリンクへ誘う。

# カット割り
- 0.0〜3.0秒：画面全体をアクセントの色で塗り、白い大きな一言「焼きたて、朝6時。」を出す（0.05秒から 0.4秒。少し大きい状態から元の大きさへ）。最初の1秒のうちに目に入る大きさにする
- 2.9〜5.6秒：内容の1つめ。内容を表す形が 0.1秒ずつずれて出て、下に小さく番号「01」、大きく短い文
- 5.5〜8.2秒：内容の2つめ。形が 0.06秒ずつずれて出て、下に小さく番号「02」、大きく短い文
- 8.1〜12.0秒：最後のカード。店の名前「こむぎ堂」、「10月20日（火）オープン」、アクセントの色の帯に白い文字で行き先。すべて出そろってから 12秒まで、2秒以上止めて見せる

# 見た目
- 背景は明るい生成り（#f7f5f0）、文字は濃い灰色（#1f2937）、アクセントは #e8590c
- 一言は画面の短い辺の 9.5%（長いときは2行に折り返す）、内容の文字は 6.5%、店の名前は 8%
- 速さの変わり方は2種類にそろえる。出るときは cubic-bezier(0.22, 1, 0.36, 1)、カットの切り替えは 0.3秒のフェード（ease）。前のカットが消えきる 0.15秒前から次を出し、何もない画面を挟まない
- 横長の画面では、形と文字を左右に並べる

# 守ってほしいこと
- 縦長の画面では、上の 10% と下の 20% に文字を置かない（SNS のボタンや投稿の文字が重なるため）
- 最初の一言は 10字まで。店の名前は途中で折り返さない
- 形は図形で描く。写真があるときは、その写真に差し替えられるようにする

# 仕上がりの決まり（どの動画でも守る）
- 1つのカットに出す文字は 15字くらいまで。読める時間（1字 0.15秒＋1秒）を取ってから次へ進む
- 文字とロゴは、画面の端から 5% より内側に置く
- 速さの変わり方は、基本の2種類（出るとき・カットが切り替わるとき）を決めてそろえる。線を描く・光が横切るなど特別な動きだけ別にしてよい
- 色は、背景・文字・アクセントの3色を基本にする。グラデーションや光の効果を足しすぎない
- 最後のカード（名前と、次にしてほしいこと）は 2秒以上止めて見せる
- 音は付けない（付けるときは別に指定する）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは、最後のカードを止まった絵で見せる

# 出力
- 1つの HTML ファイルにまとめる（CSS と JavaScript も中に書く）。ライブラリと外部の画像は使わない
- 画面の比は 9 / 16。ウィンドウの大きさに合わせて、比を保ったまま縮む
- 開くと自動で1回再生し、最後のカードで止まる。全体の時間とアクセントの色は CSS 変数にまとめる
- mp4 にしたいときは、ブラウザで全画面にして画面収録する

リール・ショート・ストーリーズに載せる短いモーション動画を10種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。見本ははじめから SNS に合わせた比（リール・ショートは縦長 9:16、カルーセル風はフィードの 4:5、オープニングは横長 16:9）です。見本の下で題材（パン屋・美容室・教室・事務所など）を選ぶと文言と色がまとめて替わり、店の名前や日付を打ち替えると、見本の動画と指示文にそのまま入ります。

SNS向けの動画はどの型を選ぶか

SNS の動画は、流れてくる投稿の中で指を止めてもらえるかが最初の1秒で決まります。AI に「インスタ用の動画を作って」とだけ頼むと、ロゴや前置きから始まり、大事な文字が画面の下の投稿の文字に隠れる動画になりがちです。何を伝えたいか（知らせたいこと・日付・人を集めたい）で型を選び、カット割りと「上下の空ける幅」まで渡すと、狙った動画になります。

こんなとき 向いている型
新しいお店やメニューを、リールやショートで知らせたい縦の短い告知
オープンやセールの日付を、数日前から毎日知らせたいカウントダウン
ライブ配信の日時と、当日に話すことを知らせたいライブ配信の告知
アルバイトやパートを、フォロワーに向けて募集したい求人
品物を抽選で贈り、フォロワーを増やしたいプレゼント企画
働く人の顔ぶれや仕事の1日を見せて、求人の動画と組にしたいスタッフ紹介・1日密着動画（人を伝える）
新作や人気の品を、いくつか順に見せたいスワイプ風
人気の品やよくある相談を、順位をつけて紹介したいランキング
お店の豆知識を、見る人に考えてもらいながら伝えたいクイズ
終わった催しの様子と、次の回の予定を伝えたい催しのダイジェスト
YouTube の動画の頭に、毎回同じチャンネル名を出したいチャンネルのオープニング

どの型でも守ること

  1. 最初の1秒で、何の投稿かわかるようにする。ロゴや前置きから始めず、いちばん伝えたい一言を大きく出します。
  2. 縦長の画面では、上 10%・下 20% に文字を置かない。SNS のボタンや投稿の文字、アカウント名が重なります。CSS の cqh（画面の箱の高さの 1%）で余白を取ると、比を変えても位置がずれません。
  3. 1つのカットで言うことは1つ。文字は 15字くらいまでにし、読める時間（1字 0.15秒＋1秒）を取ってから次へ進みます。
  4. 最後は「次にしてほしいこと」を見せて2秒以上止める。動画の中のリンクは押せないので、「プロフィールのリンクから」のように行き先を言葉で伝えます。
  5. 動きを控える設定の人には、最後のカードを止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

スマホで HTML を開き、画面収録した動画を投稿します。iPhone ならコントロールセンターの画面収録、Android なら「スクリーンレコード」で録れます。録ったあと、写真アプリで前後の余分なところを切ってから投稿します。パソコンで録るときは、ブラウザの幅を縦長にしてから録ります。

SNS のボタンや投稿の文字が、動画の上に重なるからです。リールやショートでは、上にアカウント名や閉じるボタン、下に投稿の文章・いいね・コメントのボタンが出ます。ここでは上 10%・下 20% を空けています。アプリによって重なる場所が少しずつ違うので、大事な文字は真ん中寄りに置きます。

入れられます。指示文の「この形で作る」には、最初に「作るもの」の段があります。そこにお店の名前と見る人を書き、ロゴや商品の写真を添付して渡します。見本のパンや席の図形が、添付した写真に置き換わります。

作れます。スワイプ風の型は、1枚ずつが同じ大きさの画面で作られています。見本の下の帯で、それぞれの1枚が止まっている時刻に送り、画面を撮ると、カルーセル投稿の1枚ずつの画像になります。AI に頼むときは「同じ5枚を、1080×1350 の静止画として書き出せる形にもする」と書き足します。