ブログ・サイトへの埋め込み

食品の栄養カード、食品の比較、栄養素ランキング、チェーン店メニューのランキング、AIカロリー解析を、記事にそのまま貼り付けられます。無料・登録不要です。

AIカロリー解析

料理の写真から、カロリーと栄養素を推定するツールです。

埋め込みコード（数値は自動で最新に）

<iframe src="https://calories.jp/embed/analyzer" style="width:100%;border:0;height:190px"
        loading="lazy" title="AI食事解析"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/analyzer">calories.jp「AI食事解析」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

表示例

紹介カード（PR）

calories.jpのAIカロリー解析を紹介するカードです。食べ物の記事の途中やサイドバーに貼れます。「PR」の表示は外さないでください。

HTMLコード（iframeが使えないブログ向け）

<aside style="position:relative;max-width:640px;margin:16px 0;padding:18px 20px;border:1px solid #4A3426;border-radius:18px;background:#1E1612;color:#FFF8F3;font-size:14px;line-height:1.5;box-sizing:border-box">
  <button type="button" aria-label="閉じる" onclick="this.parentNode.remove()" style="position:absolute;top:8px;right:12px;padding:4px;border:0;background:none;color:#B8A79B;font-size:20px;line-height:1;cursor:pointer">×</button>
  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
    <div style="flex:1 1 260px;min-width:0">
      <p style="margin:0 0 6px;display:flex;align-items:center;gap:8px"><span style="width:14px;height:14px;border-radius:3px;background:#F26722"></span><a href="https://calories.jp/" style="color:#FFF8F3;font-weight:700;text-decoration:none">calories.jp</a><span style="padding:1px 8px;border-radius:9px;background:#3A2A20;color:#B8A79B;font-size:11px">PR</span></p>
      <p style="margin:0 0 14px;font-size:18px;font-weight:700;color:#FFF8F3">その食事、何kcal？</p>
      <p style="margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px"><span style="padding:6px 12px;border-radius:999px;background:#3A2418;color:#F7A072;font-weight:700">写真1枚 → カロリーとPFC</span><a href="https://calories.jp/analyzer" style="padding:8px 18px;border-radius:999px;background:#F26722;color:#FFFFFF;font-weight:700;text-decoration:none">無料で試す ›</a></p>
      <p style="margin:12px 0 0;font-size:12px;color:#B8A79B">登録不要・無料 · 文部科学省の成分表で計算</p>
    </div>
    <a href="https://calories.jp/analyzer" style="flex:0 0 auto;margin-right:18px"><img src="https://calories.jp/static/media/promo-analyzer.webp" width="140" height="140" loading="lazy" alt="calories.jpのAIカロリー解析：料理の写真からカロリーを推定" style="display:block;border:0;max-width:100%;height:auto"></a>
  </div>
</aside>

表示例

HTMLコードは貼り付けるブログのデザインで表示されるため、見た目はこの例と少し変わります。

食品の栄養カード

エネルギー・たんぱく質・脂質・炭水化物・食塩相当量を、100gあたりと1人前で表示します。各食品ページの「このデータをブログに埋め込む」から、その食品のコードを取得できます。

埋め込みコード（数値は自動で最新に）

<iframe src="https://calories.jp/embed/food/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%80%E3%81%AD-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F" style="width:100%;border:0;height:790px"
        loading="lazy" title="にわとり 若どり むね 皮なし 生"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/food/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%80%E3%81%AD-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F">calories.jp「にわとり 若どり むね 皮なし 生」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

HTMLコード（iframeが使えないブログ向け）

<table>
<caption>にわとり 若どり むね 皮なし 生</caption>
<tr><th></th><th>100gあたり</th><th>1枚の1/2（120g）</th></tr>
<tr><th>エネルギー</th><td>105 kcal</td><td>126 kcal</td></tr>
<tr><th>たんぱく質</th><td>23.3 g</td><td>28.0 g</td></tr>
<tr><th>脂質</th><td>1.9 g</td><td>2.3 g</td></tr>
<tr><th>炭水化物</th><td>0.1 g</td><td>0.1 g</td></tr>
<tr><th>食塩相当量</th><td>0.1 g</td><td>0.1 g</td></tr>
</table>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/food/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%80%E3%81%AD-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F">calories.jp「にわとり 若どり むね 皮なし 生」</a>（文部科学省 日本食品標準成分表）</p>
<p style="margin:2px 0 0;font-size:11px">※数値は可食部100gあたりの目安で、実際の値は品種や調理法などによって変わります。医学的・栄養学的な助言ではありません。</p>

表示例

HTMLコード（iframeが使えないブログ向け）

にわとり若どりむね皮なし生
	100gあたり	1枚の1/2（120g）
エネルギー	105 kcal	126 kcal
たんぱく質	23.3 g	28.0 g
脂質	1.9 g	2.3 g
炭水化物	0.1 g	0.1 g
食塩相当量	0.1 g	0.1 g

出典: calories.jp「にわとり若どりむね皮なし生」（文部科学省日本食品標準成分表）

※数値は可食部100gあたりの目安で、実際の値は品種や調理法などによって変わります。医学的・栄養学的な助言ではありません。

HTMLコードは貼り付けるブログのデザインで表示されるため、見た目はこの例と少し変わります。

食品の比較

2つの食品を100gあたりで並べて比べます。出典リンクは両方の食品ページを指します。

埋め込みコード（数値は自動で最新に）

<iframe src="https://calories.jp/embed/compare/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%80%E3%81%AD-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%82%E3%82%82-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F" style="width:100%;border:0;height:540px"
        loading="lazy" title="にわとり 若どり むね 皮なし 生とにわとり 若どり もも 皮なし 生の比較（100gあたり）"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/food/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%80%E3%81%AD-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F">calories.jp「にわとり 若どり むね 皮なし 生」</a>、<a href="https://calories.jp/food/%E3%81%AB%E3%82%8F%E3%81%A8%E3%82%8A-%E8%8B%A5%E3%81%A9%E3%82%8A-%E3%82%82%E3%82%82-%E7%9A%AE%E3%81%AA%E3%81%97-%E7%94%9F">calories.jp「にわとり 若どり もも 皮なし 生」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

表示例

栄養素ランキング

ある栄養素が多い食品の上位10件です。実測値だけで順位を付けています。各ランキングページからコードを取得できます。

栄養素

埋め込みコード（数値は自動で最新に）

<iframe src="https://calories.jp/embed/nutrient/saturated-fat" style="width:100%;border:0;height:800px"
        loading="lazy" title="飽和脂肪酸が多い食品ランキング"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/nutrient/saturated-fat">calories.jp「飽和脂肪酸が多い食品ランキング」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

表示例

チェーン店メニューのランキング

チェーン店ごとの、カロリーが低いメニュー・たんぱく質が多いメニューの上位10品です。店舗が公表した値だけで順位を付け、推計値は使いません。各チェーンのメニューページからもコードを取得できます。

モスバーガーのカロリーが低いメニュー

<iframe src="https://calories.jp/embed/menu/%E3%83%A2%E3%82%B9%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC" style="width:100%;border:0;height:760px"
        loading="lazy" title="モスバーガーのカロリーが低いメニュー"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/menu/%E3%83%A2%E3%82%B9%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC">calories.jp「モスバーガーのカロリーが低いメニュー」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

モスバーガーのたんぱく質が多いメニュー

<iframe src="https://calories.jp/embed/menu/%E3%83%A2%E3%82%B9%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC/protein" style="width:100%;border:0;height:960px"
        loading="lazy" title="モスバーガーのたんぱく質が多いメニュー"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/menu/%E3%83%A2%E3%82%B9%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC">calories.jp「モスバーガーのたんぱく質が多いメニュー」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

表示例

調理前・調理後の重さを換算

生の重さから、ゆで・焼きなど調理後の重さとカロリーを換算します（文部科学省の重量変化率）。

埋め込みコード（数値は自動で最新に）

<iframe src="https://calories.jp/embed/cooking-yield" style="width:100%;border:0;height:470px"
        loading="lazy" title="調理前・調理後の重さを換算"></iframe>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/cooking-yield">calories.jp「調理前・調理後の重さを換算」</a></p>
<script>
addEventListener("message", function (e) {
  if (e.origin !== "https://calories.jp" || !e.data || e.data.caloriesJp !== "height") return;
  var fs = document.querySelectorAll('iframe[src^="https://calories.jp/embed/"]');
  for (var i = 0; i < fs.length; i++)
    if (fs[i].contentWindow === e.source) fs[i].style.height = e.data.height + "px";
});
</script>

表示例

カロリー検索ボックス

iframeもJavaScriptも使わない、ふつうのフォームです。どのブログにも貼れます。

HTMLコード（iframeが使えないブログ向け）

<form action="https://calories.jp/search" method="get" target="_blank" style="display:flex;gap:6px;max-width:28rem">
  <input type="search" name="q" placeholder="食品名で検索（例: 鶏むね肉）" aria-label="カロリー検索ボックス" style="flex:1">
  <button type="submit">検索</button>
</form>
<p style="margin:4px 0 0;font-size:12px">出典: <a href="https://calories.jp/">calories.jp</a></p>

表示例

出典: calories.jp

HTMLコードは貼り付けるブログのデザインで表示されるため、見た目はこの例と少し変わります。

利用について

無償で利用できます。APIキーもアカウントも不要です。
出典表示は埋め込みに含まれています。削除しないでください。
埋め込みコードの数値は、サイトのデータ更新にあわせて自動で最新になります。HTMLコードは貼り付けた時点の数値のままです。
解析は1つのIPにつき1時間あたり12回までです。
解析結果は推定値です。分量はAIによる推定で、栄養価は文部科学省『日本食品標準成分表』の実測値から算定しています。
埋め込みの数値はいずれも目安であり、正確性・完全性を保証するものではありません。掲載内容の正確性には努めていますが、完全性・最新性を保証するものではありません。本サイトの情報を利用したことにより生じた損害について、当サイトは責任を負いかねます。内容は予告なく変更されることがあります。利用規約・免責事項 →