勝手にEFO比較分析【ロリポップ！ x さくらインターネット】（レンタルサーバサービス お申し込みフォーム編）

サーバー。
普段何気なく使っているインターネット、EメールやIP通信系アプリ、オンラインゲームなどですが、サーバーがなくてはどれも機能しないモノですね。

システム管理を行う多くのSEの方たちは日々これと闘い続けているのではないでしょうか。

個人でもここ10余年でドメインを取得する方や個人ブログを持っている方が増え、サーバーに触れる機会も多くなっていると思います。

今回は個人向けレンタルサーバサービスの「ロリポップ」（http://lolipop.jp/）（以下本記事では「ロリポップ」）とデータセンター事業およびインターネットサービスの「さくらインターネット」（http://www.sakura.ad.jp/）（以下本記事では「さくら」）の新規お申し込みフォームを比較分析していきます。

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

ではまず、基本項目を確認します。

いつも通り、基本的な項目の確認から行っていきます。

	ロリポップ	さくら
ページ数	アカウント情報入力、お申込み内容入力、お申込み内容確認、お申込み完了の4ページ	プラン選択ドメイン入力、規約同意、お客様情報入力、パスワードの入力、お支払い方法の選択、入力内容の確認、お申し込み完了の7ページ
入力項目	14種	23種
必須項目入力欄の数	13項目	27項目
フロー	あり	なし
オファー	なし	あり
必須マーク	あり（「必須」マーク表示）	あり（「※」文字表示）
送信ボタンのサイズ	幅260px × 高さ45px	幅270px × 高さ40px
入力画面のレイアウト	フォーム専用	フォーム専用

入力項目種類ではさくらがロリポップの2倍弱となり、やや項目数が多い印象を受けました。
項目数に比例して、ページ遷移数の多さにもつながる結果となっています。

また、行間や入力欄の大きさ、マージンの取り方などにも大きな違いが出ています。

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

レイアウト

項目数を抑え、フォントと入力欄のサイズを大きめに、程良いマージンで見やすさに重点を置いたロリポップ。

丁寧で細かな質問で項目数は増やしたものの1ページ1ページをコンパクトに収めたさくら。

どちらも項目を整理し、入力項目を区分けすることで、ストレスを軽減する作りになっています。

ロリポップ ページレイアウト

入力欄サイズと余白を大きくとっていて視認性が高いです。
また、項目を整理し、重要な部分には特徴的な見出しをつけてあげることで「どういった内容を入力しているのか」がより分かりやすくなっています。

項目数をしぼり、ひと項目ずつに分けることでテンポ良く入力が進みます。

さくら ページレイアウト

フォントとマージンを詰めることでコンパクトさに重点を置いています。

1ページ1ページぎゅっと情報が詰まっていますが、ページ遷移が多いので少し残念です。

フォームタイトルの見やすさ

フォームタイトルの分かりやすさは、ユーザーの安心感の向上にもつながる要素です。
フォントサイズや装飾で他項目見出しとの緩急を付け「自分が今何のフォームに入力しているのか」を明確にしてあげましょう。

ロリポップ フォームタイトル

ロリポップはポップなフォントを使ったタイトル。
目立つ配色を用いて、分かりやすくなっています。

さくら フォームタイトル

対して、さくらではフォームタイトルを用意していません。
ヘッダーにさくらインターネットのロゴとオンラインサインアップの文字のみ。

遷移も多めですし、途中から何のフォームなのか分からなくなってしまい少し不安です。

必須マークに違いあり

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

冒頭に「○○マークのある箇所は必ずご入力ください」などとメッセージがあるとなお親切です。

ロリポップ 必須マーク

ロリポップはお手本のような分かりやすい必須マークに仕上がっています。
冒頭にメッセージがあれば満点ですね。

さくら 必須マーク

一方さくらはかなり控えめな印象を受けます。
（*）という印で表していますが配色も黒で、パッと見た時に任意項目との区別がつきません。色をつけてあげるだけでも大分改善すると思いますので、ご検討願いたいですね。

フローの有無

ロリポップはシンプルですが分かりやすいフローです。

対して、さくらはフローがありません。
総ページ数7ページでフローが無い、というのは少し不親切です。
おそらく3、4ページ進んだところでユーザーは「まだあるの？いつ終わるの？」と思ってしまいます。
そういったユーザーの離脱を防ぐためにもフローの設置を強くお奨めします。

しかし、7ページ分のフローとなるとごちゃごちゃして逆に見難くなるかもしれません。
そういった場合には「3/7 お客様情報の入力」という数字と入力タイトルの組合せや「step1＞step2＞・・・」というような簡易フローを検討してみてください。

ロリポップ フロー

送信ボタン

サイズは共に200*40オーバーの大きめサイズです。
送信ボタンの大きさや配色でコンバージョン率が変わるといったデータも過去のブログで紹介している通り、ユーザーの心理に働きかける要素の一つと言っていいでしょう。

ロリポップ 送信ボタン

ポイントカラーを使い目立った配色にしています。
フォーム中にたびたび出てくる赤系の配色と対になっていて、心地よいですね。

ただ、戻るボタンは離脱の原因になる可能性が高いので、削除してしまった方が良いと思います。

さくら 送信ボタン

6ページ目まではフォームの配色に合わせた控えめな送信ボタンになっています。
最後のご確認、申込みボタンのみ派手な配色になっていて分かりやすいです。

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

機能名	ロリポップ	さくら
ガイド 未入力の残り必須項目数などをリアルタイムで表示する機能	なし	なし
離脱ブロック ページを閉じようとするとアラートを出してOKしないと閉じることができない機能	なし	なし
サブミットブロック 送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能	なし	なし
項目ごとのアラート表示 入力についての説明をリアルタイム表示する機能	フォーカス時：なし エラー時：なし	フォーカス時：なし エラー時：なし
項目ごとに入力完了後の動作	なし	なし

入力支援機能の有無

どちらも上記の表で取り上げた入力支援機能はありませんでした。

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

ぜひ今すぐにでも導入をご検討いただきたいですね。

安全性確認表示の有無

パスワードを入力する際、安全性を確認できるパラメーター表示です。

安全性という抽象的なモノに「色」という視覚的な表示を持たせることで、感覚としてつかみやすくユーザーの安心感につながります。

今回はロリポップのみの導入でしたが、パスワードを入力する必要がある際には、お奨めしたい表示機能です。

ロリポップ 送信ボタン

安全性が上がるにつれ、配色がかわり、安全度も「高」表示になっていきます。

エラー画面

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

ロリポップでは冒頭にメッセージがありません。その分、エラー箇所の配色が大きく変わり、各所に注記も表示されます。

一方さくらはお手本のようなエラー表示です。
エラー項目の配色を変え目立たせてあげるとより親切な表示になると思います。

ロリポップ エラー画面

さくら エラー画面

「勝手に」フォーム改善アドバイス

今回はレンタルサーバーサイトの申し込みフォームについて分析を行いました。
最後はいつもの通り勝手にアドバイスして終わりたいと思います。

ロリポップ

入力支援機能の拡充でより親切なフォームに

少ない項目数で、ページごとの長さも短め、程良いマージン調整でとても快適なフォームになっています。またフローの設置や見やすい必須マークも魅力的です。

ただし、入力支援機能は安全性確認表示と住所自動入力のみ。
ガイドやふりがな自動入力、リアルタイムアラートといった機能を拡充することで、より親切な設計になると思います。

さくら

フローの設置と入力支援機能の導入をお奨めします

ページ遷移が多いので、是非フローの設置を検討していただきたいです。

また、項目数の多さもすこし気になります。

フォームを入力する前に「どのくらい項目があるのだろう」と、一通り画面をスクロールするユーザーも少なくありません。
入力項目が多いというだけで離脱につながる可能性は増えてしまいます。

ガイド機能を導入してユーザーの「いつ終わるんだ・・・」という疑問を早々に解消してあげましょう。

親切なフォームを考えていく上で入力支援機能は必要不可欠です。

入力支援機能を導入していくことでよりユーザーに優しいフォームになると思います。