勝手にEFO比較分析【アメーバ x Livedoor】(ブログサービス 会員登録フォーム編)

6月に入り、つい2日前には東海と関東甲信の梅雨入りが発表されましたね。
雨が多く室内にこもりがちになってしまうこの季節、思い切ってブログを始めて日頃の考えをアウトプットしてみるのはいかがでしょう。

ということで、今回は国内無料ブログサービスを比較していきます。取り上げるのは、芸能人ブログの代名詞となりつつあるサイバーエージェント様運営「アメーバブログ(以下アメーバ)」と、独自ドメインなどカスタマイズ制抜群、先月完全無料化され話題となったLINE株式会社様運営「livedoorブログ(以下livedoor)」の2つのサービスです。

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

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

基本的項目の確認

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

アメーバ livedoor
ページ数 メールアドレス入力、メールアドレス完了、会員情報入力、完了の4ページ 入力、完了の2ページ
入力項目 5種 5種
必須項目入力欄の数 7項目 5項目
フロー あり なし
オファー なし なし
必須マーク あり なし
送信ボタンのサイズ 幅160px × 高さ38px 幅166px × 高さ32px
入力画面のレイアウト フォーム専用 フォーム専用

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

理想的なフォーム専用レイアウト

どちらのフォームも、余計なリンクやナビゲーション、コンテンツのないシンプルなフォーム専用レイアウトを用意していました。
ユーザーはフォーム入力に集中することができますね。

efo_double_ring アメーバ レイアウト

ロゴとタイトルだけのごくシンプルな構成。リンクの数も必要最低限にとどめている

ロゴとタイトルだけのごくシンプルな構成。リンクの数も必要最低限にとどめている

efo_double_ring livedoor レイアウト

こちらもかなりシンプルな構成に。リンクの数は比較的多いものの、ユーザーの興味をひくような内容は排除されている

こちらもかなりシンプルな構成に。リンクの数は比較的多いものの、ユーザーの興味をひくような内容は排除されている

入力ページ数、項目数のシンプルさはlivedoorがリード

メールアドレス認証を先に持ってきたアメーバ。そのためどうしても画面遷移が増えてしまいます。
対して認証は後工程になっているlivedoorは1ページで簡潔する作りとなっており、登録の手間はかなり少ないものに。

また「性別」「生年月日」などを入力必須としているアメーバに対して、必要最低限の情報入力しか求めないlivedoorは項目数の少なさでも一歩リード。
さらにメールマガジンの有無を選択できないアメーバに比べ、チェックボックスで選択できるlivedoorのほうが、ユーザーに優しい設計とも言えますね。

efo_double_ring livedoor 項目数

入力が必要項目は最低限にとどめている。 メールマガジンの有無が選択できるのでよりユーザーに優しい。

入力が必要項目は最低限にとどめている。
メールマガジンの有無が選択できるのでよりユーザーに優しい。

フロー、必須マークに差が

今回、アメーバにのみフロー画像がありました。
ただしlivedoorは入力ページ1枚で簡潔しているため、フローを設ける必要性はあまりないかもしれません。

efo_double_ring アメーバ フロー

フロー画像。簡潔でわかりやすいデザイン。

フロー画像。簡潔でわかりやすいデザインです。

また、必須マークの表示もアメーバのみでした。
今回くらい項目数が少ない場合はなくても大きくユーザビリティを損なうことはないものの、できれば必須マークはあるに超したことはありません。

efo_double_ring アメーバ必須マーク

必須マーク。「必須」の文字にオレンジ色の背景色で強調している、理想的な形

必須マーク。「必須」の文字にオレンジ色の背景色で強調している、理想的な形

エラーはいずれもオーソドックスな形

いずれも該当箇所に赤字でエラー内容を表示する形での実装でした。

エラーを該当箇所に赤字で表示。また枠線が赤色になり強調される

エラーを該当箇所に赤字で表示。また枠線が赤色になり強調される

ok_blue livedoor エラー

エラー画面。全体がシンプルな配色であるため、赤色のエラー文字がよく目立つ

エラー画面。全体がシンプルな配色であるため、赤色のエラー文字がよく目立つ

気になったのはlivedoorのエラーメッセージ。パスワードの箇所のみ一部のエラー内容が抽象的でした。ユーザーが戸惑ってしまう可能性があるので改善しておきたいところです。

ng_bw livedoor エラー

パスワードの文字数が不足している場合のエラー。

パスワード欄に「password」と入力するとこのようなエラーが表示された。「値が不正」という表現にわかりにくさを感じます。

livedoorには画像認証のフローが

livedoorには送信ボタン押下後、画像認証(CAPTCHA)がオーバーレイ表示されます。
フォームが1P完結ということもあり、スパム送信を防ぐためにやむをえず設置しているのだとは思いますが…。

ng_bw livedoor 画像認証

送信ボタンをクリックすると、モーダルウィンドウで表示された

送信ボタンをクリックすると、モーダルウィンドウで表示された

ページ遷移や完了ページへの工夫が

いずれのフォームも、ユーザーのスムーズな利用開始を妨げないようなさまざまな配慮が感じられました。

まず完了ページでは、いずれも自動的にログインした状態で管理画面を表示するようになっていました。
アメーバでは送信完了ページが表示され、数秒後にブログの管理画面に自動的にジャンプする親切設計に。livedoorはフォーム送信後にメールアドレス確認のフローをはさみますが、登録したIDですでにログインした状態になっており、シームレスにサービスを利用開始することができます。

efo_double_ring アメーバ送信完了後

完了画面ののち、ログインした状態で遷移した管理画面。すぐにサービスの利用を開始できる。

完了画面ののち、ログインした状態で遷移した管理画面。すぐにサービスの利用を開始できる。

ok_blue livedoor送信完了後

完了ページでは、メールアドレスの認証を促されるが、自動的にログインされているため管理画面をすぐに利用できるようにはなっている

完了ページでは、メールアドレスの認証を促されるが、自動的にログインされているため管理画面をすぐに利用できるようにはなっている

さらに驚きの親切設計を見せたのはアメーバ。
今回gmailの仮アドレスを使ってメール認証したのですが、メール認証の完了画面には、なんとgmailの管理画面へのリンクが。
今回gmail以外では確認していないので、ほかのドメインの場合の動作はわかりませんが、ユーザーがスムーズに利用開始できるようにかなり考慮された設計となっていることは間違いありません。

efo_double_ring アメーバメール認証完了画面

gmailで登録すると管理画面へのリンクが用意されている。なんという親切設計!

gmailで登録すると管理画面へのリンクが用意されている。なんという親切設計!

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

機能名 アメーバ livedoor
ガイド

未入力の残り必須項目数などをリアルタイムで表示する機能

なし なし
離脱ブロック

ページを閉じようとするとアラートを出してOKしないと閉じることができない機能

なし なし
サブミットブロック

送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能

なし なし
項目ごとのアラート表示

入力についての説明をリアルタイム表示する機能

フォーカス時:ありエラー時:あり フォーカス時:なしエラー時:あり
項目ごとに入力完了後の動作 なし なし

両社とも、パスワードのマスキング解除機能を搭載

どちらのフォームも、ユーザーが任意で設定するパスワード欄に、入力マスキングの解除ができるチェックボックスを用意していました。
これなら、ユーザーが思った通りのパスワードを確実に登録することができます。

efo_double_ring アメーバ パスワード入力

パスワードのマスキングをチェックボックスで解除できる

パスワードのマスキングをチェックボックスで解除できる

efo_double_ring livedoor パスワード入力

こちらも同様の形。再入力側の入力欄もマスキング解除される

こちらも同様の形。再入力側の入力欄もマスキング解除される

リアルタイムアラートも充実

今回どちらのフォームも、入力内容のエラー有無をその場で判定するリアルタイムアラート機能を導入しています。
またエラーだけではく、ユーザーが任意で設定するIDの重複がないかもその場で判定するようになっていました。
かなりストレスなく入力を進めることができます。

efo_double_ring アメーバ リアルタイムアラート

IDの重複をその場で判定してくれる。

IDの重複をその場で判定し、吹き出しで表示してくれる。

数字以外を入力するとアラートを表示する

入力形式が異なる場合もアラートを表示する

efo_double_ring livedoor リアルタイムアラート

IDの重複をその場で判断。

IDの重複をその場で判断。

入力形式の判定も実施してくれる。

入力形式の判定も実施してくれる。

その他入力支援機能ではアメーバが一歩リード

アメーバにはその他にも豊富な入力支援機能が導入されてていました。
項目フォーカス時の入力形式表示、背景色・枠線の強調、入力モードの自動変換機能などです。

efo_double_ring アメーバ 項目フォーカス時

項目にフォーカスすると、入力形式などの注意点を吹き出し型で補足してくれる。 また、フォーカスしている入力欄の枠線と背景色を変化させ強調することにより、画面上のどのフォームを入力しているかがわかりやすい

項目にフォーカスすると、入力形式などの注意点を吹き出し型で補足してくれる。
また、フォーカスしている入力欄の枠線と背景色を変化させ強調することにより、画面上のどのフォームを入力しているかがわかりやすい

IDの入力画面では、自分が設定したIDでアドレスがどのようになるかをデモできる機能が

IDの入力画面では、自分が設定したIDでアドレスがどのようになるかをデモできる親切機能が

efo_double_ring アメーバ 入力モードの自動変換

数字以外を入力するとアラートを表示する

「生年月日」の入力欄では、入力モードを英数字に自動変換し、さらにかなに変更することもできないようになっている。全角を入力してエラーを出す可能性は限りなくゼロに近い

最後に、勝手にアドバイス

今回はどちらのフォームも優れたEFOを行っており、非常にハイレベルな比較となりましたね。
ぜひ両社の例を参考にフォーム改善を進めてみてください!

最後はいつも通り、勝手なアドバイスをして締めくくりたいと思います。

アメーバ

普段インターネットに慣れていないユーザーでも迷うこと無くフォーム入力・送信できるよう、至る所で緻密な設計がされていると感じました。
あえて言えばメールマガジンの登録有無をユーザーが選べるようになったり、性別や生年月日の項目を任意にできると、よりユーザー目線のフォームになるかもしれません。

liveboor

シンプルで無駄がなく、充分申し分ないフォームです。
エラーの文言は誰が見てもわかりやすいよう具体的かつ平易に、またCAPTCHAはほかの方法でスパム対策できないか検討の余地ありです。
ボタンのデザインがかなり簡素ですので、少し色などを強調してみても良いかもしれませんね。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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