AIでLP作ってみる
先日、「BIG BAND DREAM LIVE vol.2 2026 」の特設ランディングページ（LP）を制作しました。
このライブは、私自身が「やりたい」と願って実現してもらった、いわば夢を叶えてもらったライブです。
だから今回は、その恩返しのつもりで作ると決めていました。
そしてもうひとつ、これまでの制作と違うことがありました。
初めて、AIを制作パートナーにしたことです。
ずっとwebの仕事をしてきましたが、AIが登場してからは、正直言って、
AIに
「仕事を奪われるんじゃないか」とか
もっというと
「創造するよろこびを奪われるんじゃないか」
という怖さを抱えていました。
でも、ちゃんとAIと向き合ういい機会になると思って取り組むことにしました。
結論から言うと、大変だったけれど面白かった。
この記事では、その制作の裏側を書いていきます。
「AI、すごい」という話じゃなくて、
むしろ、AIを追いかけるのではなく、自分に合った距離でどう付き合うか。
そんなスタンスが伝わればと思っています。
どのAIで作る？
ふだん、AIを使うことはあっても、デザインからコーディングまで全てをAIでLPを仕上げることははじめて。
そもそも何が正解なのか分からず、まずは方法を探すところからのスタートでした。
できれば新しいツールではなく、いつも使ってるAIを使いたいと考えていました。
ChatGPT、Gemini、Claude……
いろいろ試して、YouTubeでも情報を集めました。
それぞれ良さがあるなかで、今回の自分のやり方には「ChatGPT× Claude」がいちばん合っていました。
それぞれに得意・不得意があるというのも、やってみて初めて腑に落ちたことでした。
「何を、どこに任せるか」が明確になりました。
役割分担 ― AIごとの得意を使い分ける
コーディングをClaude に任せてみたら魔法のようでした。
一方でデザインのイメージ出しは ChatGPT に頼ることにして、セクションごとに「ここはこんな雰囲気で」とお願いして、案を作ってもらいました。
自分の作り方に合わせて役割を振っていく感覚です。
でも「どんな構成にするか」という全体の設計は、私（＝人間）がやる。
ここは、最初から決めてました。
実際の流れはこんな感じです。
- 手書きのラフ／ワイヤーフレームを自分で描く
- セクションごとに ChatGPT でデザインイメージを作ってもらう
- それを Claude に渡してコーディングしてもらう
この往復を、何度も何度も繰り返しました。
最初は全部 ChatGPT でやろうとしたのですが、正直、終わる気がしなかった……。
これは、プランやモデル、指示の出し方によっても変わるところかもしれません。
試行錯誤を重ねた上で
「得意なところに、得意なAIを使う」ことの大事さを実感しました。
チャッピーのFVデザインラフ①（あれ、日付ちがう・・・）
チャッピーのCTAデザインラフ②動きで、ライブの臨場感を届けたい
このLPで叶えたかったのは、ライブの臨場感を、そのままWebで表現すること。
主役は、ステージに立つボーカリスト一人ひとり。
その全員にスポットライトが当たるように。
ビッグバンドの大迫力や、あの高揚感が画面からも伝わるように。
「ここまでこだわりたい」と思えたのは、やっぱりこのライブへの想いもあります。
デザインテンプレートに頼らず「AIでどこまで思い通りの表現ができるのか」という私のチャレンジでもありました。
特にこだわったのが「動き」
ヴォーカルひとりひとり、メインステージにいるかのように、次々に現れてファーストビューの主役にすること。
ライブ会場のライトのきらめきや、スクロールするとフワッと浮き出るような表現など。
とはいえ、私がしたのは「ここはこう動いてほしい」とイメージを伝えることで、それをどう実現するかはClaudeが引き受けてくれました。
技術的なところは任せて、自分は「どう見せたいか」に集中する。
まさに役割分担でした。
そしてスマホで見る人が多いので、スマホでの見え方・動きも念入りに調整。
細かいデザインの微調整も、動きのタイミングも、AIと何度も往復しながら詰めていきました。
AIは魔法みたいだけど、魔法じゃない
そして、今さらだけど
AIは魔法みたいだけど、魔法じゃない。
私のアタマの中を、察してアウトプットしてくれるわけではありません。
「一瞬で思い通りのイメージが！！」なんてことは、なかったんです。
マージンやフォントの大きさ、行間、アニメーションの速度……。
細かく指示を出して、何度も調整して、少しずつ仕上げていく。
その地道な作業は、やっぱり必要でした。
これは、プロンプトで仕上げるのがいいのか
いっそ自分でデザインした方が早いのか
ケースによって分かれるところだと思います。
今回は、がんばってプロンプトで仕上げました（意地？？）。
回数を重ねれば精度も上がっていくと思うけれど、毎回同じものを作るわけじゃない。
だからやっぱり、その都度の細かい指示出しは欠かせない。
AIに仕事を奪われる? ― やってみて変わった感覚
冒頭でも書いたように「AIに仕事を奪われる」という感覚がありました。
でも、実際にやってみて「これは共同作業なんだ」と思えました。
「どうしたいか」「何を伝えたいか」というイメージは、自分が持っておく必要がある。
ここはAIが肩代わりできない部分です。
AIはとても頼れるけれど、出てきたものをそのまま使うことはできなくて、違う方向にも行きます。
途中でAIの記憶が途切れてしまって、もどかしくなる時もありました。
その都度「ここはこうして」と直していく。
それは人間の役割でした。
創造は奪われない ― 任せたいところを任せる
AIを使う前は、頭の中にあるイメージを実現するためのハードルが、とても高かった。
時間も、コストもかかる。
昔は、動きひとつ付けるにも jQuery 設置して、調整して「ちゃんと動くか」と何度も試して……、
終わらない戦いのようでした。
それが今は、「こうしてほしい」と伝えれば形になる。
イメージをカタチにするまでの時間が、圧倒的に早くなったんです。
でも、
「創造」そのものは、奪われていない。
何を作りたいのか、何を伝えたいのか。
人間が舵をとって、AIには任せたいところを任せる。
カタチにするまでは試行錯誤ありましたが、AIとの自分なりの付き合い方が見えた経験でした。
手軽さと、こだわりの境界線
ひとつ面白かったのが、実は最初にプロトタイプもさっと作れたこと。
今年のフライヤーと去年のLPのデザインを渡して、「こんな感じで、今年はこの内容で」とお願いしただけで、それなりに悪くないものが上がってきました。
見せられるデザインがあれば、近い形まではすぐに作ってくれるのもAIの便利さ。
でも「表現したいイメージ」があるからこそ、そこで満足はできませんでした。
そこは、人の目と、人の指示が要る。
「さっと作れる手軽さ」と、「本気で作り込むこだわり」
今回、その両方を体感することができました。
AIに伴走者になってもらう
昔なら、プロに頼まないとできなかったことが、自分の手でここまで実現できる。
本当に変わったなという驚きと、ちょっとしたショック。
でも、AIに丸投げでは、この形にはたどり着けなかったと思います。
明確な想いとイメージがあってこその、共同作業でした。
夢を叶えてくれたこのライブに、今回は応えられた気がしています。
AIは、その想いをカタチにするのを助けてくれました。
大事にしたいのは、「AIありき」ではなく「自分ありき」だということ。
AIの進化のスピードを追いかけていたら、正直キリがありません。
それよりも、今、自分がAIをどう使うのがいいか。
そこを見失わないことが、いちばん大切だと思っています。
これからも、AIに伴走してもらいながら、WEBでビジネスの可能性を一緒に広げていけたらと思っています。
