OpenAI画像生成APIの使い方｜JavaScriptで生成・編集画像を保存する

OpenAIの画像生成APIは、JavaScriptからプロンプトを送り、返されたBase64データをPNGなどの画像ファイルとして保存できます。2026年7月18日時点の公式ガイドでは、最新世代の画像生成に gpt-image-2 が案内されています。

ChatGPTなどの画面で画像を作る場合と違い、APIでは商品画像の試作、記事サムネイルの下書き、既存画像の編集を自社のワークフローへ組み込めます。その一方で、APIキー、料金、保存先、権利確認、利用者入力の制限を自分で設計する必要があります。

この記事では、Node.jsと公式SDKを使い、1枚生成して保存する最小例、既存画像の編集、Webアプリ化するときの構成と注意点を解説します。

情報確認日：2026年7月18日（日本時間）

結論：単発生成はImages API、会話内の画像生成はResponses APIを検討する

この記事では、生成と編集の流れが分かりやすいImages APIを使います。利用可能なモデル、品質、サイズ、形式、料金は更新されるため、本番導入時に公式モデルページと料金表を確認してください。

JavaScriptで画像を1枚生成する

プロジェクトを準備する

mkdir openai-image-sample
cd openai-image-sample
npm init -y
npm pkg set type=module
npm install openai

APIキーを環境変数へ設定します。

export OPENAI_API_KEY="your_api_key_here"

APIキーの作成とサーバー側での扱いはOpenAI APIをJavaScriptから使う方法で確認できます。ブラウザへ配信されるコードにはAPIキーを置きません。

生成結果をPNGとして保存する

import OpenAI from "openai";
import { writeFile } from "node:fs/promises";

const client = new OpenAI();

const result = await client.images.generate({
  model: "gpt-image-2",
  prompt: [
    "白い机の上に置かれた小型メカニカルキーボード。",
    "自然光、落ち着いた青とグレー、製品写真風。",
    "文字、ロゴ、透かしは入れない。",
  ].join(" "),
});

const base64 = result.data[0]?.b64_json;

if (!base64) {
  throw new Error("Image data was not returned");
}

await writeFile(
  "keyboard-concept.png",
  Buffer.from(base64, "base64")
);

console.log("saved: keyboard-concept.png");

b64_json は画像のバイナリをBase64文字列にしたものです。Buffer.from(..., "base64") でバイト列へ戻し、ファイルへ保存します。配列が空の場合も考慮し、存在確認を入れています。

プロンプトを再現しやすく書く

画像プロンプトは、被写体、構図、背景、光、色、表現、除外したい要素に分けると、変更箇所を特定しやすくなります。

被写体：小型メカニカルキーボード
構図：斜め45度、製品全体が画面内
背景：白い机、余計な小物なし
光：左側からの柔らかな自然光
色：青とグレー
表現：写実的な製品写真
除外：文字、ブランドロゴ、透かし

「きれいな画像」のような抽象語だけでなく、用途と見せたい要素を具体化します。Web記事用なら、見出し文字を後から載せる余白、横長のトリミング、スマートフォンでの視認性も指定します。

既存画像を編集する

Images APIの編集エンドポイントでは、既存画像を参照して変更を指示できます。編集に使う画像の権利と、写っている人物の同意を先に確認してください。

import OpenAI from "openai";
import fs from "node:fs";
import { writeFile } from "node:fs/promises";

const client = new OpenAI();

const result = await client.images.edit({
  model: "gpt-image-2",
  image: fs.createReadStream("source.png"),
  prompt: [
    "キーボード本体の形とカメラ角度は維持する。",
    "背景だけを明るい木目の机へ変更する。",
    "新しい文字やロゴを追加しない。",
  ].join(" "),
});

const base64 = result.data[0]?.b64_json;

if (!base64) {
  throw new Error("Edited image data was not returned");
}

await writeFile("edited.png", Buffer.from(base64, "base64"));

SDKやランタイムのバージョンによって、ファイル入力の作り方が変わる場合があります。実装時は利用中の公式SDKにある画像編集例を確認してください。

編集指示は「維持する部分」も書く

変更点だけでなく、構図、人物、商品形状、色、ロゴなど維持したい条件を明示します。編集を繰り返すと細部が変化する可能性があるため、生成物を次の入力へ連鎖させる回数も管理します。

生成と編集の入出力を記録する

プロンプト全文に個人情報や機密情報が含まれる場合、ログへそのまま保存しない設計も必要です。画像ファイルには推測しにくいIDを付け、公開領域と非公開領域を分離します。

Webアプリへ組み込む構成

ブラウザ
  ↓ 生成条件を送信
自社サーバー
  ├─ 認証・入力検証・利用上限
  ├─ OpenAI APIを呼び出す
  ├─ 画像を非公開ストレージへ保存
  └─ ジョブIDを返す
       ↓
ブラウザが状態を確認
  └─ 審査済み画像だけを表示・公開

画像生成はテキスト応答より時間がかかることがあります。HTTP接続を長く保持するより、ジョブキューへ登録し、queued、processing、succeeded、failed の状態を返す構成も検討します。

公開サービスで必要な制御

• ログイン利用者だけに生成を許可する
• 利用者・IP・組織ごとに回数と同時実行を制限する
• 入力文字数、画像サイズ、ファイル形式を検証する
• 推測可能なファイル名や公開URLを避ける
• 失敗時の再試行回数を制限する
• 公開前に人または審査工程で確認する

料金・権利・公開前の確認

料金はモデル、品質、サイズ、入出力条件などで変わります。固定の金額をコードへ埋め込まず、公式料金表を確認し、生成前に概算や残り枚数を利用者へ表示します。

• プロンプトや元画像を利用する権限があるか
• 実在人物の誤認やなりすましにつながらないか
• 文字、ロゴ、商品形状に不自然な箇所がないか
• 記事や広告の説明と画像が一致しているか
• 必要なAI生成表示や社内承認を行ったか
• 画像の代替テキストを内容に合わせて作ったか

画像生成サービス全体の選び方はAI画像生成ツールの比較、構図や指示の考え方はAI動画プロンプトの書き方にも共通点があります。

よくあるエラー

よくある質問

ブラウザだけで画像生成APIを呼べますか？

APIキーを公開するため推奨できません。ブラウザから自社サーバーへ依頼し、自社サーバーが認証、上限、入力検証を行ってOpenAI APIを呼びます。

生成画像をそのまま記事へ掲載できますか？

内容と権利を確認してから掲載します。文字崩れ、誤解を招く表現、実在人物やブランド、記事内容との不一致がないかを人が確認してください。

大量生成はforループで実行すればよいですか？

無制限の並列実行は避けます。キュー、同時実行数、予算、再試行、キャンセルを設け、レート制限と利用中モデルの上限に合わせます。

まとめ

OpenAIの画像生成APIは、公式JavaScript SDKの images.generate() で呼び出し、b64_json をBase64デコードして保存できます。既存画像の編集では、変更点だけでなく維持する条件も指示します。

Webアプリへ組み込む場合は、サーバー側でAPIキーを守り、認証、利用上限、非公開保存、公開前確認を追加してください。モデルや料金は変わるため、実装時に公式ドキュメントを再確認することも重要です。