ロゴのオープニング ブランド

通称：ロゴアニメーションLogo Reveal

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

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

ロゴの形が描かれ、名前が左から現れ、ひとことが添えられて止まる6秒の動画です。動画の頭やサイトのオープニングに入れる、短い名乗りの役目をします。

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

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

# 動画の呼び名
一般に「ロゴアニメーション」（Logo Reveal）と呼ばれる動画です。

# 作ってほしい動画
Logo Reveal（ロゴのオープニング）。「こむぎ堂」のロゴが現れて止まる 6秒の動画。動画の頭やサイトのオープニングに入れる短いもの。

# カット割り
- 0.0〜1.3秒：ロゴの形を描く。アクセントの色の輪（太い線の円）が少し小さい状態から元の大きさへ（0.2秒から 0.8秒）。輪の中の小さなひし形が、回りながら大きくなって収まる（0.7秒から 0.8秒）
- 1.3〜3.1秒：名前「こむぎ堂」が、左から右へ窓が開くように現れる（1.3秒から 0.9秒）。名前の下にアクセントの色の細い線を左から伸ばす（2.0秒から 0.7秒）。その下にひとこと「毎朝、焼きたて。」を下から浮かせて出す（2.4秒から 0.7秒）
- 3.1〜6.0秒：そのまま止めて見せる（約3秒）

# 見た目
- 背景は明るい生成り（#f7f5f0）、文字は濃い灰色（#1f2937）、アクセントは #e8590c
- 横長の画面では、ロゴの形を左・名前を右に並べる。縦長と正方形では、ロゴの形を上・名前を下に並べる
- 名前は画面の短い辺の 8%、ひとことは 3.6%。ロゴの形の大きさは 22%
- 速さの変わり方は、すべて cubic-bezier(0.22, 1, 0.36, 1) にそろえる

# 守ってほしいこと
- ロゴの形は、円とひし形のような単純な図形で描く。実在のロゴを真似しない（ロゴの画像を添付したときは、その画像に差し替える）
- 光らせる・はずませる・回しすぎる、を足さない。動くのは最初の3秒だけにする

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

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

会社やお店の名前・考え方・仕事ぶりを伝える短いモーション動画を10種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。見本の下で名前やひとことを打ち替えると、見本の動画と指示文にそのまま入ります。

ブランド動画はどの型を選ぶか

AI に「ブランドムービーを作って」とだけ頼むと、光やきらめきを重ねた派手な動画になりがちです。ブランドの動画で残したいのは、名前と、どんな考えで仕事をしているかです。何を残したいか（名前・見た目の決まり・考え方・仕事の幅・節目・変わったこと・連絡先）で型を選び、カット割りと動きの量まで渡すと、落ち着いた動画になります。

こんなとき 向いている型
動画の頭やサイトのオープニングで、名前を短く名乗りたいロゴのオープニング
包装紙や紙袋の柄に使っているロゴの形を、名前と結びつけて覚えてもらいたいロゴの模様から名乗る
新しく決めた色・書体・ロゴの形を、まとめてお披露目したいブランドの色と形
会社やお店の考え方・ものづくりの姿勢を伝えたい考え方を伝える
名前にこめた意味を伝えて、名前ごと覚えてもらいたい名前の由来
デザイン・写真・印刷などの仕事の幅を、テンポよく見せたいショーリール
創業や開店の周年を、感謝の言葉といっしょに伝えたい周年のお祝い
ロゴや名前を変えたことを、前の名前で覚えている人にも伝えたいロゴが新しくなったお知らせ
ほかのお店や会社といっしょに作ったものを知らせたいコラボのお知らせ
動画の最後に、名前と連絡先を残して締めたいエンドカード

どの型でも守ること

  1. 名前は最後に、止めて見せる。動いている間は覚えてもらえません。名前を出したら2秒以上止めます。
  2. 動きの種類を絞る。つなぎ方と速さの変わり方は1〜2種類にそろえます。光らせる・はずませるを足すと、名前より動きに目が行きます。
  3. 1つのカットで見せるのは1つ。文は1行ずつ、言葉は2〜3字にし、図形と文字を同じカットに詰め込みません。
  4. 大きさは画面の箱に合わせて決める。CSS の cqmin（箱の短い辺の 1%）で決め、横長と縦長で並べ方を変えると、どの比でも崩れません。
  5. 動きを控える設定の人には、最後のカードを止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

入れられます。指示文の「この形で作る」には、最初に「作るもの」の段があります。そこに会社の名前を書き、ロゴの画像（できれば SVG か背景が透明な PNG）を添付して渡します。見本の円やひし形の部分が、添付したロゴに置き換わります。

動画の頭に入れるなら、5〜6秒くらいが目安です。動きは最初の3秒に集め、残りは止めて名前を見せます。毎回の動画の頭に入れるものなので、長くすると見る人を待たせます。サイトのオープニングに使うときは、さらに短くしてもかまいません。

入れられます。見本の図形のカットを、作品の写真に置き換えるよう頼みます。写真を添付し、「図形のカットを、添付した写真に差し替えて。つなぎ方とカットの長さは同じまま」と書き添えると、テンポを保ったまま実績の動画になります。

名前と、見た人が次に使う連絡先（URL・電話番号）の3つに絞ります。住所・営業時間・SNS まで並べると、5秒では読み切れません。YouTube に載せるなら、横長の画面の右半分を終了画面の要素（次の動画・チャンネル登録）のために空けておくと、文字と重なりません。