用語集 › 🕸️ Web › コンテンツネゴシエーション
【こんてんつねごしえーしょん】

コンテンツネゴシエーション とは？

💡 「日本語でお願い」「画像はWebPで」——ブラウザとサーバーの自動交渉術
📌 このページのポイント
コンテンツネゴシエーション — 最適な形式の交渉 ブラウザ（クライアント） Accept: image/webp, image/png Accept-Language: ja, en Accept-Encoding: br, gzip 「希望を伝える」 リクエスト レスポンス サーバー Content-Type: image/webp Content-Language: ja Content-Encoding: br 「最適な形式を選択」 Vary ヘッダー キャッシュの 分離キーを指定 Vary: Accept, Accept-Encoding 活用シーン 画像フォーマット WebP / AVIF / PNG 多言語サイト ja / en / zh 圧縮方式 Brotli / gzip / 非圧縮
コンテンツネゴシエーションの交渉フロー
ひよこ ひよこ

コンテンツネゴシエーションって、何を交渉してるの？

ペンギン先生 ペンギン先生

ブラウザが「私はこういう形式に対応してるよ」とサーバーに伝えて、サーバーが「じゃあこの形式で返すね」と最適なものを選ぶんだ。言語、データ形式、圧縮方式などが交渉対象だよ

ひよこ ひよこ

具体的にはどんなヘッダーを使うの？

ペンギン先生 ペンギン先生

Accept: text/html, application/jsonなら「HTMLかJSONがほしい」。Accept-Language: ja, enなら「日本語優先、なければ英語」。Accept-Encoding: gzip, br なら「gzipかBrotli圧縮に対応してるよ」という意味だよ

ひよこ ひよこ

画像の形式選択にも使えるの？

ペンギン先生 ペンギン先生

そう！ブラウザがAccept: image/webp, image/avifを送ると、サーバーは対応する最適な形式を返せる。WebP非対応の古いブラウザにはPNGを返し、対応ブラウザにはWebPを返すということが1つのURLで実現できるんだ

ひよこ ひよこ

キャッシュと組み合わせるときに注意点はあるの？

ペンギン先生 ペンギン先生

大事なポイントだね！同じURLでもAccept-Languageが違えば中身が違うから、キャッシュを分ける必要がある。そのためにVaryヘッダーを使うんだ。「Vary: Accept-Encoding」なら圧縮形式ごとに別キャッシュを持つよ。CDNでのキャッシュ設計でVaryを忘れると、日本語ユーザーに英語ページが配信されるなんて事故が起きるんだよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「コンテンツネゴシエーション」って出てきたら「ブラウザとサーバーが最適な形式を相談して決める仕組み」と思えればだいたいOK！
📖 おまけ：英語の意味
「Content Negotiation」 ＝ コンテンツの交渉
💬 Negotiation（交渉・折衝）で、「何語がいい？」「どの形式がいい？」とクライアントとサーバーが話し合う仕組みだよ
🔗 あわせて読みたい
← 用語集にもどる