AIと人の手で、イベントの世界観をWebで表現
前回の「Bigband DreamLive2026 LP」にひきつづき動くLP第二弾を作りました。
今回制作したLPはこちら。
昭和キャバレーと銭湯を掛け合わせた、遊び心いっぱいの動くLPです。
ぜひ実際にスクロールしながら楽しんでみてください！
お風呂♨じぇんぬとは
歌う健康ランド♨として活動している２人組の音楽ユニット。
私にとっては、ママになってから出会った10年来の音楽仲間でもあります。
今回のLPは、友人の想いのこもったイベントでもあり、私自身も友情出演するということもあり、かなり思い入れのある作品。
世界観づくりからデザイン、動きの演出まで、あれこれこだわりながら作りました。
そんなLPのこだわりポイントと、AIを活用した制作の裏側をまとめてみます。
LP制作のこだわりポイント
その① 昭和キャバレー×銭湯の世界観
イベントの舞台は、映画「国宝」のロケ地としても使われたグランドサロン十三。
そして、ステージの主役は、泡に見立てた白アフロと「アヒル」がトレードマークの「お風呂♨じぇんぬ」
ファーストビューは、「国宝」のポスターをオマージュしたデザインに。
ポスターの主役をお風呂♨じぇんぬに入れ替えるという遊び心も取り入れました。
（感謝祭当日、会場受付に貼られたポスター）
LP全体は、昭和キャバレーの華やかさに、お風呂♨じぇんぬのにぎやかさ、そして銭湯モチーフをちりばめて。
まるでイベント会場にいるかのような、ワクワクする世界観を目指しました。
その②LPでイベントを体感してほしい
当日のステージ進行と同じように、演目ごとに世界観を切り替えて見せる構成にしました。
1画面に1つのセクションを配置し、スクロールするごとに次のステージへ進んでいくような見せ方です。
PCとスマホでは画面の縦横比が異なるため、それぞれの画面に合わせてレイアウトを調整。
セクションごとに変化をつけながらも全体としてはひとつの世界観として統一することを意識しました。
その③動きで遊びゴコロを取り入れたい
歌に生演奏、ダンスにサプライズ演出も。
盛りだくさんのイベントの楽しさを、LPを見に来てくれる人にも少しでも伝えたい！
そんな思いから、ワクワク感を演出する動きやアニメーション、エフェクトをポイントごとに取り入れました。
静止画を並べるだけではなく、スクロールするたびに何かが起こるような、見ていて楽しいLPを目指しました。
どうやって作る？？
前回も動くLPを制作したので、今回も基本的には同じ流れで進めました。
LPの原稿が完成したら、いよいよ制作スタート！
基本の制作工程はこんな感じです。
Step１
手書きでワイフレつくる
Step２
AIでデザインラフつくる
Step３
デザインラフを編集して整える
Step4
動くLPにするために素材を切り出す
Step5
AIに素材とプロンプト渡してコーディング
動きやアニメーションのエフェクトも指示する
LP全体を一気に作るのではなく、セクションごとにこのステップを繰り返していきました。
使ったツールはこの3つと、自分の「手」！
- 手 … 手書きワイヤーフレームの作成
- ChatGPT … デザインラフの作成
- Canva … デザイン調整・素材の書き出し
- Claude … コーディング
Step1. 手書きででワイフレを作る
まずは手書きで、LPの骨格となるワイフレを書きます。
Step2. AIにデザインラフを作ってもらう
そのうえで、どんな世界観を作りたいのか、イメージをできるだけ具体的に言葉にして、LPの原稿と手書きのワイヤーフレーム、写真素材などをChatGPTに渡し、デザインラフを作ってもらいます。
今回のLPは、いくつか参考にしたいサイトとあわせてこんなイメージを伝えました。
────────────
和風 × 銭湯 × 昭和キャバレー × レトロポップ
「国宝」をオマージュしながらも「高級・荘厳」にはしない。
派手！楽しい！キラキラ！お祭り！ごちゃごちゃ！
遊びごころを感じるデザイン。
────────────
「いいな」と思うデザイン案が出てきたら、実際にLPに落とし込めるように調整していきます。
（ChatGPT が出してくれたデザイン案）
Step3. デザインラフを編集して整える
でも、AIが出力したデザインラフは、そのままでは使えません。
１枚モノのデザインラフを、背景や、パーツごとに分けて生成し直します。
文字の配置や画像のバランス、ディテールや大きさなど、実際のWebページとして使えるようにととのえます。
AIの提案をベースにしながら、自分の目で見て、手を加えていく工程です。
AIで一度に完成形を作ろうとするよりも、パーツごとに分けて行う方が細かい修正も自分で対応でき、デザインの破綻も起きにくくなります。
この段階で、PC用とスマホ用、両方のレイアウト見本も作っておきます。
AIにコーディング指示をするときにこちらも渡します。
Step4. 動くLPにするために素材を切り出す
そして、アヒルや桶、泡などアニメーションさせたい素材は個別に切り出します。
Adobe系のソフトを使っていれば、素材の切り出しなどはもっとラクにできると思いますが、今回はCanvaで対応。
AIでサイズ調整などもできたので、Canvaでも十分に形にできました。（とはいえ、ここは少しひと手間かかりました！）
Step5. AIに素材とプロンプト渡してコーディング
そして、素材の準備ができたら、いよいよコーディングです。
PC版とスマホ版のレイアウトデザイン、切り出した素材、そしてプロンプトをClaudeに渡すと、HTMLファイルを出力してくれます。
でも、ここはなかなか一発では決まらないところ。
出力されたコードをベースに、何度もAIとやり取りしながら、画面サイズによる見え方や、アニメーションのタイミングなど細かな調整を加えて最終的な形に仕上げていきます。
Step1～5をセクションごとに繰り返す
これをセクションごとに繰り返して、ようやく完成！
ファーストビューを含めて全9セクション。それなりに時間はかかりました。
【PC版】
【スマホ版】
ちなみに・・・
アニメーションも含むコーディング処理は使用量の上限にすぐ達してしまうので、今回はじめてClaudeを「Pro」から「Max」プランに変更しました😅
でも、AI以前なら10〜30倍くらい時間がかかっていたでしょう。
もう戻れません（笑）
AI ＋ 人の「手」
今回のLPは、手書きのラフにAIを組み合わせて作りました。
AIを使うことで、デザインのアイデア出しからコーディングまで、制作の可能性がぐんと広がり、時間も大幅に短縮されます。
でも、イチから自分で考えてデザインを組み立てていくことには、やはりAIだけでは出せない「奥行き」があると思います。
そして何より、自分の手で作り出していく「楽しさ」も。
AIで生成されたものがあふれる今だからこそ、人が考え、手を動かし、作り出すことの価値は、これからもっと高まっていくんじゃないかなと感じています。
「好き」と「人」をWebでつなぐ
【ライフワークwebプロデューサー】
ジャストウェブ 井上由美子（Hami）
あなたのサービスの強みや想いを、見えるカタチにしてWEBで伝える専門家
- イベントの魅力を伝えるLPを作りたい
- 自分のサービスや活動をWebで紹介したい
- AIを活用したLP制作に興味がある
公式LINEで、LP＆WEB制作サービスや講座、モニター募集などを随時ご案内しています。
