勝手にEFO比較分析【味の素 x キューピー】（調味料メーカーコミュニティサイト 会員登録フォーム編）

季節は秋から冬。鍋料理やポトフ、煮物、シチューなどといった温かい料理がおいしい時期となってきました。

料理といえば欠かせないのは調味料ですね。もはや私たちの食生活には無くてはならないものと言っても良いのではないでしょうか。

今回は主に調味料を扱う業界に着目して比較分析を行っていきたいと思います。

比較するのは100以上の国と地域で販売を行う「味の素株式会社」（http://www.ajinomoto.com/jp/）（以下本記事では「味の素」）と中国、東アジアへの進出を果たした「キユーピー株式会社」（http://www.kewpie.co.jp/）（以下本記事では「キューピー」）の食品コミュニティサイト2つです。

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

基本的な項目を確認していきます。

いつも通り、まずは基本項目の確認から。

両社とも大きく見やすいフローの設置や程よいマージン間隔でレイアウトも良く出来ています。

以下個別に説明していきます。

両者ともストレスの少ない項目数

両社とも必要以上の入力を要求しておらず、ストレスを感じさせない項目数に収めています。

味の素 ページレイアウト

とにかく項目数が厳選されていて、シンプルにまとまっています。
大きくマージンを取っていますが項目数と配色が相まって非常に見やすい状態となっていますね。

色と程よいマージンでまとまりのあるフォーム。

キューピー ページレイアウト

ヘッダーに配色をあわせページ全体を優しい色合いにしています。必須文字の配色にコーポレートカラーを持ってきていますが、背景色との相性が悪く、若干視認性を下げているのがもったいないですね。

また会員登録に最低限必要な情報という意味合いでは「アイコン」や「同意されているご家族」などは任意項目にできるのではないかと思います。
必須項目の見直しと共に、優先順位による情報の区分けも視野に入れることをお奨めします。

必須マークの有無

味の素が項目全体を「必須項目」とし必須マークをつけていません。
一方キューピーは「※」で対応していて控えめな印象です。

お手本は「必須」文字を使い、色背景を敷くなどして四角のマークにした状態。

味の素のようにすべてを必須項目にし、尚且つ項目数を厳選して10個以内に収めていれば、必須マークは無くても良いのかもしれませんが、成功している例はごく稀です。
出来うる限り必須マークは記載するようにしたいところですね。

キューピーの必須マークは控えめ且つ、薄いブラウンに鮮やかな赤という組み合わせが視認性を下げてしまっています。
配色の再調整を行うか、上記のお手本のような必須マークに変更することをお奨めします。

味の素 必須マーク

項目数がかなり厳選されているので、すべてを必須項目にしてもわかりやすさが保たれています。

キューピー 必須マーク

配色の関係で視認性が落ちていて「※」の文字が読みづらいです。

フローの設置場所に差異あり

味の素ではフォームの全ページにフローを設置しています。
一方、キューピーではメールアドレスを送信するページにのみ全体を俯瞰したフローを設置。受信メール内から遷移した会員登録ページにはフローはありません。

残りの工程が少ないとはいえ、フローが見えないのはユーザーにとって不安要素のひとつになります。ユーザーを安心感させるためにもフローは出来るだけ前ページに設置したいところです。

味の素 フロー

最初の「規約に同意」ページからフローがあり、安心できる設計になっています

キューピー フロー

最初の「メール送信」ページにのみフローがあります。

次に入力支援機能の比較です

入力支援機能の有無

ユーザーの操作にあわせてリアルタイムで動作する機能は味の素のみが導入していました。

キューピーは今すぐにでも、いずれかの入力支援機能導入を検討いただきたいですね。

味の素 リアルタイムアラート

下部に注意文言の表示、背景色の変化でわかりやすくなっています。
またニックネーム入力部分では、既存ネームを検索して使用可能な名前例を表示してくれます。

リアルタイムアラート。必須や入力形式をその場でチェックしてくれます。

味の素 入力完了マーク

入力項目の背景色も黄色から白になり、完了がわかりやすいですね。

入力が完了するとチェックマークが表示されます。

エラー表示

どちらも少し残念なエラー画面になっています。
お手本は冒頭に一言メッセージイメージを表示させ、各エラー箇所に注記を記載、背景色を変更している状態です。

味の素 エラー表示

冒頭に各エラー内容がずらりと並びます。
黄色と赤の配色は非常に危機感の高い組み合わせです。
これではユーザーに不必要な不安を与えることになります。

冒頭メッセージ一言でまとめ、配色も見直すとユーザーの不安感はやわらぐと思います。

非常に危機感があります。ユーザーも不安になりますね。

キューピー ページレイアウト

対照的に、キューピーでは冒頭のメッセージはなし、エラー箇所の注記も必要最低限の文言を記載しています。
しかし、背景色の変化もないので、どこがエラーしているのかわかりづらいです。

冒頭のメッセージとエラー箇所の背景色か枠色の変更はあったほうが優しい設計となるでしょう。

エラー表記が控えめすぎるのも考え物です。

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

今回は食品コミュニティサイトの会員登録フォームについて分析を行いました。
それではいつも通り、最後に勝手なアドバイスで締めくくりたいと思います。

味の素

入力支援機能を拡充してさらに親切なフォームへ。

項目数が厳選されシンプルにまとまったページレイアウトや、わかり易いフローはお手本の様な設計です。

すでにいくつか入力支援機能が実装されていますが、ガイドやリアルタイムアラートの吹き出し機能などを拡充すればより親切なフォームになると思います。

また、エラー画面に関しては冒頭のメッセージ部分をひとつにまとめるとスッキリして良いのではないでしょうか。

キューピー

入力支援機能の導入で利便性の高いフォームへ。

いまのままでもフォームとして充分に機能を果たしていますが、項目数の見直しやフローの設置で利便性はまだまだ上げられると思います。

入力支援機能の導入もあわせれば、さらにユーザーが使いやすいフォームになることは間違いないでしょう。