ここ数年都心ではで海外のチョコレートショップが目立つようになりました。
皆さんはどこのお店がお気に入りですか?
今回比較するサイトは、ゴディバジャパン株式会社様運営のGODIVA(http://www.godiva.co.jp/layout/gdv/)(以下、ゴディバ)と
リンツ&シュプルングリージャパン株式会社様運営のLindt(http://www.lindt.jp/)(以下、リンツ)、
CSJ株式会社様運営のカカオサンパカ(http://www.cacaosampaka.jp/home.html)(以下、本記事ではカカオサンパカ)です。
1926年にベルギー・ブリュッセルにて家族運営で産声を上げたゴディバ。1845年にスイス・チューリッヒにてチョコレートを固形化する製造を始めた新風のリンツ。
チョコレート文化発祥地スペインはバルセロナに本店を構えるスペイン王室御用達のカカオサンパカ。
果たしてこの3社で最も使い勝手がいいのは?
※以下、サイト名の敬称は省略させていただきます。
それでは「勝手にEFO分析」していきましょう。
今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合い下さい。
○△×と、ユーザー視点での評価を行っていきます。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年6月6日時点)。
まずはEFO基本項目の確認です。
ゴディバ | リンツ | カカオサンパカ | |
ページ数 | 利用規約の同意、基本情報の入力、登録情報の確認、登録完了の4つ | ログイン、会員登録、会員情報の確認、完了の4つ | ご利用規約、会員情報入力、会員情報登録の3つ |
入力項目 | 15種類 | 14種類 | 18種類 |
必須項目入力欄の数 | 19個 | 18個 | 21個 |
フロー | あり | なし | なし |
オファー | あり(オンラインショップ会員専用ページ) | あり(新規会員登録入り口、会員登録右部) | あり(オンラインショップ会員「初めての方はこちら」、ご利用規約上部) |
必須マーク | あり(必須マーク) | あり(必須マーク) | あり(●マーク) |
メルマガ購読 | デフォルトチェックなし | デフォルトチェックあり | デフォルトチェックなし |
利用規約、 プライバシーポリシー |
別ページ | 別ページ | 別ページ |
送信ボタンのサイズ | 幅145px x 高さ30px | 幅180px x 高さ40px | 幅145px x 高さ31px |
入力画面のレイアウト | 他ページと共通 | 他ページと共通 | 他ページと共通 |
入力ページへの遷移 | 会員様専用ページ→会員登録 | マイアカウント→会員登録 | 会員登録/修正→新規会員登録はこちら or 新規会員登録 |
オファー、フォーム画面、フローに差
ゴディバ、リンツ、カカオサンパカ、3社ともオファーを設けていました。
表示や内容に差があり、それぞれ会社のカラーにそっているかと思われます。
またフォーム画面はチョコレートブランドということもあり【茶系・暖色】が共通で利用されているものの、
フォームの大きさやボタンの大きさなど各所には違いが見られました。
![]() アイコンももちろん茶系。画面全体がチョコレートカラーで統一されている。 ![]() |
![]() 画面は縦に長く表示。お名前とフリガナ、電話番号、誕生日はよりシンプルにまとめられるはず。 セルや必須項目フォームの中、ボタンがシンボルカラーの茶色にまとめられていてGood! ![]() |
![]() ゴディバは唯一フロー表示がありました。万年筆のアイコンがワンポイントとなっています。 ![]() |
![]() こちらは文字のみ(新規会員登録入り口)。チョコレートブランドは茶色がお好き? ![]() |
![]() ゴディバとほぼ同じ内容だが、余分な空白もなくファーストビューでほぼ入力が完了する。 ただこちらも氏名、フリガナ、郵便番号と電話番号のフォームが分かれている。 ![]() |
![]() こちらも文字のみ(新規会員登録入り口)。ただいまいち効果的な文言が見当たらず。 ![]() |
![]() 名前の後に会員IDとパスワード入力が。お名前とフリガナがシンプルだが、電話番号が分かれていた。 ![]() |
送信ボタンに差
今回三者三様の特色がボタンの方でもよく表れていました。
![]() トーンを変える事によりズーム図に誘導。ゴディバはとにかくポイントとなるようなチョコレート色の使い方をしていました。 ![]() |
![]() 確定ボタンと戻るボタンは同じ色、大きさなのですが、離すことによって誘導しています。リンツは基本ベージュカラーを使用していました。 ![]() |
![]() 大きさはリンツのものを横に長くした感じ。戻るボタンがないので会員情報登録のボタンのみ。 ![]() |
次は入力補助機能を見ていきます
機能名 | ゴディバ | リンツ | カカオサンパカ |
---|---|---|---|
ガイド
未入力の残り必須項目数などをリアルタイムで表示する機能 |
なし | なし | なし |
離脱ブロック
ページを閉じようとするとアラートを出してOKしないと閉じることができない機能 |
なし | なし | なし |
サブミットブロック
送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能 | エラー時にブロックあり | エラー時にブロックあり | エラー時にブロックあり |
項目ごとのアラート表示
入力についての説明をリアルタイム表示する機能 | フォーカス時:なし エラー時:あり |
フォーカス時:なし エラー時:あり |
フォーカス時:なし エラー時:なし |
項目ごとに入力完了後の動作 | あり | あり | なし |
エラーに差
今回はエラーのアラート表示に差がありました。
三者三様。それぞれの個性が光ります。
![]() 該当フォーム上部に表示。 ![]() |
![]() フォーム画面上部に出現。 ![]() |
![]() ブラウザのダイアログによるメッセージ。エラー項目のうち1つ目についてのみ指摘するタイプです。 ![]() |
入力完了動作に差。
ゴディバとリンツは入力完了動作を導入。
一方、カカオサンパカは入力完了動作はありませんでしたが、便利なID重複確認機能や住所自動入力機能が備わっていました。
![]() 茶色のフォーム内が入力完了すると白く変わる。 ![]() |
![]() こちらはフォームの中が黄色。同じく入力が終わると白に変わる。 ![]() |
![]() 一方カカオサンパカにはID重複確認機能が。他にも、郵便番号を入れるだけで勝手に住所が入力されるなど細かい所で便利な機能がついていました。 メールアドレスではなくIDでログイン管理をしているため、こちらの重複機能は大変便利。 ![]() |
最後に、勝手にフォーム改善アドバイス
今回のEFO比較分析は以上となります。
それでは個別で改善案を勝手に提案していきましょう。
ゴディバ
まとめられるフォーム項目を統一するなどそてシンプルに。
また、余計な余白を省く事により、見た目としても画面をよりシンプルにみせることが可能かと思います。
また製菓ブランドなので誕生日に関するオファーもあれば、生年月日入力が必須なのも納得できるでしょう。
リンツ
こちらも項目を統一することでよりフォームをシンプルにできます。
左上のガイド表示では、単に必須項目の入力を促すだけではなく、項目の残数表示もさせるとより良いでしょう。
さらに、フロー画像を入れることにより、ユーザーが今どこにいるのか確認できるようにすると良いですね。
カカオサンパカ
オファーがそっけない印象ですので、魅力的な一文を添えてみましょう。
電話番号など分かれている項目を統一するとともに、もう少し項目同士の余白をあけることで、文字が詰まって見づらい点が解消されます。
注意書きや便利な機能がついた親切なフォームではあるのですが、入力完了後に動作を入れるとなお親切です。
共通
いずれも必須の入力項目が多いため、ガイドや離脱ブロックを導入して工夫することで大きな効果が得られるのではないでしょうか。
まとめ
いかがだったでしょうか。
贈り物や差し入れに、または自分へのご褒美に。美味しいチョコレートは私たちの生活を彩ってくれる存在です。フォームが使いやすくなり、より気軽に手に入れられると良いですね。