3ステップの使い方 説明

通称：ハウツー動画How-to Steps

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

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

「◯◯の使い方」と題を出し、手順を1つずつ、番号と短い文と簡単な図で見せ、最後に流れをまとめる17秒の動画です。ネット予約・申し込みフォーム・アプリの操作など、手順が3つに収まる説明に向きます。

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

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

# 動画の呼び名
一般に「ハウツー動画」（How-to Steps）と呼ばれる動画です。

# 作ってほしい動画
How-to Steps（3ステップの使い方）。「ネット予約の使い方」を、手順を1つずつ見せて説明する 17秒の動画。

# カット割り
- 0.0〜3.6秒：小さな前置きを 0.2秒から、続けて大きく「ネット予約の使い方」を下から浮かせて出す（0.4秒から 0.8秒かけて）
- 3.6〜6.8秒：手順1。アクセントの色の丸に番号「1」と短い文。下に簡単な図。4.9秒に、図の中の1か所がアクセントの色に変わる
- 6.8〜10.0秒：手順2。番号「2」と短い文。下に図。8.1秒に、図の中の1か所が選ばれた色に変わる
- 10.0〜13.2秒：手順3。番号「3」と短い文。下に図。11.3秒に、図の中のボタンが一度だけ押し込まれる
- 13.2〜17.0秒：最後のカード。3つの手順を短い語にした流れを 0.1秒ずつずらして出し、名前「みどり歯科」と、次にしてほしいこと。全部が出そろってから 2秒以上、17秒まで止めて見せる

# 見た目
- 背景は明るい生成り（#f7f5f0）、文字は濃い灰色（#1f2937）、図の面は白、アクセントは #0f766e
- 題は画面の短い辺の 7%、手順の文は 5.5%、番号の丸は 9%
- 速さの変わり方は、出るとき cubic-bezier(0.22, 1, 0.36, 1)、カットの切り替えは 0.4秒のフェード

# 守ってほしいこと
- 1つのカットに出す手順は1つだけ。次の手順を先に見せない
- 図は線と四角だけの簡単な形にする。実在のサービスの画面を真似しない

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

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

使い方・しくみ・ことばの意味・数字・料金・歩み・1日の流れ・道順・よくある質問・持ち物・やってはいけない例・選び方を短く説明するモーション動画を12種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。見本の下で題材を選んだり、題や名前を打ち替えたりすると、見本の動画と指示文にそのまま入ります。

説明動画はどの型を選ぶか

AI に説明の動画を頼むとき、「わかりやすい説明動画を作って」の一言では、文字の多いスライドを順に出すだけの動画になりがちです。何を伝えたいか（手順・しくみ・ことばの意味・1つの数字・料金・これまでの歩み・1日の流れ・道順・よく聞かれる質問・持ち物・まちがえやすいこと・選び方）で型を選び、カット割り（何秒から何秒に何を出すか）まで渡すと、1カットに1つずつ伝わる動画になります。

こんなとき 向いている型
ネット予約や申し込みのやり方を、手順で見せたい3ステップの使い方
行政の手続きや制度など、目に見えないしくみを説明したいホワイトボード風
お客さんが聞きなれない仕事のことばを、意味と例で説明したいことばの意味
予約の件数や利用者の数など、1つの数字で成果を伝えたい数字で見せる
会社やお店の歩みを、年を追って見せたい年表
基本の料金に何が足されて合計いくらになるのかを見せたい料金の内訳
園や施設の1日、社員の1日を時刻を追って見せたい1日の流れ
駅からお店や会場までの道順を、地図で見せたい道順の案内
受付や電話でよく聞かれる質問に、短く答えたい質問と答え
来る前に用意してほしい持ち物を伝えたい持ち物チェック
お手入れやごみの出し方など、まちがえやすいやり方を先に知らせたいやってはいけない例
コースやプランが3つほどあり、自分に合うものを選んでもらいたい選び方の分かれ道

どの型でも守ること

  1. 1つのカットで伝えることは1つ。手順も図も数字も、1つずつ出します。文字は 15字くらいまでにし、読める時間（1字 0.15秒＋1秒）を取ってから次へ進みます。
  2. 図は線と四角の簡単な形にする。細かい画面や表を小さく出すと、スマホでは読めません。
  3. 動きは時間の流れで作る。線を描く・数を数える・棒を伸ばすも CSS の animation で作ると、一時停止や位置の移動にそろって動きます。
  4. 架空の数字には「例です」と出す。見本の数字はすべて架空です。自分の数字に置き換えるときは、出どころを最後のカードに書きます。
  5. 動きを控える設定の人には、最後のカードを止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

まとめられる手順をまとめて3つにするか、動画を2本に分けます。1本の短い動画で覚えてもらえる手順は3つくらいまでです。どうしても5つ必要なら、指示文の「カット割り」に手順を足し、全体の秒数も1手順あたり 3.2秒ずつ延ばすよう書き換えて渡します。

作れますが、ほかの動きと時間がずれやすくなります。JavaScript で数えると、一時停止や途中からの再生をしたときに、数字だけが別に進みます。CSS の @property で整数の変数を登録して animation で動かすと、ほかの動きと同じ時計で止まり、同じ位置から再生できます。

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

使う前に、その地図サービスの利用規約で、使える範囲と出典の書き方を確かめてください。見本は、道と区画と目印だけを線で描いた簡単な図にしています。道を太く、目印を曲がる角だけに絞った図のほうが、スマホの小さな画面でも道順を読み取れます。