OpenAI Codex は 画像を見て理解できます。スクリーンショットやデザインカンプ、手書きの図を渡すと、それを元にコードを書いたり、問題を分析したりできます。
「言葉で説明するより画像で見せたほうが早い」場面は多いもの。この記事では、Codexの画像入力の使い方と活用法を解説します。
⚠️ 本記事は OpenAI 公式とは無関係の解説記事です。
画像入力でできること
- デザインの再現：デザインカンプを渡して「これをHTML/CSSで」
- エラーの相談：エラー画面のスクショを渡して「これを直して」
- 手書き図の実装：ホワイトボードの写真を渡して「これを作って」
- 画面の文字起こし・分析：スクショの内容を読み取って処理
「目で見た情報をそのままCodexに渡せる」のが画像入力の強みです。
画像を渡す方法
VS Code拡張の場合
VS Code拡張では、プロンプト入力欄に画像をドラッグ&ドロップ するだけ。
（画像をドロップして）
このデザインをTailwindCSSで再現して。レスポンシブ対応で
Web版の場合
Web版でも、画像をアップロードまたは貼り付けて渡せます。
macOSアプリの場合（Appshots）
Macアプリなら ⌘⌘（Command2回） で最前面アプリの画面を瞬時に渡せます。これがAppshots機能です。
画像入力とAppshotsの違い
| 項目 | 画像入力 | Appshots |
|---|---|---|
| 方法 | 画像ファイルをドロップ/アップロード | ⌘⌘で最前面アプリを自動キャプチャ |
| 対象 | 任意の画像 | 今表示中のアプリ画面 |
| 環境 | VS Code / Web / アプリ | macOSアプリ |
| 手軽さ | ○ | ◎（ワンキー） |
- 手元の画像ファイルを使う → 画像入力
- 今見ている画面を渡す → Appshots
活用例
1. Figmaデザインの実装
（Figmaのスクショをドロップ）
このランディングページのデザインを、HTML + Tailwindで実装して
デザインから実装への変換が一気に進みます。Next.js開発とも好相性。
2. エラー画面の解決
（エラー画面のスクショをドロップ）
このエラーの原因と直し方を教えて
エラー全文を打ち込む手間が省けます。トラブルシューティングに便利。
3. 既存サイトの模写
（参考サイトのスクショをドロップ）
このようなレイアウトのコンポーネントを作って
4. 手書きワイヤーフレームの実装
紙やホワイトボードに描いたUI案を写真に撮って渡せば、Codexがコード化。
5. グラフ・図の分析
（グラフ画像をドロップ）
このグラフから読み取れる傾向を教えて
効果的な使い方のコツ
1. 何をしてほしいか明確に
画像を渡すだけでなく、「これをどうしてほしいか」を添える。
❌ （画像だけ） ⭕ （画像）＋「このヘッダー部分だけをReactコンポーネントにして」
2. 鮮明な画像を渡す
ぼやけた画像だと正確に読み取れません。鮮明なスクショを。
3. 必要な部分だけ切り取る
余計な情報が多いと精度が落ちます。関係する部分だけトリミングして渡すと◎。
4. 複数画像で文脈を補う
「Before/After」「全体図＋詳細図」など、複数枚で意図を伝えるのも有効。
注意点
- プライバシー：画像はOpenAIに送信されます。個人情報・機密情報が映った画像は渡さない
- 完璧な再現は期待しすぎない：複雑なデザインは、生成後に調整が必要
- 文字が小さいと読み取りにくい：鮮明・適切なサイズで
よくある質問（FAQ）
Q. どんな画像形式に対応していますか？
A. PNG・JPEGなど一般的な画像形式に対応。スクリーンショットがそのまま使えます。
Q. デザインを完璧に再現できますか？
A. かなり近づけられますが、細部は調整が必要なことも。「ここをこう直して」と対話しながら仕上げます。
Q. Appshotsと画像入力、どっちを使うべき？
A. 今見ている画面ならAppshots（⌘⌘）、手元の画像ファイルなら画像入力。
Q. 機密情報が映った画面を渡しても大丈夫？
A. 渡さないでください。画像はOpenAIに送信されます。機密部分は隠すかトリミングを。
Q. CLIでも画像を渡せますか？
A. 画像入力は主にVS Code拡張・Web版・アプリで使えます。CLIは用途が異なります（CLI使い方）。
まとめ
Codexの画像入力は、スクショ・デザイン・手書き図を渡してコード化・分析 できる強力な機能です。デザインの実装やエラー相談が、言葉だけより格段にスムーズになります。
手元の画像はドラッグ&ドロップ、今見ている画面はAppshots（⌘⌘）で。プライバシーに注意しつつ活用しましょう。デザイン実装はVS Code拡張と組み合わせると効果的です。
