「AIでWebサイトを作ったけど、なんか素人っぽい」。 あなたも一度は思ったことがあるはずです。GPT-5.4のフロントエンド生成能力は確実に進化しました。 でも「すごいモデルを使えば美しいサイトができる」は幻想です。 OpenAIが公式ブログで教えてくれたのは、モデルの性能ではなく「指示の設計」でした。
2026年3月5日、OpenAIがGPT-5.4をリリースしました。 フロントエンド制作において、従来モデルとは決定的に違う3つの進化があります。
GPT-5.4は画像生成・画像検索ツールをネイティブに使えます。 ムードボードを渡せば、色味やレイアウトの意図を視覚的に理解してくれます。「モダンな感じで」という曖昧な指示が不要になりました。スクリーンショットを1枚渡すだけで、同じトーンのサイトを生成できます。
以前のモデルは途中で品質が落ちました。 GPT-5.4は複雑で長いタスクでも一貫した品質を保てます。トップページからフッターまで、デザインシステムを崩さずに作り切る。これは実務で使う上で地味ですが決定的な違いです。
Playwrightなどのツールと連携し、生成したサイトをブラウザで自動検証できます。レスポンシブ表示の崩れ、ボタンの動作不良を自分で発見し、自分で直す。人間がいちいちチェックしなくても、AIが自律的にQAを回せる時代が来ました。
3月20日、OpenAIの開発者ブログに「Designing Delightful Frontends with GPT-5.4」という記事が公開されました。 https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4 OpenAIが自ら「こう指示すればうまくいく」と教えてくれた、異例のガイドです。 その中核にあるのが、4つの実践法でした。
GPT-5.4にはStandard、Thinking、Proの3バリアントがあります。 直感に反しますが、OpenAI自身が「推論レベルは低めから始めよ」と言っています。 なぜか。 高い推論レベルは「考えすぎ」を起こします。シンプルなUIに不要な複雑さを持ち込む。まずStandardで骨格を作り、必要な箇所だけThinkingに切り替える。この使い分けが品質とスピードの両立を生みます。
これが最も重要な鉄則です。 色・フォント・余白・ブレイクポイントを、コードを書かせる前に渡す。OpenAIは「制約が明確であるほど、AIの出力は良くなる」と断言しています。 私はずっと「形容詞で指示するな、数値で指示しろ」と言ってきました。「モダン」ではなく「余白24px、角丸8px、フォントサイズ16/24/32px」。OpenAIが公式にこれを裏付けてくれた形です。
スクリーンショット、モックアップ、参考サイトのキャプチャ。 言葉で説明するより、画像を1枚渡す方が正確です。GPT-5.4は画像をネイティブに理解するので、「このサイトのヘッダーと同じ構成で」という指示が通ります。 逆に言えば、リファレンスなしでAIにデザインさせるのは、口頭だけで建築を依頼するようなものです。プロの仕事ではありえません。
「とりあえずダミーテキストで」が品質を下げる最大の原因です。見出し、本文、CTAのコピーを先に決めてから生成に入る。 OpenAIは「コピーが先、デザインが後」という順序を明確に推奨しています。 文字量がわからないままレイアウトを組むと、後から文字があふれます。実際のコンテンツで作るから、実際に使えるサイトになる。当たり前のことですが、AIを使うとつい省略しがちです。
4つの鉄則に共通するのは「AIに自由を与えすぎない」という思想です。 あなたがチームの新人に「いい感じのサイト作って」と丸投げしたら、どうなるか想像してみてください。 迷い、悩み、見当違いのものが上がってくるはずです。でも「この配色で、このフォントで、この構成で、このコピーで」と伝えれば、新人でもそれなりのものを作れます。 AIも同じです。自由度が高いほど、平均的な出力に収束します。制約が厳しいほど、意図通りの出力に近づく。これはGPT-5.4だけでなく、Claude CodeでもGeminiでも変わりません。 OpenAIはさらに踏み込んで「Frontend Skill」というプロンプトセットを公開しました。構成ルール・デザインテイスト・インタラクションパターンをまとめた再利用可能な制約集です。これは私がClaude Codeで実践しているスキル設計と全く同じ発想です。 AIに良い仕事をさせたいなら、良い制約を渡す。技術の進化より、指示の設計が先。これが2026年のAI活用の本質です。
OpenAIが推奨する技術スタックはReact + Tailwind CSSです。 Tailwind CSSはかつて「HTMLにスタイルを直書きするなんて非常識」と批判されていました。それが今やAI時代のデファクトスタンダードです。 理由は明快で、AIがクラスを列挙するだけでスタイリングが完結するから。ファイル間を行ったり来たりする必要がありません。 さらにOpenAIは「モーション要素を最低2〜3個入れろ」とも言っています。静的なサイトではなく、スクロールやホバーで動きがあるサイト。GPT-5.4はCSSアニメーションも自然に生成できます。
あなたが明日、AIでWebサイトを作るなら。 まず制約を書いてください。 コードを書かせる前に、5つだけ決める。