Shopifyで会員登録フォームをカスタマイズする際のベストプラクティス

Shopifyアプリ CRM PLUS on LINEを提供しているソーシャルPLUS社の川井です。今回はShopifyストアにおける会員登録について、お話しさせていただきます。

Shopifyでオンラインストアを作成する際、会員登録フォームをカスタマイズする場面は多いと思います。Shopifyは新規会員登録時の項目を「メールアドレス」「パスワード」のみに絞っているため、日本の商習慣的には不十分と感じる方も多いはず。これは「そもそもオンラインストア自体に会員登録という概念を必要とするか」という部分から、海外とは根本的に習慣が違うことが関係しているのではないでしょうか。

会員登録と商品購入を一番の目標とする場合、会員登録に手間がかからない方がもちろん良いですよね。フォームの項目数も少ない方が望ましいです。

本記事では、Shopifyにおける「新規会員登録フォームの項目数」「会員登録フォームのカスタマイズ」「顧客データの持ち方」の3点について解説します

 

会員登録フォームの項目数は少なければ少ないほどいい

「購入前に会員登録」というフローの場合、会員登録フォームで離脱を招いてしまうと後続の全ての数値にじわじわと影響を及ぼしてきます。会員登録フォームの項目数はなるべく減らすのが理想的です。

左:項目の多いフォーム例、右:項目の少ないフォーム例

実際に、フォームの項目数と通過率には負の相関があることも、WACUL社の研究レポートからわかるかと思います。

参照:https://wacul.co.jp/lab/b2b-form-best-practice/ 

また「会員登録時の取得項目を増やしたい」という理由を掘り下げていくと、「あると便利そうだから」「会社の方針だから」「これまでも取得していたから」と理由や目的が明確になっていないことも多いです。姓名を取得することでメルマガ・LINE配信などで宛名としての利用が、誕生日を取得することで誕生日クーポンの配布ができる、といったメリットもあるので絶対に必要ないというわけではありませんが「それ、本当に会員登録時に必要ですか?」ということを改めて考え直してみてもいいかもしれません。

Shopifyではチェックアウト時点で姓名・電話番号・住所などは取得できるので、そちらに委ねてしまうのも一つの手ではないでしょうか。

上記を踏まえたうえで、まずは会員登録フォームに項目を追加する方法について紹介していきます。

 
 

会員登録フォームに項目を追加するには

Shopifyで会員登録フォームに項目を追加するには、大きく2つの方法があります。

  • 方法1「会員登録フォームのカスタマイズアプリを使用する」
  • 方法2「アプリは使用せず、コードを編集してフォームを追加する」

それぞれの方法のメリット・デメリットと、具体的な設定イメージは下記の通りです。

会員登録フォームのカスタマイズアプリを使用する方法

メリット

  • Shopifyアプリのインストールベースでフォーム項目を追加できる
  • ノーコードでの実装も可能
  • 顧客タグ・メタフィールドに入力データを直接格納できる
  • メンテナンスコストがかからない

デメリット

  • アプリの利用料金がかかる(月額・従量課金)
  • アプリベンダーが提供を停止するリスク
  • 重いアプリ・多くのアプリの追加によって、ストアの表示速度に影響が出る可能性

Shopify App Storeには、会員登録フォームをカスタマイズできるアプリがいくつかあります。その中でもBonify社の「Custom Account Fields」やHelium社の「Customer Fields」が有名です。これらのアプリの利用方法は他サイトでも公開されていますので、ぜひ調べてみてください。

アプリでの実装例

Bonify社のCustom Fieldsで実装する際は、各項目を設定する際に Machine Nameを定義します。こちらがメタフィールドのKeyとなります。

Custom Fieldsの画面イメージ。Machine Name欄に設定した内容がメタフィールドのKeyになる

実際にCustom Fieldsのフォームから会員登録したユーザーの顧客メタフィールドの画面を見てみると、性別で設定したものがShopifyの顧客管理のメタフィールド cf_app.gender に項目追加されているのがわかります。(下図参照)

※少なくとも一つ以上の定義のあるメタフィールドがないと、顧客管理にメタフィールドは表示されませんのでご注意ください

このようにアプリを使用してフォームをカスタマイズして取得したデータは、アプリ側で定義したメタフィールドに格納されます。例えば、上記の例で使用した「Custom Fields」の場合では、cf_app というNamespaceに格納されていますね。

弊社の提供するShopifyアプリ「CRM PLUS on LINE」においても、ソーシャルログイン経由で取得した顧客情報はメタフィールドに格納しています。各アプリは「メタフィールドに取得したデータを格納する」という機能は持っているものの、各アプリ側で定義・指定したメタフィールドに分散してしまいます。

そこで、各アプリが取得した情報を一つのメタフィールドに集約させるために利用するのが「Shopify Flow」というワークフロー自動化アプリです。基本的な流れとしては「(トリガー)顧客が作成」されたら、「(条件)どのアプリから作成されたか」確認して、(アプリ側で個別に定義した)メタフィールドの値を参照して「(アクション)顧客のメタフィールドを更新する」というワークフローを設定します。詳しい設定方法などは下記ブログにて紹介していますので、併せてご覧ください。

 

アプリは使用せず、コードを編集してフォームを追加する方法

メリット

  • カスタマイズ性が高い
  • (フォームの項目カスタマイズに)追加の費用が発生しない
  • テーマの元々のパフォーマンス(表示速度)を損なうおそれがない

デメリット

  • コードを追加・編集する必要がある
  • コードの編集はテーマのアップデートを妨げる要因となることがある
  • メンテナンスコストがかかる

箇条書きでお伝えしましたが、デメリットの“メンテナンスコストがかかる”点については、テーマをコードでカスタマイズをした際、テーマのアップグレードに伴い引き継いでいく必要性が生じることや、今後のShopifyのアップデートの恩恵をすぐに受けれなくなる可能性が否定できません。サイトの規模が大きければ大きいほど、アプリの利用をおすすめします。

フォームをコードで追加し、取得したデータを顧客メモに格納する方法は、下記のShopify公式ブログにて解説されています。

こちらの方法を利用する際でも、「Shopify Flow」を利用して顧客メモ→メタフィールド へデータを格納するワークフローを作成する必要があります。

こちらに関しては下記記事でもわかりやすく説明されています。

 
 

データの持ち方は“プラットフォームの運用に寄せる”が吉

ここまでフォームへの項目追加方法について解説してきましたが、「フォームで取得した項目をどこに・どう保存するか」も極めて重要です。弊社としては、Shopifyの所定の場所(メタフィールドや顧客タグ)に一元管理することを強くおすすめしています

まず大前提として”プラットフォームを使うなら、プラットフォーム側の運用に“寄せる”ことが長期的にみてもメリットが大きいです。

具体的なメリットとして、データ分析面をとりあげて説明します。

近頃、Shopifyではストア分析機能にコホート分析が追加されたり、Shopify Plus向けにはShopifyQL Notebooksが提供開始されたりと分析面でのアップデートが目立ちます。

これらの分析機能はShopify上のデータを基準にデータを分けていますし、顧客管理でセグメントを切る際などにも、顧客タグやメタフィールドの値が利用可能です。普段から顧客情報をShopifyの管理画面からすぐに呼び出せる状態にしておくことで、こうした機能アップデートがあった際にすぐに利用開始できますね。

ShopifyQL Notebooksではストアデータを容易にビジュアライズできる

Shopifyは非常にアップデートの多いプラットフォームです。これから訪れるプラットフォームの変化・進化をすぐに享受できるような設計で初期段階から構築しておくことが、後々大きなアドバンテージとなるでしょう。

ソーシャルログインという機能を通して各プラットフォーム(SNS)と10年以上付き合ってきた弊社の経験からも、データの持ち方はプラットフォームの思想に則ったものにすることをおすすめします。

メタフィールドや顧客タグに情報を集めるメリット

続いて、Shopifyの所定の場所(メタフィールドや顧客タグ)にデータを一元管理することのメリットについて解説していきます。

メタフィールドや顧客タグは他のサードパーティアプリからもアクセスできますし、データ型を決めて格納することも可能です。顧客タグやメタフィールドに情報を集めておくことで、後々アプリのリプレイスやアンインストールをする必要が生じた際にも、大元のShopify側にデータが残りますアプリ移行時のデータ引き継ぎに苦労することも少なくなるでしょう。

基本的にはメタフィールドへデータを格納し、他のアプリと共有したり互換性を持たせたりしたいデータに関しては顧客タグにも反映させることで、アプリを横断したデータ活用がしやすい体制になります。

※全てのアプリがメタフィールドを扱えるわけではないので、タグのみで管理することも発生するかもしれません。ただ、Shopify側に(他アプリが参照できる形で)データを格納する重要性が伝わるとうれしいです。

メタフィールドへのデータ格納例

メタフィールドは定義する際にデータの型を決められるので、データの型が決まっているものや、頻繁にアップデートされるものを格納するとよいと思います。また、ネームスペースとキーを定義することができるため、アプリ固有の領域として定義(=ネームスペース)して、その中でどういったデータかも定義(=キー)できます。

メタフィールドのイメージ。例えばShopifyアプリ「CRM PLUS on LINE」では、LINEから取得したLINE IDをメタフィールドsocialplus.line( ソーシャルPLUS(=socialplus)が付与したLINE ID(=line)という意 )に格納しています

メタフィールドは想定した型でデータを格納できるので、Shopify Flowでデータの形式を想定した上で取り回すことが可能です。

■メタフィールドの設定例

  • お気に入り店舗(選択肢のある1行のテキスト型)→”〇〇店”
  • 保有ポイント(整数型)→”n”ポイント
  •  誕生日(日付型)→”yyyy年mm月dd日”

顧客タグへのデータ格納例

顧客タグにはその顧客のステータス・状態を示すものや、定常的で変わらない属性、セグメントとしてよく利用する属性を格納するとよいでしょう。

顧客タグのイメージ。例えば弊社のLINE連携Shopifyアプリ「CRM PLUS on LINE」では、LINE連携している方に”line”、誕生日を入力した人には年/月/日ごとのタグを付与しています

顧客タグはサードパーティアプリから読み込み・参照ができ、テーマ上でliquidを使って参照も可能なので、オンラインストア上の表示を制御する際にも活用いただけます。( ”〇〇ステータスの方にはバナーを表示する”など )

■顧客タグの設定例

  • LINE連携済みのお客様→”line”タグ
  • コレクション”AAA”の商品を購入したお客様→”AAA”
  • 誕生月が10月のお客様→”birthmonth:10”  など

 
 

おわりに

会員登録フォームの項目は「これまでも取得していたから」などの理由で精査されないまま実装されていることも多いと感じます。せっかく手間をかけて入力してくださったにも関わらず、入力内容が活用されず、エンドユーザー様に価値として還元されない形となっていては非常にもったいないです。

本記事で紹介した方法は確かに「工数を増やす手間」ではありますが、長期的には大きなアドバンテージとしてじわじわと効いてくるものになるはずです。ぜひ一元管理の方向へ舵を切り、三方よしの体制を整えてみてはいかがでしょうか

最後に宣伝ですが、Shopifyアプリ「CRM PLUS on LINE」では、ソーシャルログインをセキュアに実装し、取得したデータをLINE配信などに活かすノウハウを多く持っています。Shopifyの会員登録フォームのデフォルト項目にはない情報(誕生日やお気に入り店舗など)を、ソーシャルログインでの会員登録フォームに追加する機能もあります。取得したデータはShopifyの顧客メタフィールドに保存するので、他のShopifyアプリともスムーズに連携可能です。

 

Shopifyでの会員登録簡略化にソーシャルログイン導入をご検討の際には、ぜひお気軽にお声がけくださいませ。
お問合せフォームはこちら:https://crmplus.socialplus.jp/inquiry