Codex Annotations 使い方｜in-app ブラウザで直接調整
Codex Annotations は、2026年6月に登場したCodex Appの新機能です。in-app ブラウザでフォントサイズ・色・スペーシングをマウスで直接調整するだけで、Codex に「ここをこう変えたい」という明確なシグナルを伝えられます。文章で「もう少し大きくして」「左に寄せて」と何度も指示しなくても、画面上で操作した結果がそのままコードに反映される。これがWebデザイン業務における大きな転換点になります。
株式会社Fyveでも、中小企業のWebサイト改修や社内ツール調整の現場でこの機能を検証しています。本記事では、私たちの実務目線で使い方と活用ポイントを整理します。
Codex Annotations とは何か
Codex Annotations は、Codex App に内蔵されたブラウザ上で、UIの見た目を直接調整できる機能です。これまでは「ボタンの色を青系にして」「フォントを少し大きく」とテキストで指示する必要がありましたが、Annotationsを使えば、ブラウザの上で対象要素をクリックし、スライダーやカラーピッカーで数値を動かすだけで、Codexがコードを書き換えてくれます。
従来のフロントエンド調整では、こんなやりとりが繰り返されていました。「ボタンを大きく」と指示して書き換えてもらい、結果を見て「大きすぎる」と再依頼。テキストでの曖昧な指示と、AIによる曖昧な解釈の間で、何往復もするのが当たり前でした。
Annotationsは、この曖昧さの正体である「言葉によるサイズ・色・距離の伝達」を、直接操作に置き換えます。画面でスライダーを動かせば、Codexは「24px」という明確な数値を受け取る。これがフロントエンド調整作業の革命と呼ばれる理由です。
調整できる主な項目
- フォントサイズ: 見出し・本文・ボタン文字などの大きさ
- 色: 文字色・背景色・ボーダー色などをカラーピッカーで指定
- スペーシング: padding・margin・要素間の余白
- 配置: 中央寄せ・左右の位置・整列
- 角丸・影: border-radiusやbox-shadowの強さ
これらをマウス操作で動かした結果がリアルタイムで反映され、確定したタイミングでCodexがコード本体（CSSやTailwindクラス、コンポーネントのprops）を書き換えます。
in-app ブラウザで何が変わったのか
Codex Appのin-app ブラウザは、ただプレビューを表示するだけのウィンドウではなくなりました。ブラウザ自体が「AIへの入力装置」になったのが、今回の最大の変化です。
変化1: 言葉から操作への移行
「右側のメニューを少し詰めて、見出しの下にもう少し余白を」という指示は、人間同士でも曖昧です。「少し」が何pxかは、相手の感覚に依存します。私たちが中小企業のWeb改修案件で苦労してきたのも、この「感覚のすり合わせ」でした。
Annotationsを使うと、クライアントが画面上で「ここまで詰めて、ここまで余白」と直接示せます。私たちも画面共有で「これで確定でいいですか」と確認するだけで済む。打ち合わせ時間が短縮され、修正のラリーが激減します。
変化2: 画像アセットの一括取得
Codex Annotationsには、ページ内の画像アセットを素早くダウンロード・抽出する機能も含まれています。in-app ブラウザで表示している既存サイトから、ロゴ・写真・アイコンといったアセットをまとめて回収し、新しい実装に取り込めます。
これは既存サイトのリニューアル案件で特に効きます。「既存素材を使い回したい」と言われたとき、これまでは1枚ずつ右クリック保存していたものが、ブラウザに開いて指示するだけで全部Codex側に渡せる。毎回発生していた手間がなくなる効果は大きいです。
変化3: スクリーンショット指示との組み合わせ
Codexにはもともと、画面のスクリーンショットを渡して「この通りに作って」と頼める Codex Appshots という機能もあります。Annotationsはこれと相性が良く、Appshotsで全体の方向性を伝えたあとに、Annotationsで細部を詰めるという二段構えが組めます。
Codex Appshotsについては別記事で詳しく解説しています。
使い方の基本フロー
Codex Annotationsを実務で使うときの典型的な流れを整理します。
ステップ1: Codex Appを起動してプロジェクトを開く
調整したいWebサイト・社内ツールのリポジトリをCodex Appで開きます。Codex AppはmacOS、Windows、モバイルにも展開済みで、ブラウザ表示と編集が同じウィンドウで完結します。
ステップ2: in-app ブラウザで対象画面を表示
開発用サーバーを立ち上げ、in-app ブラウザで対象ページを開きます。ローカルでもステージング環境でも構いません。表示できれば、その上で直接調整に入れます。
ステップ3: 調整したい要素を選択
ブラウザ上で対象の要素（ボタン・見出し・カードなど）をクリックして選択します。選択中の要素には注釈用のUIが重なって表示され、フォントサイズ・色・スペーシングなどを操作できるようになります。
ステップ4: マウスで数値を調整
スライダー・カラーピッカー・数値入力で目的の見た目に近づけます。操作するたびに画面はリアルタイムで更新されるので、「ここまで大きくしたい」「この色がしっくりくる」という感覚を、その場で確定できます。
ステップ5: Codex に書き換えを依頼
調整が決まったら、Annotationsの内容を確定してCodexに渡します。私たちが普段使っている指示の例はこんな形です。
Claude Code / Codexへの指示例（人間語の依頼文）
「いまAnnotationsで指定したフォントサイズ、色、余白の変更を、対応するコンポーネントのスタイル定義に反映してください。Tailwindクラスを使っているプロジェクトなので、可能ならクラスベースで書き換えてください。」
このように、AIに渡すのはあくまで人間語の依頼文で構いません。コードを書く必要はなく、画面で操作したことを「反映してほしい」と伝えるだけで、Codexが該当ファイルを特定して書き換えてくれます。
中小企業のWebデザイン業務でどう活きるか
Annotationsの価値は、中小企業の現場で発揮されます。私たちが想定している活用シーンを整理します。
シーン1: コーポレートサイトの細部調整
中小企業のコーポレートサイトでは、リリース後に「お問い合わせボタンをもう少し目立たせたい」「採用情報の余白を整えたい」といった細かい依頼が継続的に発生します。これまでは1件ごとにメールで指示をもらい、エンジニアが対応してプレビューを送り返し、確認をもらい、というラリーが必要でした。
Annotationsを使えば、私たちが画面共有しながらクライアントの目の前で調整し、その場で確定して反映するという進め方ができます。1件あたりの所要時間が大きく短縮されるので、月額の保守プラン内で対応できる修正件数が増え、結果として顧客満足度も上がります。
シーン2: 業種別LP（ランディングページ）の量産
建設業向け・介護施設向け・クリニック向けといった業種別LPは、ベースのテンプレートをコピーしながらブランドカラー・写真・見出しを差し替えて作ることが多いです。Annotationsを使えば、テンプレートを表示した状態で「業種に合わせて色を切り替え、見出しのサイズを少し落とす」といった調整が、ブラウザ上で完結します。
1案件あたりの調整時間が短くなるので、これまで「LPをもう1業種作りたい」と断らざるを得なかった枠も対応できます。
シーン3: 社内ツール・管理画面の継続改善
中小企業向けに納品した社内ツール（在庫管理・予約管理・顧客管理など）は、現場のスタッフから「文字が小さくて見えづらい」「ボタンの色が分かりにくい」というフィードバックが定期的に出ます。これも、画面共有でAnnotationsを操作しながら、現場の声を直接反映するスタイルが取れます。
「現場の人が画面上で『こう変えたい』と動かす → そのままコードに反映される」という流れは、AIによる業務改善で私たちが目指している姿そのものです。
従来のフロントエンド作業との違い
Codex Annotationsを使う前後で、フロントエンド調整の作業はどう変わるのか。具体的に比較します。
従来: テキスト指示中心
- クライアントからメールやチャットで「ここを直したい」と要望を受ける
- エンジニアが要望を解釈し、CSSやTailwindクラスを書き換える
- プレビュー画面のURLを送り、確認をもらう
- 「もう少し大きく」「もう少し詰めて」と再依頼が来る
- これを2〜3往復繰り返す
Annotations利用後: 画面操作中心
- 画面共有で、クライアントが画面上で「ここをこう変えたい」と操作
- 確定した内容をCodexに反映依頼
- その場で結果を確認
- 必要があればさらに微調整
- 1回のセッションで決まる
テキストの往復が、リアルタイムの対話に置き換わる。これが、Annotationsがもたらす業務上の最大の変化です。
導入時に押さえておきたいポイント
新機能をいきなり本番案件に投入する前に、いくつか押さえておきたい点があります。
ポイント1: 既存コードベースの整理
Annotationsで生成される変更は、対象のコンポーネントやスタイル定義が整理されているほど、きれいに反映されます。コンポーネントが大きすぎたり、スタイル指定が散らばっていたりするプロジェクトでは、AIが書き換える範囲も広がり、意図しない箇所に影響が出ることがあります。
導入前に、対象プロジェクトのコンポーネント構造とスタイル設計を見直しておくと、Annotationsの効果が最大化されます。これは中小企業案件であっても、納品時にコンポーネント分割をしっかりやっておく価値が高まったということでもあります。
ポイント2: バージョン管理との組み合わせ
Annotationsによる変更は、コミット単位で履歴を残すのが安全です。Codexは変更をGitに反映する操作も含めて自動化できますが、私たちは「Annotationsで作業 → 動作確認 → コミット → クライアント確認」のサイクルを意識的に分けています。
1回のセッションでまとめて変更してから一気にコミットすると、後から「どの変更がどの要望に対応していたか」が追いづらくなります。要望1つに対してコミット1つ、という原則を守ると保守性が上がります。
ポイント3: モバイルレイアウトの確認
in-app ブラウザはデスクトップ表示で操作することが多いため、Annotationsで調整した結果がモバイル表示でどう見えるかを別途確認する必要があります。デスクトップでぴったりにしたつもりが、スマホで崩れていたという事故が起きやすいです。作業後は必ずモバイル幅でのプレビューも確認する手順をフローに組み込んでおくと安心です。
Codex Appの他の新機能と組み合わせる
Annotations単体でも強力ですが、Codex Appが2026年に投入してきた他の新機能と組み合わせると、さらに業務効率は上がります。
Codex Goal Mode との連携
Codex Goal Modeは、目標を渡して数時間Codexに任せる機能です。「コーポレートサイトの全ページを新ブランドカラーで統一して」と目標を伝えれば、Codexは長時間自律的に作業を進めます。
このときAnnotationsで「新ブランドカラーはこの色味」「見出しはこのサイズ」と方向性を示しておくと、Goal Modeでの自律作業の質が上がります。方向性はAnnotationsで定義し、量はGoal Modeで処理する、という分担です。
Codex Sites との連携
Codex Sitesは、ダッシュボードや管理画面をAIが生成する新機能です。生成された画面の細部を、Annotationsで現場に合わせて調整するという使い方ができます。
OpenAI Codex 全体像と料金
Codex Appの全体像と料金プランは別記事にまとめています。
私たちがクライアントに伝えていること
Annotationsの登場で、Webデザインの仕事は「AIに頼んだら何かが出てくる」から「人がやりたいことを画面で示し、AIが正確に反映する」という協業の形に近づきました。
私たちは、中小企業のクライアントに対しても「全部を社内でやる必要はないが、画面で『こう変えたい』を示す力は社内に残すと強い」と伝えています。実装はAIと私たちが担当し、方向性の指示は社内で完結できる体制をつくる。これが、AIを業務に組み込む現実的なやり方だと考えています。
株式会社Fyveでは、Codex AppやClaude Codeを使った業務改善を、専属AI活用顧問サービスとして月額で伴走しています。新機能のキャッチアップから、社内での運用設計まで、現場に合わせた形で支援しています。Codex Annotationsのような新しい武器を、自社の業務にどう組み込むか迷っている方は、ぜひ一度ご相談ください。
「Codex を自分で使いこなしたい」「自社の業務に組み込みたい」
── そんな方は、まず初回無料相談でお話ししてみませんか。
御社の業務に合わせたCodex導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。