日頃から何気なく使っているオフィス用品ですが、皆さんどこで購入していますか。
自分専用のモノに関しては独特なデザインにこだわりを持つ方も多いと思います。
ですが、ファイルやペンなどの筆記用具、ティッシュなどの掃除用具、印刷に必要な専用用紙、といった消耗品は法人向けのオフィス用品カタログなどでまとめて注文するのが一般的ですよね。
昨今ではカタログ注文だけでなくインターネットからの発注もできるようになり、その利便性の高さからサイトからの注文を利用している企業も多いのではないでしょうか。
今回はオフィス・現場用品通販の「ASKUL」(http://www.askul.co.jp/)(以下本記事では「アスクル」)と同じくオフィス用品通販の「たのめーる」(https://www.tanomail.com/)(以下本記事では「たのめーる」)の新規会員登録フォームを比較分析していきます。
それでは「勝手にEFO分析」していきます。
今回も「勝手に」改善ポイントを指摘していきますので、どうぞ最後までお付き合い下さい。
◎○△×と、ユーザー視点での評価を行っていきます。
まずは基本的項目の確認からです。
いつも通り、基本項目の確認からしていきましょう。
アスクル | たのめーる | |
ページ数 | お客様情報の入力、ご登録内容の確認、ご登録お申込完了の3ページ | お客様情報の入力、登録内容の確認、受付完了の3ページ |
入力項目 | 17種 | 32種 |
必須項目入力欄の数 | 15項目 | 15項目 |
フロー | あり | あり |
オファー | あり | あり |
必須マーク | あり(「必須」文字表示) | あり(「必須」マーク表示) |
送信ボタンのサイズ | 幅280px × 高さ51px | 幅167px × 高さ43px |
入力画面のレイアウト | 他ページと共通 | 他ページと共通 |
入力項目種類ではたのめーるがアスクルの約2倍となり、かなり項目数が多い印象を受けました。
また、配色はシンプルですが行間や入力欄の大きさ、マージンの取り方などに違いが出ています。
以下個別に説明していきます。
カラム数とマージンの取り方で印象に違いあり
説明用のカラムを用意した構成にし、小さめのフォントサイズで情報をぎゅっと収めているアスクル。
いっぽうでフォントと入力欄のサイズを大きめにし、ゆとりある余白で見やすさに重点を置いた、たのめーる。
どちらも項目を整理し、入力項目を区分けすることで、ストレスを軽減しようとする工夫が感じ取れます。
ただし気になったのはページレイアウト。いずれもサイト共通のヘッダー/フッターがついたままとなっています。
アスクル ページレイアウト
各項目に丁寧な説明を設け、フォーム内でユーザーの疑問をできるだけ解消しようと試みています。
また、入力内容をジャンルごとに整理し特徴的な見出しをつけてあげることで「今どういった内容を入力しているのか」が分かりやすくなっています。
しかし、フォントサイズや行間が小さいために、情報が詰まり過ぎていて少し読み辛さを感じました。余白やフォントを調整して視認性と可読性を上げていきたいですね。
たのめーる ページレイアウト
フォントと余白を大きくとることで、読みやすさ・入力しやすさに重点を置いています。
本来フォームはできるだけ縦長にならないように収めるのが好ましいものの、入力の心地よさを考慮するとその限りではないということを感じさせてくれます。
ただしページ上部ににナビゲーション類が多く、ディスプレイサイズによってはファーストビュー内に1つ目の項目が収まらない場合がありそうな点は気になります。
必須マークは両社ともあり
お手本は「必須」文字を使い、色背景を敷くなどして目立たせた状態です。
アスクル 必須マーク
アスクルは入力項目の表部分に専用の列を設け、必須と任意を文字で表記しています。
文字だけでは印象が薄いので、色背景をしいたアイコンのような形にするとより目立たせることができます。
ただしアスクルではマークだけでなく、必須項目のみ背景色をピンク色に変化させていることから、どこが必須なにかが一目瞭然でした。
たのめーる 必須マーク
一方たのめーるはお手本のような必須マークを使用しています。
ただ入力欄の背景色が任意項目と変わらないので、必須項目のみ目立つ色に変えてあげると、より入力しやすくなると思います。
どちらもフローあり
いずれもフロー画像を配置しており、現在地が明確になるような工夫がされていました。
アスクルはかなりシンプルなフローです。
対して、たのめーるはイラストなどの装飾を利用した目立つフローになっています。
アスクル フロー
たのめーる フロー
キャンセルボタンに注意
今回アスクルのボタンには、前のページに戻るボタン(=キャンセルボタン)が搭載されていました。
デメリットはあれどもとくにメリットはないこのキャンセルボタン。できればすぐにでも外されることをおすすめします。
アスクル ボタン

「同意しない」を選択すると前のページに戻ってしまう
両社ともオプトイン項目あり
いずれのフォームもメールマガジンのオプトイン項目を設けていました。
アスクルは一見シンプルにまとめていますが、説明分が長く少し読みづらいです。
一方、たのめーるは複数あるメールマガジンを項目分けし、分かりやすくまとめています。
アスクル オプトイン
たのめーる オプトイン
次に入力支援機能の比較です
機能名 | アスクル | たのめーる |
---|---|---|
ガイド
未入力の残り必須項目数などをリアルタイムで表示する機能 |
なし | なし |
離脱ブロック
ページを閉じようとするとアラートを出してOKしないと閉じることができない機能 |
なし | なし |
サブミットブロック
送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能 |
なし | なし |
項目ごとのアラート表示
入力についての説明をリアルタイム表示する機能 |
フォーカス時:なしエラー時:あり | フォーカス時:なしエラー時:なし |
項目ごとに入力完了後の動作 | ピンク背景から白背景へ | なし |
入力支援機能の有無
ユーザーの操作にあわせてリアルタイムで動作する機能はアスクルのリアルタイムアラート機能のみ。住所自動入力機能はどちらも実装していました。
入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。
ぜひ今すぐにでも入力支援機能の導入・拡充をご検討いただきたいですね。
リアルタイムアラート
アスクルのフォームには搭載されていたリアルタイムアラート。
項目が多いフォームほど、あとからエラーが出るとうんざりするもの。起こしたエラーはその直後にアラートされたほうが気が楽です。
アスクル リアルタイムアラート

エラーを出したそばから知らせてくれるアラートは、とくに項目の多いフォームでは効果を発揮
エラー画面
本来であれば冒頭にメッセージがあり、さらにエラー箇所にも分かりやすい配色で注記というのがお手本です。
ですがアスクルはユニークなエラー表示方法を使用しています。
送信時にエラーがある場合、送信ボタンの上部に専用吹き出しを設け、エラーを箇条書きで注記するという方法です。
注記部分がリンクになっていて、クリックでエラー項目がフォーカスされます。
一方たのめーるでは、冒頭でエラー注記を箇条書きリンクにし、クリックでエラー箇所へ遷移させる形式をとっています。エラー箇所にも注記があって丁寧ですね。
しかし、エラーが多い場合に冒頭にエラー文言がズラーっと並んでいる姿は、ユーザーをうんざりさせて離脱へ向かわせてしまう危険性が。
上部には一言メッセージのみにし、エラー箇所の背景色を変えるなどすると、エラー画面でもいっそう見やすいレイアウトを保つことができます。
アスクル エラー画面
たのめーる エラー画面
最後は勝手にフォーム改善アドバイスを
今回はオフィス用品通販サイトの会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。
アスクル
文字間、フォントカラーの調整と入力支援機能の拡充を
今のままではサイドエリアと説明部分の文章が読み辛いです。
文字間を広げる・フォントサイズや色を変えるだけでも大きく改善が期待できそうです。
そして、ユーザーの離脱を助長してしまうキャンセルボタンは今すぐ外すことをおすすめします。
また、現状の入力支援機能はリアルタイムアラートと住所自動入力のみです。機能を拡充することで、より親切な設計になると思います。
たのめーる
項目数の見直しと入力支援機能の導入をお奨めします
気になったのは項目数。
30種類前後の項目数があるので、ガイド機能などが無いとユーザーは「いつ終わるんだ・・・」という気になってしまいますよね。
また、フォームを入力する前に「どのくらい項目があるのだろう」と、一通り画面をスクロールするユーザーも少なくありません。入力項目が多いというだけで離脱につながる可能性は増えてしまいます。
改めて項目を見直し、任意項目数を出来るだけ抑えていただきたいですね。
難しい場合、余計なナビゲーションを削除するだけでもかなり画面がすっきりすると思います。
また、親切なフォームを考えていく上で入力支援機能は必要不可欠です。
ガイドや背景色、リアルタイムアラートなどの入力支援機能を導入していくことで、よりユーザーに優しいフォームになると思います。