アディザイン・Web事業部の吉田です。
AIが作ったホームページのデザイン画像を、OpenAI の Codex に渡して、HTML（ブラウザで開いて見られるホームページのファイル）で「完璧に再現して」と頼んだところ、指示から約14分で、写真素材の作り直しからスマホでの組み替えまで、ほぼそのままのページができあがりました。細かい所に違いは残りますが、それも指示すれば直せる状態です。
ちょっと前までは、AIに同じことを頼んでも、色使いが似ているだけの別のページになっていました。今回は、試しに自分でもやれるかなくらいの気持ちで始めて、精度の高さにびっくりしています。
ホームページやLPの見た目を作る部分は、ここまで簡単になりました。なので僕は、これからは会社のホームページを含めて、ウェブサイト全般をAIを使って自社で作ったほうがいいと思っています。今回のように写真をふんだんに使ったページでもここまでできるので、写真をあまり使わない普通の会社のサイトなら、もっと簡単に作れます。
この記事では、実際にやった手順と、違いが出た所、それでも残る仕事、自社で作れると何が変わるかを順にまとめます。
AIが組んだページは、そのまま開いて触れるように置いてあります。スマホでも開いてみてください。
Webサイトの試作AIのデザイン画像から組んだ商品サイト（ドッグフードの見本）AIが画像で作ったトップページのデザイン案を、AI（Codex）がHTMLとCSSで組み直した見本です。商品名とパッケージは検証用の架空のもので、スマホの幅にも組み替わります。作品を開く（新しいタブで開きます）
AIに頼んだ作業は、大きく分けて3つ
やったことを大きく分けると、AIへの3つの依頼です。題材は、試すために用意した架空のドッグフードの商品サイトで、商品名は仮の「DOG FOOD」にしました。
ChatGPT で素材の画像を作る
商品の情報とキャッチコピーを渡して、商品パッケージとフレンチブルドッグの写真を作ってもらう（9月10日）
Codex でデザイン案を作る
商品の企画メモと素材をもとに、トップページのデザイン案を縦長の画像で3案。指示から約5分（9月11日）
Codex でHTMLにする
選んだ1案の画像を渡し、HTMLとCSSで完全に再現するよう頼む。指示から完成の報告まで約14分（9月29日）
時間は、指示を出してから、完成の報告が来るまで
最初の素材は、ChatGPT の画像生成で作りました。使ったのは、9月8日に公開された ChatGPT Images 2.5 です。
デザイン案とHTMLは、Codex に頼んでいます。Codex は OpenAI が提供する、AIでプログラムを作るツールで、パソコンの中でファイルを作ったり動かしたりしながら、プログラムやページを作ってくれます。今回は、いちばん性能の高いモデルの GPT-6 Astra で動かし、デザイン案の画像も Codex に組み込まれた画像生成で作りました。モデルの名前と位置づけは、OpenAI の開発者向けのモデル一覧で確かめられます（2026年10月8日に確認）。
HTMLを頼んだときの指示は、「デザイン画像を、ホームページのファイル（index.html）と見た目の設定ファイル（tailwind.css）を使って完璧に再現して。画像も必要なものは全部出力して。レスポンシブも完璧に」という内容です。どの部品をどう作るかは、何も指示していません。
写真の作り直しから検査まで、AIが自分で進めた
頼んだあと、Codex はデザイン画像を部品に分け、写真を作り直し、組んで、自分で確かめて直すところまで進めました。途中で聞かれたのは、どの案にするかと保存場所の2つだけで、あとは Codex が自分で進めています。進め方は次のとおりです。
デザイン画像を読み取る
見出し・ボタン・写真・波形の区切り・手書き風の文字・葉の線画を、部品ごとに分ける
写真を素材として作り直す
犬と商品の写真、犬のアップ、商品のエリア、記事の写真の4枚を、文字やボタンの入っていない写真として画像生成で作り直す
HTMLとCSSで組む
見出しや本文は、画像ではなく書き換えられる文字で組む。葉の線画や波形はプログラムで描く
7つの画面幅で確かめる
スマホの320pxから大きな画面の1920pxまで、はみ出し・画像の読み込み・メニューの開閉を自動で検査する
気になる所を自分で直す
スマホで商品が切れる所、記事カードの高さ、写真と背景の境目を調整する
最後に商品を切り抜く
パッケージを背景が透明な画像にして、グリーンの背景に自然になじませてから、完成を報告する
見出しやボタンを画像に描き込まず、文字として組んでいる点は大事です。文字のままなら、あとからキャッチコピーを変えるのも、スマホで改行を変えるのも、AIに一言頼めば済みます。
できあがったページと、元のデザイン画像を並べるとこうなります。
スマホの幅（390px）では、文字と写真が縦に並ぶ形に組み替えられていました。デザイン画像はパソコン向けの配置で描いた1枚だけなので、スマホの形は Codex が考えています。
直したのは、波形の区切りの1か所だけ
できたページを見て、僕が直してほしいと伝えたのは1か所です。セクションの境目の波形に、写真がきれいにはまっていませんでした。
「波のところで画像がしっくりきていない。理解できるなら直して」と伝えると、Codex は原因を「写真の上に背景色の波形を重ねていたので、下に写真の四角い端が残っていた」と突き止めています。写真そのものを波形で切り抜く形に組み直し、指摘から約5分で直りました。
これくらいの直しなら、専門用語を知らなくても、見たままを伝えれば通じます。細かく見ていけば、手書き風の文字の位置や、見出しの書体の太さなど、デザイン画像と違う所はまだあります。そこも同じように一つずつ伝えれば、直していける感触でした。
先にデザインを画像で決めるやり方は、ほかでも勧められている
AIにデザインを画像で作らせてからページにする人は、ほかにもいます。
デザイナーの Griffin Wooldridge さんは、GPT-6 Astra でのWebデザインの検証記事（2026年9月7日公開、10月8日に確認）で、Codex に1回の指示だけで、LPの設計からコード、画像までを作らせました。画像は実写に見える出来だった一方、スマホの幅では細かい不具合が残り、月額20ドルのプランでは使える量の上限にすぐ達したそうです。
マーケターの Shann Holmberg さんは、Codex のWebデザインの質を上げる方法を書いたXの投稿（2026年9月22日、10月8日に確認）で、先に画像でデザイン案を作らせて、確認してからコードを書かせるやり方を勧めています。僕のやり方も、この順番と同じです。
| やり方 | 見た目を直すタイミング | 向いている場面 |
|---|---|---|
| 1回の指示で全部作らせる | できあがったページを見てから直す | とにかく早く最初の形を見たいとき |
| デザイン画像を先に決めてからHTMLにする | 画像の段階で直し、決まってからページにする | 見た目をきちんと決めてから作りたいとき |
AIが画像に入れた言葉は、公開前に事実と照らし合わせる
一番気をつけたいのは、AIが画像の中に入れた言葉が、事実と合っているかです。今回のパッケージの画像には「国産素材100%」「着色料・保存料不使用」という文字が入っていて、架空の商品なので、もちろん事実ではありません。
実際の商品で使うなら、そのまま使う前に必ず中身と照らし合わせてください。
商品を実際より著しく良く見せる表示は、消費者庁の「優良誤認とは」のページにあるとおり景品表示法で禁止されていて、うっかり間違えた場合も対象になります（2026年10月8日に確認）。
もう1つ、HTMLにする段階で、Codex は本文の一部を書き換えています。デザイン画像にあった「自然由来の原材料だけ」「安心して選べる」という言い切りを、確かめられていない表現として避け、「選びたいごはん」のような言い方に変えていました。
これは、頼み方の工夫で防げると思います。デザイン画像を作る最初の段階で、入れてほしいキャッチコピーや文章を渡しておきます。HTMLにするときは、画像の文章に問題が無ければ「文章は一切変えずにHTMLにして」と頼みます。
それでも思いどおりにならないことはあるので、公開前に元の原稿と読み比べる工程は外せません。
写真は元のデザイン画像から作り直したものなので、細部まで同じではありません。実際の商品写真を使うときは、撮った写真を渡して、それに差し替えるよう頼む形になります。
見た目は自社で作れる。残るのはその先
ここまでやってみて、ホームページやLPの見た目を作る部分は、もう誰でもAIで作れる状態になったと感じています。一方で、ページができても、それだけでは売れるサイトになりません。
| まだ決めること | 何を決めるか |
|---|---|
| どこに置くか | ページを公開するサーバーとドメイン。公開の作業と、公開後の保守を誰がするか |
| どう買ってもらうか | カートや決済を、ネットショップのサービスにつなぐか、自社で組むか |
| どう人を集めるか | 広告・SEO・SNSのどれで人を連れてくるか。来た人に強みが伝わる中身になっているか |
| 書いた内容は正しいか | 商品の説明・効果の書き方が、景品表示法や薬機法に触れていないか |
今回のページも、サーバーにもカートにもつないでいません。ここは、ページを作るのとは別の知識が要るところです。カートや決済の選び方はECサイト構築の費用の記事に、自社でホームページを作るときの全体の手順はホームページの作り方の記事にまとめています。
それでも、見た目を作る部分を自社で持てる意味は大きいと思います。作り替えの速さがそのまま成果に効く例として、LPの話をします。
LPは、検索した言葉ごとに最初の画面を作り替える
LPは、1つの商品を広告で売るためのページです。同じ商品でも、検索した言葉が違えば、最初に見せる画面も変えることで、読み進めてもらいやすくなります。
理由は、広告から来る人がそれぞれ違う期待を持っているからです。検索広告（リスティング広告）は、狙ったキーワードで検索した人に表示されます。1つの商品の良さを、いろいろなキーワードで広告にして人を集めますが、来る人が期待していることはバラバラです。
たとえば同じドッグフードでも、「ドッグフード 原材料」で検索した人は、どんな素材で作っているかを知りたがっています。「ドッグフード 食べない」「食いつき」で検索した人が知りたいのは、うちの子が食べてくれるかどうかです。
そこで、同じ商品のLPを、訴求（何を一番の売りとして見せるか）ごとに作り分けます。下の2つは、今回の架空のドッグフードで、Codex に作ってもらったファーストビュー（ページを開いて最初に見える部分）の例です。
ページを開いた人は、最初の画面が自分の求めているものかどうかを、ものすごい速さで判断します。「違う」と感じた瞬間に、その先はほとんど読まれません。最初の画面で「あなたが探しているのはこれです」と伝えられるかどうかが、とても大事になります。
- 検索した言葉
「ドッグフード 原材料」
クリックした広告素材へのこだわりを伝える広告
最初に見える画面素材が並ぶ画面
読み進める知りたかった素材の話なので、続きを読む
- 検索した言葉
「ドッグフード 食いつき」
クリックした広告食べる様子を伝える広告
最初に見える画面食べる様子の画面
読み進めるうちの子も食べそうだと感じて、続きを読む
- 検索した言葉
「ドッグフード 食いつき」
クリックした広告食べる様子を伝える広告
最初に見える画面素材が並ぶ画面（どの広告からも同じページ）
すぐ閉じる探していた話と違うと感じて、数秒で閉じる
同じ商品でも、検索した言葉に合う最初の画面を見せると、続きを読んでもらいやすい
作り分けたLPは、広告の数字を見て、さらに作り替えていきます。部品の入れ替えも含めて、1件の購入にかかった広告費（CPA）や、購入・申し込みの割合（コンバージョン率）を比べていく作業です。
訴求ごとにLPを作る
売りの見せ方を変えたLPを、AIで何本か作る
広告で配信する
それぞれのLPに広告から人を送る
数字を比べる
1件の購入にかかった広告費（CPA）と、購入・申し込みの割合を見る
反応の良い形に作り替える
数字の良かった訴求や部品を残し、次の版を作る
作り替えるたびに外注していると、この一周に時間がかかる
この作業を外注していると、直したい所が分かってから、依頼して、見積りが出て、仕上がるまでに日数がかかります。LPで物を売るときは、広告費を大きくかけることが多いので、待っている間も広告費は出ていきます。
LPの出来が広告費に効くことは、Google の説明にも出てきます。Google 広告ヘルプの「広告の品質について」では、広告の品質を、広告とランディングページの体験の質から推定するとしています。一般に品質が高いほどクリック1回あたりの費用は安くなり、広告とランディングページの品質が高いほうが、購入などにつながりやすい傾向があるとも書かれています（2026年10月8日に確認）。品質スコアの説明のページでも、ランディングページの利便性が要素の1つに挙がっています。
広告にお金をかけている分、LPを良くしていく作業は、その広告費の効き方そのものを変えます。デザイン画像からここまでの精度でHTMLにできるなら、この一周を社内で、とんでもない速さで回せるようになります。LPを自社でどんどん作り替えられる体制は、広告に投資している会社ほど効くと思います。
LPの費用がどこで決まるかはLPの費用の記事に、LPに載せる中身はLPの構成の記事に、広告費の決め方はGoogle広告の費用の記事にまとめています。
同じことを試したい人へ
自分でも試してみたい方は、Codex や Claude Code のような、パソコンの中でファイルを作れるAIツールに、デザイン画像と一緒に、次の文を貼って使ってみてください。デザイン画像がまだなければ、先にAIの画像生成で作ってもらうところから始められます。
添付したデザイン画像を、ウェブサイトとしてそのまま再現してください。
【お願いしたいこと】
1. 画像を見て、見出し・本文・ボタン・写真・飾りの部品に分けてください
2. 写真は、文字やボタンが入っていない写真の素材として作り直してください
3. 見出し・本文・ボタンは画像にせず、あとから書き換えられる文字として組んでください
4. スマホの幅でも読みやすいように、縦に並べるなど組み替えてください
5. スマホからパソコンまでいくつかの画面幅で表示を確かめ、はみ出しや崩れがあれば直してください
【条件】
・ 画像の中の見出し・本文は、一字も変えずにそのまま文字として組んでください
・ 商品の説明・効果の言葉で、事実か確かめられないものがあれば、変えずに一覧にして教えてください
・ 完成したら、元の画像と違う所を一覧にしてくださいできあがりの目安は、この記事で作ったページで確かめられます。
Webサイトの試作AIのデザイン画像から組んだ商品サイト（ドッグフードの見本）AIが画像で作ったトップページのデザイン案を、AI（Codex）がHTMLとCSSで組み直した見本です。商品名とパッケージは検証用の架空のもので、スマホの幅にも組み替わります。作品を開く（新しいタブで開きます）
試すときは、まだ公開していない商品の情報や、お客さまの名前などは入れないようにしてください。できたページは、手元のパソコンで開いて確かめるだけなら、サーバーは要りません。
アディザインに相談するなら
アディザインでは、自社でホームページやLPを作って運営したい会社に向けて、内製化支援を行っています。サーバーへの公開や広告の計測のように、自社だけでは詰まりやすい所を支える形です。
AIの使い方そのものを社内で身につけたい場合は、AI活用・セミナーの中のAI基礎講座から始められます。社内で回せる体制が整うまでの間、LPの制作を任せたい場合は、LP制作のページを見てください。どのサービスも、最新の内容と料金は各ページで確かめられます。
よくある質問
Q. デザインやプログラムの知識がなくてもできますか？
今回、どの部品をどう作るかは指示していません。直してほしい所も「波のところがしっくりこない」のように見たままを伝えて通じました。ただ、公開するにはサーバーやドメインの知識が別に要ります。
Q. 元のデザイン画像とまったく同じになりますか？
細部までは同じになりません。写真はデザイン画像から作り直しているため、見出しの書体の太さや、手書き風の文字の位置などに違いが出ます。違う所を一つずつ伝えれば、直していけます。
Q. 作ったページは WordPress で使えますか？
使える形に組み直すことはできます。僕も同じ時期に、別のデザイン案で、AIにページの見本から WordPress のテーマまで作らせてみました。WordPress で作るときの手順はWordPressのホームページの記事にまとめています。
Q. Codex 以外のAIでもできますか？
Claude Code など、パソコンの中でファイルを作って動かせるAIツールなら、同じ頼み方で試せます。画像の素材を作り直す工程は、画像生成ができるツールかどうかで進め方が変わります。
