「型」を6つの部品に分解する

動画テンプレートを6部品に分け、修正指示に使う語彙へ落とし込む短尺デモ。

前のレッスンで1本目ができました。

ここで一度立ち止まって、画面の中身を解剖します。理由はひとつ。部品の名前を知っていると、AIへの修正指示が劇的に的確になるからです。

「なんか左のやつをもう少し下に」ではなく「ピルの開始位置を40px下げて」と言えるようになる。これだけで、修正の往復回数が半分になります。

全体像：画面は6つの部品でできている

情報番組風の解説動画の1画面は、ほぼ例外なくこの6部品の組み合わせです。

以下、部品ごとに「何のためにあるか」「コードの急所」「指示文の例」の3点セットで解剖します。コードは読み飛ばして構いません。指示文だけ持ち帰れば実用には足ります。

単色の背景だと素人のスライドに見え、ドットが入ると番組のセットに見える。不思議ですが本当です。

コードの急所は1行です。CSSの模様機能で、小さな点を44px間隔で敷き詰めています。

backgroundImage: `radial-gradient(#1F242114 2.4px, transparent 2.4px)`,
backgroundSize: "44px 44px",

色コードの末尾 14 は透明度です。ドットは「あるかないか分からない」濃さが正解で、はっきり見えたらやりすぎです。

背景はクリーム色（#FAF6EE）に、ごく薄いドット模様を44px間隔で。
ドットは主張しない濃さにして。

①②③と進む構造が、視聴者に「いまシリーズの何番目か」を伝えます。あわせて色付き下線がシーンのテーマカラーを宣言します。

見出しは「丸バッジの番号＋太字タイトル＋色付き下線」のセット。
バッジは回転しながら登場、下線は左から伸びる。
項目ごとにアクセント色を変えて。

色は何色用意すればいいか。私は6色をローテーションしています。

彩度を抑えた中間色で揃えるのがコツです。原色を混ぜると途端に安っぽくなります。

自分のブランドカラーが決まっているなら、それを1色目に置いてください。

角丸の箇条書きです。急所はコードよりも文字数の規律にあります。

15字を超える内容は、ピルを2枚に割ります。「読ませる」のではなく「見せる」のがピルの役割です。

箇条書きはピル型（角丸・白地・黒枠・先頭に色丸）。
1枚15字以内。3枚を0.4秒間隔で順に飛び出させて。

「0.4秒間隔で順に」が効きます。同時に出すと1つの塊に見え、間隔が1秒だと間延びします。

このコースでいちばん推したい部品です。ウィンドウ風の枠（左上に赤黄緑の3つの丸）を作り、中身には実物を入れます。

ブラウザ風ウィンドウ（上部バーに赤黄緑の丸3つ、黒枠、角丸、影）を作って。
中身はこのフォルダのスクリーンショットを表示:
./screenshots/ の画像を順番に使って。

実物のスクショを撮るときの注意がひとつ。個人情報・患者情報が画面の隅に写り込んでいないかを、必ず拡大して確認してください。ブラウザのブックマークバー、通知、タブ名は事故の常連です。

スクショを撮る前にブラウザをゲストモードにするのが安全です。

マスコットは飾りではありません。情報の多い画面の隅に、ゆっくり揺れるキャラクターがいると、画面全体の圧が下がります。

揺れのコードは、三角関数のsin（波を作る計算）で書かれています。

const bob = Math.sin(frame / 16) * 6;  // 約3.3秒周期で上下6px

frame / 16 の数字を大きくすると、ゆっくり揺れます。「マスコットの揺れをもっとゆっくりに」と言えば、AIはこの数字を変えます。

左下にマスコット画像（透過PNG）を配置。
ゆっくり上下に揺らして、シーンごとに左右の位置を変えて。

自分のキャラクターがいない場合は、丸と点だけの簡単な顔でも機能します。私の1本目は手描き風のおばけでした（次のレッスンで3Dキャラに差し替えます）。

SNSの動画は8割が無音で再生される前提で作ります。下部の黒帯に、ナレーションと同じ文を表示します。

下部中央に黒い角丸バーの字幕。1シーン1文・28字以内。
文中の大事な1〜2語だけ黄色で強調して。

黄色ハイライトは、流し見でも要点が残る最重要の仕掛けです。

ただし1文に1〜2語まで。全部黄色にした字幕は、何も強調していないのと同じです。

6部品の配置を毎シーン同じにすると、3シーン目で飽きられます。対策は2つ。

1つ目は左右交互。図解ウィンドウが右→左→右、と交互に切り替わるだけで、画面が呼吸を始めます。

2つ目は進捗ドット。画面の右上に「全6項目中いま何番目か」の小さな点を置きます。テレビのワイプと同じで、視聴者は「あとどのくらいか」が見えると最後まで観てくれます。

シーンごとにレイアウトを左右反転して。
右上に進捗ドット（全項目数ぶん、現在位置まで色付き）を追加して。

3行で振り返ります。

次のレッスンは「動き」です。同じ部品でも、動かし方で素人感とプロ感が分かれます。

レッスン2で作った動画に、部品名で修正指示を3つ出してください。例を挙げます。

指示が「部品名＋数字」になっていれば合格です。