いまからわかる!ChatGPT活用プログラミング

GPT-5⁠開発に使うための基礎知識  —⁠—ワンショットでのフロントエンド開発の各モデル比較も

はじめに

こんにちは! 逆瀬川@gyakuseです! 今回はOpenAIの新しいモデルGPT-5を、開発者視点で徹底解説します。APIの新機能やプロンプト設計の要点、フロントエンド開発の作例と他モデルとの比較までを一気に見ていきます。

基本概要

まずはGPT-5の概要を簡単におさらいします。

最新動向⁠より親しみやすい対話スタイルへ

GPT-5のリリース後も、OpenAIは継続的に改善を行っています。最近では、ユーザーからの「フォーマルすぎる」というフィードバックに基づき、より温かく、親しみやすい(warmer and friendlier)対話スタイルになるよう調整が行われました

これによる媚びへつらい(sycophancy)の増加は見られないとのことで、より自然なコミュニケーションが期待されます。

主要な改善点

GPT-5は、エージェント的なタスク遂行、長い推論、指示追従性、コーディングの一連の流れ(計画→実装→検証)での安定性が強化されています。

また、Responses APIが大幅に強化されました。このAPIを使うと、ツール呼び出しの間に推論コンテキスト(reasoning context)を再利用できます。これにより、モデルは過去の思考プロセスを参照できるため、ツールを複数回呼び出すような長い対話フローにおいて、計画をゼロから再構築する必要がなくなります。その結果、コストとレイテンシの削減、そしてタスク遂行性能の向上が期待できます。

プロンプトでは特に、以下のことを意識して組み立てると良いです。

  • エージェント運用の予測可能性:プロンプトにおいてtool preamblepersistenceガイドラインを指定することで、進捗報告と完了条件を明示化しやすい(後述参照)
  • コーディング性能:大規模差分や横断的リファクタリングも想定、フロントエンド〜バックエンドの新規実装に強い
  • ステアラビリティ(応答スタイル調整⁠⁠:APIにおいてverbosityreasoning_effort、Free‑Form Function Calling、CFGなどで出力と行動を制御(詳しくは後述の項を参照)
  • 最小推論モード:レイテンシ重視のminimal reasoningを用意(説明いらずの抽出・整形に最適)

これらはプロンプトで具体的に指示することで、エージェントの振る舞いをより細かく制御できます。

tool preamble

tool preambleは、エージェントがツールを実行する前に、その目的や計画をユーザーに提示する機能です。プロンプトでどのような報告をさせるかを指定することで、エージェントの思考プロセスが可視化され、インタラクティブな体験が向上します。

<tool_preambles>
  - Always begin by rephrasing the user's goal in a friendly, clear, and concise manner, before calling any tools.
  - Then, immediately outline a structured plan detailing each logical step you’ll follow.
  - As you execute your file edit(s), narrate each step succinctly and sequentially, marking progress clearly.
  - Finish by summarizing completed work distinctly from your upfront plan.
</tool_preambles>

★日本語に訳すと以下のようになります。★
<tool_preambles>
  - ツールを呼び出す前に、ユーザーの目的を分かりやすく、明確かつ簡潔に言い換えてから常に始める。
  - その後、すぐに自分が実行する各論理的なステップを詳細に記した構造化された計画を概説する。
  - ファイル編集を実行する際は、各ステップを簡潔かつ順序立てて説明し、進捗を明確に示す。
  - 最後に、事前の計画と区別して、完了した作業を要約する。
</tool_preambles>

persistence

persistenceは、エージェントのタスク遂行における粘り強さや自律性を制御します。例えば、不確実な状況でユーザーに確認を求めるか、もっとも合理的だと思われる仮説で自律的に進めるかを指示できます。

<persistence>
  - Do not ask the human to confirm or clarify assumptions, as you can always adjust later
  - decide what the most reasonable assumption is, proceed with it, and document it for the user's reference after you finish acting
</persistence>

★日本語に訳すと以下のようになります。★
<persistence>
  - 仮定について人間に確認や明確化を求めないこと。後からいつでも調整できる。
  - もっとも合理的と思われる仮定を決定し、それに基づいて進め、行動終了後にユーザーが参照できるようその仮定を記録すること。
</persistence>

モデル比較

最近、AnthropicのClaude Sonnet 4はContext Windowが1Mに対応しました(特定の条件のユーザーのみ)が、他社のモデルと価格・コンテキスト長を比較してみましょう。なお、APIの価格および細かい条件は常に変動しますので、詳細は各サービスサイトを参照してください。

表1 モデルと価格・コンテキスト長
モデル名 Context Window 入力 (1M tokens) 出力 (1M tokens)
OpenAI: GPT-5 272,000 $1.250 $10.000
OpenAI: GPT-5 Mini 272,000 $0.250 $2.000
OpenAI: GPT-5 Nano 272,000 $0.050 $0.400
Google: Gemini 2.5 Pro 1,000,000 $1.250 $10.000
Google: Gemini 2.5 Flash 1,000,000 $0.300 $2.500
Google: Gemini 2.5 Flash Lite 1,000,000 $0.100 $0.400
Anthropic: Claude Opus 4.1 1,000,000 $15.000 $75.000
Anthropic: Claude Sonnet 4 200,000 $3.000 $15.000

Context Windowが他のモデルと比較して小さい状況は継続していますが、実際に使っていて自分がよく用いる5万トークン前後での推論能力は他よりも優秀であると感じることが多いです。

ベンチマーク比較

実務上で主要な指標として用いられやすいSWE-Benchの結果やLMArenaの結果を見ていきましょう。3位までの順位を付記していますが、これは全体ではなくこの表のなかでのものとなります。

表2 各モデルのベンチマーク
モデル名 SWE‑Bench LMArena (Text) LMArena (WebDev) LMArena (Vision)
OpenAI: GPT-5 65.00% #2 1463 #1 1482 #1 1224 #2
OpenAI: GPT-5 Mini 59.80% 1392 NA 1185
OpenAI: GPT-5 Nano 34.80% 1365 NA 1143
Google: Gemini 2.5 Pro 53.60% 1457 #2 1405 #3 1255 #1
Google: Gemini 2.5 Flash 28.73% 1407 1290 1206 #3
Anthropic: Claude Opus 4.1 / 4.0 67.60% #1 1412 #3 1426 #2 1183
Anthropic: Claude Sonnet 4 64.93% #3 1402 1359 1183

なお、Artificial Analysisを参照すると、包括的に確認できて便利です。

新しいパラメータや振る舞い

GPT-5では出力の文量やツール呼び出しの形、出力制約を直接コントロールするための追加パラメータとツールが公開されています

  • verbosity:出力される文章の長さを調節するパラメータ
    • 指定できる値:low / medium / high
  • reasoning_effort:思考の深さを調整するパラメータ
    • 指定できる値:minimal / low / medium / high
      ※以前もありましたが、新しくminimalが追加されました。
  • Free‑Form Function Calling:JSONではなく任意テキストをツールに渡せる
    • Python/SQL/シェルなど、そのまま実行系へ流せます
  • CFG (Context‑Free Grammar)[1]:形式を指定して出力を拘束できる
    • LarkおよびRegex(正規表現)の文法で、出力の形式を強制できます。

コーディングでGPT-5を効果的に使うための6つのヒント

OpenAIは、開発者がGPT-5をコーディングに最大限活用するためのヒントを公開しています。これまでのモデルとは異なる特性を持つため、以下の点を意識すると良い結果が得られやすくなります。

1. 正確で矛盾のない情報を提供する

GPT-5は指示追従性が高い反面、曖昧または矛盾した指示を与えられると、その解決にリソースを割いてしまい、性能が低下することがあります。プロンプトや設定ファイル.cursor/rulesなど)では、明確で一貫した指示を心がけましょう。

2. 適切なreasoning_effort(推論の労力)を使う

複雑なタスクにはhighを指定して深く考えさせ、シンプルなタスクで考えすぎていると感じる場合は、より具体的な指示を与えるか、mediumlowに設定して調整することが重要です。

3. XMLライクな構文で指示を構造化する

コーディングルールやスタックのデフォルト設定などをXMLタグで囲んで構造化すると、GPT-5が文脈を理解しやすくなります。

<code_editing_rules>
  <guiding_principles>
    - Every component should be modular and reusable
    - ...
  </guiding_principles>
  <frontend_stack_defaults>
    - Styling: TailwindCSS
  </frontend_stack_defaults>
</code_editing_rules>

4. 過度に断定的な言葉遣いを避ける

「徹底的に(THOROUGHLY)情報を集めろ」のような強い言葉は、GPT-5が自然に行うであろう行動を過剰に実行させてしまい、逆効果になることがあります。不必要なツール呼び出しが増えるなどの副作用が考えられます。

5. 計画と自己反省の余地を与える

ゼロからアプリケーションを構築させるようなタスクでは、実装に入る前に計画を立て、自己評価するような指示self_reflectionを与えると、より質の高いアウトプットが期待できます。

6. コーディングエージェントの積極性を制御する

GPT-5はデフォルトで文脈を徹底的に収集しようとします。ツールの使用回数に予算(tool budget)を設けたり、どの程度積極的に行動すべきか、いつユーザーに確認すべきかをプロンプトで明確に指示することで、エージェントの振る舞いをコントロールできます(先述のpersistenceを参照⁠⁠。

フロントエンドの開発をしてみる

GPT-5はフロントエンドのワンショット生成が強力です。

ここでは特定のウェブサイト(1枚)を構築させ、ワンショットでの性能を比較してみましょう。

例1⁠都市型ジャズ⁠フェスのミニサイト

プロンプトは以下のように設定しました。

You are a front‑end developer. Create a complete one-page microsite for an evening jazz festival called “Midtown Jazz Night 2025”.

Constraints:
- Output a single, standalone HTML file with embedded CSS and JS. No external libraries, images, fonts, or assets.
- Sections: header + hero (festival name, date, venue, a “Buy Tickets” CTA), lineup/schedule with a simple day filter (All / Day 1 / Day 2), FAQs, and footer with venue/location text.
- Add small interactivity: the schedule day filter and a “back to top” button.
- Make it responsive and accessible (semantic HTML; keyboard focus states; reasonable color contrast).
- Output code only, no explanations.

日本語に訳すと以下のとおりです。

フロントエンド開発者として、「Midtown Jazz Night 2025」という夜のジャズ・フェスの1ページ・ミニサイトを作ってください。

制約:
- 単一のHTMLファイルで出力(CSS/JSは埋め込み)。外部ライブラリ・画像・フォント・アセットは使用不可。
- 構成: ヘッダー+ヒーロー(イベント名・日付・会場・“Buy Tickets”のCTA)、ラインナップ/スケジュール(All/Day 1/Day 2の簡易フィルタ)、FAQ、フッター(会場情報)。
- ちょっとしたインタラクション: スケジュールのフィルタ、ページ上部へ戻るボタン。
- レスポンシブ&アクセシブル(セマンティックHTML、キーボード操作、十分なコントラスト)。
- コードのみを出力。説明文は不要。

このプロンプトに対して、各モデルの出力結果は以下のようになりました。

GPT-5 Thinking

GPT-4o

Gemini 2.5 Pro

Claude 4.1 Opus

例2⁠建築スタジオのポートフォリオ

プロンプトは以下のように設定しました。

Create a portfolio homepage for an architecture studio named “Kite & Brick”.

Constraints:
- Single, standalone HTML file with embedded CSS and JS. No external assets (no images, libraries, or fonts).
- Sections: minimal header/nav; brief intro/about; a projects grid (cards with text placeholders that feel like project thumbnails); clicking a card opens an accessible modal with project details and next/prev controls; a contact section with a basic form.
- Keep DOM semantic and ARIA sensible; ensure modal is keyboard‑navigable and trap focus; close on Esc.
- Responsive layout. Output code only (no explanations).

日本語に訳すと以下のとおりです。

建築スタジオ「Kite & Brick」のポートフォリオ・ホームページを作成してください。

制約:
- 単一のHTMLファイル(CSS/JSは埋め込み)。画像・外部ライブラリ・外部フォントは使用不可。
- 構成: シンプルなヘッダー/ナビ、短い紹介文、プロジェクトのグリッド(テキストのみでサムネ風のカード)、カードをクリックするとアクセシブルなモーダルで詳細表示(前/次ナビ、Escで閉じる、フォーカス制御)、お問い合わせフォーム。
- セマンティックなDOMと適切なARIA。キーボード操作可能。
- レスポンシブ。コードのみ出力(説明不要)。

このプロンプトに対して、各モデルの出力結果は以下のようになりました。

GPT-5 Thinking

GPT-4o

Gemini 2.5 Pro

Claude 4.1 Opus

例3⁠環境NPOの寄付ページ

プロンプトは以下のように設定しました。

Build a donation page for an environmental nonprofit called “River Rescue”.

Constraints:
- Output a single, standalone HTML file with embedded CSS and JS. No external libraries, images, or fonts.
- Sections: mission blurb; donation amount selector with preset chips (e.g., 500 / 1,000 / 3,000 / 10,000 JPY) and a custom amount field; a monthly toggle; a live summary sentence that updates to describe impact by amount; a “Donate” button that opens a simple confirmation modal (no real payment).
- Accessible: announce amount changes to screen readers, reasonable contrast, keyboard support.
- Responsive. Output the code only (no explanations).

日本語に訳すと以下のとおりです。

環境系NPO「River Rescue」の寄付ページを作成してください。

制約:
- 単一HTML(CSS/JSは埋め込み)。外部ライブラリ・画像・フォントは不可。
- 構成: ミッション紹介、寄付額チップ(例: 500/1,000/3,000/10,000円)+カスタム入力、月額トグル、金額に応じて変化する“インパクトの説明”、擬似的な確認モーダル(決済処理は不要)。
- アクセシブル(額変更のアナウンス、コントラスト、キーボード操作)。
- レスポンシブ。コードのみを出力(説明なし)。

このプロンプトに対して、各モデルの出力結果は以下のようになりました。

GPT-5 Thinking

GPT-4o

Gemini 2.5 Pro

Claude 4.1 Opus

考察

この出力例を見ると、GPT-5はカード的な情報の見せ方が大好きみたいです。これについては見た目について指示すれば偏りは解消されそうです。

まとめ

GPT-5のアップデートを確認してきました。今回のモデルは大きなインパクトこそ無かったかもしれませんが、コーディング等のタスクにおいてかなり便利なモデルになったと思います。また、GPT-5は新しい視点を提供してくれることが多く気に入ってます。この記事がみなさんの助けになれば幸いです!

参考文献

おすすめ記事

記事・ニュース一覧