はじめに
食品を扱うネットショップでは、お客様が商品を手に取って裏面の表示を確かめることができません。カロリーやたんぱく質を気にしている方、家族に食物アレルギーがある方にとって、商品ページに栄養成分とアレルゲンが書かれているかどうかは、そのまま購入の決め手になります。
ところが Shopify には、栄養成分表やアレルゲンを表示する専用の機能がありません。商品説明の欄に手で表を書くこともできますが、味やサイズのバリエーションごとに数値が違う商品では、すぐに管理しきれなくなります。
この記事では、当社（UnReact）が開発した 「シンプル栄養成分・アレルギー表示｜食品表示」 を中心に、同じジャンルの海外アプリ 4 本を実際に開発ストアへインストールして比較します。アプリストアのページには書かれていない、触って初めて分かった点もあわせて紹介します。
栄養成分表示・アレルゲン表示とは？
栄養成分表示は、食品に含まれるエネルギーや栄養素の量を示すものです。日本の食品表示基準では、包装された加工食品に 熱量・たんぱく質・脂質・炭水化物・食塩相当量の 5 項目をこの順で表示することになっています。
アレルゲン表示は、食物アレルギーの原因になりやすい原材料を示すものです。表示が義務づけられた特定原材料（卵・乳・小麦・そば・落花生・えび・かに・くるみ）と、表示が推奨される特定原材料に準ずるものに分かれています。
パッケージへの表示とは違い、通販サイトの商品ページに載せることは法律上の義務にはなっていません。それでも、実物を確かめられないネットショップだからこそ、ページ上で同じ情報を見せることがお客様の安心につながります。
業種によって、次のような使い方ができます。
- お菓子・パン・スイーツ … 味ごとに違うアレルゲンを、選んだ味に合わせて表示する
- サプリメント・プロテイン … 1 食あたりのたんぱく質やカロリーを、購入前に比べてもらう
- 調味料・加工食品 … 食塩相当量や原材料を、商品説明とは別の整った表で見せる
- ギフト・詰め合わせ … 贈り先のアレルギーを気にする方に、購入前に確認してもらう
栄養成分表示を商品ページに載せるメリット・デメリット
メリット
-
購入前の不安を減らせる
アレルギーや食事制限がある方は、成分が分からない商品をそもそもカートに入れません。ページに表があるだけで、比較の土俵に乗れます。 -
問い合わせが減る
「この商品に小麦は入っていますか」「カロリーはどのくらいですか」といった質問に、ページが先に答えてくれます。 -
商品の信頼感が上がる
整った栄養成分表は、裏面の表示をきちんと管理しているお店だという印象を与えます。
デメリット
-
数値の管理に手間がかかる
商品やバリエーションが増えるほど、入力と更新の手間が増えます。パッケージの表示を変えたときに、ページ側の更新を忘れないことも大切です。 -
間違いがそのまま信用問題になる
アレルゲンの記載漏れは、健康被害につながりかねません。表示する以上は、元データの正確さが前提になります。 -
テーマによっては見た目が浮く
表の色や線がストアのデザインと合わないと、そこだけ浮いて見えます。見た目を調整できるかどうかは、選ぶうえで重要なポイントです。
Shopify の標準機能では栄養成分表を出しにくい
Shopify の商品には「栄養成分」や「アレルゲン」を入力する専用の欄がありません。標準機能だけで実現しようとすると、次のどちらかになります。
- 商品説明に表を手書きする … 商品ごとに HTML の表を書くことになり、バリエーションごとに数値を変えることはできません
- メタフィールドを自作する … 商品にメタフィールド（独自の入力欄）を定義し、テーマエディタの動的ソースでページに出す方法です。ただし表の形に整えたり、バリエーションを切り替えたときに表示を入れ替えたりするには、テーマのコードを書く必要があります
特に「味ごとにアレルゲンが違う」「サイズごとにカロリーが違う」といった商品は、標準機能だけでは表示を切り替えられません。入力画面・表示の見た目・バリエーションの切り替えまでをまとめて任せられるアプリを使うほうが現実的です。
シンプル栄養成分・アレルギー表示｜食品表示
シンプル栄養成分・アレルギー表示とは
「シンプル栄養成分・アレルギー表示｜食品表示」は、商品のバリエーションごとに栄養成分とアレルゲンを登録し、商品ページに表やカードで表示するアプリです。日本の食品表示基準の 5 項目と、アレルゲン 28 品目（特定原材料 8 品目＋特定原材料に準ずるもの 20 品目）が最初から用意されています。
| 項目 | 内容 |
|---|---|
| アプリ名 | シンプル栄養成分・アレルギー表示｜食品表示 |
| 開発者 | UnReact |
| 価格設定 | $2.99/月（年払い $29.99/年）・7 日間の無料体験 |
| 対応言語 | 管理画面は日本語を含む 20 言語 |
味やサイズのバリエーションごとに成分が違う食品を扱うストアや、商品数が多く CSV でまとめて登録したいストアに向いています。
できること
バリエーションごとに栄養成分とアレルゲンを登録できる
1 つの商品に複数のバリエーションがあるとき、栄養成分とアレルゲンをバリエーションごとに別々に持てます。たとえば同じグラノーラバーでも、ハニーアーモンド味には小麦とアーモンド、ダークチョコレート味には乳と小麦、といった具合に分けられます。
バリエーションを切り替えると表示も入れ替わる
お客様が商品ページで味を切り替えると、栄養成分の数値もアレルゲンのバッジも、ページを再読み込みせずに入れ替わります。
アレルゲン名がお客様の言語で表示される
アレルゲンは品目そのものではなく品目を表す記号で保存されるため、日本語で「小麦」にチェックを入れておけば、英語のお客様には「Wheat」と表示されます。見出しとアレルゲン名は 20 言語に対応しています。
CSV で一括登録できる
SKU をキーにしてバリエーションを探すので、商品数が多いストアでも 1 商品ずつ入力する必要はありません。
アプリのインストール
- Shopify 管理画面の左下にある「設定」を開きます。
- 「アプリと販売チャネル」から「Shopify App Store」を開きます。
- 「栄養成分」「アレルゲン」「食品表示」などで検索し、「シンプル栄養成分・アレルギー表示｜食品表示」の詳細ページで「インストール」を押します。
- 権限の確認画面で内容を確認して進めると、インストールが完了します。扱うのは商品とテーマの情報だけで、顧客情報や注文情報には触れません。
アプリ設定
管理画面は「栄養成分一覧」「商品編集」「CSV一括登録」「設定」の 4 画面です。商品ページに表示されるまでに必要なのは、①商品に栄養成分かアレルゲンを登録する、②テーマに「栄養成分表示ラベル」を追加する、③テーマエディタで「保存」するの 3 つです。
管理画面：栄養成分一覧
アプリを開くと最初に出る画面です。栄養成分かアレルゲンを 1 つでも登録した商品だけが、「画像」「商品名」「バリエーション数」「登録状況」「操作」の列で並びます。
- 登録状況は「全バリエーション登録済み」（緑）と「一部未登録」（黄）の 2 種類です。「一部未登録」が出ていたら、数値を入れていないバリエーションが残っています
- 商品名で検索に文字を入れて「検索」を押すと、商品名で絞り込めます
- 一覧は 1 回に 20 件ずつ表示され、続きは「もっと見る」で読み込みます。1 回の表示で読む範囲は最大 250 商品までです
- 右上の 商品を追加 を押すと Shopify の商品ピッカーが開き、選んだ商品の編集画面へ移動します
管理画面：商品編集（栄養成分とアレルゲンの入力）
その商品の全バリエーションが、上から順にカードとして並びます。カードの見出しはバリエーション名で、SKU があれば見出しの下に出ます。
まだ何も登録していないバリエーションには、食品表示基準の表示順で 5 項目があらかじめ並んでいます。
| 順番 | 項目名 | 単位 |
|---|---|---|
| 1 | 熱量 | kcal |
| 2 | たんぱく質 | g |
| 3 | 脂質 | g |
| 4 | 炭水化物 | g |
| 5 | 食塩相当量 | g |
- 各行は 項目名・値・単位 の 3 つの入力欄でできていて、項目名も単位も書き換えられます（「熱量」を「エネルギー」に、単位を「kJ」に、など）
- 値には「1.5 未満」のような文字も入れられます。入れた文字はそのまま商品ページに出ます
- 項目を追加 で食物繊維・糖質などの行を増やせます（上限なし）。項目を削除 で行を消せます
- アレルゲンは 特定原材料（表示義務8品目） と 特定原材料に準ずるもの（表示推奨20品目） の 2 グループのチェックボックスで、合わせて 28 品目から選びます
- 保存 はバリエーションごとに独立しています。複数のカードを編集したときは、カードごとに「保存」を押します。成功するとカードの上に「保存しました」と出ます
管理画面：CSV一括登録
一覧の右上「CSV一括登録」から開きます。「CSVファイルを選択」→「プレビュー」→「登録」の順に進みます。
| 列名 | 必須 | 内容 |
|---|---|---|
variant_sku |
必須 | 対象バリエーションの SKU |
calories |
任意 | 熱量（kcal） |
protein |
任意 | たんぱく質（g） |
fat |
任意 | 脂質（g） |
carbohydrate |
任意 | 炭水化物（g） |
salt |
任意 | 食塩相当量（g） |
extra_items_json |
任意 | 5 項目以外の追加項目。[{"label":"食物繊維","value":"2.1","unit":"g"}] の形式 |
allergens |
任意 | アレルゲンの記号を縦棒で区切って並べる（例: wheat と soybean） |
- プレビューの「注意」列には、未知のアレルゲンキーや
extra_items_jsonの形式不正が出ます。どちらも行の登録は止まらず、該当部分だけが無視されます - 送信は 12 バリエーションずつに分けて行われ、SKU が見つからない行はスキップして最後まで続きます
- 結果画面には「成功件数」と「SKUが見つからなかった件数」が出ます
管理画面：設定
「テーマを選択」で対象テーマを選び、テーマに追加 を押すと、商品ページ（product テンプレート）にブロックが追加された状態でテーマエディタが開きます。テーマをプレビュー で追加せずに見え方を確かめることもできます。「言語設定」で管理画面の言語を 20 言語から選び、「変更する」で切り替えられます。
ストアフロント：栄養成分表示ラベルのデザイン設定
テーマエディタで「栄養成分表示ラベル」ブロックを選ぶと、右側に設定が開きます。「商品」は商品ページに置けば自動で入るので、通常は触る必要がありません。
| 設定 | 選べる値 | 初期値 |
|---|---|---|
| レイアウト | 表形式 / カード形式 | 表形式 |
| 文字サイズ | 小 / 中 / 大 | 中 |
| 見出しの太さ | 400〜900（100 刻み） | 600 |
| 見出しの色 | 自由 | #202223 |
| 文字色 | 自由 | #202223 |
| 背景色 | 自由 | 透明 |
| アクセントカラー（罫線） | 自由 | #8C9196 |
| 枠線の太さ | 0〜4px | 1px |
| 枠線のスタイル | 実線 / 破線 / 点線 | 実線 |
| アレルゲンバッジの背景色 | 自由 | #F6F6F7 |
| アレルゲンバッジの文字色 | 自由 | #202223 |
| 角丸の半径 | 0〜24px（2px 刻み） | 24px |
| 余白 | コンパクト / 標準 / ゆったり | 標準 |
| カードの間隔 | 4〜32px（4px 刻み） | 12px |
| カードの列数（0で自動） | 0〜4 | 0 |
- カードの間隔 と カードの列数 は、レイアウトが「カード形式」のときだけ効きます
- 「上級者向け」の 追加のCSS には、このブロックだけに効く CSS を書けます。書いた内容はブロックの中に閉じ込められるので、テーマ全体のレイアウトを壊す心配はありません
- その商品のどのバリエーションにもデータが無い場合、ブロックごと表示されません（空の見出しだけが残ることはありません）
たとえばサプリメントのように成分表をしっかり読ませたいなら「表形式・文字サイズ大・余白ゆったり」、世界観を大事にしたい焼き菓子店なら「カード形式・枠線の太さ 0px・余白コンパクト」のように、ストアに合わせて見せ方を変えられます。
おわりに
「シンプル栄養成分・アレルギー表示｜食品表示」は、食品表示基準の 5 項目とアレルゲン 28 品目をバリエーションごとに登録し、商品ページに表やカードで表示できるアプリです。バリエーションの切り替えに表示が追従し、CSV での一括登録にも対応しています。詳しい使い方はご利用ガイドにまとめています。
It's Got: Nutrition Facts
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | It's Got: Nutrition Facts |
| 開発者 | ScreenStaring |
| 価格設定 | $8/月 / $16/月 / $32/月（年払い $48/年） |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
実際にインストールして触ってみた
- インストールすると Shopify の管理画面の中ではなく、外部サイト（itsgot.com）の専用管理画面が開きます。メニューや入力欄はすべて英語です
- インストール直後から、米国の Nutrition Facts / Supplement Facts のサンプルラベルが 4 件入っていて、完成形をすぐに確認できます
- ラベル形式は米国・カナダ・英国・ドイツ・オーストラリア・ブラジル・デンマーク・スウェーデンなどの書式がそろっていて、医薬品（Drug Facts）やペットフードの形式まであります。日本の食品表示基準の書式は選択肢にありませんでした
- ラベル一覧の検索欄は「商品・バリエーション・SKU・バーコード」で探せる作りです（バリエーションを切り替えたときに表示が入れ替わるかまでは、今回は確認していません）
- 文字サイズ・余白・枠線・色などラベルの見た目を細かく調整でき、原材料（Ingredients）やアレルゲン（Allergens）の欄も持っています
ワンポイント解説
海外の栄養成分表示アプリの中では、対応している国の書式の多さが際立っています。北米・欧州・オーストラリアなど複数の国に向けて販売しているストアで、国ごとの書式に合わせたラベルを出したい場合に向いています。一方で管理画面は外部サイトかつ英語のみで、日本の栄養成分表示の書式（熱量・たんぱく質・脂質・炭水化物・食塩相当量）は用意されていないため、国内向けの食品表示には手間がかかります。
KL ‑ Nutrition Facts Label
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | KL ‑ Nutrition Facts Label |
| 開発者 | Krivalabs |
| 価格設定 | $4.99/月（年払い $49/年）・3 日間の無料体験 |
| 対応言語 | 英語のみ（アプリストアの表記。料金画面より先は確認できず） |
実際にインストールして触ってみた
- インストールするとすぐにプラン選択画面が開きます。プランは「Premium」1 本（$4.99 / 30 日、年払い $49、3 日間の無料体験）で、無料プランは見当たりませんでした
- 開発ストアでは「開発者向けストアでは入手できません」と表示され、プランを選べませんでした。そのため今回は、ラベルの編集画面までは確認できていません
- プランの説明には「ラベル無制限・商品無制限・栄養成分表示と原材料一覧・FDA スタイルのテンプレート」が並んでいます
ワンポイント解説
FDA（米国食品医薬品局）スタイルのテンプレートを軸に、SEO を意識した HTML テーブルで栄養成分表やサプリメント成分表を出すアプリです。月 $4.99 の 1 プランだけで、ラベル数・商品数に上限がないシンプルな料金体系です。米国向けの書式で十分なストアなら候補になりますが、無料体験が 3 日と短く、開発ストアでは試せないので、導入前に本番ストアで短期間に見極める必要があります。
NutritionFactsKit
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | NutritionFactsKit |
| 開発者 | Horiki Apps |
| 価格設定 | $6.99/月・7 日間の無料体験 |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
実際にインストールして触ってみた
- アプリ独自の入力画面はありません。インストール後に開くのは外部ページ（セットアップ手順）だけで、手順も英語です
- 栄養成分は Shopify の商品管理画面の商品メタフィールド（
custom.nf_serving_size/custom.nf_calories/custom.nf_rowsなど 7 項目）に直接入力します - 栄養素は 1 行に 1 つ、
Total Fat|8g|10%のように「名称|量|1 日摂取量の割合」の書式で書きます。先頭に半角スペースを 2 つ入れると、サブ項目として字下げされます - アレルゲンは原材料の中で
*牛乳*のようにアスタリスクで囲むと太字になり、別に含有表示（Contains: …）の欄もあります - メタフィールドは商品単位なので、バリエーションごとに値を変えることはできません
ワンポイント解説
米国の Nutrition Facts パネルを、JavaScript を使わずに商品ページへ出すことに絞った軽量なアプリです。専用の管理画面を持たず、Shopify 標準のメタフィールドに書式どおりに書き込む方式なので、CSV やメタフィールドの一括編集に慣れたストアには扱いやすい作りです。ただし書式は FDA スタイルのみで、入力は「名称|量|%」の記法を覚える必要があり、バリエーション別の表示もできません。
Product Details & Facts Pro
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Product Details & Facts Pro |
| 開発者 | FreshForAll |
| 価格設定 | $9/月 / $19/月・7 日間の無料体験 |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
実際にインストールして触ってみた
- インストールすると最初に英語の料金画面が開き、Standard プラン（$9 / 月、7 日間の無料体験）を選ぶ流れになっていました
- 料金画面に出ていたのは有料プランだけで、無料のまま使い始める導線は見当たりませんでした
- 開発ストアでも「お支払い方法が登録されていません」と表示され、支払い方法を登録しないと無料体験を始められなかったため、今回は料金画面までの確認です
- プランの説明は「原材料・アレルゲン・バッジを無制限」で、栄養成分表示だけでなく、原材料・アレルゲン・認証バッジの表示と、消費期限（FEFO：先に期限が来るものから出荷）の管理までを 1 つにまとめたアプリです
ワンポイント解説
原材料・アレルゲン・栄養成分の表示に加えて、在庫の消費期限管理や廃棄の記録まで扱える、食品ストア向けの総合アプリです。複数拠点で期限付きの在庫を回している中〜大規模のストアには、表示と在庫管理を 1 本で済ませられる利点があります。一方で、栄養成分表示だけが目的なら機能が多く、料金も今回の中では高めです。
5つのアプリを比較
| アプリ | 日本語 | 日本の表示書式 | アレルゲン表示 | バリエーション別 | 月額 |
|---|---|---|---|---|---|
| シンプル栄養成分・アレルギー表示 | ✅ | ✅ | ✅ | ✅ | $2.99 |
| It's Got: Nutrition Facts | ❌ | ❌ | ✅ | — | $8/月 |
| KL ‑ Nutrition Facts Label | △ | — | — | — | $4.99/月 |
| NutritionFactsKit | ❌ | ❌ | ✅ | ❌ | $6.99/月 |
| Product Details & Facts Pro | ❌ | — | ✅ | — | $9/月 |
※ 「—」は、実際に触った範囲では確認できなかった項目です（開発ストアで料金画面より先に進めなかった、または今回確かめていない）。KL ‑ Nutrition Facts Label の日本語欄の「△」は、アプリストアでは英語のみと表記されているものの、管理画面までは確認できなかったことを示します。対応言語・機能の有無は、実際にインストールして確認した結果です。
まとめ：Shopify で栄養成分表示・アレルゲンを出すならどれを選ぶか
今回の 5 本は、どれも商品ページに栄養成分の表を出すためのアプリです。違いが出たのは、表示の書式（どの国の基準か）・管理画面の言語・バリエーション単位で持てるかでした。
- 北米・欧州など、複数の国の書式でラベルを出し分けたい … It's Got: Nutrition Facts
- 米国の FDA スタイルの表を、月額を抑えて出したい … KL ‑ Nutrition Facts Label（開発ストアでは試せません）
- 専用画面なしで、メタフィールドに直接書き込む軽い方式がよい … NutritionFactsKit
- 消費期限の管理まで含めて、食品ストアの運営をまとめたい … Product Details & Facts Pro
一方、実際に触った 4 本は、いずれも管理画面が英語で、確認できた範囲では日本の食品表示基準の書式は用意されていませんでした。熱量・たんぱく質・脂質・炭水化物・食塩相当量の 5 項目と、特定原材料を含むアレルゲン 28 品目を日本語の画面で登録し、味やサイズのバリエーションごとに出し分けたい場合は、「シンプル栄養成分・アレルギー表示｜食品表示」 がいちばん手間なく使えます。CSV での一括登録にも対応しているので、商品数が多いストアでも始めやすいはずです。
7 日間の無料体験があるので、まずはご自身のストアの商品で表示を確かめてみてください。