AIでWebサイトを作ってもダサくなる人へ。ChatGPT×Codexで「実案件レベル」まで仕上げるWeb制作術

「ChatGPTを使えば、Webサイトなんて一瞬で作れる」

最近、こんな言葉をよく見かけます。

実際、作るだけならかなり簡単になりました。

ChatGPTに、

「20代向け転職サービスのLPを作って」

と入力する。

数十秒待つ。

すると、

それらしい構成が一瞬で出てきます。

Codexを使えば、そのままHTML/CSSまで書いてもらうこともできます。

少し前なら、Webサイトを1ページ作るだけでも、

構成を考えて、Figmaでデザインして、HTMLを書いて、CSSを書いて、スマホ対応して……

と、かなりの時間が必要でした。

それが今は、AIを使えば圧倒的に短縮できます。

僕自身、Web制作でAIを使う機会がかなり増えました。

構成案を考える。

ワイヤーフレームを整理する。

デザインカンプを作る。

HTML/CSSにする。

CTAにアニメーションを付ける。

スマホ表示を修正する。

以前なら一つずつ手作業だった工程に、ChatGPTやCodexを入れています。

ところが。

実際にやってみると、別の問題が出てきました。

「作れる」と「仕事で使える」の間には、かなり大きな壁がある

AIでWebサイトを作ったことがある人なら、一度くらい感じたことがないでしょうか。

「確かにWebサイトにはなっている。でも、なんかダサい……」

僕も何度もありました。

たとえばAIに、

「高品質で、プロのWebデザイナーが作ったようなサイトにしてください」

と指示する。

すると出てくるのが、

というデザイン。

決して壊れているわけではありません。

むしろ、一見すると結構きれいです。

でも何ページかAI生成サイトを見ていると、

「またこの感じか……」

となってくる。

さらに厄介なのが、デザインカンプを作った後です。

「よし、このデザインはかなりいい」

と思って、その画像をCodexに渡します。

そして、

「添付画像を忠実に再現してください」

と指示する。

これで完成。

……と思いますよね。

ところが実際には、

全然同じにならない。

Codexに「忠実に再現して」と言っても、なぜか忠実に再現してくれない

僕がAI Web制作で特に苦戦したのが、ここでした。

完成デザインを渡しているのに、

ということが普通に起こります。

さらに、

「STEP2の文字色だけ変えて」

と頼んだのに、

なぜか他のデザインまで変わる。

「そこは触らなくていい！」

と思って再修正。

今度は別の場所が変わる。

また修正。

そんなやり取りを繰り返していると、

「これ、自分でCSS直した方が早くない？」

という状態になります。

参考画像についても同じです。

たとえば5枚の参考画像を渡して、

「このデザインを参考にしてください」

と指示しても、

AI側からすると、

5枚のうち何を参考にすればいいのか分かりません。

Image Aのレイアウトなのか。

Image Bの配色なのか。

Image Cのファーストビューなのか。

Image DのCTAなのか。

Image Eの写真の雰囲気なのか。

人間ならなんとなく察することができます。

でもAIに「なんとなくいい感じに」は通用しません。

ここを曖昧にすると、

5枚を適当にミックスした、

「それっぽいけど、求めていたものとは違うデザイン」

が完成します。

では、AIはWeb制作に使えないのか？

むしろ逆です。

僕は、かなり使えると思っています。

ただし、

AIに全部任せない。

これが重要でした。

僕が試行錯誤して分かったのは、

AI Web制作がうまくいかない原因の多くは、

AIの性能不足ではなく、「AIにどこまで判断させるか」が曖昧だから

ということです。

たとえば、

「おしゃれなLPを作って」

という指示には、AIが判断しなければならないことが大量に含まれています。

誰向けなのか。

どんな印象にするのか。

何を一番目立たせるのか。

色は何色なのか。

余白はどれくらいなのか。

写真なのかイラストなのか。

CTAはどこなのか。

角丸はいくつなのか。

全部AI任せです。

当然、AIは学習している大量のWebデザインから、

無難な答え

を選びます。

その結果、

「どこかで見たことがあるAIサイト」

になります。

逆に、

人間側で判断すべきところを先に決めてしまえば、AIはものすごく強いです。

AIを「デザイナー」にするのではなく、「超高速な制作スタッフ」にする

僕が今、AI Web制作で一番意識している考え方です。

AIに、

「良いデザインを考えてください」

と丸投げするのではありません。

人間が、

何を作るかを決める。

そしてAIに、

決めたものを高速で形にしてもらう。

この役割分担です。

たとえば、僕なら大きく次のように分けます。

人間が決めること

AIに任せること

この形にすると、AIの出力がかなり安定します。

言い換えるなら、

AIに「考える範囲」を与えすぎない。

ここがポイントです。

「ChatGPT → いきなりコーディング」をやめたら、制作が安定した

最初の頃は僕も、

ChatGPT
↓
デザイン
↓
Codex

くらいの感覚で進めていました。

でも実案件として使おうとすると、それでは不安定でした。

今はもっと工程を細かく分けています。

たとえば、

ヒアリング
↓
ターゲット整理
↓
サイト構成
↓
ワイヤーフレーム
↓
参考デザインの役割整理
↓
デザインカンプ
↓
デザイン修正
 ↓
Codex実装
↓
PC/SP調整
↓
CTA・アニメーション
↓
最終チェック

という流れです。

一見すると工程が増えています。

でも実際には逆です。

途中の判断を先に済ませることで、

AIとの無駄な修正往復が減ります。

AI制作では、

工程を減らすことより、

「後からやり直す回数を減らすこと」

の方が重要だと思っています。

AIでWeb制作するなら、最初にデザインを考えてはいけない

ここもかなり重要です。

「Webサイトを作ろう」

となったとき、

つい最初に、

「どんなデザインにしよう？」

と考えてしまいます。

でも、その前に決めるものがあります。

たとえば転職支援サービスなら、

「20代向けの転職サービス」

だけでは足りません。

同じ20代でも、

では、刺さる言葉が全然違います。

さらに、

LPを読んだ後に、

問い合わせしてほしいのか。

LINE追加してほしいのか。

無料相談を予約してほしいのか。

これによってページ構成も変わります。

つまり、

デザインより先に「誰を、どこへ動かすのか」を決める。

ここが決まって初めて、

「では、どんな構成にするか」

「どんなデザインが合うか」

を考えられます。

AIを使っても、この基本は変わりません。

むしろAI時代だからこそ重要になっています。

AIは作るのが速い。

だから、

間違った方向にもものすごい速度で進めてしまう。

これが怖いところです。

ここまで読んで「じゃあ、具体的に何を指示すればいいの？」と思った方へ

ここからが、この教材で一番伝えたかった部分です。

考え方だけなら、無料の記事やYouTubeにもたくさんあります。

でも、実際にAI Web制作をすると困るのは、

「結局、ChatGPTやCodexに何て書けばいいの？」

という部分ではないでしょうか。

僕自身もそうでした。

たとえば、

「参考画像を忠実に再現させたい」

という一つの目的だけでも、

単純に、

「忠実に再現してください」

では足りません。

AIに、

何を変えてはいけないのか。

何を最優先にすべきなのか。

画像をどう扱うのか。

既存コードをどこまで変更していいのか。

まで細かく定義する必要があります。

特に効果が大きかったのが、

Codexに対して、

「デザインを改善しないでください」

と明示することでした。

普通なら、

「改善した方がいいのでは？」

と思いますよね。

でも、完成デザインを再現させたい場面では、

Codexの“親切な改善”が邪魔になることがあります。

ここから先では、

実際に僕がAI Web制作で使う考え方を、

「そのままコピペして使える指示」

まで落とし込んで解説します。

そして、特に見てほしいのが、

「Codexが勝手にデザインを変える問題」を止める方法です。

「参考画像を渡したのに似ない」

「ここだけ直してと言ったのに他まで変わる」

「画像を勝手に別素材へ置き換えられる」

こうした問題は、

Codexへの最初の指示を変えるだけで、かなり減らせます。

僕が何度も指示を書き直して辿り着いた、

「完成画像を仕様書として扱わせるためのプロンプト」

も、この先で具体的に公開します。

ここから先で公開する内容

第4章｜「LPの構成を考えて」で損している。ChatGPTから“売れる構成”を引き出す質問設計

AIに構成を考えさせる前に、何を渡せばいいのか。

ターゲット・悩み・強み・CVを整理しながら、

サイト構成を作るためのコピペ用プロンプトまで公開します。

第5章｜AIデザインの完成度は“生成前”に決まる。修正地獄を防ぐワイヤー設計術

なぜ、いきなり完成デザインを生成すると失敗しやすいのか。

僕がAIへ渡す前に固定している、

見出し・画像・CTA・情報量・レイアウトの決め方を解説します。

第6章｜「高品質でおしゃれに」は今すぐやめる。AIから“実案件レベル”のデザインを引き出すプロンプト

「プロっぽくしてください」

「洗練されたデザインにしてください」

だけでは、なぜAI感が消えないのか。

役割・ターゲット・写真・UI・余白・NG表現まで指定する、

デザインカンプ生成プロンプトの完成形を公開します。

第7章｜参考画像を何枚渡しても似ない理由。「Image A〜E」を思い通りに使い分ける指示法

「Aは構成」

「Bは配色」

「CはFV」

「DはCTA」

「Eは写真」

のように、

複数の参考画像をAIに混同させない方法を、具体例付きで解説します。

第8章｜【この記事の核心】Codexの“勝手なアレンジ”を止める忠実再現プロンプト完全版

この教材で最も重要な章です。

完成デザインを渡したのに、

「なんか違う」

を終わらせるために、

などを盛り込んだ、

僕が使うCodex忠実再現プロンプトを、そのまま使える形で公開します。

第9章｜「そこだけ直して！」が通じる。既存デザインを壊さないCodex部分修正テンプレ集

文字色だけ変えたい。

CTAだけ直したい。

画像だけ差し替えたい。

スマホだけ修正したい。

そんなときに、

他の箇所を一切変更させないための指示テンプレをケース別にまとめます。

第10章｜HTML/CSSとSTUDIO、どっちで納品する？案件で迷わない実務的な使い分け

「AIで作れたけど、この後どう納品する？」

という問題まで解決します。

LP・コーポレートサイト・更新頻度・クライアント運用などから、

HTML実装とSTUDIOをどう使い分けるかを整理します。

第11章｜完成したのに“AI臭い”を防ぐ。納品前に僕が見る12のポイント

カード。

角丸。

グラデーション。

アイコン。

余白。

文字サイズ。

AI画像。

一つひとつは悪くなくても、

組み合わせると一気に「AIっぽいサイト」になります。

最後の5％を仕上げるための、

AI感を消す12項目のチェックリストを公開します。

第12章｜案件を受けた瞬間から迷わない。「次に何をするか」が決まる実案件制作フロー

案件情報を受け取った後、

何からAIに渡し、

どの段階で人間がチェックし、

いつCodexへ移るのか。

僕なら実案件をどう進めるかを、最初から納品直前まで順番に公開します。

購入者特典｜全部コピペOK。AI Web制作テンプレート集

記事を読んで終わりにしないために、

をまとめます。

「分かった」ではなく、「この記事を閉じた直後から使える」状態をゴールにしています。

ここからは、AIでWebサイトを“作る方法”ではありません。

AIで作ったものを「仕事として出せるレベル」に持っていく方法を、具体的に解説していきます。