勝手にEFO徹底解剖 @cosme 会員登録フォーム

本日の「勝手にEFO徹底解剖」では、コスメ・美容の総合サイトである@cosme(アットコスメ)の会員登録フォームを取り上げます。

@cosmeは、化粧品のクチコを中心に商品のランキングや美容に関するブログなどを提供するソーシャルサイトで、2015年8月時点での口コミ数は約1,200万件以上もある日本最大のコスメ系クチコミサイトです。
店頭のコスメ売り場でも「ランキング1位」「殿堂入り」などといった@cosmeランキングに基づいたレコメンドがあるなど、サイト内での商品の評価はユーザーが化粧品を選ぶ際の大きな指標のひとつとなっているようです。

多くのユーザーを抱える@cosmeの会員登録フォームにはいったいどのような工夫が隠されているのでしょうか。さっそく徹底分析していきましょう。

※本記事の内容は2015年8月10日時点の@cosmeのフォームを分析した内容を記載しています。なお今回ご紹介したフォームには当社エフトラEFOの入力補助機能は導入されていません(2015年8月10日時点)。

フォーム全体の特徴

まずはフォーム全体の特徴をチェックしていきます。

右カラムに配置したフロー表示

フォームを見てまず目につくのは、フォーム右横に配置された「登録までのステップ」画像。

通常フロー表示はページ上部に配置されていることが多いですが、右横に配置することで、ファーストビューの領域に入力項目を配置でき、ページが縦長になることを防いでくれています。
さらに縦幅の制約を気にすること無く、イラストつきの凝ったデザインで現在地をしっかり表現できるので、ナビゲーションとしての効果も高いように思います。
これはぜひ、お手本にしたいポイントですね。

efo_double_ring 無駄なくレイアウトされたフロー画像が、しっかりフォームの全体像と現在地を伝えてくれる。

フォームの右横に配置されたフロー画像

フォームの右横に配置されたフロー画像

必須マークも明確

フォームに任意の入力欄は存在せず、すべて入力必須となっていました。
すべての入力箇所に「必須」の文字入りアイコンが配置されています。(初期値が設定されているメルマガの選択を除く)

任意の入力欄が無いことから、極力フォームの入力項目数を抑えていることがうかがえます。また、すべてが必須の場合でも、省略することなく必須マークを配置しているのも良いですね。

efo_double_ring 必須マークのアイコンは緑色。ページのメインカラーと同じ色を使いデザインをなじませつつも、しっかり引き立つように表現されている。

必須マーク

必須マーク

専用レイアウトはなし

レイアウトは冒頭で紹介したとおり、フロー画像と2カラム構成にする工夫がありましたが、サイト共通のヘッダー・フッターはついたままとなっていました。
ユーザーに入力に集中してもらうためには余計なリンクは取り払っておきたいところです。

注意 サイト共通のヘッダーとフッターがついたままになっている

ページの全体像

ページの全体像

SNSログインの場合

今回、facebookとTwitterのアカウントを利用したログイン機能が用意されていました。
SNSアカウントによるログインの導線については、後半でも触れたいと思います。

efo_double_ring SNSアカウントでのログイン機能は、煩わしいメール認証の手間を省いてくれる

SNSアカウントを利用したログインへの導線

SNSアカウントを利用したログインへの導線

リアルタイムアラートはなし。エラーはいまひとつ

フォームに、入力ミスをリアルタイムに判定する機能はありませんでした。

エラーは下記のように該当箇所にエラー内容を表記する形となっていますが、冒頭になにかひとことほしいところ。
特にフォーム下部の入力項目にエラーがあった場合に、ユーザーがエラーの存在に気づくのが難しくなってしまいます。

注意 エラーは該当箇所にのみ表記。ファーストビュー内にもなにかひとことがほしい。

エラー表示

エラー表示

ページごとの特徴

それでは、ここからはフローにあわせてページごとの特徴を詳しく見ていきます。

メールアドレスの認証

まずはメールアドレスの認証からフォームがスタートします。
メールアドレスを2回入力し、認証メールを送る形となっています。

ページの全体像

メールアドレス入力ページ

一見普通のフォームですが、注目したいのはボタンの文言。
ユーザーはこのあと、入力したメールアドレスあてのメールを確認する必要がありますが、ボタンに「いまから認証メールが送られる」というアクションが具体的に表記されていることが、今後のフローについてのユーザーの理解を助けてくれています。

efo_double_ring これからメールが送信されるのだということがわかりやすいボタンの文言で、さりげなくユーザビリティがアップしています。

具体的なボタン文言。次に何が起こるかが明確。

具体的なボタン文言。次に何が起こるかが明確。

いっぽう、気になったのはメールアドレスを2回入力させている点。
まだフォームの冒頭ですから、たとえメールアドレスに誤りがあっても、入力をやりなおすのはそこまで苦になりません。
それよりもユーザーが2回繰り返し入力するのを手間に感じてしまうデメリットの方が大きいように感じてなりません。

ここは、フォントサイズ大きめの入力欄を用意して、入力を1回にするのも手ではないでしょうか。

注意 同じ内容を2回入力しなくてはならないのは少し面倒

同じ内容を2回入力しなくてはならないのは少し面倒。

メールアドレス入力

メールアドレス送信完了

メールアドレスの入力が終わると、完了画面が表示されます。

現在の登録の状況、この後どのようなアクションを行えばよいか、メールの送信先アドレス、仮にメールが届かない場合のヘルプなど、過不足なくコンテンツが用意されています。

efo_double_ring 迷うこと無く次のステップに進むことができる

メールアドレスの送信完了ページ

メールアドレスの送信完了ページ

情報入力

メール内のリンクをクリックすると、続きの基本情報入力のページにたどり着きます。

基本情報入力ページ

基本情報入力ページ

ページ全体を通して、親切な補足説明が多い印象です。
たとえばページ冒頭では、続けてのフォーム入力を促す文言があったり、個人情報には「非公開」という表記や、何のために生年月日を取得するかの文言が添えられています。
これら補足の存在により、ユーザーは迷いなく安心して入力を進めることができるでしょう。

efo_double_ring ページ全体を通して、説明・補足が細やか。

冒頭に入力を促す文言があると、丁寧なサービスだと感じる

冒頭に入力を促す文言があると、丁寧なサービスだと感じる

「非公開」の表記により、個人情報が公開されることがないとわかり、安心できる

「非公開」の表記により、個人情報が公開されることがないとわかり、安心できる

生年月日入力欄には、情報取得の理由が明記されている

生年月日入力欄には、情報取得の理由が明記されている

また、注目したいのはメールマガジンが非常に多い点。
通知関係も含めると実に11種類のメール受信の有無を設定できるようになっています。
さらに、3種類のランキングへの参加有無も選択することができます。

これらは、あらかじめ「受け取る」「参加する」に初期値を設定した状態で、折りたたまれた状態で表示されています。

一見、すべて受信するデフォルト値で折り畳んでおくのはユーザーに対して不親切なような気もしますが、よく見てみると非常に細かななメールの受信設定が可能となっており、多くのウェブサービスがとくにユーザーの許可を得ること無くお知らせ通知などを送信しているなかで、登録の段階で細かな設定機会を提供しているのは親切だと感じました。
また、赤字で目立つように「不要な場合は「受け取らない」を選択してください。」と但し書きがあるのにも好感が持てます。

efo_double_ring メールマガジンの初期値が「受け取る」であっても、決してユーザーの不意をついているわけではありません。

初期値が「受け取る」であっても、決してユーザーの不意をついているわけではありません。

折りたたまれたメールマガジン選択箇所

さらに、個人情報保護方針をフォームページ内にインライン表示することで、ページからユーザーを逃さない工夫も見られました。

efo_double_ring 別タブリンクなどではなく、フォーム内から直接参照できるようになっている

個人情報保護方針の表示

個人情報保護方針の表示

登録完了

確認ページは挟まず、完了ページに遷移します。

トップや元の画面に戻る導線はもちろん、プレミアム会員の訴求や、プロフィール設定関連のチュートリアルなど、登録後のユーザーがスムーズにサービスを利用できるように工夫されている、理想的な完了画面です。

efo_double_ring 登録後にスムーズにサービスを利用開始できる工夫が満載

登録完了ページ

登録完了ページ

SNSアカウントによる登録

最後に、SNSアカウントを利用した場合の導線にも触れておきましょう。
メールアドレス登録画面の内の「SNSアカウントでログイン」ボタンを押下すると下記のログインページに遷移します。
このログインページは、サイト内の「ログイン」リンクや、未ログイン状態で会員機能を利用しようとした場合(「クチコミする」ボタンを押すなど)にも共通で表示されるもののようです。

ログインページ

ログインページ

新規会員登録のページから当該ページへ遷移した場合に、SNSアカウント以外のログインフォームや新規登録の導線があることに非常に違和感がありました。
この違和感の正体はおそらく、ボタンにあります。

ボタンの文言が「SNSアカウントでログイン」となっているため、押下するとログインを実行するような気がしてしまいます。リンクでなくボタンであることや、ボタンの色がFacebookのブルーと似た色を用いていることがさらにこれを助長させているようにも思います。あくまでログインページに遷移し、そこからSNSログインするというフローを想像しやすい文言やデザインになっていると良いと思います。

注意 そのままログインを実行したつもりでログインページに遷移するので、一瞬「?」となった

SNSアカウントを利用したログインへの導線

ログインへの導線

なおこのログインページそのものはEFOとして非常に優れています。
余計なリンクが排除されたフォーム専用レイアウト、会員/非会員の導線を左右のカラムで明確に分けている点、ポイントをわかりやすく伝えているオファー表示などは特にマネしたい点ですね。

efo_double_ring 特にオファー表示は、ポイントを5つに絞り、イラストとともに簡潔に伝えている利用的な形をとっている

オファー表示

オファー表示

facebookでログインした場合、次のページに遷移します。通常の会員登録とは異なるレイアウトとなっています。

facebookログインを実行した後の基本情報登録ページ

facebookログインを実行した後の基本情報登録ページ

このページも、スッキリと無駄を排したフォーム専用レイアウトを採用しています。

気になったのはサブミットブロックとエラー表示。
このフォームではサブミットブロックが導入されており、入力項目をエラーなく埋めない限りはボタンを押下することができないのですが、
肝心のエラー内容が表示されないため、どう修正して良いか、もしくはエラーに気づかずにボタンが押下できないことでユーザーが迷ってしまう可能性があります。

注意 サブミットブロックとリアルタイムのエラー表示はセットで揃えたい

サブミットブロック機能

サブミットブロック機能

もう1点、このページでは個人情報の取り扱いと利用規約の参照がリンクとなっているのですが、リンクが別窓表示になっていないために、同じタブ内で遷移してしまい、なおかつブラウザの「戻る」でバックすることができない点。
ユーザーに大きなストレスを与えてしまいかねませんので、別タブ表示かポップアップウィンドウ、モーダルウィンドウ等などで実装すると良いでしょう。

注意 規約を確認すると戻ってこれなくなってしまう

個人情報保護方針と利用規約のリンク

個人情報保護方針と利用規約のリンク

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖は以上となります。

@cosmeのフォームは非常にユーザー目線で作りこまれたものとなっていましたね。
一部見た目が異なるページが見受けられましたが、おそらくユーザビリティ向上のため日々改善を繰り返していらっしゃるのだろうな、と感じた徹底解剖でした。これからさらにフォームが使いやすく進化していくのがとても楽しみです。

最後にこれまでみてきたフォームの特徴をまとめて結びとさせていただきます。

優れている、取り入れたいポイント

  • レイアウトが工夫された見やすいフロー表示
  • 明確なフロー表示
  • SNSログインを用意している
  • わかりやすいボタン文言
  • 親切な送信完了ページ
  • 説明・補足が細やか
  • 任意項目の折りたたみ表示

課題と思われる点、その他論点など

  • 専用レイアウトがない場合がある
  • エラーの表示
  • メールアドレスを2回入力させている
  • 誤解を有む可能性のあるボタン文言
  • サブミットブロックの使い方
  • 参照リンクの実装方法

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です