研修オープニング 教える・研修

通称:研修オープニング動画Training Course Opener

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

見本の下の帯で、一時停止や好きな位置への移動ができます。講座の名前とねらいを変えると、見本の動画と指示文に入ります。題材を選ぶと、章の名前や色もまとめて替わります。

講座の名前と所要時間、「終わったら何ができるか」、3つの章の目次を順に見せ、第1章に印を付けて始める16秒の動画です。新人研修や eラーニングの最初に流すと、受ける人が全体の長さと順番をつかんでから学び始められます。

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

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

# 動画の呼び名
一般に「研修オープニング動画」(Training Course Opener)と呼ばれる動画です。

# 作ってほしい動画
Training Course Opener(研修オープニング)。講座「移乗介助の基本」の最初に流す 16秒の動画。講座の名前・所要時間・ねらい・3つの章を順に見せ、第1章に印を付けて「ここから始める」ことを伝える。

# カット割り
- 0.0〜3.3秒:小さく研修の種類、大きく「移乗介助の基本」、その下に小さく所要時間
- 3.15〜7.4秒:小さく「この講座が終わると」、大きく「声をかけて安全に移せる」
- 7.25〜16.0秒:目次。上に研修の種類と講座の名前。白い帯の行を3つ、上から 0.8秒おきに出す。10.6秒に第1章の行の後ろへアクセントの色の薄い面を左から伸ばし、11.0秒に行の右端へ「ここから」の札を出す。11.4秒に所要時間を添え、16秒まで止めて見せる

# 見た目
- 背景は明るい生成り(#f4f2ec)、文字は濃い灰色(#1f2937)、アクセントは #0f766e
- 講座の名前は画面の短い辺の 8.5%、ねらいは 7%(12字が1行に入る大きさ)、章の名前は 4.4%
- 章の番号(第1章)はアクセントの色の文字。行は枠線を使わず、白い面で区切る
- 速さの変わり方は2種類にそろえる。出るときは cubic-bezier(0.22, 1, 0.36, 1)、カットの切り替えは 0.3秒のフェード(ease)

# 守ってほしいこと
- 章は3つまで。章の名前は 10字まで
- 「終わったらできること」は、受ける人が主語の文にする(「〜を学ぶ」ではなく「〜できる」)
- 縦長の画面では、上の 10% と下の 20% に文字を置かない(SNS のボタンや投稿の文字が重なるため)

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

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

社内研修・新人教育・業務マニュアル・講座で使う、教えるための短いモーション動画を8種類の型に分け、再生できる見本・AIへの指示文・コードを載せています。画面の操作や現場のようすは写真ではなく図で描いているので、そのまま使っても、あとで本物の画面や写真に差し替えてもかまいません。見本の下で講座の名前や要点を打ち替えると、見本の動画と指示文にそのまま入ります。

教える・研修の動画はどの型を選ぶか

教える動画は、見終わったあとに「何をすればよいか」が残るかどうかで決まります。AI に「研修の動画を作って」とだけ頼むと、説明が長い文のまま流れたり、どこが大事なのかがわからない動画になりがちです。講座のどの場面で流すのか(始め・中身・終わり)と、教えたいこと(操作・安全・応対・決まり)で型を選び、1カットに出す字数と見せる時間まで渡すと、狙った動画になります。

こんなとき 向いている型
研修の最初に、長さ・ねらい・章の順番を伝えたい研修オープニング
朝礼やすきま時間に、要点を3つだけ覚えてほしいワンポイント講座
社内システムのどこを押すかを、画面の上で見せたい操作マニュアル
作業の前に確かめる場所と順番を、図で覚えてほしい指差し確認
接客や電話のよい応対を、会話の流れで見せたいロールプレイ
社内の決まりが変わることを、全員に同じ形で伝えたい社内の決まりの周知
講座の最後に、学んだことと明日からやることをまとめたい振り返り
研修を終えた人に、修了をきちんと伝えたい修了のお知らせ
お客さま向けに、サービスの使い方を3つの手順で見せたい3ステップの使い方(説明の動画)

3ステップの使い方の型は、お客さまに手順をカードで1つずつ見せる動画です。ここの「操作マニュアル」は、社内で使う画面の図の上でカーソルが動き、押す場所を位置で覚えてもらう動画です。外向けの案内は説明の動画、社内の研修はこちらの型、と使い分けられます。

どの型でも守ること

  1. 1つの動画で教えることは1つにしぼる。要点や手順は3つまでにし、足りなければ動画を分けます。
  2. 1つのカットに出す文字は 15字くらいまで。読める時間(1字 0.15秒+1秒)を取ってから次へ進みます。
  3. 画面や字幕のことばを、職場で使っていることばとそろえる。ボタンの名前や場所の呼び名が違うと、見たあとに迷います。
  4. 安全・医療・決まりの中身は、職場の正式な手順に合わせる。動画のために手順を作ったり、省いたりしません。
  5. 最後のカードは2秒以上止め、動きを控える設定の人には止まった絵で見せる。見本の「動きを控える設定で見る」で、その見え方を確かめられます。

よくある質問 (FAQ)

1本で教えることを1つにしぼり、短く分けるのがおすすめです。ここの見本は 14〜22秒です。長い研修は、オープニング・章ごとの動画・振り返りに分けると、見る人がどこまで進んだかをつかみやすく、あとから1本だけ見直すこともできます。

できます。指示文の「この形で作る」の最初の「作るもの」の段で、画面のスクリーンショットを添付すると、図の代わりに使われます。そのときは、お客さまの名前や電話番号などの個人の情報を消してから渡し、カーソルが押す場所を「左のメニューの上から2つめ」のように位置で書き添えます。

見本の確認の中身は例です。確かめる場所・順番・ことばは、職場の安全の決まりや作業の手順書に合わせて書き替えてください。動画は手順を覚えるための助けで、手順書の代わりにはなりません。決まりが変わったときは、動画も合わせて作り直します。

社内のページ・社内チャット・研修の会場の画面など、社内だけで見られる場所に置きます。動画は1つの HTML ファイルなので、社内の共有フォルダに置いてブラウザで開けます。mp4 にしたいときは、ブラウザで全画面にして画面収録します。社内の名前や決まりが入るので、公開の場所には置かないようにします。