こんにちは、デイトラ情報局です！
9月29日（火）に、公開ウェビナー「Codexでデザイン性の高いLPを爆速で作る方法｜デザイナーが実演する『画像LP』の作り方」を開催しました。
前回のLLMO入門ウェビナーに続いて、今回もYouTubeでライブ配信。講師は、デイトラAI業務活用コースでデザイン講座を担当しているデザイナーのKAWAIさんです。
「AIでLPを作ってみたけど、どこかで見たような仕上がりになる」「『LPを作って』と頼んだものの、そのままでは使えなかった」。そんな悩みに向けて、Codexでデザイン性の高いLPを短時間で作る手順を、実際の画面を見せながら解説していただきました。この記事では、当日の内容を流れに沿ってご紹介します。
この記事でわかること
- 画像とHTMLを組み合わせる「画像LP」とは何か。どんな用途に向いているか
- Codexで画像LPを作る3ステップ（フォルダと素材→企画・内容・デザイン→生成・修正）
- 崩したくないロゴや写真の扱い方と、公開前にチェックすること
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
登壇者紹介
KAWAIさん（講師）
デザイナー歴14年。デイトラAI業務活用コースの講師を務めています。AIとデザインを軸に発信・登壇・研修・教材開発を手がけ、著書『AIでゼロからデザイン』は発売1週間で重版。AIデザイン顧問・セミナー登壇多数。
初芝賢（司会）
デイトラ取締役CMO。デイトラのマーケティングを統括しています。当日は司会として、KAWAIさんのやり方の「ここが大事」という部分を掘り下げました。
今日作るのは、急ぎのときに「早い・うまい・安い」LP
LPには、サービスページのように気合いを入れて長く使うものもあれば、ウェビナーの告知や広告のテストのように、コスパ重視でサクッと作りたいものもあります。今回の手法が向いているのは後者です。
KAWAIさん今回作るLPの見本↓
司会の初芝も「事業会社の人やマーケター、事業会社を支援している人にぴったりですね」と反応していました。
まずは完成したLPから。これ、本当にAIで作ったの…！？
「本当にできるの？」と疑っている方のために、KAWAIさんはまず完成したLPを見せてくれました。今日お伝えする方法そのもので作ったLPです。
今回の手法で作ったLP（当日の画面より）
スマートフォン向けのデザインです。時間があればPCやタブレットでの見え方も最適化した方がいいものの、いまはスマホで見る人が多いので、スマホだけのデザインを作るケースもかなり多いそうです。
ポイントは、画像だけでなくHTMLのコードも組み合わせていること。デイトラのロゴマークや申し込みボタンはHTMLで載せているので、ボタンは実際に押せます。スクロールすると画面の下にボタンが固定で出てくる、といった仕掛けも入れられます。
初芝KAWAIさんによると、中身は画像が8〜9割、コードが1割ほど。
KAWAIさんこの手法が現実的になったのは最近のことです。以前の画像生成は日本語の文字が崩れやすく、実用的ではありませんでした。いまのChatGPTの画像生成（2.5）では日本語もきれいに出せるようになり、KAWAIさんはデザインをかなり任せているそうです。そのうえで、確実に崩したくないロゴマークやボタンはHTMLで作って後から載せる。画像とコードのいいところ取りをしているわけです。
コメント欄にも「広告に使うLPに良さそう」という声が届いていました。初芝も「画像LPを作ってHTMLをはめていく、という考え方を知っているだけで選択肢が増える」とコメント。KAWAIさんも「概念さえ知っていればAIに伝えればいいので、発想のゲームですね」と話していました。
最初の指示は「LPを作って」だけ。大事なのはフォルダの中身
進め方は3ステップだけです。
- フォルダと素材を用意する
- 企画・内容・デザインを決める
- 生成・修正する
先ほどのLPも、本当にCodexで作っています。KAWAIさんは制作過程を録画した約9分の動画も見せてくれたのですが、Codexへの最初の指示は「LPを作って」の数文字だけでした。
KAWAIさんもう1つのポイントは、LP全体を1枚の画像で出すのではなく、セクションごとに1枚ずつ画像を作っていくこと。1つずつ修正でき、使い回しや差し替えもできる。レゴのパーツを作るようなイメージだそうです。ファーストビューだけいろいろなパターンを作ってテストする、といった使い方もできます。
たとえば見本のLPでは、開催日時の部分をあえて空白にしておき、日付だけHTMLで入れることもできます。
実はこの作り方、KAWAIさんが以前のウェビナーで解説したスライド生成と同じです。スライドを縦長にしただけ、とのこと。スライドの作り方は、デイトラ情報局のCodexでスライドを作る方法でも紹介しています。
KAWAIさんSTEP1：フォルダと素材を用意する
料理に例えると、良質な食材を集める工程です。KAWAIさんは「ここが一番重要かもしれない」と言います。
まず、自分のPCの中にLPを作るためのプロジェクトフォルダを作ります。手作業で作ってもいいですし、Codexにプロンプトで作ってもらっても構いません。
当日のスライドより
- AGENTS.md：Codexが必ず読むファイル。基本的なルールを書いておく
- brief.md：資料。そのプロジェクトがどんなものかをまとめる。見本のLPなら、デイトラのカリキュラムの内容
- lp/：生成物がたまっていくフォルダ
- img/：ロゴマーク、人物の写真、デイトラちゃんのようなキャラクターなど、画像生成せずそのまま使ってほしい素材を入れておく
フォルダ名は何でもOK。何を用意すればいいか分からない場合も、Codexに聞けば大丈夫だそうです。
KAWAIさんいきなりプロンプトを打って「いい感じに」と始めてしまう人も多いものの、下準備がかなり重要だと痛感している、とKAWAIさんは話していました。
STEP2：企画・内容・デザインを決める
次は企画です。いきなり「どんなデザインにするか」から考えるのではなく、誰に何を伝えて、その人にどう変わってほしいのかを考えます。そのために、まず伝える相手のことを知るのが大事です。
掲載する情報は、AIに整理してもらう
ここで作るのが「content.md」。LPに載せる情報をまとめたファイルです。紹介する商品やサービス、対象読者、強みなどを伝えると、LPに何を載せるべきかをAIが考えてくれます。
当日のスライドより
ゼロから内容を考える場合に必要な工程ですが、見本のデイトラのLPでは、すでにあるデイトラのWebサイトのURLを渡して情報をまとめてもらったそうです。自社のホームページなどがあれば、そこから情報を集めて整理させるだけでOKです。
構成はAIに任せ、事実は人が確認する
構成はAIに任せます。一方で、それを確認するのは人の仕事です。自分が誰かに伝え、責任を取る部分なので、前提がずれていないかもここで確かめます。
当日のスライドより
ここで初芝が気になったのが、コピーライティングの「型」の話。PASONAやAIDAのようなフレームワークに合わせて作るのが、一昔前のセオリーでした。
KAWAIさんKAWAIさんは、これをお医者さんと患者さんの関係に例えます。「お腹が痛いのでこの薬をください」と頼むと、もっといい薬があってもその薬が出てくる。「お腹が痛いので治してください」とだけ伝えれば、専門家が一番いい方法を選んでくれる。AIにも、いまいるA地点と行きたいB地点だけを伝えればいい、というわけです。
もちろん、「この分野では自分の方が詳しい」「鉄板の構成がある」と確信があるなら型にはめてもいい。AIが知らない業界の事情などは、人がレビューした方がいいそうです。
見た目のルールも、先に1枚にまとめる
内容の次は、見た目の印象です。content.mdとカラーパレットなどのルールを渡して、デザインのルールをまとめた「design.md」を作ります。印象や色、参考画像のほか、「派手すぎるのはNG」「淡いトーンは使わない」といった注文があれば書いておきます。
当日のスライドより
最初から立派なdesign.mdを作る必要はありません。まずは叩き台で作ってみて、イメージと合わなければ直していけばいいそうです。
KAWAIさん初芝も「自分の会社のdesign.mdを1回作っておけば、今後何回ウェビナーをやっても同じトンマナで出せますね」と反応していました。
STEP3：生成・修正する。まずはファーストビューだけ
いよいよ生成です。生成結果はSNSに投稿されがちで目を引きますが、KAWAIさんは「生成する前の下準備がとても重要」と改めて強調していました。
当日のスライドより
最初は、ファーストビュー（FV）だけを生成してみるのがおすすめです。Codexは10〜20枚ほどの画像を一気に出せるので、ちょっと席を外している間に、イメージとまったく違うデザインが大量にできていた、ということも起こり得ます。そうなると全部作り直しで、トークンも時間ももったいない。
FVがイメージと違えばdesign.mdを直して作り直し、OKなら残りのセクションへ。心配なら、その下のセクションを1つずつ確かめながら進めても構いません。
変えたくない素材は、HTMLで後乗せする
FVを作る指示の中で、初芝が「重要そう」と指摘したのが「ロゴ・人物・商品写真は元の素材のまま、HTMLで配置する」という一文でした。
当日のスライドより
KAWAIさん初芝KAWAIさんのもとにも、セミナーのサムネイルで登壇者の顔が変わってしまった、という相談がたまに来るそうです。修正を重ねると画像が劣化していくこともあるので、定期的にゼロから作り直してもらい、そのときに人物の写真をもう一度添付することもあるとのこと。
初芝はこのやり方を「ミルフィーユ」に例えました。一番下に背景の画像を置き、その上に素材を配置し、さらにその上にボタンなどのHTMLの要素を重ねていく。これがKAWAIさん流の特徴で、クライアントワークにも向いている、というわけです。
残りのセクションと、ボタンの配置
FVがOKなら、「最初の画面の見た目を引き継いで、全体を完成させて」と指示して残りを作ります。見本のLPでは、スクロールすると画面下に固定の申し込みボタンが出てきて、本文の中に同じボタンが現れたら固定ボタンは隠れる、という指示も入れていました。ここまで細かく書かなくても、実現したいことがイメージできていれば、カジュアルな指示で作ってくれるそうです。
ここからは、KAWAIさんのプロのTipsが続きます。
当日のスライドより
- CTAは親指が届く位置に：スマホでは、申し込みボタンなどのCTAは画面下に固定するのがおすすめ。本文と重なったら片方を隠す
- 主役は1つに絞る：全部を目立たせると、何も伝わらない。セクションごとに主役を1つ決めると、情報がすっきり見える
- 飾りより余白で整える：AIでも要素の位置がまだ揃わないことがある。「左端に揃えて」「間隔を均一にして」と指示する
- ブラウザで確かめる：PCではよく見えても、スマホで見ると文字が大きすぎる・小さすぎることがある。リンク先の間違いも要注意
当日のスライドより
当日のスライドより
流れとしては、セクション画像を並べて、素材やボタン、日時などの変わる情報をHTMLで仕上げるだけ。セミナーの予約カレンダーのような機能が必要なら、それもコードで入れていきます。
当日のスライドより
修正は「場所・変更・残すもの」を伝える
修正するときは、どこを変えたいか、どう変えたいか、そしてどこを変えてほしくないかを明確に伝えます。「FVの見出しだけ、ひと回り大きく。文言・人物・色・配置は変えない」のように書けば、AIも必要な場所だけ直してくれる。この精度も、最新の画像生成モデルでかなり上がったと感じているそうです。
当日のスライドより
修正待ちの間に、公開前チェック
公開前は、誤字や文言、人物の顔や手、ボタンやリンク先をチェックします。顔や手は以前ほどではないものの、ありえない場所から腕が出てくるような違和感がまだたまにあるそうです。生成や修正を待つ時間にチェックしておけば、時間を有効に使えます。
当日のスライドより
チェックはAIにもやってもらえます。AGENTS.md・content.md・design.mdや元の資料と照らし合わせて検証させる、という指示です。
KAWAIさん一度作れば、あとは「型」を使い回すだけ
最初の1本さえ作ってしまえば、次からはだいぶ楽になります。
当日のスライドより
ここまでの流れを「次回も実施したいのでスキル化して」とお願いすると、LP作成専用のスキルができあがります。次からはそのスキルにお願いすれば、フォルダを作り、必要事項を聞いてくれる。フォルダを複製して内容を差し替えれば、また別のLPができます。同じデイトラのデザインならdesign.mdはそのままでcontent.mdだけ変える、別の会社ならdesign.mdとcontent.mdの両方を変える。タイトルどおり「量産」ができるわけです。KAWAIさんいわく「LPの工場みたいな感じ。その分チェックは大変ですけど」とのこと。
サプライズ：ウェビナー直前に作ったnoteのLPも公開…！
ここでKAWAIさんから、司会の初芝もまだ見ていなかったものが。この手法がちゃんと機能するか試すために、ウェビナー前のちょっとした時間で、自分のnoteを紹介するLPを作ってみたそうです。
当日のスライドより
KAWAIさんの情報を引っ張ってきて中身を作り、画像も生成し、ボタンはHTMLで作ってあるので押すとnoteに飛ぶ。これが多分30分もかかっていない、しかも他のことをしながらだそうです。
作る中で工夫した点も紹介してくれました。
- FVのタイトル文字だけを画像として作り、LPに貼っている。パーツだけ画像生成するのもよく使う
- アイコンも画像生成。いまは背景を透過できるので、そのまま使える
- GitHubとCloudflare Pagesを使えば、無料ですぐに公開できる。独自ドメインを取らなくても、Cloudflareが発行するURLで公開できる
初芝は「自分のプロダクトやサービスがない人も、自分のnoteやマガジンを紹介するLPで練習すると、この威力を実感できそう」とコメント。KAWAIさんからも「SNSのURLを渡して、自己紹介のLPを作ってもらうのも面白いかもしれない」という提案がありました。
最後に、次から自分でやるときのための6ステップがまとめられました。
当日のスライドより
内容を用意する、デザインを決める、FVを作る、全体を作る、修正する、確認する。AIに作らせ、人が最後に確かめる。今日紹介したプロンプトをアレンジして試してみてください、とのことでした。
KAWAIさんKAWAIさんのLP作成スキルも配布予定の「デイトラAI業務活用コース」
ウェビナーの最後には、デイトラAI業務活用コースをご紹介しました。現場のプロから「ワンランク上のAI活用法」を学ぶコースです。
KAWAIさんのデザイン講座はもちろん、前回登壇いただいた豊藏さんのSEO・LLMOの講座、マーケティングのプロであるあやみさんの講座などが入っています。そして今回KAWAIさんが実際に使ったLP作成のスキルも、講座内で配布する予定です。
KAWAIさん講座だけでなく、今回のようなライブウェビナーや、1週間分のAIニュースを30分〜1時間で解説するライブも毎週開催しています。受講生限定のAIオフライン作業会も開いていて、8月の第2回には講師にも来ていただきました（ゲスト講師全員が毎回参加するわけではありません）。来月も開催予定です。
第2回AIオフライン作業会の様子
なお、AI業務活用コースは学び放題とは別のコースです（配信時点で買い切り137,500円）。学び放題との違いは、デイトラAI業務活用コースとは？学び放題との違い・学べること・学べないことで詳しくまとめています。
KAWAIさんYouTubeでは、ライブ以外にも実務で使えるAI活用法を発信しています。今回のウェビナーをコンパクトにした動画も近々公開予定です。見逃したくない方は、デイトラ Web・AIチャンネルの登録をお願いします！
質疑応答ハイライト
配信中には質問もたくさん届きました。その中から一部をご紹介します。
Q. FVの背面で流れるように動いていたのは、どう作った？
noteのLPで、サムネイルが左右に流れていた部分のことです。これはHTMLで作ったアニメーションで、「サムネイルを上下2段に並べて、左から右・右から左に流して」と指示したそうです。このnoteのLPは、ロゴもタイトルも文字もHTMLで、どちらかというとコードが中心のLPに近いとのことでした。
Q. セクションのつなぎ目や背景にメリハリをつけるには？
「画像を直線に並べる形から抜け出せない」という質問です。セクションの下を三角形にして、余った部分を次のセクションの色にすれば、矢印のようなつなぎ目になります。FVで矢印が弾むようなスクロールのアニメーションも、HTMLで後乗せできます。質問の内容をそのままCodexに伝えれば、やってくれるかもしれないそうです。
また、セクションごとに色のコントラストをつけると、情報の区切りが分かりやすくなる。全部同じ色だと区切りがなく、読者が疲れてしまう。ずっと同じトーンで話されているようなもので、「話とデザインは本当に一緒」とKAWAIさんは話していました。
Q. これからもWebデザイナーの需要はある？
KAWAIさんの答えは、受け身のデザイナーは厳しく、能動的なデザイナーは残るというもの。仕事が来るのを待っているだけだと危ない。自分から提案する、営業する、発信する、頼まれていないのにその会社のLPを作ってしまう。それくらい能動的なデザイナーは残っていく、と言います。
例えとして挙がったのが歯医者さん。歯磨きは誰でもできるけれど、3〜6か月に1回はプロに見てもらった方がいい。デザインも同じで、誰でも作れるようになったからこそ、そのデザインが会社にとって好ましいのか、マーケティングで損をしていないかを診断してもらう価値がある。初芝は「LPをパトロールして『このLPはもったいないですよ』と声をかけるデザイナーが残るのかも」と話していました。
まとめ
約1時間半を通して見えてきたのは、デザイン性の高いLPを作る鍵は、プロンプトの工夫よりも「下準備」にあるということでした。
- 画像LPは、画像の自由度とHTMLの確実さのいいところ取り。急ぎのLPやABテストに向いている
- 最初の指示は「LPを作って」だけでいい。大事なのはフォルダの中のルールと素材
- 構成はAIに任せ、事実は人が確認する。型は無理に指定しない
- まずFVだけ作って確かめる。崩したくないロゴや写真はHTMLで後乗せ
- 一度作れば、フォルダとスキルを使い回して量産できる
デイトラちゃん
