投稿日：2026.09.11

大阪で「A4」1枚アンケート広告作成アドバイザーとして活動している浅野と申します （プロフィール） 。現在は独立系の不動産コンサルティング会社を経営しています。 30年以上にわたり、一貫して不動産オーナーの土地の有効活用や賃貸マンション・アパートの入居率改善のお手伝いを行っています。中でも「事業総額80億以上、累計1万室の募集実績」をベースに体系化した「賃貸マンション・アパートの入居率を高める販促プログラム」の提供が得意です。「A4」1枚アンケートやマンダラ広告作成法を使っての「マイソク（募集チラシ）」作成や改善も定評があります。空室に困っているオーナー、入居率を高め戸数拡大を図りたい管理会社を応援していきます。

前回は、同じ説明をAIにしなくて済む仕組みとして「エージェントスキル」を紹介しました。考え方と作り方が中心だったので、「で、実際にどう使うの？」と思われた方もいらっしゃると思います。今回はその具体例をひとつお見せします。

題材はランディングページ（LP）のデザインです。

AIでLPがデザインできるようになったのは、もう珍しい話ではありません。原稿を渡して「LPにして」と言えば、それなりの形のものが数分で出てきます。ただ、実際にやってみた方はお気づきだと思うのですが、普通に指示するとまだまだ「AIが作りました」という感じが抜けません。 色使い、余白、写真の置き方、どこか見覚えのある雰囲気になります。

これを、もう一段プロのデザインに近づける方法があります。やり方はそれほど難しくありません。順番を変えるだけです。

1．AIにランディングページをデザインしてもらうと

まず、今の「普通のやり方」でどうなるかを見ていただきます。

今回は具体的な商品や企業のものは記事に載せられませんので、仮の健康食品を想定して作った原稿を用意しました。

この原稿をAIに渡して、「この原稿でランディングページを作ってください」と指示します。

デザインには定評のある Gemini Flash 3.8（Canvas）を使いました。出てきたのがこちらです。

〔Gemini Canvasで生成したLP〕

以前に比べるとかなり良くなっています。1年前なら「これは使えないな」というレベルのものが返ってきていましたが、今は構成も整っていて、スマホ表示にも対応している。

正直に申し上げると、それでも、見た瞬間に「あ、AIで作ったな」と伝わってしまいます。

具体的には、以下のようなことが要因です。

つまり、コードを書くAIは「レイアウトの正しさ」は得意でも、「見た目の自然なデザイン」を作るのは苦手なのだと言えます。

2．プロのようなデザインにする方法

では、ここからが今回の本題です。

やることは、HTMLのコードを書かせる前に、まず「絵」を描かせることです。

今回、使うのは、 「GPT-6 Astra」 と、画像生成の能力が飛躍的に上がった 「ChatGPT Images 2.5」 です。

この組み合わせが、今のところいちばん「自然な完成度の高いデザイン」を作れると感じています。

さきほどと同じ原稿を渡して、次のように指示します。

【プロンプト】
以下の商品のランディングページをデザインしてください。
商品を訴求するのに必要な画像、イメージ素材も作成してください。
コードでは無く、LPを画像として生成してください。

ポイントは最後の一行です。「コードでは無く、画像として」と明示します。ここを書かないと、AIは気を利かせてHTMLを書き始めます。

すると、LPが何枚かの画像に分かれてデザインされて出てきます。ファーストビュー、悩みの提示、商品の説明、お客様の声、オファーと行動喚起、といった具合に、上から順にです。

〔ChatGPT Image 2.5 で生成したLPデザイン（複数枚）〕

見ていただくと分かると思いますが、さきほどのAIっぽいデザインとはまったく違うレベルのものになります。商品写真の質感、背景のトーン、文字の強弱、余白の取り方。デザイン会社に発注したものと並べても、パッと見では区別がつかないくらいです。

なぜ、こうなるのかというと、画像生成のAIは世の中にある「良いデザイン」の見た目を大量に学習しているからです。コードを書くAIは「正しく動くHTML」を学習していて、見た目の良し悪しはその副産物にすぎません。

ただし、ここで出てくる文字は、原稿と微妙に違っていることがあります。画像生成のAIは文字の再現が完璧ではありません。ただ、この段階の目的はデザインの方向を決めることなので、文字は気にしなくて構いません。文字は次の工程で原稿のとおりに入れ直します。

3．次に、画像を忠実にHTMLのコードで再現する

デザインの「絵」はできました。ですが、画像のままではLPとして公開できません。リンクも押せませんし、スマホでの表示も崩れます。検索にも引っかかりません。

そこで、この画像のデザインを踏襲して、HTMLでコーディングしてもらいます。

同じ会話の続きで、こう指示します。

【プロンプト】

次に、上記で生成した画像のトンマナ、デザインを忠実に
下記の順番でHTMLでデザインして再現してください。

「トンマナ」はトーン＆マナーの略で、色・書体・雰囲気といった見た目の統一感のことです。「下記の順番で」のあとには、最初に渡した原稿の構成（ファーストビュー→悩み→商品→お客様の声→オファー→行動喚起→問い合わせ先）をそのまま並べます。

ここで大事なのは、AIに「ゼロからデザインさせない」ことです。すでに目の前に手本の絵があるので、AIはそれを写す作業に集中できます。色も、余白も、写真の置き方も、手本に寄せてくれます。さきほど生成された商品画像やイメージ素材も、そのままHTMLに組み込めます。

〔画像をもとにHTMLで再現したLP〕

https://lin-ky.web.app/rL62tF

※仮のサンプルページです。申込みはされないでください。

1で作ったものと見比べてください。原稿はまったく同じです。違うのは、手本の絵があったかどうかだけです。

この手順をエージェントスキルにする

ここまでで、やり方は分かりました。ただ、次に別の商品でLPを作るとき、また同じ2つのプロンプトを思い出して打ち込むのは面倒です。前回の記事で書いた「毎回おなじ説明」がまた始まってしまいます。

そこで最後に、この手順そのものをエージェントスキルに変換します。指示は一行です。

【プロンプト】
この画像を作成してからHTMLでコーディングする手順を
エージェントスキルにしてください

すると、「原稿を受け取る→まず画像でLPをデザインする→その画像を手本にHTMLで再現する」という手順が、前回ご紹介したエージェントスキルの形で書き出されます。次回からは、原稿を渡して「LPを作って」と言うだけで、AIがこのスキルを自分で取りに行き、同じ手順で動いてくれます。
※うまく作動しない場合は、具体的なスキル名を指定してから指示。この記事と同じ流れで作成すれば、皆様の環境にスキルが構築できます。ただし、この「原稿⇒画像⇒HTML化」は画像生成能力の高い「ChatGPT Codex」を使っています。「ClaudeCode、ClaudeCowork」でもスキルは作成できますが、画像生成能力が劣ります。

前回の記事で、「自分の手順を持っている人ほど、AIを使うと強くなる」と書きました。今回の「先に絵を描かせる」というのも、言ってしまえばただの手順です。ただ、その手順を持っているかどうかで、出てくるものの質がここまで変わる。そして手順は、一度書けばファイルとして残せます。

まとめ

• AIにLPをコードで直接作らせると、レイアウトは整うが「AIっぽさ」が抜けない
• 先に画像でデザインさせ、その画像を手本にHTMLで再現すると、プロの仕上がりに近づく
• プロンプトは2つ。「コードでは無く画像で」「画像のトンマナを忠実にHTMLで」
• 画像段階の文字ズレは気にしない。文字は原稿どおりHTMLで入れ直す
• この手順は「エージェントスキルにしてください」の一言でスキル化できる。次回からは原稿を渡すだけ

前回の記事で書いたように、「A4」1枚アンケートの回答から原稿を作るところまでは、すでにスキル化できます。今回の方法をその先につなげると、アンケートを集める→原稿ができる→LPになるという流れが一本の手順になります。ただし、重要なことは、「｢A4｣1枚アンケート（あるいはマンダラ広告作成法）」でＬＰ原稿を作成することです

原稿の中身はお客様の声から出す。見た目はAIに任せる。この分担が、今いちばん現実的なやり方だと思っています。参考にされてください。

今回のLP制作手法について、もっと詳しく知りたい方は、全国各地にいる専門分野の違う「A4」1枚アンケート広告作成アドバイザーへお気軽にご相談ください。

※ご案内※

新刊発売記念｜客単価アップ大事典「つい買ってしまう」販促の仕掛け７５｜限定プレゼント

◆毎月 販促成功事例が届くメルマガ

📮 メルマガ登録で「A4」1枚アンケート通信が毎月届きます！
ブログを読んで「もっと事例を知りたい」「他の人はどう広告に活かしてるの？」と思った方へ。
メルマガに登録すると、毎月1回【成功事例】をまとめた
『「A4」1枚アンケート通信』があなたの元に届きます📩

登録は無料です♪ぜひお気軽にご登録ください😊

• 一覧へ戻る