動くデジタル資産

🎓 15分間の「ライブ・コーディング」指導シナリオ

以下のステップで体験してみましょう。

STEP 1：写真の「実体化」（開始0〜5分）

• 作業: 「ID抽出ツール」で取得した画像IDを、ここに画像IDをコピペ の部分に貼り付けてもらいます。今回はこちらの写真URLで記述しています。

• 感動: 「おぉ、自分の写真がGoogle サイト（のプレビュー）に現れた！」

STEP 2：重なりの「矛盾」を体験（5〜10分）

• 問いかけ: 「写真の後ろに文字があるはずなのに、見えませんね？ どうすればいいでしょう？」

• 作業: CSSソースの「z-index: 2;（写真）」を、あえて z-index: 0; に書き換えてみましょう。ここから次の画像の表示を見てください。

• 発見: 「文字が前に出てきた！数字が『重なり順』を決めているんだ！」と理屈を直感できます。

STEP 3：動きの「演出」（10〜15分）

• 作業: transform: translateX(150px); の数値を 300px に変えてみます。

• 驚き: 写真が動く距離が伸び、「隠れていたメッセージ」がより劇的に出現するようになります。

• 締め: 『デジタル資産を動かす演出家』の第一歩を踏み出しました！」