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

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

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

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

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

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

1. 「ドット背景」：クリーム色の地に薄いドット。画面に質感を与える
2. 「番号付き見出し」：丸バッジの番号 + 太字タイトル + 色付き下線
3. 「ピル」：角丸の箇条書き。1個ずつ時間差で飛び出す
4. 「ブラウザモック」：ウィンドウ風の枠。中に実物のスクショや図解を入れる
5. 「マスコット」：画面の隅で揺れているキャラクター
6. 「字幕バー」：下部の黒帯。ナレーションと同じ文を表示する

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

部品1：ドット背景は「セットの壁」

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

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

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

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

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

部品2：番号付き見出しは「現在地の標識」

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

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

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

• ティール #3B7E7C（ブランドの基調色）
• 藍 #4F6BD8 / 琥珀 #C2702E / 菫 #7C5CC4 / 深緑 #2E8A5C / 紅 #C25A5A

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

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

部品3：ピルは「情報の最小単位」

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

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

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

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

部品4：ブラウザモックは「実物の額縁」

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

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

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

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

部品5：マスコットは「視線の逃げ場」

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

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

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

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

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

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

部品6：字幕バーは「無音再生の保険」

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

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

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

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

レイアウトの飽き対策：左右交互と進捗ドット

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

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

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

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

演習（20分）

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

1. 「ピルの文字数を15字以内に揃えて。超えるものは2枚に分割」
2. 「見出しの下線を、左から0.5秒で伸びるアニメーションに」
3. 「シーンごとにレイアウトを左右交互にして、右上に進捗ドットを追加」

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