キネティック・タイポグラフィ 文字で見せる

通称：キネティックタイポグラフィKinetic Typography

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

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

短い言葉が、大きさ・位置・向きを変えながら次々に飛び込み、1つの文になる10秒の動画です。「小さな」は小さく、「大きな」は大きく出すように、言葉の意味と動きをそろえるのが要です。

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

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

# 動画の呼び名
一般に「キネティックタイポグラフィ」（Kinetic Typography）と呼ばれる動画です。

# 作ってほしい動画
Kinetic Typography（キネティック・タイポグラフィ。文字そのものを動かして見せる動画）。「小さな町の」「大きな」「夏まつり。」の3つの言葉が次々に飛び込み、1つの文になる 10秒の動画。言葉の意味と動きをそろえる。

# カット割り
- 0.2〜1.2秒：「小さな町の」が、小さく（0.3倍）左から入ってきて、元の大きさで止まる（小さいものは小さく出す）
- 1.6〜2.6秒：「大きな」が、3倍の大きさから少し傾いた状態で縮んで、元の位置に収まる（大きいものは大きく出す）
- 3.0〜3.9秒：「夏まつり。」が、上から傾いて落ちてきて止まる。いちばん大きく、アクセントの色にする。4.2秒に一度だけ 1.08倍に弾む
- 6.0〜10.0秒：下に小さく添え書き（日付と場所など）を出して、文が完成した状態で 10秒まで止めて見せる
- 横長の画面では「小さな町の」を1行目、「大きな夏まつり。」を2行目に並べる。縦長と正方形では3行に分ける

# 見た目
- 背景は黒に近い紺（#0f1115）、文字は白に近い灰色（#f3f4f6）、アクセントは #e8590c
- 文字の大きさは画面の短い辺に対して、1つめ 7%、2つめ 10%、強調する言葉 15%。太さも、強調する言葉をいちばん太くする
- 速さの変わり方は、言葉が入るときの cubic-bezier(0.22, 1, 0.36, 1) にそろえる。強調する言葉が弾むときだけ ease-in-out にする

# 守ってほしいこと
- 言葉は折り返さない。いちばん長い言葉でも、画面の端から 5% より内側に収まる大きさにする
- 動かすのは transform と opacity だけ。同時に動く言葉は1つにする

# 仕上がりの決まり（どの動画でも守る）
- 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への指示文・コードを載せています。見本の下で題材を選ぶと文言と色がまとめて替わり、言葉や日付を打ち替えると、見本の動画と指示文にそのまま入ります。

文字で見せる動画はどの型を選ぶか

文字だけの動画は、素材を用意しなくても作れるぶん、「文字をかっこよく動かして」の一言で頼むと、全部の文字が回ったり弾んだりして、何を読めばよいかわからない動画になりがちです。何を伝えたいか（一言のキャッチコピー・歌詞・問いかけ・和の便り・大事な一語・日時と場所・お客様の声・協力者の名前）で型を選び、どの言葉をいつ・どう動かすかまで渡すと、読める動画になります。

こんなとき 向いている型
短いキャッチコピーを、目に留まる動きで見せたいキネティック・タイポグラフィ
テーマソングや社歌の歌詞を、拍に合わせて見せたい歌詞に合わせる
相談の仕事の入り口で、問いかけるように話しかけたい1字ずつ打つ
和の店や宿の季節の便りを、縦書きで落ち着いて見せたい縦書きで流す
「こんな人に」「こんなときに」をいくつか見せて、自分のことだと思ってもらいたい言葉が入れ替わる
文の中のいちばん大事な一語に、目を向けさせたいマーカーを引く
よくある思い込みを、お店の考え方でひっくり返したい消して書き直す
イベント・セール・休業の日時と場所を知らせたい告知カード
営業時間や臨時休業を、店頭の画面にくり返し出したい営業案内サイネージ（お店・サイネージ）
お客様の声や名言を、名前と出どころを添えて見せたい一言を大きく見せる
記念の動画の最後に、協力してくれた人の名前を流したい名前を流す

どの型でも守ること

  1. 同時に動かす言葉は1つ。前の言葉が止まってから次を動かすと、目が迷いません。
  2. 強調する言葉は1つに絞る。大きさ・太さ・色を変えるのは、いちばん伝えたい言葉だけにします。
  3. 文字は折り返さない大きさにする。CSS の cqmin（画面の箱の短い辺の 1%）で大きさを決め、いちばん長い言葉でも画面の内側に収まるようにします。
  4. 読み終わってから止める時間を取る。文ができた瞬間・告知が組み上がった瞬間に終わらせず、2秒以上止めて見せます。
  5. 動きを控える設定の人には、完成した文字を止まった絵で見せる。エンドロールは流さずに、全部の名前を1枚に並べます。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

付けられます。指示文では、1拍の秒数（BPM 120 なら 0.5秒）と「何拍目に何行目を出すか」を決めています。曲のテンポに合わせて拍の秒数だけを変えれば、全部の行の切り替えが一緒にずれます。動画編集のアプリで、音と映像の頭をそろえて重ねてください。

見本の欄で打てる字数までなら、どの画面の比でもはみ出しません。文字の大きさを画面の箱の短い辺に対する割合（cqmin）で決め、字数の上限との掛け算が画面の内側に収まるようにしています。もっと長い言葉を使うときは、指示文の文字の大きさを小さくするか、言葉を2つに分けてください。

歌詞には著作権があるので、許しを得ずに使って公開することはできません。見本の歌詞は、この見本のために作った短い詞です。自作の詞や、権利を持っている社歌・校歌・テーマソングで作ってください。

載せてよいかをご本人に確かめ、言葉は言い回しを変えずに使います。名前の書き方（「60代・常連のお客様」のような年代と呼び方）も、了承を得た形にします。アンケートから選んだときは、いつのアンケートかを画面の隅に出しておくと、作った声ではないことが伝わります。見本の声は、この見本のために作った架空のものです。