😺
Shopifyで生年月日に応じた年齢確認を行う方法を考察

2025/02/13に公開
 はじめに今回は、Shopify で生年月日に応じた年齢確認を実装する方法について考察しました。

特に、「シンプル生年月日に応じた年齢確認アプリ」を活用することで、ノーコードに近い形で簡単に年齢確認を導入する手順を解説します。

さらに、HTML・CSS・Liquid を用いたコーディングによる実装例も紹介していきます。

それでは、がんばっていきましょう。

 Shopify で生年月日に応じた年齢確認を実装する定義生年月日に応じた年齢確認とは、ECサイト上で販売している商品に応じて、購入者の年齢をチェックする仕組みを指します。

酒類やタバコといった年齢制限のある商品を取り扱う場合、法的要件の遵守とコンプライアンスの観点で、購入者の年齢確認は必須となります。

Shopify で商品ごとに入力フォームを設置し、生年月日の入力がない場合や年齢制限を満たしていない場合は購入をブロックするなど、柔軟な実装を行うことで、リスクを軽減しながら ECサイトの信頼性を高められます。
今回は、以下の記事を参考にしています。
Shopifyで生年月日に応じた年齢確認アプリ8選を徹底解説！
Shopifyで生年月日に応じた年齢確認を行う方法5つを解説
【2025 年】Shopify で生年月日入力による年齢確認を実現する方法は？おすすめアプリも紹介！
Shopifyで生年月日に応じた年齢確認を実施できるアプリについて徹底解説｜ご利用ガイド


 Shopify で生年月日に応じた年齢確認を実装するメリットまずは、Shopify で年齢確認を実装するメリットについて解説していきます。

 1. コンプライアンスを確実に遵守できる年齢制限が設けられている商品は、法律や条例上で購入者の年齢を確認する義務がある場合があります。生年月日に基づいた年齢確認機能を導入することで、法律違反を避け、コンプライアンスを遵守しやすくなります。

 2. リスクの最小化とブランドイメージの向上年齢制限の商品を誤って未成年者に販売してしまうと、店舗側に法的責任が発生する可能性があります。適切な年齢確認を行うことで、このようなリスクを最小限に抑えられ、同時に社会的信用度やブランドイメージを高めることにもつながります。

 3. 商品ごとに柔軟な設定が可能お酒・タバコなどの特定商品だけで年齢確認を行うよう設定したり、特定のコレクションに属する商品だけに制限をかけたりすることが可能です。すべての商品に対して一律に年齢確認を求める必要がなく、サイトのユーザー体験を最適化できます。

 4. 生年月日の管理で後追い確認も簡単入力された生年月日は、注文履歴や顧客情報としてシステム上に保存できるため、後からチェックしたり、別のシステムと連携して再確認したりすることが容易になります。

 5. 店舗の信頼性向上厳格に年齢確認を行っている店舗は、ユーザーから見ても「しっかりルールを守っている」という印象を与えやすく、リピーターの獲得や新規顧客の信頼獲得にも寄与します。

 Shopify で生年月日に応じた年齢確認を実装するデメリット次に、年齢確認を実装するデメリットを考察していきます。

 1. 購入フローが複雑化する可能性ユーザーの入力ステップが増えるため、スムーズな購入体験を求める顧客にはやや煩わしく感じられる場合があります。特にモバイルユーザーにとっては、入力フォームを増やすほど離脱率が上がるリスクもあるため、UI/UX の最適化が重要です。

 2. テーマや機能追加に伴う開発コストShopify テーマによっては、独自のコードで年齢確認の機能を組み込むと、メンテナンスコストが増大する場合があります。また、アプリとテーマの相性によっては動作テストが必要になるため、多少の開発・検証作業が発生します。

 3. 不正確な情報入力のリスク顧客が故意に虚偽の生年月日を入力してしまう可能性をゼロにはできません。一定の抑止効果はあるものの、完全に不正購入を防ぐことは難しい点に留意が必要です。

 4. 表示速度やUXへの影響商品ページに入力フォームやスクリプトを追加することで、ページの表示速度にわずかに影響が出る場合もあります。必要以上に複雑な機能を組み込むと、パフォーマンス低下を招く可能性があります。

 コーディングによる実装例ここでは、Liquid・HTML・CSS・JavaScript を用いて商品ページに生年月日入力欄を設置し、年齢制限を満たさない場合にチェックアウトをブロックするシンプルなサンプルコードを紹介します。

 HTML<!-- 商品ページに設置する生年月日入力フォーム -->
<div class="age-verification">
  <label for="birthYear">生年</label>
  <select id="birthYear">
    <!-- 選択肢を必要に応じて生成 -->
    <option value="">選択</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <!-- 省略 -->
  </select>

  <label for="birthMonth">月</label>
  <select id="birthMonth">
    <option value="">選択</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- 省略 -->
  </select>

  <label for="birthDay">日</label>
  <select id="birthDay">
    <option value="">選択</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <!-- 省略 -->
  </select>
</div>

 CSS.age-verification {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.age-verification label {
  margin-right: 5px;
  font-weight: bold;
}

.age-verification select {
  padding: 5px;
}

 JavaScriptdocument.addEventListener('DOMContentLoaded', () => {
  const birthYear = document.getElementById('birthYear');
  const birthMonth = document.getElementById('birthMonth');
  const birthDay = document.getElementById('birthDay');
  const MINIMUM_AGE = 20; // 例：20歳未満は購入不可

  // チェックアウトボタンを取得
  const checkoutButton = document.querySelector('[name="add"]') || document.querySelector('.product-form__submit');

  if (checkoutButton) {
    checkoutButton.addEventListener('click', (e) => {
      // 生年月日の未選択を防ぐ
      if (!birthYear.value || !birthMonth.value || !birthDay.value) {
        e.preventDefault();
        alert('購入には生年月日の入力が必要です。');
        return;
      }
      // 年齢計算
      const birthDate = new Date(`${birthYear.value}-${birthMonth.value}-${birthDay.value}`);
      const now = new Date();
      let age = now.getFullYear() - birthDate.getFullYear();
      const monthDiff = now.getMonth() - birthDate.getMonth();
      const dayDiff = now.getDate() - birthDate.getDate();

      // 誕生日がまだ来ていない場合は年齢を1引く
      if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
        age--;
      }

      // 制限年齢未満は購入できない
      if (age < MINIMUM_AGE) {
        e.preventDefault();
        alert(`${MINIMUM_AGE}歳未満の方はご購入いただけません。`);
      }
    });
  }
});

 Liquid での商品プロパティ管理（オプション）Liquid で生年月日を商品プロパティに保存したい場合は、以下のように {{ product.selected_or_first_available_variant.id }} を使用したフォームの中に <input> タグを追加して、カートに入れる際にプロパティとして送る仕組みにすることも可能です。
<form action="/cart/add" method="post">
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

  <!-- 生年月日のプロパティを送る -->
  <input type="hidden" name="properties[生年月日]" id="birthDateHidden" value="">

  <!-- 上記のHTMLと同様の入力フォームを設置 -->
  <!-- ここでは省略 -->

  <button type="submit">カートに入れる</button>
</form>

<script>
  // JavaScript内で入力が完了したら birthDateHidden に値をセット
  // 例: 2000-12-31
  // サンプルなので実際はフォーム送信前に生成
  document.addEventListener('DOMContentLoaded', () => {
    // ...
    const birthDateHidden = document.getElementById('birthDateHidden');
    checkoutButton.addEventListener('click', (e) => {
      const year = birthYear.value;
      const month = birthMonth.value;
      const day = birthDay.value;
      birthDateHidden.value = `${year}-${month}-${day}`;
      // ...
    });
  });
</script>
このようにすることで、顧客が入力した生年月日が購入時に「商品プロパティ」として注文データに保存されるため、後から管理画面でも確認しやすくなります。
しかし、エンジニアでは無い方がコーディングを用いて生年月日に応じた年齢確認をするのは、難しいかと思います。
非エンジニアの方に向けて、Shopify アプリを用いて生年月日に応じた年齢確認を行う方法について解説します。

 Shopify アプリを用いて年齢確認を実装する方法ここでは、コーディングが難しい方や、より簡単に年齢確認を行いたい方に向けて、「シンプル生年月日に応じた年齢確認アプリ」を紹介します。
今回紹介するのは、シンプル生年月日に応じた年齢確認アプリというアプリです。
以下が、Shopify のアプリリストになります。
https://apps.shopify.com/ur-dob-age-verification?locale=ja
また、以下が公式のご利用ガイドになります。
https://unreact.jp/shopify-apps/sa-103-birth-confirmation/guide
こちらの情報を元に、こちらのアプリについて解説します。

 シンプル生年月日に応じた年齢確認アプリの特徴
月額料金: $6.99

操作方法: 管理画面から直接操作が可能で、Dawn テーマにも対応

開発者: 株式会社UnReact（日本語サポートを含む）

評価: 0.0 (0 レビュー)
商品ごとに年齢確認を適用可能
生年月日未入力や制限年齢未満の場合の購入ブロック
生年月日を商品プロパティに保存し、法的要件を満たす

 具体的な機能
商品単位での年齢確認: お酒・タバコなど一部商品のみ年齢制限を設定できます。

最低年齢の自由設定: 例：20歳以上のみ購入可能など、柔軟に年齢基準を設定。

デザインカスタマイズ: 入力フォームの色やサイズなど、ストアのデザインに合わせて調整。

速度重視のシンプル設計: 外部ライブラリ不要で、高速・軽量に動作。

日本語サポート・日本製アプリ: 国内開発のアプリなので、問い合わせや法規制に関する質問などにも安心して対応可能。

 使い方の流れ
アプリのインストール: Shopify アプリストアから「シンプル生年月日に応じた年齢確認アプリ」をインストール。

最低年齢・対象商品を設定: 管理画面で、何歳以上を対象とするか、どの商品で確認を行うか設定します。

デザイン調整: 生年月日入力フォームの見た目やメッセージ文言などをカスタマイズ。

公開・動作テスト: 商品ページにアクセスし、生年月日の入力を確認します。未入力や年齢不適合の場合は購入ができないようブロックされます。
次に、アプリリストを参考にしながら、シンプル生年月日に応じた年齢確認アプリの概要について解説していきます。

 シンプル生年月日に応じた年齢確認アプリの概要以下のアプリリストを参考に、こちらのアプリの概要を解説します。
https://apps.shopify.com/ur-dob-age-verification?locale=ja
こちらのアプリを用いると、商品ごとに年齢確認のための生年月日入力欄を設置できます。

コンプライアンスのための年齢確認を実現できます。

商品ごとに、生年月日入力の表示・非表示を設定できます。

生年月日が入力されていない場合や、制限年齢を満たしていない場合に、購入を防止できます。

生年月日の情報は、商品プロパティに保存されます。

また、ノーコードで様々な設定ができます。

1 クリックでテーマに追加できます。

以下のアプリストアから、インストールを行うことが出来ます。

https://apps.shopify.com/ur-dob-age-verification?locale=ja

 最後に今回は、コーディングで生年月日に基づく年齢確認機能を実装する方法と、Shopify アプリ「シンプル生年月日に応じた年齢確認アプリ」を使って実装する方法の 2 パターンを解説しました。
法的要件を確実に遵守しながら、お酒やタバコなどの年齢制限商品をスムーズに販売できることは、ECサイトの信頼性を高めるうえでも非常に重要です。コーディングでカスタマイズしたい場合は、本記事で紹介したサンプルコードを元に開発を進めるとよいでしょう。一方で、手軽に導入したい場合は「シンプル生年月日に応じた年齢確認アプリ」を利用するのがおすすめです。
それでは、お疲れさまでした。年齢確認を適切に行い、コンプライアンスを守りながら安心・安全なショッピング体験を提供していきましょう。

 参考記事今回は、以下の記事を参考にしています。
Shopifyで生年月日に応じた年齢確認アプリ8選を徹底解説！
Shopifyで生年月日に応じた年齢確認を行う方法5つを解説
【2025 年】Shopify で生年月日入力による年齢確認を実現する方法は？おすすめアプリも紹介！
Shopifyで生年月日に応じた年齢確認を実施できるアプリについて徹底解説｜ご利用ガイド
Discussion

ログインするとコメントできます