ページが動く。音声連動LPをSitesで作った

📌 リップシンク動画の音声に合わせてページが自動で進み、最後はWeb面談の相談フォームで止まる「音声連動LP」をChatGPTのSitesで作りました。仕様相談はSol、実装はAstra Medium。暗かった初期デザインを明るく直し、非公開プレビューから一般公開するまでの顛末を書いてみます。

はじめに

「動画の人物が話し、その内容に合わせてページまで勝手に動いたら面白いのでは？」

そんな少し変わった発想から、今回のLP制作は始まりました。

普通のLPは、訪問者が自分で上から下へ読み進めます。動画を置く場合も、ページの一部に埋め込む形が一般的です。

今回やりたかったのは、もう一歩踏み込んだ体験でした。

エリカのリップシンク動画が話し始める。話している内容に合わせてページが進む。動画は右上に残り続ける。そして説明が終わったとき、画面はWeb面談の予約フォームで止まる。こちらのリップシンク動画をLPに素材として入れました。 ↓

エリカセリフ

🎀 Erica「動画を置くだけではなく、私が話すのに合わせてページまで動かすのね。なかなか欲張りなLPになりそう。」

動画広告、プレゼンテーション、LP、問い合わせ導線を、ひとつのページにまとめる試みです。

完成した公開版はこちらです。

今回は、このアイデアがどのように仕様になり、実装され、公開版へ育っていったのかを書き残します。