GPT-5.4で気持ちのよいUIを作るには、先に制約を渡す

AIでフロントエンドを作れる時代になって、画面を作る速さはかなり上がりました。
ただ、速く作れることと、気持ちよく読める画面になることは、やはり別です。OpenAI Developersの公式記事「Designing delightful frontends with GPT-5.4」を読んでいちばん印象に残ったのは、GPT-5.4は以前より見た目の良いフロントエンドを作りやすくなっている一方で、指示が弱いと“ありがちな画面”に戻りやすい、という点でした。記事の出発点そのものが、「曖昧なプロンプトだと、学習データ内で頻出だった高頻度パターンに寄り、汎用的で階層の弱いデザインになりやすい」という説明になっています。 (OpenAI Developers)

OpenAIは、GPT-5.4について「従来モデルより視覚的に魅力的で意欲的なフロントエンドを生成しやすい」「UI能力と画像活用を重視して訓練した」と説明しています。さらに製品紹介でも、GPT-5.4は推論・コーディング・エージェント的ワークフローを統合し、ChatGPT、API、Codexで使えるモデルとして公開されています。つまり今回の話は、単なる雰囲気論ではなく、モデルの強みをどう引き出すかという実務の話です。 (OpenAI Developers)

制約を渡したほうが気持ちの良いUIが作れる

結論はシンプルです。
GPT-5.4で気持ちのよいUIを作りたいなら、最初に「自由」を渡すのではなく、制約を渡した方がいいです。
そして、その制約はふわっとした美意識ではなく、次の3つに分けて伝えると強いです。 (OpenAI Developers)

1つ目は、見た目のルールを先に固定すること。
2つ目は、画像や見本で方向を合わせること。
3つ目は、作って終わりにせず、実際に見て直させること。
OpenAIの公式記事は、この3つをかなり実務寄りに示していました。 (OpenAI Developers)

ポイント1：制約を先に決める

GPT-5.4は強いです。
でも、強いからこそ、何も決めずに投げると無難な平均点に寄りやすいです。OpenAI Developersの記事でも、曖昧な指示だと高頻度パターンに落ちやすく、結果として「もっとこうしたかった」という想像との差が出ると説明されています。 (OpenAI Developers)

だから最初に決めるべきなのは、「何を作るか」より先に「どこまで広げてよいか」です。
たとえば、次のような制約です。

H1は1つだけ
セクションは5〜6個まで
アクセントカラーは1色
書体は2種類まで
ファーストビューのCTAは1つ
カードを並べすぎない
最初の画面で主役が一目で分かるようにする

こういう制約は、デザインを窮屈にするためではなく、主役をはっきりさせるために効きます。OpenAIの記事も、ただ機能するだけの画面ではなく、視覚的な階層や印象の強さを意識して誘導することをテーマにしています。 (OpenAI Developers)

ポイント2：言葉だけでなく、画像で方向を決める

もう一つ大きいのが、画像や見本の扱いです。
OpenAIは、GPT-5.4をUI能力と画像活用に重点を置いて訓練したと説明しています。つまり、テキストだけで「あたたかい感じ」「洗練された感じ」と言うより、参考スクリーンショットやムードボードを見せた方が、余白感、文字サイズ、写真の扱い、世界観の強さまで伝わりやすいということです。 (OpenAI Developers)

ここで大事なのは、画像を飾りで終わらせないことです。
画像があるのに主役が弱い、きれいだけど何のページか分からない、背景は派手なのに文字が読みにくい。こういうズレは、AIに任せると起きやすいです。だから見本を渡すときも、「この余白感がほしい」「この写真の置き方がよい」「このくらい主役を強く見せたい」と、何を参照してほしいのかを言語化して添える方が強いです。これは、OpenAIの記事全体が示している“ステアリング”の発想とも一致しています。 (OpenAI Developers)

ポイント3：作って終わりにしない

GPT-5.4のもう一つの強みは、作るだけでなく、見て、確認して、修正する流れに向いていることです。OpenAIの製品紹介では、GPT-5.4はPlaywrightのようなライブラリでコンピュータを操作するコード生成に優れ、スクリーンショットを見ながらマウスやキーボード操作を出すことにも強いと説明されています。OSWorld-Verifiedでは75.0%の成功率を記録し、GPT-5.2の47.3%を大きく上回ったとも紹介されています。 (OpenAI)

この話をブログやサイト制作に引きつけると、意味はかなりわかりやすいです。
HTMLとCSSが出た瞬間を完成にしない、ということです。
本当に見るべきなのは、スマホで崩れていないか、見出しだけで流れが分かるか、ファーストビューで何を読ませたいかが伝わるか、CTAが埋もれていないか、画像の上の文字が読めるか、です。GPT-5.4は、こうした確認と修正を前提に使うとかなり強い。逆に、一発で神デザインを出してもらおうとするとズレやすいです。 (OpenAI)

実務で使うなら、伝え方をルール化した方がいい

ここまで読んで思うのは、結局いちばん大事なのは「センス」よりも伝え方の型だということです。自分の頭の中にある“いい感じ”を、そのままAIに渡しても伝わりません。だから、依頼の順番を固定した方がいいです。 (OpenAI Developers)

僕なら、GPT-5.4やCodexにUIを頼むときは、次の順番で伝えます。

1. 何を作るのかを一文で言う

例：
「読みやすく、ブランド感のあるブログ記事ページを作る」

2. 避けたいものを先に言う

例：
「ありがちなSaaSカード並びは避ける」
「抽象グラデだけで済ませない」
「最初の画面で主役が弱くならないようにする」

3. 見た目の制約を数で決める

例：
「H1は1つ」
「セクションは6つ以内」
「色はベース＋アクセント1色」
「CTAは1つだけ」

4. ページの流れを決める

例：
「導入 → 問題提起 → 学び3つ → 実務への落とし込み → まとめ」

5. 最後に確認項目を入れる

例：
「スマホで見て崩れを修正」
「見出しだけ読んでも内容が追えるようにする」
「主役とCTAの優先順位を見直す」

このやり方は、OpenAIの記事が言っている「曖昧さを減らして、望むデザインに向けてステアする」という考え方とそのまま重なります。 (OpenAI Developers)

CodexにUIの指示を渡すときの依頼文の型

そのまま使うなら、こんな感じです。

ブランド感のあるブログ記事ページを作ってください。
ありがちなSaaSカード並びは避けてください。
最初の画面で主役が一目で分かる構図にしてください。
H1は1つ、セクションは6つ以内、書体は2種類まで、アクセントカラーは1つまで。
文章は短く、各セクションは役割を1つに絞ってください。
導入 → 問題提起 → 学び3つ → 実務への落とし込み → まとめ、の流れで構成してください。
スマホとPCの両方で確認し、可読性、階層、CTAの見つけやすさを修正してください。

これだけでも、だいぶ変わるはずです。
ポイントは、上手なことを言うことではなく、AIが迷う余地を減らすことです。OpenAIの公式記事も、GPT-5.4は正しいガイドがあると本番向けのフロントエンドにかなり近づける一方、曖昧だと平均的なパターンに流れやすいと明言しています。 (OpenAI Developers)

まとめ

GPT-5.4は、前より確かに“いい画面”を作りやすくなっています。
OpenAIも、UI能力や画像活用を重視して訓練したと説明していますし、製品紹介でも、コーディング、視覚理解、コンピュータ操作の面でかなり強化されたモデルとして位置づけています。

でも、本当に実務で差が出るのはそこから先です。
自由に作らせることではなく、先に制約を渡すこと。
言葉だけで頼むのではなく、見本で方向をそろえること。
そして、出てきたものを完成扱いせず、実際に見て直させること。
この3つを回した方が、結果として気持ちのよいUIに近づきやすい。この記事は、そのことをかなり実務寄りに教えてくれる内容でした。 (OpenAI Developers)