Shopifyでアカウント削除・退会フォームを設置する方法を解説！おすすめアプリも紹介

はじめに
記事の構成
Shopifyで退会フォームを設置できる？
退会フォーム・顧客情報削除を設置するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify ストアの運営者として、「お客様自身でアカウント削除（退会）できる導線を用意したい」と考えたことはありませんか？

GDPR や日本の個人情報保護法、さらには Apple/Google App Store のガイドラインなど、ユーザーが自分の情報を削除する権利は法的にも社会的にも強く意識されています。EC ストアにおいても、退会希望のお客様が「サポートに連絡しないと退会できない」状況は、利便性とコンプライアンスの両面で課題になりがちです。

特に 退会フォーム・顧客情報削除・アカウント削除 といったキーワードで自分のストアを検索しても、Shopify 標準機能では十分にカバーできず、アプリの導入が必要になります。

そこで本記事では、

Shopify における退会フォーム・顧客情報削除・アカウント削除の基本
退会フォームを設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除」の詳細
アプリのインストール・設定手順
関連施策との組み合わせ方
コードで退会フォームを実装する場合のサンプル
運用のコツ・よくある質問

までを 1 つの記事でまとめて解説します。アカウント削除に対応できる体制を整えたい Shopify ストア運営者は、ぜひ最後までご覧ください。

今回は、以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

Shopify でアカウント削除・退会フォームを設置できるかという結論
退会フォームを設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
「シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除」の特徴
インストール・テーマへの追加・設定手順
関連施策との組み合わせ方
コード実装で退会フォームを作る場合のサンプル
運用のコツとよくある質問

Shopifyで退会フォームを設置できる？

結論からお伝えすると、Shopify ストアで退会フォーム・顧客情報削除を実装することは可能です。ただし、Shopify の標準機能には「お客様自身で退会・アカウント削除を実行できる」ボタンが存在しません。

実現方法は大きく分けて以下の 2 通りです。

テーマのコード編集で実装する方法
アプリを導入して実装する方法

テーマのコード編集で実装する場合は、Liquid・CSS・JavaScript に加えて Storefront API・Admin API・App Proxy などの組み合わせで設計する必要があり、相応の開発工数がかかります。一方、アプリを導入すれば、ノーコードで退会フォーム・顧客情報削除・アカウント削除を即日運用できます。

本記事では、まずはメリット・デメリットを整理し、その後にもっとも導入しやすい 「シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除」 を中心にご紹介します。

退会フォーム・顧客情報削除を設置するメリット・デメリット

メリット

カスタマーサポートの工数削減
退会希望のお問い合わせを 1 件ずつ手動対応すると、件数が増えるほどサポート担当者の負担が増します。退会フォームをマイページに設置すれば、お客様自身で退会を完了できるため、サポートチームは他の業務に集中できます。

退会のお問い合わせ件数を大幅に減らせる
退会希望の見落とし・対応漏れを防げる
お客様アカウント単位での処理のばらつきを抑えられる

GDPR・個人情報保護法への対応
顧客情報削除を含むアカウント削除を、ユーザー本人の意思で実行できる仕組みは、各種コンプライアンス要件を満たすうえで非常に重要です。

「忘れられる権利」への明確な対応
監査ログを取りやすい運用設計が可能
Apple/Google App Store ガイドラインへの準拠にも有効

顧客体験の向上
お客様にとっても、サポートとのやりとりなしで退会できることは、最後の印象を良くする大切なポイントです。

退会したいお客様のストレスを軽減
ストアへの信頼感を維持しやすい
「退会させてくれないストア」という悪い口コミを防げる

データベースの健全化
タグ絞り込みによる一括退会・マスキング機能を使えば、休眠顧客や不審顧客を定期的に整理できます。

メール配信リストの精度向上
不要顧客の保有によるストレージコスト増を防ぐ
分析・セグメンテーションが正確になる

デメリット

誤操作による退会リスク
お客様自身で操作できるため、誤って退会してしまうリスクが残ります。退会フォームには、確認ダイアログや猶予期間設計を必ず組み込みましょう。

データ復旧が困難
退会と同時に顧客情報削除（マスキング）を実行すると、後から復旧することは原則できません。設計時に「どこまで削除するか」を慎重に決める必要があります。

アプリ依存になる
Shopify のデフォルト機能では退会フォームを設置できないため、アプリに依存することになります。アプリの選定と運用体制が、退会フォームの品質を大きく左右します。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット

アプリ料金がかからない
デザインを自由に設計できる

デメリット

Storefront API や App Proxy などの認証実装が必須
顧客情報削除（マスキング）を行う Admin API 連携を自前で安全に書く必要がある
セキュリティ・CORS・トークン管理を考慮する必要がある
開発・保守コストが大きい

アプリを導入する方法

メリット

ノーコードで即日導入できる
マスキングや Webhook 通知などの後処理がパッケージ化されている
Shopify のアップデートに追従して保守される
新旧両方のお客様アカウントに対応した実装が手に入る

デメリット

月額利用料が発生する
アプリ仕様に合わせた運用が必要になる

結論：最初はアプリで小さく試すのがおすすめ

退会フォーム・顧客情報削除は、コードで自前実装すると安全性とメンテナンス性で大きな負担がかかります。「まずは公式アプリで導入し、安定運用が見えてきたら必要に応じてカスタマイズを検討する」というステップが、もっとも費用対効果が高い進め方です。

アプリのインストール手順

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリ」をクリックし、「Shopify App Store」へ移動します。
検索窓に「退会フォーム」「アカウント削除」「顧客情報削除」などのキーワードで本アプリを検索します。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されますので、内容を確認のうえ「インストール」を完了させてください。

アプリをテーマに追加（有効化）

従来のお客様アカウントの場合（自動追加）

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

従来のお客様アカウントの場合（手動追加）

任意のページや表示位置に退会フォームを設置したい場合は、テーマエディタから手動で追加します。

「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタのページ切替プルダウンから、アカウントページなど任意のページを開きます。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブから「シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除」を選んで追加します。
「保存する」をクリックして反映します。

新しいお客様アカウントの場合

アプリ管理画面の「チェックアウト設定を開く」をクリックします。
「カスタマイズ」をクリックしてエディタを開きます。
エディタ上部のページ切り替えから「プロフィール」ページを選択します。
「ブロックを追加」→「アプリ」タブから「UR: Account Delete（退会ボタン）」を選びます。
表示を確認し、問題なければ右上の「保存」をクリックします。

アプリの設定項目を理解する

コンテンツ設定

退会フォーム上の文言を細かく調整できます。

ボタンの文字：マイページに表示される退会ボタンのテキスト（初期値「退会する」）
確認ダイアログのタイトル：退会ボタンクリック時に表示される確認ダイアログ見出し（初期値「退会確認」）
確認ダイアログのメッセージ：退会後の挙動を説明する本文
完了メッセージ：退会処理完了時に表示されるメッセージ
キャンセル/確認ボタンの文字：ダイアログ上のボタン文言

コンテンツ設定の設定画面

スタイル設定

ボタンの見た目を調整できます。

ボタンの背景色：初期値は赤系（#d82c0d）
ボタンの文字色：初期値は白（#ffffff）
ボタンの文字の大きさ：10px〜24px の範囲で 1px 刻みで設定可能（初期値 14px）

スタイル設定の設定画面

追加設定（カスタム CSS）

退会フォームに独自の CSS を追記して、ホバー時のアニメーションや角丸の調整、ストアブランドに合わせたデザインに変更できます。

追加設定（カスタム CSS）の設定画面

新しいお客様アカウントの表示について

新しいお客様アカウント側の退会ボタンは Customer Account UI Extension で実装されているため、デザインは Shopify の Customer Account 標準デザインに沿って自動で表示されます。文言は言語設定に応じて自動切替されます。

新しいお客様アカウントでの退会ボタン表示例

すぐ使えるおすすめ設定例

コンプライアンス重視のストア向け

ボタンの文字：アカウントを削除する
確認ダイアログのタイトル：アカウント削除の確認
確認ダイアログのメッセージ：アカウントを削除すると、お客様の氏名・メールアドレス・電話番号・住所などの個人情報が削除され、復元できなくなります。よろしいですか？
完了メッセージ：アカウント削除が完了しました。ご利用ありがとうございました。

カジュアル EC ストア向け

ボタンの文字：退会する
確認ダイアログのタイトル：退会の確認
確認ダイアログのメッセージ：退会するとマイページや注文履歴にアクセスできなくなります。本当に退会しますか？
完了メッセージ：またのご利用をお待ちしております。

文言のテンプレ例

退会フォームの確認メッセージには、以下のような要素を含めるのがおすすめです。

退会すると元に戻せないこと
削除される情報（氏名・メール・電話・住所など）
ストアからのお礼の一文
再登録時の対応（必要に応じて）

テーマのコード編集で実装する場合のサンプルコード

「自社で完全に独自実装したい」という場合のために、Liquid・CSS・JavaScript で退会フォームを試作するイメージを紹介します。実運用ではアプリの利用を強く推奨しますが、参考としてご活用ください。

実装の流れ

テーマに退会フォーム用のセクション（Liquid）を追加する
CSS で退会ボタンと確認ダイアログのスタイルを定義する
JavaScript で確認ダイアログ表示・サーバー通信を実装する
App Proxy または自前バックエンドで顧客情報削除（マスキング）を実行する

HTML（Liquid）を追加

sections/withdraw-form.liquid を新規作成し、お客様アカウントページに表示します。

{% if customer %}
  <div class="withdraw-form">
    <button type="button" class="withdraw-form__button" data-customer-id="{{ customer.id }}">
      退会する
    </button>

    <div class="withdraw-form__dialog" hidden>
      <div class="withdraw-form__dialog-inner">
        <h2 class="withdraw-form__title">退会確認</h2>
        <p class="withdraw-form__message">
          退会すると、アカウント情報が削除され復元できなくなります。本当に退会しますか？
        </p>
        <div class="withdraw-form__actions">
          <button type="button" class="withdraw-form__cancel">キャンセル</button>
          <button type="button" class="withdraw-form__confirm">退会する</button>
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "退会フォーム",
  "settings": [],
  "presets": [
    { "name": "退会フォーム" }
  ]
}
{% endschema %}

CSS を追加

assets/withdraw-form.css でデザインを整えます。

.withdraw-form {
  margin-top: 32px;
}

.withdraw-form__button {
  background-color: #d82c0d;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.withdraw-form__button:hover {
  opacity: 0.85;
}

.withdraw-form__dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.withdraw-form__dialog-inner {
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.withdraw-form__title {
  font-size: 18px;
  margin: 0 0 12px;
}

.withdraw-form__message {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.withdraw-form__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

JavaScript を追加

assets/withdraw-form.js で確認ダイアログと退会処理 API への送信を実装します。退会処理本体は、App Proxy 経由のバックエンドで実行します。

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.withdraw-form__button');
  const dialog = document.querySelector('.withdraw-form__dialog');
  const cancelButton = document.querySelector('.withdraw-form__cancel');
  const confirmButton = document.querySelector('.withdraw-form__confirm');

  if (!button || !dialog) return;

  const openDialog = () => {
    dialog.hidden = false;
  };

  const closeDialog = () => {
    dialog.hidden = true;
  };

  button.addEventListener('click', openDialog);
  cancelButton.addEventListener('click', closeDialog);

  confirmButton.addEventListener('click', async () => {
    const customerId = button.dataset.customerId;
    confirmButton.disabled = true;
    confirmButton.textContent = '処理中...';

    try {
      const response = await fetch('/apps/account-delete/withdraw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ customerId }),
      });

      if (!response.ok) throw new Error('退会処理に失敗しました。');

      window.location.href = '/account/logout';
    } catch (error) {
      console.error(error);
      alert('退会処理に失敗しました。時間をおいて再度お試しください。');
      confirmButton.disabled = false;
      confirmButton.textContent = '退会する';
    }
  });
});

コード実装の注意点

顧客情報削除（マスキング）は Admin API での customerUpdate・customerAddressDelete・customerEmailMarketingConsentUpdate などを安全に組み合わせる必要がある
App Proxy のリクエスト検証や HMAC 署名検証を必ず実装すること
退会後はセッションを破棄し、/account/logout へリダイレクトすること
退会理由収集や Webhook 連携、注文タグ付与なども実装するとアプリ並みの運用ができる
セキュリティテスト・GDPR 対応の監査も忘れずに

運用のコツ

退会フォームを初回設置するときは、必ずステージングストアで挙動を確認する
確認ダイアログの文言は「元に戻せないこと」を強く伝える
タグ運用ルールを社内で決め、休眠顧客向けの一括退会を月次で実施
Webhook 通知を使って、CRM・社内 BI に退会イベントを連携
退会理由を蓄積する仕組みも合わせて整備し、商品改善の材料に

よくある質問

Q. 退会フォームを設置するとお客様が大量に退会してしまうのではないですか？
A. 実際の運用では、退会フォームの有無に関わらず、本当に退会したいお客様は何らかの形で退会します。むしろ「退会できない」という不満を残すほうがブランドにとってマイナスです。

Q. 顧客情報削除をしたら売上分析データもなくなりますか？
A. このアプリの場合、注文履歴自体は売上データとして残り、個人を特定できる情報（氏名・メール・電話・住所）のみマスキングされるため、分析には影響しません。

Q. 退会後に同じメールアドレスで再登録できますか？
A. マスキング時にメールアドレスもダミー値に置き換わるため、同じメールアドレスでの再登録が可能になります。

Q. 新しいお客様アカウントへ移行する予定ですが大丈夫ですか？
A. このアプリは従来・新しいお客様アカウントの両方に対応しているため、移行の前後どちらでも使い続けられます。

Q. 退会処理を完全に取り消すことはできますか？
A. マスキングは復元できない設計です。誤操作を防ぐため、確認ダイアログを必ず有効にしてください。

Q. App Proxy などの URL 仕様を独自に変えたいのですが？
A. 通常はアプリ提供のフローで十分ですが、独自要件があれば開発元へお問い合わせください。

まとめ

Shopify のデフォルト機能だけでは、お客様自身で退会・アカウント削除を行うことはできない
退会フォーム・顧客情報削除を整備することで、コンプライアンスと顧客体験を同時に強化できる
テーマのコード編集で実装すると Admin API・App Proxy 周りの設計が必要で、コストが大きい
アプリを導入すれば、ノーコードで即日運用が可能
「シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除」 は退会フォーム・マスキング・Webhook 通知まで一通り揃っており、最初の選択肢としておすすめ

退会フォームの設置をご検討の方は、まず無料体験から導入を試してみてください。

👉 シンプル顧客情報削除｜お手軽退会フォーム｜アカウント削除（Shopify App Store）