GPT-5.4 は従来のモデルよりも Web 開発に強く、見た目に魅力があり、大胆な発想を取り入れたフロントエンドを生成できます。トレーニングでは特に、UI を作る能力と画像の活用に力を入れました。適切な指示があれば、細部まで気を配り、操作感を磨き、美しい画像を取り入れた、本番で使えるフロントエンドを作成できます。
Web デザインには幅広い表現の可能性があります。優れたデザインは、長く使われてきた定番の手法を生かしながら新しい要素を取り入れ、節度と独創性を両立させています。GPT-5.4 はこうした多様なデザイン手法を学習し、Web サイトを形にするさまざまな方法を理解しています。
プロンプトの指示が曖昧だと、モデルは学習データに頻繁に登場するパターンを選びがちです。その中には実績のある定石もありますが、単によく使われているだけで、できれば避けたいものも少なくありません。たいていはそれらしく見えて機能もするものの、構成がありきたりになったり、どこに注目すべきかが伝わりにくくなったりと、思い描いたデザインから遠ざかることがあります。
このガイドでは、GPT-5.4 で思い描いたデザインを形にするための実践的な手法を紹介します。
モデルの改善点
GPT-5.4 はさまざまな面で進化しました。フロントエンド開発では、特に次の 3 点に力を入れました。
- 設計から仕上げまで、各段階で画像をより正確に読み取れること
- 必要な機能がより充実したアプリや Web サイトを作れること
- ツールを使って、自分の実装をより的確に点検、テスト、検証できること
画像の理解とツールの活用
GPT-5.4 は画像検索ツールと画像生成ツールを直接使えるようにトレーニングされており、画像を見て判断する工程をデザイン作業に組み込めます。よりよい結果を得るには、最終的に使う素材を選ぶ前に、まずムードボードや複数のビジュアル案を生成するようモデルに指示します。
画像に求めるスタイル、配色、構図、雰囲気などを具体的に伝えると、モデルが参考にする画像を選びやすくなります。また、生成済みの画像を再利用するのか、画像生成ツールで新しい素材を作るのか、必要に応じて特定の外部画像を参照するのかも、プロンプトで指示してください。
アップロード済みまたは生成済みの画像があれば、原則としてそれを使ってください。なければ、画像生成ツールで目を引く画像素材を作成してください。ユーザーから明示的に求められた場合に限り、Web 上の画像を参照したり、その画像へのリンクを掲載したりしてください。アプリの機能面の改善
GPT-5.4 は、必要な機能がそろい、それぞれが正しく動作するアプリを開発できるようにトレーニングされています。長い工程を伴うタスクでも、より安定した成果が期待できます。以前なら実現は難しいと思われたゲームや複雑なユーザー体験も、1 ～ 2 回のやり取りで形にできます。
コンピューターの使用と検証
GPT-5.4 は、コンピューターの使用に向けてトレーニングした初の主力モデルです。インターフェースを直接操作でき、Playwright などのツールを組み合わせることで、実装の点検、動作の検証、改善を繰り返せます。これにより、より長い開発工程を自律的に進められます。
これらの機能が実際に動く様子は、発表時の動画でご覧いただけます。
Playwright はフロントエンド開発で特に役立ちます。モデルはレンダリングされたページを確認し、複数のビューポートサイズでテストし、アプリを一連の手順に沿って操作して、状態や画面遷移の問題を検出できます。Playwright のツールやスキルを用意すると、GPT-5.4 が必要な機能を備えた洗練されたインターフェースを作れる可能性が大きく高まります。画像を読み取る能力も向上したため、表示結果を目で見て検証し、参考となる UI があれば、その見た目と一致しているかも確かめられます。
まず試したい実践のポイント
このガイドからいくつか試すなら、次の項目から始めてください。
- まずは推論強度を低く設定します。
- タイポグラフィ、配色、レイアウトなど、デザインシステムと制約をあらかじめ定めます。
- スクリーンショットを添付するなどして参考画像やムードボードを渡し、目指すデザインの方向性をモデルに示します。
- ページ全体で何をどの順序で伝えるか、あるいはどのような方針でコンテンツを作るかを先に決め、モデルに伝えます。
まずは次のプロンプトを試してみてください。
## フロントエンドのタスク
フロントエンドをデザインするときは、ありきたりなレイアウトや、要素を盛り込みすぎたレイアウトを避けてください。
**次のルールを守ってください。**
- 構図は 1 つ：ダッシュボードを作る場合を除き、最初のビューポートは複数のパネルが並ぶダッシュボードに見えないよう、1 つの構図にまとめてください。
- ブランドを最優先：ブランドのページでは、ブランド名や製品名をナビゲーションの文字や見出しの上の小さなラベルだけで済ませず、ヒーローの主役として扱ってください。どの見出しもブランドより目立たせないでください。
- ブランドの見え方を確認：ナビゲーションを隠すと最初のビューポートが別のブランドのページにも見えるなら、ブランドの打ち出し方が弱すぎます。
- タイポグラフィ：意図する表現に合った個性のある書体を選び、定番のフォントスタック（Inter、Roboto、Arial、system）に頼らないでください。
- 背景：平坦な単色の背景に頼らず、グラデーション、画像、控えめな模様で雰囲気を作ってください。
- ヒーロー画像は全面表示：ランディングページや販促用の画面では、原則としてヒーロー画像を画面の端から端まで広げ、構図の中心または背景にしてください。既存のデザインシステムで明確に必要とされる場合を除き、余白で囲んだ画像、サイドパネル内のヒーロー画像、角丸のメディアカード、タイル状のコラージュ、浮かせた画像ブロックは使わないでください。
- ヒーローに置く要素：最初のビューポートは通常、ブランド、見出し 1 つ、短い補足文 1 つ、CTA のグループ 1 つ、主役となる画像 1 枚に絞ってください。統計、予定表、イベント一覧、住所欄、販促枠、「今週の予定」などの告知、メタデータの行、補助的なマーケティングコンテンツは置かないでください。
- ヒーローへの重ね表示は禁止：ヒーローの画像や動画の上に、独立したラベル、浮かせたバッジ、販促ステッカー、情報チップ、注記ボックスを置かないでください。
- カード：原則として使わず、ヒーローには一切使わないでください。カードを使えるのは、ユーザーが操作する要素をまとめる場合だけです。枠線、影、背景、角丸を外しても操作や理解に支障がなければ、カードにしないでください。
- 各セクションの役割は 1 つ：目的と見出しを 1 つずつに絞り、補足も通常は短い 1 文にしてください。
- 視線を引きつける具体的な画像：製品、場所、雰囲気、利用場面を画像で伝えてください。装飾的なグラデーションや抽象的な背景だけで、ビジュアルの主題を表現したことにはなりません。
- 要素を詰め込まない：カプセル形のラベルの集まり、数値を横に並べた帯、アイコンの列、枠付きの販促欄、予定表の抜粋、注意を奪い合う複数のテキストブロックは避けてください。
- 動きは要素を印象づけ、何が重要かを伝えるために使い、気を散らす演出は避けてください。ビジュアルを重視する制作物には、明確な意図のある動きを少なくとも 2 ～ 3 種類実装してください。
- 配色と見た目：デザインの方向性を明確にし、CSS 変数を定義してください。白地に紫を使う配色を定番にせず、紫やダークモードに偏らないでください。
- デスクトップとモバイルの両方でページが正しく読み込まれることを確認してください。
- React のコードでは、チームが useEffectEvent、startTransition、useDeferredValue などの新しいパターンを採用している場合、用途に合わせて優先的に使ってください。すでに使われている場合を除き、useMemo/useCallback を機械的に追加せず、リポジトリの React Compiler の指針に従ってください。
例外：既存の Web サイトやデザインシステムの中で作業する場合は、そこで確立されたパターン、構造、視覚表現を維持してください。デザインの質を高める手法
デザイン原則の明確化
H1 見出しは 1 つ、セクションは最大 6 つ、書体は最大 2 種類、アクセントカラーは 1 色、スクロールせずに見える範囲の主要 CTA は 1 つ、といった制約を定めます。
参考画像の活用
参考となるスクリーンショットやムードボードがあると、モデルはレイアウトのリズム、文字サイズの段階、余白の取り方、画像の見せ方を読み取れます。以下は、ユーザーがデザインの方向性を確認できるよう、GPT-5.4 が自ら生成したムードボードの例です。
ニューヨークのコーヒーカルチャーと Y2K スタイルをヒントに、Codex で GPT-5.4 を使って作成したムードボード
ストーリーに沿ったページ構成
マーケティングページの典型的な構成は次のとおりです。
- ヒーローセクション — ブランドや製品を紹介し、どんな価値を届けるかを提示
- 補足画像 — 使われる場面や環境を紹介
- 製品の詳細 — 提供するものを具体的に説明
- 社会的証明 — 第三者の評価や実績を示して信頼を獲得
- 最後の CTA — 関心を行動につなげる呼びかけ
デザインシステムに沿った実装
実装の早い段階で、明確なデザインシステムを定めるようモデルに促します。background、surface、primary text、muted text、accent などの基本的なデザイントークンに加えて、display、headline、body、caption など、用途ごとの文字スタイルを定義します。この枠組みがあれば、モデルはアプリ全体で一貫性があり、拡張しやすい UI パターンを作成できます。
多くの Web プロジェクトでは、React と Tailwind のような使い慣れた技術の組み合わせから始めるとうまくいきます。GPT-5.4 はこれらのツールを特に得意としているため、短いサイクルで改善を重ね、完成度を高めやすくなります。
動きを加えたり UI 要素を重ねたりすると、レイアウトが複雑になることがあります。特に注意が必要なのは、固定表示やフローティング表示のコンポーネントが主要コンテンツと重なる場合です。アニメーション、オーバーレイ、装飾レイヤーを使うときは、表示や操作を妨げない配置を具体的に指示すると効果的です。たとえば、次のように伝えます。
どの画面サイズでも、固定表示やフローティング表示の UI 要素がテキスト、ボタン、その他の重要なコンテンツに重ならないようにしてください。表示や操作を妨げない領域に置き、必要に応じて主要コンテンツの背面に配置し、十分な間隔を確保してください。推論強度の調整
シンプルな Web サイトでは、推論強度を上げれば必ず結果がよくなるとは限りません。実際には、推論強度を低めか中程度に設定した方が、フロントエンドの仕上がりがよくなることが多くあります。モデルが細部を考えすぎず、作業の焦点を保ちながら素早く実装できるためです。より意欲的なデザインに取り組むときは、推論強度を上げる余地もあります。
実際のコンテンツを起点にした設計
フロントエンドの仕上がりを手軽に改善する方法の 1 つは、実際に掲載する文章や製品の背景情報、あるいはプロジェクトの明確な目標をモデルに渡すことです。こうした情報があれば、モデルは目的に合ったサイト構成を選び、各セクションで伝えたいことを明確にできます。文章も、ありきたりな仮テキストに頼らず、具体的で説得力のあるものになります。
フロントエンドスキルを使った実践
一般的なフロントエンド開発で GPT-5.4 の能力を引き出せるよう、専用の frontend-skill も用意しました。内容は以下で確認できます。このスキルは構成、見た目の選び方、インタラクションのパターンについてモデルに具体的な指針を与えます。使い始めから、意図が伝わり、使って楽しい、洗練されたデザインを作りやすくなります。
フロントエンドスキル
---
name: frontend-skill
description: Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
---
# フロントエンドスキル
コンポーネントの数よりも、アートディレクション、視覚的な優先順位、要素の絞り方、画像、動きが仕上がりを左右する場合に、このスキルを使ってください。
目標は、細部まで意図が伝わり、上質で現代的なインターフェースを提供することです。受賞作に匹敵する構図を目指し、中心となるアイデアを 1 つに絞ってください。印象的な画像、簡潔な文章、緻密に整えた余白、記憶に残る少数の動きで表現してください。
## 制作前の方針
実装を始める前に、次の 3 点を書き出してください。
- ビジュアルの方針：雰囲気、素材感、躍動感を表す 1 文
- コンテンツの構成：ヒーロー、補足、詳細、最後の CTA
- 操作感の方針：ページの印象を変える動きのアイデアを 2 ～ 3 個
各セクションには役割を 1 つ、ビジュアルの主題を 1 つ、最も伝えたいこと、または促したい行動を 1 つ割り当ててください。
## デザインの基本方針
- 個々のコンポーネントを選ぶ前に、画面全体の構図を決めてください。
- 画面の端まで広がるヒーローや、表示領域全体を使って視線を引きつけるビジュアルを優先してください。
- テキストの中ではブランド名や製品名を最も目立たせてください。
- 文章は数秒で目を通せる長さにしてください。
- UI の装飾を足す前に、余白、整列、大小の差、トリミング、コントラストを活用してください。
- 書体は最大 2 種類、アクセントカラーは原則 1 色に絞ってください。
- 原則としてカードを使わず、セクション、列、区切り線、リスト、画像や動画のブロックで構成してください。
- 最初のビューポートは、文書のように読ませるのではなく、ポスターのようにひと目で伝わる構図にしてください。
## ランディングページ
基本の構成は次のとおりです。
1. ヒーロー：ブランドまたは製品、提供する価値、CTA、主役となるビジュアル 1 点
2. 補足：具体的な機能、特典、または価値を裏づける事実を 1 つ
3. 詳細：雰囲気、利用の流れ、製品の詳しい特徴、またはストーリー
4. 最後の CTA：申し込み、利用開始、来訪、問い合わせなどの行動への誘導
ヒーローのルールは次のとおりです。
- 構図は 1 つにまとめてください。
- 端まで広がる画像を使うか、画面の大部分を主役のビジュアルに充ててください。
- 全面表示の原則：ブランドのランディングページでは、ヒーロー自体を画面の端から端まで広げてください。ページ共通の左右の余白、枠付きコンテナ、共通の最大幅は適用せず、幅を制限するのは内部のテキストと操作要素の列だけにしてください。
- ブランド、見出し、本文、CTA の順で視線を導いてください。
- 原則として、ヒーローにはカード、統計の帯、ロゴの集まり、大量のカプセル形ラベル、浮かせたダッシュボードを置かないでください。
- 見出しはデスクトップでおおむね 2 ～ 3 行、モバイルではひと目で読める長さにしてください。
- テキスト列は幅を抑え、画像の中で変化の少ない落ち着いた部分に配置してください。
- 画像に重ねるすべてのテキストは背景とのコントラストを十分に確保し、タップできる箇所を明確にしてください。
画像を外しても最初のビューポートがそのまま成立するなら、画像の役割が弱すぎます。ナビゲーションを隠すとどのブランドか分からなくなるなら、視覚的な優先順位が不明確です。
最初のビューポートに収める範囲を確認してください。
- 最初の画面に追従または固定ヘッダーがある場合、その高さも計算に含めてください。一般的なデスクトップとモバイルの画面サイズで、ヘッダーとヒーローの内容を合わせて最初のビューポートに収めてください。
- 高さが `100vh`/`100svh` のヒーローを使う場合は、常時表示する UI の高さを差し引くか（`calc(100svh - header-height)`）、ヘッダーを通常の文書フローで縦に並べずヒーローに重ねてください。
## アプリ
Linear のように、要素を絞ったデザインを基本にしてください。
- 表示領域の優先順位が穏やかな強弱で伝わる構成
- 文字の見せ方と余白の取り方にメリハリのあるレイアウト
- 絞り込んだ色数
- 情報密度が高くても読みやすい表示
- 必要最小限の枠や装飾
- カード自体が操作対象である場合に限ったカードの使用
アプリの UI は、次の要素を中心に構成してください。
- 主な作業を行うワークスペース
- ナビゲーション
- 補足情報を示す領域またはインスペクター
- 操作や状態を示す、識別しやすいアクセントカラー 1 色
次の表現は避けてください。
- ダッシュボードをモザイク状に埋めるカード
- すべての領域を囲む太い枠線
- 日常的に使う製品 UI の背後に置く装飾的なグラデーション
- 互いに注意を奪い合う複数のアクセントカラー
- 情報の見つけやすさに寄与しない装飾用アイコン
パネルを通常のレイアウトにしても意味が伝わるなら、カード風の装飾を外してください。
## 画像
画像は、ページで伝えたい内容の一部を担うものにしてください。
- ブランド、店舗や施設、読み物のページ、ライフスタイル製品には、実物らしさが伝わる印象的な画像を少なくとも 1 枚使ってください。
- 抽象的なグラデーションや作り物めいた 3D オブジェクトよりも、実際の場所や利用場面を撮影した写真を優先してください。
- 文字を置く部分の明暗が安定するように画像を選ぶか、トリミングしてください。
- 写り込んだ看板、ロゴ、雑多な文字が UI と競合する画像は使わないでください。
- UI の枠、画面分割、カード、パネルを描き込んだ画像は生成しないでください。
- 複数の場面を見せる場合は、1 枚のコラージュにまとめず、複数の画像を使ってください。
最初のビューポートには、視線を引きつける主役が必要です。装飾的なテクスチャだけでは足りません。
## ページの文言
- デザインの意図を解説するのではなく、製品を使う人に向けた言葉で書いてください。
- 見出しだけで要点が伝わるようにしてください。
- 補足は原則として短い 1 文にしてください。
- セクション間で重複する説明を削ってください。
- プロンプトの文言やデザインの解説を UI に載せないでください。
- 各セクションの役割は、説明する、根拠を示す、理解を深める、行動を促す、のいずれか 1 つに絞ってください。
文章を 30％ 削ってページがよくなるなら、さらに削ってください。
## 製品 UI の操作に役立つ文言
ダッシュボード、アプリ画面、管理ツール、業務用ワークスペースでは、原則として販促文よりも操作に役立つ文言を使ってください。
- 提供価値の訴求、雰囲気、ブランドらしい語り口よりも、現在地、状態、次にできる操作が伝わることを優先してください。
- KPI、グラフ、フィルター、表、状態、タスクの背景情報など、実際に作業する画面から始めてください。ユーザーが明示的に求めない限り、ヒーローセクションは設けないでください。
- セクションの見出しには、その領域に何があるか、またはそこで何ができるかを書いてください。
- 良い例：「選択した KPI」「プランの状態」「指標を検索」「上位のセグメント」「最終同期」
- 明示的に求められない限り、製品画面では、理想像をうたうキャッチコピー、比喩、キャンペーン風の文言、経営層向けの要約バナーを避けてください。
- 補足文では、対象範囲、動作、情報の更新時点、判断にどう役立つかのいずれかを 1 文で説明してください。
- ホームページのヒーローや広告にも使えそうな文は、製品の操作画面にふさわしい表現になるまで書き直してください。
- 操作、監視、判断のいずれにも役立たないセクションは削除してください。
- 確認の目安：オペレーターが見出し、ラベル、数値だけに目を通して、すぐにページの内容を把握できますか？
## 動き
動きは、要素を印象づけ、何に注目すべきかを伝えるために使ってください。気を散らす演出は避けてください。
ビジュアルを重視する制作物には、次のように明確な意図を持つ動きを少なくとも 2 ～ 3 種類実装してください。
- ヒーローの要素が順に現れる演出を 1 つ
- スクロールに連動する演出、要素が画面にとどまる演出、または奥行きを感じさせる演出を 1 つ
- 操作できることが伝わりやすくなるホバー効果、要素の出現、またはレイアウトの変化を 1 つ
次の用途では、利用できる場合は Framer Motion を優先してください。
- セクションが現れるときの演出
- レイアウト間で共通する要素の遷移
- スクロールに連動した不透明度、位置、拡大率の変化
- 要素を画面に固定しながら順に内容を見せる演出
- 単に余白を埋めるのではなく、内容を順に伝えるカルーセル
- メニュー、ドロワー、モーダルの表示・非表示に伴う演出
動きの基準は次のとおりです。
- 短い画面録画でも分かること
- モバイルでも滑らかに動くこと
- 素早く控えめであること
- ページ全体で一貫していること
- 装飾だけが目的なら取り除くこと
## 必ず守るルール
- 原則としてカードは使わないでください。
- ヒーローにも原則としてカードは置かないでください。
- 全面表示が要件なら、ヒーローを枠で囲んだり中央の列に収めたりしないでください。
- 各セクションで主役となるアイデアは 1 つまでにしてください。
- セクションの意味を伝えるために、細かな UI 要素をいくつも必要とする構成は避けてください。
- ブランドのページでは、どの見出しもブランドより目立たせないでください。
- 余白を埋めるためだけの文章は入れないでください。
- テキストを片側の落ち着いた、一体感のある領域に配置できる場合を除き、画面分割型のヒーローは使わないでください。
- 明確な理由がない限り、書体は 2 種類までにしてください。
- 製品にすでに確立された配色体系がない限り、アクセントカラーは 1 色までにしてください。
## 避けるべき仕上がり
- 最初に目に入るのが、ありきたりな SaaS 風のカードグリッド
- 画像は美しいのに、どのブランドかが伝わらない構図
- 見出しは力強いのに、次に何をすればよいか分からない画面
- テキストの背後にある情報量の多すぎる画像
- 同じ雰囲気を言葉で繰り返すセクション
- 内容を伝えるうえで役割のないカルーセル
- レイアウトを工夫せず、カードを積み重ねただけのアプリ UI
## 仕上がりの確認項目
- 最初の画面だけで、どのブランドや製品かがはっきり分かりますか？
- 視線を引きつける主役が 1 つありますか？
- 見出しを拾い読みするだけでページの内容が分かりますか？
- 各セクションの役割は 1 つに絞られていますか？
- カードは本当に必要ですか？
- 動きによって視覚的な優先順位が明確になったり、雰囲気が引き立ったりしていますか？
- 装飾用の影をすべて外しても、上質に見えますか？Codex App で次のコマンドを実行すると、frontend-skill をインストールできます。
$skill-installer frontend-skill以下は、フロントエンドデザイン用のスキルを使って生成した Web サイトの例です。
ランディングページ
ゲーム
ダッシュボード
まとめ
プロンプトでデザイン上の制約を明確にし、参考画像、ページで伝えたい内容とその順序、デザインシステムを示すと、GPT-5.4 は質の高いフロントエンドを生成できます。
ここで紹介した手法が、個性があり、細部までよく設計されたアプリを作る際の参考になれば幸いです。
GPT-5.4 と Codex などのコーディングエージェントを使ってプロジェクト全体を生成した方は、ぜひギャラリーへの掲載にご応募ください。