勝手にEFO比較分析【カゴメ × 大塚食品】（食品メーカー EC会員登録編）

そろそろ夏本番。水分を多く採り、食べ物で夏バテを防止できたらいいですね。
今回は飲料・食品メーカーのオンラインショップをテーマにします。

今回比較するサイトは、カゴメ株式会社様（http://www.kagome.co.jp/）（以下、カゴメ）と大塚食品株式会社様(http://www.otsukafoods.co.jp/)(以下、大塚食品)です。
トマトケチャップや野菜ジュースなど野菜を原料とした調味料、飲料で知られるカゴメ。
昔から愛されるレトルトカレーの元祖・ボンカレーの大塚食品。
この2社を比較していきます。

※以下、サイト名の敬称は省略させていただきます。

それでは「勝手にEFO分析」していきましょう。
今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合い下さい。
○△×と、ユーザー視点での評価を行っていきます。

まずは基本項目の確認です。

フォーム、入力欄はほぼ変わらず

カゴメも大塚食品も入力項目と必須入力欄の数は特に差が見られませんでした。
またメールアドレス入力欄がシンプルに一つにまとめられているのに対し、電話番号や姓名、フリガナ、郵便番号入力や生年月日が別れているなど入力欄の数が減らせそうな所も共通して散見されました。

そして、両者とも余計なリンク表示が少なく、デザインもシンプルで非常に入力に集中しやすいレイアウトとなっていました。

カゴメ フォーム画面
企業カラーの赤を中心に構成されたフォーム。フローも表示されていますね

大塚食品 フォーム画面
両者、名前やフリガナ、電話番号、住所入力の入力欄は統一したいところ

カゴメは重要な情報を強調

カゴメのフォームでは、メールアドレスの入力欄をひとまわり大きく表示していました。
オンラインショップにおいてログインIDにもなるメールアドレスは、他の入力情報に比べて特に重要なのでしょう。また、半角の英数字は入力内容がどうしても見難くなりますから、ユーザーにとってもうれしい工夫ですね。

カゴメ フォーム画面
よくよく見てみるとメールアドレスの入力欄が少し大きめ。

必須表示、ボタンに差が

いっぽう、ボタンと必須表示には両者に差が。

まずは必須表示。カゴメは文字で「必須」と表示するいっぽうで、大塚食品はアスタリスク（*）でマーク。

カゴメ 必須表示
文字でしっかり「必須」と書かれておりわかりやすいですね。

大塚食品 必須表示
アスタリスクではありますが、緑背景に赤色が目立ち認識しやすい。

そして送信ボタンは、いずれも次へのステップを目立たせてデザインしている点は良かったのですが、文言の親切さという点ではカゴメが一歩リード。

カゴメ 送信ボタン
戻るボタンは少し小さく距離もあり色も白いため登録ボタンがより目立ちます

大塚食品 送信ボタン
実際にはこの後確認画面に遷移するのですが、このまま送信されてしまいそう

次に、入力支援機能について見ていきます

エラーに差

エラー表示には両者に差があり。それぞれアイコンや背景色などで工夫しているようです。

カゴメ エラー
該当フォーム上部に表示。！マークのアイコンが付いているためさらにわかりやすい。

大塚食品 エラー
該当フォーム上部に表示。そして入力欄も赤くして場所を誘導している。

補足文ではカゴメがリード

カゴメのフォームには便利な機能が。？マークのアイコンを押すと詳しい補足説明文が表示されるようになっています。
これらの補足をすべてフォームにベタ書きすると文字量が多すぎてしまうので、これは適切な工夫なのではないでしょうか。

カゴメ
例文の後ろにある？アイコンを押すと説明が表示される。

最後に、勝手にフォーム改善アドバイス

今回のEFO比較分析は以上となります。
それでは個別で改善案を勝手に提案していきましょう。

カゴメ

フォームがまとめられそうな入力項目はひとまとめにし、項目間の移動が少なく済むようにしましょう。
飲料・食品メーカーの利点を活かし、何かオファーがあるとより登録心理に働きかけられるのではないかと思います。

大塚食品

実際には確認ページヘ遷移するものの、設置されているボタンでは「規約に同意して会員登録」となっているため、ユーザーが戸惑わないよう文言の修正をしたいですね。
また、フロー表示を設けて自分が遷移しているページが今どこかはっきりさせるというのも手です。

共通

フォームはシンプルに出来る箇所は最小限にまとめること、またオファーを設けることによって登録すると何がメリットになるか明示するといいでしょう。
入力項目数が多いので、離脱ブロックとガイド機能があるとさらに便利ですね。