Shopifyで年齢確認のポップアップを実装する方法を考察
はじめに
今回は、Shopify で年齢確認ポップアップを実装する方法について考察しました。
HTML・CSS、JavaScript で年齢確認ポップアップを実装する方法や、Shopify アプリ「シンプル年齢確認ポップアップアプリ」を用いて年齢確認ポップアップを実装する方法を考察していきます。
それでは、頑張っていきましょう。
今回は、以下の記事を参考にしています。
- 【2025年】Shopifyで年齢確認のポップアップを実装できるアプリ15選を紹介
- Shopifyで年齢確認ポップアップを実現できるアプリ9選
- Shopifyで年齢確認のポップアップを実装する方法を5つ紹介！
- 【2025年】Shopify ストアに年齢確認ポップアップを表示できる？おすすめアプリも紹介！
- Shopifyで年齢確認のポップアップを実装できるアプリについて徹底解説
Shopify で年齢確認ポップアップを実装する定義
年齢確認ポップアップは、ECサイトにアクセスしたユーザーの年齢を確認する仕組みです。アルコールやタバコ、アダルトコンテンツなど年齢制限がある商品を扱う場合に、法令を遵守しながら安全にビジネスを行うための手段として活用されます。ユーザーがストアにアクセスした際に、ポップアップ画面で「Yes/No」形式や生年月日入力形式などで年齢確認を行い、適切な利用者のみがストアを閲覧できるよう制御します。
Shopify で年齢確認ポップアップを実装するメリット
まずは、Shopify で年齢確認ポップアップを実装するメリットについて解説していきます。年齢制限が必要なショップでは、必須となる要素ですが、改めて具体的なメリットを考えていきましょう。
1. 法令遵守の安心感
年齢制限のある商品を取り扱う場合は、法律で定められた年齢確認が必要です。年齢確認ポップアップを導入することで、サイト訪問時に必ず確認手続きが行われるため、法令違反のリスクを軽減できます。
2. ブランドイメージの向上
年齢確認ポップアップで適切に年齢制限を行う姿勢を示すことで、消費者に対して「ルールをしっかり守っている信頼できるストア」という印象を与えられます。責任ある運営をアピールすることは、ブランドイメージの向上にもつながります。
3. 利用者層のミスマッチ回避
実際に購入資格のないユーザーが商品を誤って購入しようとするケースを減らすことができます。ストアオーナーも不要な問い合わせやクレーム対応を減らせるため、運営コストの低減につながります。
4. ストアデザインへの柔軟な対応
年齢確認ポップアップは、デザインを調整してストアのブランディングに合わせられます。シンプルなデザインやインパクトあるデザインなど、自由にカスタマイズすることで、ユーザーに違和感のない導線を提供できます。
5. 未成年保護への貢献
年齢制限コンテンツの閲覧を制限することで、未成年者のアクセスを防ぐ社会的責任を果たせます。法令遵守だけでなく、社会的な観点から見ても導入する意義は大きいでしょう。
Shopify で年齢確認ポップアップを実装するデメリット
次に、Shopify で年齢確認ポップアップを実装するデメリットについて考察していきましょう。導入にあたっての注意点も把握しておくことが大切です。
1. ユーザー離脱のリスク
ポップアップはページ閲覧の妨げになる場合があります。特に、ポップアップ表示が煩わしく感じられると、ユーザーはストアから離脱してしまう可能性があります。デザインやタイミングを工夫して、ユーザーフレンドリーな実装にする必要があります。
2. コストと実装の手間
既存のテーマに年齢確認機能が備わっていない場合は、カスタマイズが必要です。HTML・CSS・JavaScript を自作するには、一定の知識や開発コストがかかります。テーマによってはコードの書き換えが複雑になることもあります。
3. デザインとの調和
ポップアップがストア全体のデザインと調和していないと、ユーザーの違和感につながる可能性があります。ブランドイメージを損なわないために、カラーやレイアウトなど細かい調整が必要です。
4. モバイル最適化の必要性
モバイルユーザーが増加している昨今では、ポップアップがスマホ画面を占有してしまうケースもあります。小さな画面でも操作しやすいデザインを実装しないと、ユーザー体験を損ねる可能性があります。
ここからは、実際にコーディングで年齢確認ポップアップを実装する方法を考察していきます。
Shopify で年齢確認ポップアップを実装する方法
まず、HTML・CSS、JavaScript を用いてシンプルな年齢確認ポップアップを実装する方法を見てみましょう。以下はサンプルコードです。
<!-- 年齢確認ポップアップの HTML -->
<div class="age-gate" id="ageGate">
<div class="age-gate--overlay"></div>
<div class="age-gate--content">
<h2>年齢確認</h2>
<p>あなたは 20 歳以上ですか？</p>
<div class="age-gate--buttons">
<button id="ageGateYes">はい</button>
<button id="ageGateNo">いいえ</button>
</div>
</div>
</div>
<!-- 年齢確認ポップアップの CSS -->
<style>
.age-gate {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
visibility: hidden;
}
.age-gate--overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.age-gate--content {
position: relative;
z-index: 10000;
background-color: #fff;
padding: 2rem;
text-align: center;
border-radius: 8px;
max-width: 400px;
width: 90%;
}
.age-gate--buttons {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 1rem;
}
.age-gate--buttons button {
padding: 0.5rem 1rem;
cursor: pointer;
border: none;
border-radius: 4px;
}
#ageGateYes {
background-color: #007bff;
color: #fff;
}
#ageGateNo {
background-color: #f0f0f0;
color: #333;
}
</style>
<!-- 年齢確認ポップアップの JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const ageGate = document.getElementById('ageGate');
const ageGateYes = document.getElementById('ageGateYes');
const ageGateNo = document.getElementById('ageGateNo');
// 初回アクセス時のみ表示する例 (クッキーやローカルストレージなどを用いる)
const isAgeConfirmed = localStorage.getItem('isAgeConfirmed');
if (!isAgeConfirmed) {
ageGate.style.visibility = 'visible';
}
// 「はい」ボタンを押したとき
ageGateYes.addEventListener('click', () => {
localStorage.setItem('isAgeConfirmed', 'true');
ageGate.style.visibility = 'hidden';
});
// 「いいえ」ボタンを押したとき
ageGateNo.addEventListener('click', () => {
// 年齢未達ユーザーとしてサイト利用不可にする例
window.location.href = 'https://www.google.com/';
});
});
</script>
上記のコードでは、ユーザーが初回アクセス時のみポップアップを表示する例を示しています。Local Storage に isAgeConfirmed が保存されていない場合にポップアップを表示し、「はい」ボタンを押すとその情報を保存してポップアップを非表示にします。一方、「いいえ」ボタンを押した場合は、外部のページにリダイレクトするなどして、未成年の利用を制限できます。
コードの要点まとめ
-
HTML
-
.age-gateという要素でオーバーレイとモーダルウィンドウを用意 - 見出しやテキストなどを配置し、「はい」「いいえ」のボタンを設置
-
-
CSS
-
position: fixed;と高いz-indexを利用して、常に最前面でポップアップを表示 - オーバーレイを半透明にし、画面全体を覆うことでモーダル感を演出
- モバイルにも対応できるよう、コンテンツを中央寄せにして
max-width: 400px; width: 90%;などの値を指定
-
-
JavaScript
-
DOMContentLoadedでページ読み込み後に処理を開始 - Local Storage による制御で「一度確認に同意すれば、その後は表示しない」というロジックを構築
- 「いいえ」を押した場合の制限をどのように行うかは運営方針に合わせてカスタマイズ
-
これで、シンプルな年齢確認ポップアップの実装はひとまず完成です。
シンプル年齢確認ポップアップアプリの紹介
続いて、Shopify アプリを利用して年齢確認ポップアップを導入する方法を紹介します。今回取り上げるのは、株式会社UnReact が開発した「シンプル年齢確認ポップアップアプリ」です。
アプリ概要
- アプリ名: シンプル年齢確認ポップアップアプリ
- 価格設定: 月額 $6.99 (7 日間の無料体験あり)
- 開発者: 株式会社UnReact
- 評価: 0.0 (0 レビュー)
- 対応言語: 英語 / 日本語
- カテゴリー: 法務関連
ストアにノーコードで年齢確認ポップアップを追加できるのが大きな特徴です。
デザインの細部をストアのブランディングに合わせて調整でき、Yes/No 形式や生年月日入力など複数の方式に対応しています。
アプリの主な機能と特徴
-
ノーコードで設定可能
管理画面上でポップアップのデザインを変更できるため、プログラミングの知識がなくても年齢確認機能を実装できます。 -
複数の年齢確認方法
「はい/いいえ」ボタン形式のほか、生年月日を入力させる方式にも対応。販売商品の種類や法令に応じて自由に選択できます。 -
ブランディングに合わせたカスタマイズ
ポップアップの配色や文言、フォント、ボタンのスタイルなどを自由に変更して、ショップのイメージを損ねない形で導入できます。 -
簡単インストール
Shopify の管理画面からアプリをインストールするだけで使い始められます。コード編集に不安がある場合に特に便利です。 -
日本語と英語に対応
多言語対応で海外からのアクセスにも柔軟に対応できます。日本語 UI での操作が可能なので導入も安心です。
価格について
- 月額 $6.99
- インストールから 7 日間は無料で試せるので、まずは導入してみて使い勝手を確認できます。
- 定期請求と使用料に基づく請求は 30 日ごとに行われます。
「シンプル年齢確認ポップアップアプリ」を導入すれば、ノーコードで年齢確認を実装できるため、実装コストを大幅に削減できます。また、必要な機能が一通り揃っているので、法令を遵守するためにも非常に有益なアプリです。
シンプル年齢確認ポップアップアプリの機能の概要
ここからは、シンプル年齢確認ポップアップアプリの機能について解説します。
こちらのアプリを使用すると、ストアにノーコードで年齢確認ポップアップを追加できます。
ストアに年齢確認ポップアップを追加できます。
年齢確認ポップアップは2種類から選べます。
すべての設定をノーコードできます。
1クリックでテーマに追加できます。
以下の、Shopify公式のアプリストアからインストールできます。
最後に
今回は、コーディングで年齢確認ポップアップを実装する方法と、Shopify アプリ「シンプル年齢確認ポップアップアプリ」を用いて年齢確認ポップアップを実装する方法の二つを解説しました。
-
コーディング実装
自身のストアに最適化した独自のポップアップを導入できる反面、開発知識や保守管理が必要です。 -
アプリ導入
ノーコードで直感的にデザインや挙動をカスタマイズできるので、工数やコストを抑えたい方に最適です。
お疲れさまでした。ストアの特性や法律上の要件に合わせて、最適な方法で年齢確認を実装してみてください。
参考記事
今回は、以下の記事を参考にしています。
Discussion