Codexで画像LPを作る方法|LP作成スキルの作り方と3STEP

動画でも内容を確認したい方はこちら

ウェビナーやイベント用に、急いでLPを1枚用意したい。そんなときにAIへ「LPを作って」と頼んでも、いかにもAIっぽいデザインが出てきて、そのままでは使えないと感じたことはないでしょうか。
Codexを使ったLPの作り方のポイントは、セクションごとの画像を生成して並べる「画像LP」にし、ロゴやボタンだけをHTMLで上から重ねることです。
この記事では、フォルダと素材の準備から画像生成の進め方、公開できる形にする方法、そして「LP作って」の一言で再現できるLP作成スキルにするまでの流れを解説します。
解説するのは、デイトラAI業務活用コースで講師を務める、デザイナーのKAWAIさんです。

本記事の内容

・画像LPとコードLPの違いと、画像でLPを作るメリット
・Codexを使う理由と、Codexで実際に作ったLPの完成形
・LP作成スキルを作る3STEP(フォルダと素材の準備・素材を整える・画像生成)
・ロゴやボタンをHTMLで重ねて公開する方法と、作業をスキル化するコツ

AIでLPを作るときの悩み:「ほどほどLP」をサクッと作りたい

LPには、作り込んで長く使うものだけでなく、「ほどほどLP」が欲しくなる場面があります。
たとえば、ウェビナーやイベントのときだけ使うLPや、広告を回すためにいくつかのパターンを試したいときのLPです。
急にウェビナーの開催が決まったり、急にABテストをしたくなったりと、LPが急に必要になる場面は意外と多くあります。

ただ、そういうときにAIへ「いい感じにLPを作って」と頼んでも、まだ1発ではいい感じのものが出てきません。
いわゆるAIっぽいデザインになってしまい、そのままでは使えないことが多いのが現状です。

では、ちょっとしたLPをクオリティ高く、時間をかけずにサクッと作る方法はないのでしょうか。
実は、あります。今回紹介するのは「画像」でLPを作る方法です。
Webサイトには画像で作るタイプとコードで作るタイプの2種類があり、本記事では画像を使うパターンをメインに解説します。

※LP(ランディングページ)
広告や検索結果などから訪れたユーザーが最初に着地するページのことです。ウェビナーの申し込みや資料請求など、1つの行動をしてもらうことを目的に作られます。本記事でいう「ほどほどLP」は、イベントや広告テストなど期間限定で使うLPを指しています。
目次

画像LPとコードLPの違い

ClaudeやChatGPTに何も考えずに「LPを作って」と伝えると、HTMLやCSSで書かれたコードのLPが出てきます。
通常、WebサイトはこのようにHTMLなどのコードで作られています。

一方の画像LPは、ページをまるごと画像で生成し、その画像を並べてWebサイトにしてしまう作り方です。
スライドを縦に並べたようなものをイメージすると分かりやすいかもしれません。画像をそのままペタペタ貼っていくのが画像LPです。

そのため、以前紹介したスライドの作り方が、今回のLP作りにもそのまま応用できます。
スライドの作り方はCodexでスライドを作る方法|自社っぽいデザインを安定させる3要素で解説しています。

※HTML・CSS
HTMLはWebページの文章や画像などの構造を書く言語、CSSは色や配置などの見た目を指定する言語です。一般的なWebサイトはこの2つで作られています。画像LPでは、このHTMLを「画像を並べる枠」として使うイメージになります。

画像でLPを作るメリット:デザインの自由度が高い

HTMLなどのコードで書かれたサイトは、文字がくっきりしていて読みやすいのが特徴です。
ただ、写真やイラストと組み合わせる場合は、どうしても硬い印象になってしまうんですね。コードで書くとブロックを組んでいくような作り方になるので、硬くなりやすいのです。

画像にすると、そうした制約とは全く関係なくなります。
文字を重ねても、文字を斜めにしても、立体的にしても構いませんし、写真が来てもイラストが来ても3Dのアイコンが来ても、何でもできます。
そのため、目を引きたい・インパクトを出したい場合は、画像でLPを生成するのがおすすめです。

コードで書く場合は、コードのルールという制約があり、できる表現が限られていたり、実装が難しかったりします。
画像なら、描けてさえいればそれがそのまま表現できます。たとえるなら、コードは上に積み上がっていく積み木、画像はドローイング(お絵かき)のようなイメージで、自由度が全然違います。
いろいろ試行錯誤したり、優れたものを作りたかったりする場合は、画像を使うのがおすすめです。

画像生成の精度が上がった今だからこそ有効な手法

以前のAIでは、文字が一部だけ欠けてしまったり、一部だけ違う文字になってしまったりして、結局やり直しが発生することがかなりありました。

ただ今は、ChatGPTの画像生成モデル(2.5)でその点がかなり解消されています。
文字を多く含む画像や、Webサイトの画像生成にもかなり役立つようになってきました。

スライドもWebサイトも、まだ画像生成には頼れないという時期がありましたが、今はスライドもWebサイトも広告も、全部画像生成でいいのではないかと思えるくらい精度が上がっています。

※画像生成AIの文字崩れ
画像生成AIは、画像の中に文字を描くのが苦手で、日本語が崩れたり別の文字になったりすることがよくありました。文字の再現性が上がったことで、見出しやコピーを含むLPの画像も、生成した画像をそのまま使える場面が増えています。

LP作りにCodexを使う理由:画像生成まで一気通貫でできる

今回はCodexを使って画像生成していきます。
「Claude Codeではダメなのか」と思う方もいるかもしれません。Claude Codeでも可能ではあるのですが、Claude Code自体には画像生成の機能がありません。

そのため、Claude Codeで画像LPを作るとなると、ChatGPTなどの画像生成ツールを呼び出す必要があります。少し面倒なので、Codexを使うのがおすすめです。

Codexであれば画像生成ツールが内蔵されているので、特別な追加の作業をしなくても、Codexで一気通貫できます。

※Codex
OpenAIが提供するAIエージェントです。フォルダ内のファイルを読み込みながら作業を進められ、画像生成の機能も備えています。画像LPのように「画像を作る」と「HTMLにまとめる」を両方やる作業では、1つのツールで完結できる点が便利です。

Codexで作った画像LPの完成形

Codexで生成したデイトラのウェビナー告知用画像LPのファーストビュー
Codexで「LP作って」とだけ入力して出てきた画像LP。デイトラのロゴや講師の写真も入っている

どういったLPができるのか、実際に見ていきましょう。
これは、Codexで「ポン出し」した画像LPです。デイトラのウェビナー告知用のLPで、デイトラのロゴマークや講師の写真もきちんと入っています。

ボタンは押せるようにコードで作っている

「画像だけだとボタンは押せないのでは?」と思った方もいるかもしれません。
実はこのLPは、画像に加えて、コードも一部使っています。
「無料ウェビナーを視聴する」の部分はボタンになっていて、マウスを乗せると押せる状態になり、押すとウェビナーのページに飛ぶことができます。

1セクション1画像なので差し替えやテストがしやすい

このLPは、1セクションごとに画像になっています。
そのため、このセクションだけ変えたいという場合も簡単に変えられます。テストをする際にもかなりおすすめです。

追従ボタンなどの配慮もコードで実現できる

スクロールすると、画面の下にボタンが出てきます。
LPは、このボタンを押して申し込みや問い合わせをしてもらうことが目的なので、常にボタンが出ていたほうがいいと考えています。
さらに、ページの下までいくと申し込みボタンが現れるので、固定のボタンは消えるようになっています。こうした配慮も、コードがあるから実現できるものです。

つまり、画像に少しHTMLのコードを組み合わせてLPを作っているということです。
今まで時間や労力を費やしたくないからとLP作りを諦めていた方も、このくらいのクオリティがポンで出せるなら作ってもいいかな、と思えるのではないでしょうか。

※追従ボタン(固定ボタン)
スクロールしても画面の決まった位置に表示され続けるボタンのことです。読者がどこまで読んでもすぐに申し込みできるため、LPでよく使われます。画像だけではこうした動きは作れないため、ボタン部分をHTMLで作る意味があります。

Codexの実行方法:プロンプトは「LP作って」だけ

Codexに「LP作って」と入力し、creative-lpスキルを使って制作が始まった画面
入力したのは「LP作って」だけ。Codexがcreative-lpスキルを使うと判断し、content.mdとdesign.mdを読み込んでいる

本当にCodexで作っているのか疑問に思う方もいると思うので、生成している様子をお見せします。
入力したプロンプトは「LP作って」だけです。これだけで出せるようにしてあります。

画面には「指定内容に沿って、画像8枚と閲覧できるLPを制作します。creative-lpスキルを使います。」と表示されています。
これは、画像LPを作る方法をスキルとしてまとめてあるから、この一言で出せているということです。
creative-lpのようなスキルがあれば、あとは素材を渡すだけで作れます。

ファーストビューからセクションごとに生成される

しばらくすると、ファーストビューが生成されました。
先ほどのLPとは微妙に違いますが、おおよそ同じ印象のものが出てきています。

ここで、コードで書くメリットも1つお伝えしておきます。
コードは毎回同じ位置・同じ大きさで出せるのがメリットです。画像だとそれが少し難しいので、全く同じ場所に、全く同じ大きさ・色で置きたい場合はコードで書くのがいいと思います。

続けて、違うページも出てきました。LPの1セクションごとに出しています。
このセクションだけ他のものに差し替えたいとなったときに、簡単に差し替えたり修正したりできるのが良いところです。
順番を入れ替えてみて、クリックされる確率や、申し込みから成約になる確率が上がるかどうかを確認することもできます。
一度作ってしまえば、このセクションだけ次のLPに使い回すこともできるので、トークンの消費や時間の節約もしやすくなります。

Codex上で生成されたセクション画像の一覧と、ブラウザで表示した完成LP
左がCodexで生成されたセクション画像、右がブラウザで表示した完成LP。生成には約8〜9分かかっている

生成中はPCの前にいなくてもいい

この調子で進めていき、今回は9分ほど生成に時間がかかっています。
ただ、この間はPCの前にいなくても大丈夫です。他の作業をしたり、会議をしていたり、休憩したりしているときに裏で作ってくれるので、かなりありがたいです。

たとえば、ミーティング中に「LPを作らなきゃね」と言われた瞬間に裏で走らせておけば、10分後に「できました」と出せるようなイメージです。

1発で出せる環境を作っておくこと自体に価値がある

フリーランスの場合、あまりサクサク出しすぎると「AIがすごいのね」と思われ、自分の仕事の価値が下がってしまう感じもあるかもしれません。
ただ、これを1発で出せるような環境を作っておくこと自体の価値は、とても高いです。

自分の専門知識と掛け合わせると、自分の使う時間はそのままで、仕事量だけを増やすことができます。結果として収入を上げることもできると思います。

※スキル(Skills)
AIエージェントに「この作業はこの手順でやる」という進め方をまとめて覚えさせておく仕組みです。動画のcreative-lpは、画像LPを作る手順をまとめたスキルです。スキルがあると、「LP作って」のような短い指示だけで、毎回同じ手順で作業を進めてくれます。

CodexのLP作成スキルの作り方:大事なのはフォルダの中身

LP作成の3STEP(フォルダ・素材、企画・内容・デザイン、生成・修正)の全体像スライド
やることは3STEP。フォルダと素材を作る→企画・内容・デザインを整える→生成・修正する

こうしたスキルは、有料で数千円から数万円ほどで販売されていることもあります。ここからは、そのLP作成スキルの作り方を解説します。

今回はスキルを使いましたが、大事なのはスキルよりも、使うフォルダの中身のほうです。
スキルは、1つLPを作ったあとに「この作業工程は次も使うな」と思ったら保管しておく、というイメージで大丈夫です。
難しく考えず、仕事をパッケージして保管しておくという意味合いでスキルにする、と考えてください。

やることはたった3STEP

  1. STEP1:フォルダと素材を作る(今回であれば「デモ」というフォルダを作り、その中に素材を入れていく)
  2. STEP2:素材を整える(企画・内容・デザインを詰めていく)
  3. STEP3:生成し、必要であれば修正する

素材とは、たとえばデイトラのロゴマークや講師自身の写真、デザインのルール、LPに掲載するものなどです。
STEP1で素材を集め、STEP2で素材を整え、STEP3で生成するという3ステップを辿っていきます。

※スキル化
一度うまくいった作業の手順を、AIが次回以降も再現できる形で保存しておくことです。最初からスキルを作ろうとするのではなく、実際に1本作ってみて、うまくいった工程をあとからまとめるのがポイントです。

STEP1:Codexで使うフォルダと素材を準備する

前提:動画のLP作成スキル(creative-lp)はコース内で配布
動画でKAWAIさんが使っているLP作成スキルは、デイトラAI業務活用コースの中で配布されています。スキルが無くても、ここで紹介するフォルダ構成と手順を自分で用意すれば同じ流れで作れます。コースの詳細は動画概要欄のリンクから確認できます。
templateフォルダの中にAGENTS.md・README.md・content.md・design.md・lpフォルダを置いたフォルダ構成
templateフォルダの構成。lpフォルダの中にindex.htmlとimgフォルダを入れる

まずはフォルダの集め方です。
templateというフォルダの中に、AGENTS.md、README.mdなど、いろいろなファイルを置いていきます。

ファイル・フォルダ 役割
AGENTS.md Codexが必ず読むファイル。「こういう動きをしてください」という指示を書いておく
README.md templateフォルダの情報を入れておく、フォルダの取扱説明書のようなもの
content.md LPに載せるべき情報を、ざっくりでも書いておく
design.md デザインのルール。色(デイトラなら紫、アクセントにオレンジや黄色)や文字のデザインなど、見た目の印象を定義する
lp/index.html 最終的にLPとなる画像をはめ込むファイル
lp/img/ 素材の画像を入れるフォルダ(最初は空でOK)

このように、AGENTS.mdはCodexが必ず読むファイルなので、どう動いてほしいかを書いておきます。
最後にlpというフォルダがあり、この中にindex.htmlとimgフォルダを入れておきます。これは空っぽで大丈夫です。

料理でいうと、食材をキッチンに並べて、使う器具も並べておくようなイメージです。

なお、index.htmlは画像を配置する枠のようなものなので、特に何かを書く必要はありません。
そもそもindex.htmlというファイルを置いておかなくても、自然に作られるものなので大丈夫です。

※AGENTS.md・README.md
AGENTS.mdは、Codexがフォルダで作業を始めるときに読み込む指示書です。README.mdは、そのフォルダに何が入っているかを説明するファイルです。どちらもMarkdown(.md)という、見出しや箇条書きを記号で書けるテキスト形式で作ります。

STEP2:content.mdとdesign.mdで素材を整える

content.mdに掲載したいこと、design.mdにデザインの印象を書いてAIに渡す図
内容(content.md)と見た目(design.md)を分けて書くのがポイント

LPの品質を左右する肝になるのが、content.mdとdesign.mdです。
ここでどんな内容か、どんなトンマナかを定義することで、最終的なLPの品質が変わってきます。

content.md:何を誰に伝えるのかを意識して書く

content.mdには、LPに掲載したいことを書きます。
このとき、そもそも何を伝えるのか、伝える相手が誰なのかを意識しながら書くと良いと思います。

design.md:見た人にどんな気持ちになってほしいかを考える

design.mdには、デザインの印象を書きます。
今回のようにデイトラのウェビナーであれば、デイトラ側にすでにイメージがあるので、そのイメージに合うデザインにすれば大丈夫です。

自分でdesign.mdを作る場合は、そのデザインを見た人にどんな気持ちになってほしいのかを考えると良いと思います。

  • ガッツがあるように印象付けたい → 赤やオレンジ
  • 誠実さや知的な印象にしたい → 青
  • 初心者向けや優しい印象にしたい → 緑

色によってどういう感情が湧き上がるかは、調べるといろいろ出てくるので、それをもとに決めていくのも1つの方法です。

content.mdとdesign.mdの2つのファイルもAIで作る

content.mdとdesign.mdをAIに作らせるための依頼文のテンプレート
商品・対象・目的・印象を埋めてAIに依頼すると、2つのファイルの下書きができる

content.mdは、ウェビナーならターゲットややること、日時など、イベントや商品について決まっていることを書けばいいので、比較的書きやすいと思います。
一方、「ガッツのある印象を持たせたいから赤」「メインカラーはこう、サブカラーはこう」といったデザインの指示を言語化するのは、特に非デザイナーには難しいものです。

そこで、この2つのファイルをAIで作る方法があります。動画では、そのためのプロンプトが用意されています。
書くのは次の4つです。

  • 商品:何のLPか
  • 対象:誰向けか(誰に見せるものか)
  • 目的:見た相手にどうなってほしいか(申し込んでほしい、予約してほしいなど)
  • 印象:ガッツが欲しい、誠実さをアピールしたい、優しいイメージを与えたい など

あとは、下の文章をコピーして依頼するだけです。【 】の部分を自分の内容に置き換えて使います。

商品:【 】 対象:【 】 目的:【 】 印象:【 】
この情報と lp/img/ の素材をもとに、
掲載内容を content.md、
デザイン方針を design.md に保存して。
未定の事実は「未定」。質問せず下書きを作って。

こうすると、content.mdとdesign.mdの2つのファイルができます。
imgフォルダの中にロゴの画像や素材、自社サービスの写真などを入れておけば、それらの画像も読み込んで、よしなにcontent.mdとdesign.mdを作ってくれます。
自分が伝えたいことを熱意を持って伝えれば、それでOKです。

※トンマナ
「トーン&マナー」の略で、色・フォント・写真の雰囲気など、デザイン全体の統一感のことです。design.mdにトンマナを言語化しておくと、セクションごとに画像を生成しても、LP全体の見た目がばらつきにくくなります。

STEP3:Codexでの画像生成はファーストビューから進める

FVを生成→確認→修正を繰り返してから残りを生成する流れのスライド
1枚ずつ生成して1点ずつ修正。まずはファーストビュー(FV)だけで確認する

フォルダの準備やcontent.md、design.mdが用意できたら、いよいよ画像を生成します。
今回は一気に全部のLPを生成しましたが、最初にやるときは、ファーストビュー(一番最初に見られるセクション)から作るのがおすすめです。

最初にファーストビューだけを作る理由

画像生成は時間もかかりますし、トークン(AIのエネルギーのようなもの)も割と消費されます。
極端な例でいうと、20枚ほど生成させて、休憩から帰ってきたら20枚全部が想定と全然違うデザインになっていた、ということもあり得ます。これは結構悲惨です。

それを避けるために、まずファーストビューだけを生成させ、そのデザインが自分の認識と合っているかを確認するのが良いと思います。
AIに全部お任せすると、20枚どんどん突き進んでしまいます。最初の1枚目でどちらに進んでいるかを確認しておけば、見当違いの方向に行かずに済みます。

確認→修正→残りを生成の順に進める

  1. ファーストビューを生成する
  2. 生成されたら確認する
  3. 修正点があれば修正を指示する
  4. 画像が完成したら次のセクションへ進み、残りを生成する

「ちょっと待って」と言えるように、まず1番目のセクションだけ生成してみるのがポイントです。
慎重な方は、2セクション目、3セクション目まで生成してから「OKだったら残りも全部お願い」と指示してもいいかもしれません。

※ファーストビュー(FV)
ページを開いたときに、スクロールせずに最初に表示される範囲のことです。LPの第一印象を決める部分なので、ここのデザインが固まれば、残りのセクションもその方向性に合わせて作りやすくなります。

LPのセクションの順番は目的と届けたい相手を伝えてAIに任せる

1枚ずつ出して調整し、最終的にLP1枚分のセクションを出し切る流れは分かりました。
では、作らなければいけないセクションや、その順番はどう決めればいいのでしょうか。

Webで検索したりAIに聞いたりすると、さまざまなフレームワークや方法が出てきます。
ただ、自分で書く必要はそもそもなく、AIが情報設計してくれるので、その通りにやってもらうのがいいと思います。

肝になるのは、STEP2で書いた目的です。
目的と、誰に届けたいのかさえ明確に伝えれば、どのように誘導していくかというハウの部分はAIが考えてくれます。
むしろ、自分から「この順番でLPを作ってください」とお願いしすぎないほうが良かったりします。

PASONAなどの型をガチガチに指定しすぎない

LPの型には、PASONAやPASBECONAなど、「この順番でセクションを並べましょう」というものがあります。
こうした型を使うのもいいのですが、影響されすぎると、どこかで見たLPになったり、売り込み感が強くなったりしてしまうことがあります。
今のAIは賢いので、そこはAIに自由に考えさせるのが良いと思います。

※PASONA・PASBECONA
セールスコピーやLPの構成でよく使われる型です。一般的にPASONAは「問題・煽り(共感)・解決策・提案・絞り込み・行動」の順で読み手を導く考え方で、PASBECONAはそこに「利益・証拠」などを加えた発展形です。動画では、こうした型に縛られすぎず、目的を伝えてAIに構成を考えさせる方法を勧めています。

画像LPを公開できる形にする方法:ロゴとボタンはHTMLで上から重ねる

画像LPの上にHTMLで配置した講師紹介とスクロール追従ボタン
セクション画像をindex.htmlに並べ、ロゴやボタンはあとからHTMLで上に配置している

セクションごとの画像を全部出し切っても、その段階ではまだ画像ファイルがたくさんあるだけの状態です。
全部が1枚につながっていて、ボタンもある。そんな公開できるLPの形にするには、どうすればいいのでしょうか。

これも、日本語で伝えるだけでOKです。

  1. 画像が全部生成され、全部にOKを出す
  2. STEP1で用意したindex.htmlに画像を配置してもらう
  3. 配置したあとに、デイトラのロゴマークやボタンを配置してもらう

変形させたくないロゴや人物はあとからHTMLで配置する

実は、先ほどのLPのロゴは、画像生成の段階でロゴを渡して作らせたものではありません。
セクション画像を作ったあとに、ロゴなどの素材を上から足していったものです。

ロゴマークを画像生成してしまうと、形が変わってしまうことがあります。
そのため、ロゴマークや、デイトラちゃんのようなキャラクターなど、確実にそのまま使ってほしいものは、コード(HTML)で配置するのが良いと思います。
これはWebサイトだけでなく、スライドにも使える方法です。

画像生成のほうにロゴまで渡してしまうと、変形したロゴが出てきたり、人の顔が変わってしまったりしかねません。
クライアントワークでそうなると事故になってしまうので、地味に見えるかもしれませんが大事なノウハウです。
画像生成だけだとガチャに近く、次の生成がどうなるかヒヤヒヤしますが、この方法なら変わってほしくない素材は確実にそのまま使えるので、当たりくじしか出ないような感覚です。

画像LPかコードLPかの二択ではなく、両方使う

冒頭で「画像LPか、コードLPか」という二択の話をしましたが、0か1かではなく、どちらも使えばいいというスタンスです。
基本的にはHTMLの枠を使いつつ、中身は画像にする。この2つを使えば、おそらくどんなことでもできると感じています。

うまくいった工程は最後にスキル化しておく

今回の手法をまとめると、次のとおりです。

  • セクションごとに、土台となる画像を生成する
  • それを1枚につなげた上に、変形してはいけないロゴや人物素材をコードで配置する
  • ボタンなどもその上にコードで配置する

この工程をCodexにそのまま指示すれば、LPが出来上がります。
そして仕事が終わったあとに、「この工程をスキル化してください」と最後に伝えると、次からは冒頭の「LP作って」というプロンプトだけで作れるようになります。
一度成功した仕事があれば、ぜひスキル化してみてください。

※index.html
Webサイトのトップページとして最初に読み込まれるHTMLファイルです。画像LPでは、生成したセクション画像を上から順に並べる「枠」の役割を持ちます。ロゴやボタンもこのファイルの中で画像の上に重ねて配置します。

なお、KAWAIさんがウェビナーで画像LPの作り方を実演した様子は、【イベントレポート】Codexでデザイン性の高いLPを爆速で作る方法でも紹介しています。

CodexでのLPの作り方に関するよくある質問

Q. 画像LPとコードLPはどう使い分ければいいですか?

目を引きたい・インパクトを出したい場合は、表現の自由度が高い画像LPがおすすめです。一方、毎回同じ位置・同じ大きさ・同じ色で置きたいものはコードが向いています。動画では、HTMLの枠を使いつつ中身を画像にして、両方を組み合わせる方法を紹介しています。

Q. Claude Codeでも画像LPは作れますか?

作れます。ただしClaude Code自体には画像生成機能がないため、ChatGPTなどの画像生成ツールを呼び出す必要があります。Codexは画像生成ツールを内蔵しているので、追加の作業なしで一気通貫できる点がおすすめの理由です。

Q. LP作成スキルを作るには何から始めればいいですか?

まずはtemplateフォルダにAGENTS.md・README.md・content.md・design.md・lpフォルダを用意し、実際にLPを1本作ってみることです。うまくいったら、最後に「この工程をスキル化してください」と伝えれば、次から「LP作って」だけで作れるようになります。

Q. design.mdの書き方が分かりません。

自分で書かなくても、商品・対象・目的・印象の4つを埋めた依頼文をAIに渡せば、content.mdとdesign.mdの下書きを作ってもらえます。自分で考える場合は、見た人にどんな気持ちになってほしいかから色を決めるのがコツです。

Q. ロゴも画像生成に渡したほうがいいですか?

渡さないほうが安全です。画像生成するとロゴや人物の形が変わってしまうことがあるため、動画ではセクション画像を作ったあとに、ロゴやキャラクター、ボタンをHTMLで上から配置しています。

CodexのLP作りを実務で使いこなすならデイトラ「AI業務活用コース」

本記事で解説したCodexでの画像LPの作り方は、フォルダと素材を用意すれば独学でも試すことができます。
ただ、AIを本格的に業務で使えるようになるには、現場のプロから学び、手を動かしながら身につける環境があると近道です。

デイトラの「AI業務活用コース」は、KAWAIさんをはじめ、各業務のプロフェッショナルが現場で使えるワンランク上のAI活用法を解説している講座です。
実践的な手法の解説に加えて、質問回答も行う定期的なライブ配信や、リアルな場での作業会もあり、最速でハイレベルなAIを使えるようになるための環境が整っています。

さらに、学習するだけでなく、すぐにできるようになるためのスキルの配布も行っています。
今回解説した、KAWAIさんが作成したLP作成スキルもコース内で配布されています。

また、買い切りの講座なので、受講後すぐに全てのコンテンツを見ることができ、オフラインの作業会にも参加できます。サブスクの費用もかかりません。

AIを実務に活用したい方は、ぜひカリキュラムをチェックしてみてください。

▶︎デイトラAI業務活用コースの詳細を見てみる

「自分に合うか不安…」という方は公式LINEへ

「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」

そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。

無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。

▶︎デイトラ公式LINEで無料相談してみる

この記事を書いた人
KAWAI(@kawai_design)
デザイナー歴14年のデザイナーです。SHIFT AIのAX戦略部でデザイン部門責任者 兼 コミュニケーションデザイン部部長を務め、ベイジのAIデザイン顧問も担当しています。AIとデザインを軸に発信・登壇・研修・教材開発を手がけており、デイトラAI業務活用コースでも講師を務めています。