【AIとLPづくり】動画が話しかけ、ページが動き出すLPを作ってみた

🌀 動画を置くだけのLPでは、物足りなかった

ふつうのLPは、訪問者が自分で、上から下へ読み進めます。動画を載せる場合も、ページの一部に埋め込むのが一般的です。

けれど、私はもう一歩、先へ進んでみたくなりました。動画の人物が話し始める。その話に合わせて、ページまで勝手に動いていく。そして、話が終わったとき、画面は面談の予約フォームで止まる。

動画広告と、プレゼンと、LPと、問い合わせの入り口。それをひとつのページにまとめられないだろうか。そんな少し変わった思いつきから、このLP作りは始まりました。

今回はChatGPTのSitesを使い、AIの役割を分けました。何を作るかを相談するのは、Sol。実際に動くものにするのは、Astra。私は、動画と音声と画像を用意し、出来上がった画面を見て、次の指示を出す係です。

最初から、完璧な仕様書は書きませんでした。「動画は右上に残したい」「最後はカレンダーで止めたい」。見えてきたことを、順番に伝えていくだけです。相談して、仕様にして、作ってもらい、画面を見て、違和感を伝える。この繰り返しで、ぼんやりした思いつきが、少しずつ形になっていきました。

読み上げの音声は、ただのBGMではありません。ページ全体の進行台本になりました。話が「8か国語」に入ったら、そのセクションが現れる。「面談予約」に入ったら、フォームへ向かう。音声の時刻とページの位置を、結びつけたのです。

動くようになった最初のページは、全体的に暗すぎました。濃いネイビーは、私の会社の明るい印象とも合いません。そこで、白を基調にして、淡いブルーと紫のやわらかな色に変えました。

次は、内容が左に寄って見えたので、ページの中央に大きな白いフレームを作りました。すると今度は、話題の境目が分かりにくくなったので、セクションの間に、太い青い帯を横切らせました。

こうした直しに、専門用語は一つも使っていません。「暗すぎる」「左に寄っている」「区切りが分からない」。見たままの感想を伝えただけです。AIは、それを具体的な変更に変えてくれました。違和感を、率直な言葉にすること。それが、そのまま改善の速さになるのだと感じました。

最後は、音声ガイドが終わると相談フォームへ移るようにしました。名前、メール、相談内容、面談の候補日時を送れます。すぐに予約が確定するのではなく、メールの返信で日程を決める形です。制作中は、自分だけが見られる状態で確認し、整ったところで、誰でも見られる公開版に切り替えました。

今のLPは、日本語版の土台です。次は、日本語、英語、韓国語、中国語、スペイン語、フランス語、ドイツ語、ロシア語の、8か国語に広げていきたいと思っています。言語を選ぶと、本文だけでなく、動画も音声も切り替わるページです。

一人の会社でも、伝えたい相手は、日本の中だけとは限りません。同じ想いを、相手にとって分かりやすい言葉と声で届ける。AIとなら、それが大きな会社だけのものではなくなると、私は考えています。

動画が話し、ページが動き、最後は人との相談につながる。このLPは、私にとって、「AIと一緒なら、ここまで形にできる」という、新しい実例になりました。

完成したLPは、こちらから見られます。 👉 AXelWorks 音声ガイドLP