勝手にEFO比較分析【canon x RICOH】(写真共有サービスサイト 会員登録フォーム編)

すっかり寒くなってきた今日この頃、紅葉もあと少しとなってきましたね。
ロープウェイや鉄道で高山に登り絶景を見るもよし、徒歩で低山に登り秋の山を肌で感じつつお弁当を、というのも良いものですね。

そんな綺麗な紅葉景色、散策風景はスマホではなく本格的なカメラに収めたい、という方も多いのではないでしょうか。

というわけで、今回は一眼レフ業界大手の「canon」(http://canon.jp/)(以下本記事では「キヤノン」)とコンデジ業界大手の「RICOH」(http://www.ricoh.co.jp/)(以下本記事では「リコー」)の写真共有サイト会員登録フォームを比較分析していきます。

キヤノンは「CANON iMAGE GATEWAY」、リコーは「RICOH IMAGING」という写真共有型のサービスを展開しています。
どちらも写真共有型のSNS、写真スクールの受講や知識テクニック系会報誌の受信、オンラインアルバム、ツアーやイベント情報の受信とオンラインショップが利用できます。
また、
・キヤノンのプリンタとリンクしたコンテンツや、フォトブック制作サービス
・リコーの故障した製品の受け取り修理お届けまでを行うサービス
といった独自のサービスも含め、それぞれ会員登録で受けられる内容はかなり充実していることがわかります。

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

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

では基本的項目の確認からしていきます。

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

キヤノンはまずメールアドレスとパスワードを登録させメールを送信し、メール内のURLから本登録に進む形式。
対してリコーはすべての入力項目を1フォーム内に納めた形式をとっています。

キヤノン リコー
ページ数 規約、メールアドレス入力、送信確認、URLから登録情報入力、確認、完了の6ページ 規約、登録情報入力、確認、完了の4ページ
入力項目 15項目 20項目
必須項目入力欄の数 14項目 12項目
フロー あり なし
オファー あり あり
必須マーク あり(「必須」マーク表示) あり(「必須」マーク表示)
送信ボタンのサイズ 幅270px × 高さ65px 幅160px × 高さ40px
入力画面のレイアウト フォーム専用 フォーム専用

総合的な入力内容はほぼ同じです。双方配色はシンプルですが余白の取り方などに違いがあります。

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

見せ方に違いはあるが双方シンプルな印象に。

フォントを大きくし、読みやすさに重点を置いたキヤノンと、フォントを小さくし必須項目のほとんどをファーストビューに収めたリコー。
見せ方と設計思想は違えど、双方ともにシンプルで見やすいフォームとなっています。

ok_blue キヤノン ページレイアウト

フォントと余白を大きくとることで、読みやすさに重点を置いています。
本来フォームはファーストビューに収めるのがお手本です。
しかし、幅広い世代で使いやすいフォームを意識した今回のケースは、ファーストビューに収めることだけが正解ではないという良い例と言っていいでしょう。

視認性、可読性の高い誰もが見やすいフォーム。

視認性、可読性の高い誰もが見やすいフォーム。

ok_blue リコー ページレイアウト

対してリコーはフォントを小さく設定し、とてもコンパクトなフォームを実現しています。
ほどよいマージン調整で、フォントの小ささが見難さにつながることもありません。
余白の使い方や配色でフォントの見やすさは大きく変わります。
項目数が若干多いのが気になりますが、問題のない範囲だと思います。

専用フォームを使ったコンパクトなフォーム。

専用フォームを使ったコンパクトなフォーム。

必須マークは両社ともあり

どちらも「必須」文字を使い、色背景を敷くなどして四角にしたマークを先頭につけた状態のお手本のような必須マークになっています。

ok_blue キヤノン 必須マーク

お手本のような必須マークですね。

お手本のような必須マークですね。

ok_blue リコー 必須マーク

リコーも同じくお手本のような必須マーク。

リコーも同じくお手本のような必須マーク。

どちらもフローはなし

両社ともフォームにフローがありませんでした。
どちらもレイアウトが親切だった分、少し残念です。

キヤノンは新規会員登録の流入ページにフローを設置していますが、どうせならフォームにも設置してほしかったです。

soso_black キヤノン フロー

フォームにも簡易版のフローがほしいですね。

フォームにも簡易版のフローがほしいですね。

情報の濃さで差の出たメルマガ選択項目

キヤノンは配信サービスが複数あり、各サービスのロゴなどを設置し情報も充実させています。
一方リコーはコンパクトな設計に基づき、オファー文も1行と小さくまとめています。

efo_double_ring キヤノン メルマガ選択

どういうサービスを受けられるのかしっかりと説明されています。

どういうサービスを受けられるのかしっかりと説明されています。

soso_black リコー メルマガ選択

サービス内容の情報が少ない印象です。

サービス内容の情報が少ない印象です。

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

機能名 キヤノン リコー
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

入力支援機能はともに無し

ユーザーの操作にあわせてリアルタイムで動作する機能は双方共にありませんでした。

支援機能はどちらも住所自動入力機能のみ実装していました。

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。

ぜひ今すぐにでも入力支援機能の導入をご検討ください。

両社ともお手本のようなエラー画面

冒頭にメッセージがあり、さらにエラー箇所にも分かりやすい配色で注記というのがお手本です。

どちらも冒頭のメッセージは一つにまとめ、レイアウトを崩すことなく保っています。
また、エラーした項目の下部にポイントカラーで注記が表示されているのもお手本通りといったところでしょうか。

リアルタイムアラートを実装すれば、よりユーザーに優しい設計になると思います。

efo_double_ring キヤノン エラー画面

お手本に忠実なエラー表示。

お手本に忠実なエラー表示。

efo_double_ring リコー エラー画面

こちらも同様にお手本のようなエラー表示になっています。

こちらも同様にお手本のようなエラー表示になっています。

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

今回は写真共有サービスサイトの会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

キヤノン

フローと入力支援機能の追加でより親切なフォームへ

せっかく流入ページに詳細フローがあるのに、フォームに簡易版フローを設けていないのは非常にもったいないです。ぜひ簡易版も追加しみてください。

また、現状の支援機能と呼べるものは住所自動入力のみですので、ぜひ機能拡充することを考えてみてください。より親切な設計になること間違いありません。

リコー

項目数の見直しと入力支援機能の導入を

今回気になったのは項目数です。

性別などのオプション的な任意項目に関しては、また違う機会(プロフィールの編集など)に改めて別フォームで入力させることをおすすめします。

せっかくファーストビューに収まりつつある必須項目群がもったいなく感じました。

また、ユーザーに優しいフォームを考えていく上で入力支援機能は必要不可欠です。

入力支援機能を導入していくことでより利便性の高いフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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