本文へスキップ
Codex DesignBETA

GPT-6.1 Terra と Sol の UI デザイン比較。

Codex はいま GPT-6.1 Sol を標準で使い、2026 年 10 月 26 日に公開された、より速く安い GPT-6.1 Terra もオプション 1 つで使えます。両方に同じ 3 つの UI プロンプト(ランディングページ、SaaS のダッシュボード、モバイルアプリの画面)を、デザインの指示なしで渡しました。Terra のほうが速く、トークンも少なく済みました。それ以上に大きな発見は、2 つのモデルがほぼ同じ見た目に行き着くことです。

2026年11月7日 更新 · 約 6 分で読めます

結論から

  • UI の作業なら、Terra を標準にするのがおすすめ。 ランディングページのプロンプトでは、Terra が 1 分 31 秒・9,803 トークン、Sol が 2 分 16 秒・21,583 トークンでした。画面の質は同程度です。
  • Sol は自分から多めに作ります。 頼んでいないのに、本文へのスキップリンク、料金のプレビューダイアログ、「価格は例です」という注記を加えました。画面に本物のロジックがあるときに向いています。
  • どちらにも自分の好みはありません。 指示がないと、6 画面中 5 画面がセージか緑になり、6 画面すべてが DM Sans を使い、チェッカーは 6 画面すべてで絵文字アイコンを見つけました。どのモデルを選ぶかより、方向性を渡すかどうかのほうが大事です。

テストの方法

Codex CLI(バージョン 0.166)に ChatGPT アカウントでログインし、標準の推論レベル(medium)で、空のフォルダで各プロンプトをモデルごとに 1 回ずつ実行しました。どのプロンプトも、CDN 版の Tailwind を使った index.html 1 枚を求め、色、フォント、スタイルは指定していません。そのあとスクリーンショットを撮り、pretty-ui のチェッカーをすべてのファイルにかけました。

3 つのプロンプト:

  1. フリーランス向け請求書アプリ Tally のランディングページ。ヒーロー、3 つの機能、2 つの料金プラン、フッター。
  2. サブスクリプション分析アプリのメインダッシュボード。MRR、解約率、顧客数、売上グラフ、最近の出来事。
  3. 習慣トラッカーアプリのホーム画面(390×844)。今日の習慣とチェック、連続日数、下部のタブバー。

各プロンプト 1 回ずつなので、小さなテストでありベンチマークではありません。同じプロンプトでも、もう一度実行すれば違うページになります。ただ、以下のパターンはすべての実行で現れました。

結果

GPT-6.1 Terra と GPT-6.1 Sol が同じプロンプトから作った、請求書アプリ Tally の 2 つのランディングページ。どちらも淡いセージ色の背景、濃い緑の大きな見出し、右側に浮かぶ請求書カード。

ランディングページのプロンプト。左が Terra、右が Sol。

左サイドバー、4 つの指標カード、売上グラフを持つ 2 つの SaaS 分析ダッシュボード。Terra は緑、Sol は青いボタンと青いグラフ。どちらも MRR は約 48,000 ドル、解約率は 2.4%。

ダッシュボードのプロンプト。どちらも MRR を約 48,000 ドル、解約率を 2.4% にしました。

淡い緑の背景に、あいさつ、連続日数のカード、1 週間の日付、チェック用の丸が付いた習慣リスト、下部のタブバーがある 2 つの習慣トラッカーのホーム画面。

モバイルのプロンプト。どちらもあいさつ、1 週間の日付、連続日数のカード、緑のチェックを選びました。

プロンプトモデルトークンフォントメインの色チェッカーの指摘
ランディングページTerra9,803DM Sans、Manropeセージに濃い緑エラー 5 件:絵文字アイコン、仮の人名
ランディングページSol21,583DM Sans、Manropeセージに濃い緑エラー 4 件:絵文字アイコン。ぼかしの警告
ダッシュボードTerra12,532DM Sans、Manrope緑絵文字アイコン、仮の名前
ダッシュボードSol14,520DM Sans青と緑絵文字アイコン、仮の名前
モバイルアプリTerra10,981DM Sans、Manropeセージ絵文字アイコン 7 個
モバイルアプリSol12,073DM Sans、Manropeセージ絵文字アイコン 6 個

3 つのプロンプトすべてで、Terra のほうがトークンが少なく済みました。どちらのモデルも、まとまりのある完成度の高い画面を作りました。階層がはっきりし、余白はそろい、空間の使い方も自然です。Sol のページは少しだけ内容が多く、状態や小さなインタラクションが増えています。

新しい「AI の標準の見た目」

2 年前、指示のないプロンプトからは紫のグラデーションと Inter が出てきました。今回の 6 回で出てきたのはこれです。

  • 淡いセージかオフホワイトの背景に、濃い緑のアクセント。1 つの単語やバッジにライムのハイライト。
  • すべてに DM Sans。Manrope と組み合わせることも多い。
  • 見出しの上に、ピル型の小さな全大文字ラベル。たとえば「MADE FOR INDEPENDENT WORK」。
  • ヒーローの画像に重なって浮かぶカード。たとえば「Paid」バッジ付きの請求書。
  • アイコン代わりの絵文字。連続日数に炎、習慣に水滴。
  • 仮の人名や会社名。 Terra は「Acme Studio」の「Olivia Rhye」に請求書を出しました。Olivia Rhye は人気の UI キットに出てくるサンプルユーザーです。

どれも単体では間違いではなく、画面も見栄えがします。問題は、指示なしでページを頼んだ人が全員この同じページを受け取ることで、やがて「AI が作ったもの」に見えてきます。こうしたパターンは AI っぽい UI デザインの特徴 にまとめています。

UI デザインにはどちらを使うか

  • 画面を探る、たたき台を作る、何度も直す: Terra。速くて安いので、同じ時間でより多くの方向性を試せます。
  • 本物の動きがある画面を作る(フォーム、データテーブル、複数ファイルにまたがるフロー):Sol。普通なら追加で頼む状態や例外ケースを補ってくれます。
  • どちらにしても、 デザインは自分で決めましょう。デザインシステムがあれば、どちらのモデルもそれに忠実に従います。

Codex CLI でモデルを切り替えるには、codex -m gpt-6.1-terra で起動するか、セッション内で /model を使います。

標準ではないデザインにするには

どちらのモデルでも解決策は同じです。最初の画面を作る前に方向性を渡します。

  1. デザインシステムを選ぶ。 色、フォント、角丸、余白に名前を付けて決めます。私たちのデザインシステムライブラリから選ぶか、DESIGN.md を書きましょう。
  2. 1 案ではなく 3 案を頼み、 自分で選びます。オープンソースの pretty-ui スキルはこれを自動で行い、選んだものを DESIGN.md に保存します。
  3. 避けたいものを伝え、 できあがりを確認します。
最初にモデルへ方向性を渡す
作り始める前に DESIGN.md を読み、そこにある色、フォント、角丸、余白だけを使ってください。絵文字をアイコンに使わず、[Lucide] のアイコンを使ってください。Acme や John Doe のようなサンプルの名前は使わず、[あなたのプロダクト] に合う現実的な内容にしてください。見出しの上に小さな全大文字のラベルは置かないでください。そのうえで [その画面] を作ってください。

よくある質問

ChatGPT のプランで、Codex の GPT-6.1 Terra は使えますか?

使えます。私たちも Codex CLI で ChatGPT アカウントを使って実行しました。OpenAI は 2026 年 10 月 26 日に ChatGPT Work と Codex で提供を始めています。

GPT-6.1 Sol は Terra よりデザインが上手いですか?

今回のテストでは、そうではありませんでした。画面の質は同程度で、見た目もよく似ています。Sol が多く使ったトークンは、見た目の良さではなく、ダイアログやアクセシビリティの細部といった機能の追加に使われていました。

なぜ両方のモデルがセージグリーンと DM Sans を選ぶのですか?

指示がないと、モデルは学習した中で最も典型的なページを作ります。前の定番を避けようという助言が広まるたびに新しい定番が生まれ、いまはそれが落ち着いた緑のパレットと丸みのあるサンセリフです。デザインシステムは、その定番をあなたの選択で置き換えます。

続けて読む

Codex Design は Codex 向けの独立したプラグインです。OpenAI との提携や、OpenAI による承認はありません。