アプリの紹介（Apple 風） 紹介・プロモーション

通称：アプリ紹介動画App Promo

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

見本の下の帯で、一時停止や好きな位置への移動ができます。名前と一言を変えると、見本の動画と指示文に入ります。

大きな一言で始まり、スマホの画面で使っている様子を2つ見せ、アプリの名前で終わる14秒の動画です。余白を広く取り、1カットに1つのことだけを言うので、落ち着いた上質な印象になります。

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

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

# 動画の呼び名
一般に「アプリ紹介動画」（App Promo）と呼ばれる動画です。

# 作ってほしい動画
App Promo（アプリの紹介。Apple の製品紹介のような落ち着いた雰囲気）。アプリ「かけいぼ」を紹介する 14秒の動画。

# カット割り
- 0.0〜3.8秒：大きな一言「毎日の家計を、3秒で。」を下から浮かせて出す（0.3秒から 0.8秒かけて）
- 3.8〜10.6秒：スマホの枠が下から上がってくる（3.9秒から 0.9秒）。画面の中に記録の行が3本、0.2秒ずつずれて出る。上に1つめの説明（4.6〜7.6秒）、続けて2つめの説明（7.7秒から）。グラフの棒4本が 0.12秒ずつずれて下から伸びる（7.8秒から）
- 10.6〜14.0秒：最後のカード。アプリのアイコン（アクセントの色の角丸の四角）、名前「かけいぼ」、配信先。14秒まで止めて見せる

# 見た目
- 背景は明るい生成り（#f7f5f0）、文字は濃い灰色（#1f2937）、アクセントは #2563eb
- 文字は太めのゴシック。一言は画面の短い辺の 8%、説明は 4.2%
- 速さの変わり方は、出るとき cubic-bezier(0.22, 1, 0.36, 1)、カットの切り替えは 0.4秒のフェード

# 守ってほしいこと
- スマホの画面の中は、図形（線と棒）で描く。実在のアプリの画面を真似しない
- 1カットで言うことは1つ。説明の文が2つ同時に出ないようにする

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

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

製品やサービスを紹介する短いモーション動画を12種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。見本の下で名前や一言を打ち替えると、見本の動画と指示文にそのまま入ります。

紹介・プロモーション動画はどの型を選ぶか

AI に動画を頼むとき、「かっこいい紹介動画を作って」の一言では、尺も文字の量もモデル任せになり、文字を詰め込んだ慌ただしい動画になりがちです。何を見せたいか（使っている様子・できること・製品の工夫・まだ見せないもの・モノの形・お得な条件・日付と場所・前と後の違い・ほかとの違い・料金・間取り）で型を選び、カット割り（何秒から何秒に何を出すか）まで渡すと、狙った動画になります。

こんなとき 向いている型
アプリや Web サービスの使っている様子を見せたいアプリの紹介（Apple 風）
お店・工務店・教室など、形のないサービスを紹介したいサービスの紹介
製品の工夫を、形のどこのことかと結びつけて見せたい製品のこだわり（番号で指す）
新しい機能やプランの公開を先に知らせたい新機能の予告
新製品を、形を主役にして発表したい製品の発表
期間限定の割引や特典を、条件まで含めて知らせたいキャンペーンの告知
マルシェ・相談会・勉強会の日付と場所を知らせたいイベントの告知
新しいお店や医院のオープンを知らせたい新しいお店のオープン
リフォームや手入れの前と後を、同じ画面で比べて見せたいビフォーアフター
よくあるやり方との違いを、表で並べて見せたいほかと比べて見せる
料金のプランを並べ、おすすめを示したい料金プランの紹介
部屋・貸店舗・貸別荘の間取りと条件を見せたい物件の紹介

どの型でも守ること

  1. 1つのカットで言うことは1つ。文字は 15字くらいまでにし、読める時間（1字 0.15秒＋1秒）を取ってから次へ進みます。
  2. 最後のカードは2秒以上止める。名前と、次にしてほしいこと（ダウンロード・相談・予約）を残して終わります。
  3. 大きさは画面の箱に合わせて決める。CSS の cqmin（箱の短い辺の 1%）で決めると、横長・縦長・正方形のどれに変えても崩れません。
  4. 色は3色を基本にする。背景・文字・アクセントの3色にし、グラデーションや光の効果を足しすぎないようにします。
  5. 動きを控える設定の人には、最後のカードを止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

いちばん手軽なのは、ブラウザで全画面にして画面収録することです。Mac なら Shift＋Command＋5、Windows なら Win＋Alt＋R で録れます。決まった大きさの mp4 を何本も作るなら、AI に「Remotion で書いて」と頼み、書き出しまでを任せる方法もあります。

作れますが、仕上がりがモデル任せになります。尺・カット割り・文字の量・色を書かないと、文字を詰め込んだり、最後の名前がすぐ消えたりしがちです。ここの指示文は、カットごとに何秒から何を出すかと、どの動画でも守る「仕上がりの決まり」を書いています。

入れられます。指示文の「この形で作る」には、最初に「作るもの」の段があります。そこに製品の名前と見る人を書き、ロゴや画面のスクリーンショットを添付して渡します。見本の図形の部分が、添付した画像に置き換わります。

使えます。同じ場所・同じ向きから撮った2枚を添付し、「部屋の絵を、添付した施工前と施工後の写真に差し替えて。線の動きと時間は同じまま」と書き添えます。2枚の大きさと向きがそろっていないと、線が動いたときにどこが変わったのかがわかりにくくなるので、撮るときにそろえておきます。