カラーミーショップのマイアカウント、会員登録、ログイン/ログアウトのリンクを整理する

カラーミーショップをいじっていてわりと悩むのが、会員ログインとマイアカウントの関係と、マイアカウントのログインです。

既存のテンプレートを見ると、リンクが多いので整理できないか考えるんですが、ぱっと見、本当に必要なリンクはどれか判断がつきません(お客様も分からないと思います)。

ネット通販が広く利用される現代社会で生活していると、アカウント=会員と捉えがちですが、カラーミーショップの会員はすこし異なるように感じます。

アカウントと会員の機能が重なっている部分もあるので、カスタマイズする際はさらに分かりずらくなっています。

ヘッダー部分のリンク(マイアカウント、会員登録、ログイン/ログアウト)をシンプルにできないか検討しました。

既存テンプレートのコードから仕組みを理解する

まずは既存テンプレート(カラーミーキット)のコードを参考にします。
カラーミーショップ公式が作ったテンプレートは基本的に同じコードです。

条件文を読むと、マイアカウントは、常時表示します。
会員登録、ログイン/ログアウトは3つのフラグで表示を判断しています。

  • 「会員専用ページを使用する」がオン
  • 現時点でログインしていない
  • 新規会員登録可能フラグ(開店状態かなどをみている)
<!-- 会員メニュー(481px以上で表示) -->
<ul class="inline pull-right col-sm-12 hidden-phone txt_r">
  <li>
    <a href="<{$view_myaccount_url}>" class="txt_c_333"><i class="icon-b icon-user va-10 mar_r_5"></i>マイアカウント</a>
  </li>
  <{if $members_use_flg == true}>
    <{if $members_login_flg == false}>
      <{if $members_register_flg == true}>
        <li>
          <a href="<{$members_regi_url}>" class="txt_c_333"><i class="icon-b icon-adduser va-10 mar_r_5"></i>会員登録</a>
        </li>
      <{/if}>
      <li>
        <a href="<{$members_login_url}>" class="txt_c_333"><i class="icon-b icon-login va-10 mar_r_5"></i>ログイン</a>
      </li>
    <{else}>
      <li>
        <a href="<{$members_login_url}>" class="txt_c_333"><i class="icon-b icon-logout va-10 mar_r_5"></i>ログアウト</a>
      </li>
    <{/if}>
  <{/if}>
</ul>
<!-- // 会員メニュー(481px以上で表示) -->


ログイン/ログアウトは「会員専用ページを使用する」が条件文にありますので、会員のログイン/会員のログアウトという意味になりますが、試すとわかりますが、マイアカウントのログアウトとしても機能します(あとで使います)。

会員機能について

会員機能を使っているショップをわりと見かけます。
アカウント機能と勘違いしてオンにしている方もいらっしゃるかと思いますが、アカウント機能は全プランで最初からオンになっています。

マイアカウント - カラーミーショップ ネットショップ運営サービス


カラーミーショップのマニュアルでは会員機能の使い方として、以下の3つを挙げています。

・会員登録をした方にだけ会員価格で販売したい
・一般の方には商品や価格を見せたくない
・リピーターの方には割引価格で販売したい

会員機能 | カラーミーショップ マニュアル


カラーミーショップの会員機能は(たぶん)BtoB用の機能と思います。
会員制サイトを作らない、会員専用商品がない、会員価格を使わない場合は、会員機能はふつう使いません。

「リピーターの方には割引価格で販売したい」は、本来的には会員機能とは関係ないと思います。

必要なものを残してシンプルにする

なぜこういう風にできるか納得したい場合はご自身で検証してみてください。
正直なところややこしすぎるので、説明を書いても理解しづらいです。

ここでは結果のみ書きます。

会員機能を使わない場合

基本的に以前と変わりません。

  • 「マイアカウント」リンクのみ表示します


会員機能を使う場合

リンクを整理できますので、すっきりとします。

  • 「マイアカウント」リンクでログインし、「ログアウト」リンクでログアウトします
  • 「会員登録」リンクは「マイアカウント」のログイン画面にあるので省略可

シンプルにしたコード

カラーミーキットのコードですが、基本的にどのテンプレートも同じです。
会員機能のオン・オフで条件分けして、会員機能がオンの場合は、「ログイン」リンクを「マイアカウント」リンクに入れ替えています。

<!-- 会員メニュー(481px以上で表示) -->
<ul class="inline pull-right col-sm-12 hidden-phone txt_r">
  <{if $members_use_flg == true}>
    <{if $members_login_flg == false}>
      <li>
        <a href="<{$view_myaccount_url}>" class="txt_c_333"><i class="icon-b icon-login va-10 mar_r_5"></i>ログイン</a>
      </li>
    <{else}>
      <li>
        <a href="<{$members_login_url}>" class="txt_c_333"><i class="icon-b icon-logout va-10 mar_r_5"></i>ログアウト</a>
      </li>
    <{/if}>
  <{else}>
    <li>
      <a href="<{$view_myaccount_url}>" class="txt_c_333"><i class="icon-b icon-user va-10 mar_r_5"></i>マイアカウント</a>
    </li>
  <{/if}>
</ul>
<!-- // 会員メニュー(481px以上で表示) -->

おわりに

カラーミーショップの各リンクの挙動を以下にまとめました。
リンクを消してよいか判断する資料になります。

あまりわかりやすい仕様になっていません。
メニューを整理する仕事がきたときに備忘録として使って下さい。

資料

会員機能を使わない場合のマイアカウント

ブラウザを閉じるたびにログインが必要で、ログインの手間もあって頻繁に使われない機能かなと思います。

ただし、ポイントの確認や住所変更時に使いますので、マイアカウントを消すわけにはいきません。

「マイアカウント」リンクでログインした場合でも、購入時には決済画面内であらためてログインする必要があります(昔からですが、これが手間なのでなぜそんな仕様なのか不思議に思います)。

新カートではログイン状態を一定期間保持しますので、旧カートよりもログインの手間が減ります(旧カートはブラウザを閉じるたびにログインが必要)。

会員機能を使う場合のマイアカウント

ログイン/ログアウトは会員機能を使う場合に機能します。

会員機能がマイアカウントの上位互換で、マイアカウントのすべてを含んでいるかというと、そうはなっていません。別機能だと理解するほうがよいですが、一部重なっている部分があって、ややこしいです。
太字は例外的に挙動がおかしいところです。こういうのがあるせいで、理解しづらくなっています。

■「マイアカウント」リンクからログイン→
会員、マイアカウント、決済画面内はすべてログイン。

■「マイアカウント」リンクからログアウト→
会員、マイアカウント、決済画面内はすべてログアウト。

■「ログイン」リンクからログイン→
会員、決済画面内はログイン。マイアカウントはログインせず。

■「ログアウト」リンクからログアウト→
会員、マイアカウント、決済画面内はすべてログアウト。

新カート・旧カートでのログイン状態の保存の違い

旧カートはブラウザを閉じると、ログイン状態でなくなります。
新カートはログイン状態は一定期間保持しますので、旧カートよりもログインの手間が減ります(新カートのほうがお客様にとって便利)。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら