仕様書なし・コードなしで「話すとページが動くLP」ができた、たった1つの進め方
仕様書なし・コードなしで「話すとページが動くLP」ができた、たった1つの進め方
❓ LPって、最後まで見てもらえないもの？
LPを作ってみたけれど、最後まで読んでもらえない。動画を載せても、再生されないまま閉じられてしまう。そんな経験はありませんか？ 今日紹介するのは、その逆をいくLPを作った記事です。動画の人物が話し始めると、話す内容に合わせてページが勝手に進み、最後は相談フォームで止まる。見る人は、ただ聞いているだけでいいんです。
ちょっと待って、その動画で話してるのって私よね？ しゃべるたびにページが動くなんて、なかなか欲張りなLPだと思ってたの。でも正直、どうやって作ったのかは私もよく知らないのよね。ねえ、Kenny、その記事には何が書いてあるの？
📌 この記事でわかる3つのこと
この記事を読むとわかることは3つあります。1つ目は、動画の声とページの動きをぴったり合わせる仕組み。2つ目は、相談するAIと作るAIを分けて使う、ひとり開発のチーム編成。3つ目は、暗くて重たかった最初のデザインを、人に見せられる明るいページに直すまでの修正のコツです。
つまり、動く仕組みと、AIの使い分けと、見た目の直し方ね。私もAIに全部まとめて頼んで、話がごちゃごちゃになったことがあるから、2つ目はかなり気になるわ。3つとも知りたいけど、一番大事なのはどれ？
🔑 仕様書は書かなかった、それでも完成した
実は一番驚いたのは、完璧な仕様書を一度も書かなかったことなんです。伝えたのは「全体的に暗すぎる」「左に寄って見える」といった、見たままの感想だけ。それでもAIは具体的な修正に変えてくれました。ただ、その感想をどんな順番で、どちらのAIに渡したのか。そこに一番のコツがあるんですが、それは記事で読んでほしいな。
ここで止めるのはずるいわ！ 感想を言うだけでいいなら、もしかしてAIに全部お任せで、人間はほとんど何もしてないってこと？ それなら私にもできそう。でもLPなんて作ったことがない初心者でも、この記事を読んでちゃんとわかるのかしら？
👥 こんな人に読んでほしい
それも近いけど、少し違うんです。答えは記事で確かめてください。そして、**初心者の人にこそ読んでほしい内容です。**コードは書けないけれどAIで何か形にしてみたい人、LP制作を副業にしてみたい人、ひとりで事業をしていて問い合わせにつながるページがほしい人。どれかに当てはまるなら、きっと役に立ちます。
ひとりで事業をしていて、問い合わせにつなげたい人。それ、まさにひとり企業の私のことじゃない。しかも私が話すLPなんだから、読まないわけにはいかないわね。で、その記事はどこで読めるの？
📖 続きは、動くLPと一緒にnoteで
記事はnoteで公開しています。リンクからどうぞ。記事の中には完成したLPの公開URLも載せているので、ぜひ「音声ガイドで体験する」のボタンを押してみてください。読む前に一度体験しておくと、どこをどう作ったのかが、ぐっとわかりやすくなりますよ。
先にLPを体験してから記事を読むのね。自分が話してるページを見るのはちょっと照れるけど、どんなふうに動くのか確かめてみたいわ。次は8か国語版も作る予定らしいし、その前に仕組みを知っておかなくちゃ。よし、読んでくる！