Shopifyメタフィールドを活用した化粧品成分リスト表示の最適化方法

はじめに：オンライン化粧品ECでの成分リスト表示の重要性

化粧品は肌への影響やアレルギーのリスクを考慮し、消費者が購入前に成分情報を確認できることが信頼獲得に直結します。特にオンラインでは、実物のパッケージ表記が見えないため、ウェブ上での成分表示精度と見せ方が売上・リピート率に大きく影響します。

1. 主要国の化粧品表示規制

• 米国（FDA）：パッケージに成分名を含め、含有量の多い順に表示。eCFR
• EU：INCI名称で「全成分表示（Full Ingredient Listing）」を義務付け。オンライン販売においても各国のガイドラインに準拠したウェブ上での成分リスト公開が求められます。
• 日本：化粧品は薬機法で全成分表示を義務付け。日本化粧品工業連合会はINCI（化粧品成分の国際的な命名法）名称の併記を推奨しています。cosmetic-ingredients.orgbloom-jp.com

2. Shopify Metafieldsとは何か

Shopify Metafieldsは、商品やコレクション、顧客など既存リソースにカスタムデータを追加できる仕組みです。化粧品ECでは、標準フィールドにない「成分リスト」「アレルゲン注意情報」などをメタフィールドで管理し、テーマ上で自由に表示できます。shopify.devShopify Help Center

3. 成分リスト用Metafield定義の手順（例）

1. Shopify管理画面 > 設定 > カスタムデータ > 商品 > 「定義を追加する」
2. 名前: 成分、ネームスペースとキー: custom.ingredients、タイプ: 1行テキスト（値のリスト）を選択
3. 必要に応じてバリデーション（文字数制限など）を設定し、保存
4. 各商品詳細画面の「メタフィールド」欄にてその商品の成分リストを入力

4. ストアに表示

4-A. テーマ特有のブロックを利用する場合

1. Shopify管理画面 > オンラインストア > カスタマイズ > 商品 > デフォルトの商品 > 商品情報に「折りたたみ可能な行」ブロック等を追加
2. 見出し: 成分
3. 「行のコンテンツ」の右側にあるアイコンより「動的ソースを接続」 > テンプレート「商品」 > 成分
4. 保存する

4-b. カスタムLiquidを利用する場合

1. Shopify管理画面 > オンラインストア > カスタマイズ > 商品 > デフォルトの商品 > 商品情報に「カスタムLiquid」ブロックを追加
2. 以下のコードをコピー&ペースト

{% if product.metafields.custom.ingredients != blank %}
  <section class="product-ingredients">
    <h2>成分</h2>
    <ul>
      {% for ingredient in product.metafields.custom.ingredients.value %}
        <li>{{ ingredient }}</li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

ポイント：

• custom.ingredients は定義時に設定したネームスペースとキー
• 必要に応じてCSSでデザイン調整
• Schema.orgの PropertyValueList マークアップを追加し、SEO効果を高めることも可能

5. UIのベストプラクティス

• 折りたたみ表示：長い成分リストはアコーディオンで隠すことでページの見やすさ向上
• モバイル最適化：タップしやすい余白とフォントサイズを確保
• アクセシビリティ：スクリーンリーダー対応のためにaria-labelや代替テキストを適切に設定

まとめ

ShopifyのMetafieldsを活用した成分リスト表示は、コンプライアンス遵守とユーザー信頼の両立を実現します。上記手順を参考に、自社テーマへ組み込み、SEO・UX双方の観点で最適化を図りましょう。