勝手にEFO比較分析【デジタルハリウッド × KENスクール】(WEBスクール 資料請求編)

今回比較するサイトは、デジタルハリウッド株式会社様が提供する「デジタルハリウッド」(http://school.dhw.co.jp/)(以下、デジハリ)と、株式会社シンクスバンク様の「KENスクール」(http://www.kenschool.jp/)(以下、KEN)です。
Web関連のスクールにとどまらず、大学と大学院、そしてコンテンツ制作会社を併設しているデジタルハリウッド。
リアル案件に取り組むなど実務的な経験ができ、現場で必要とされる即戦力を身に付けられるKENスクール。
この2社について比較していきます。

※以下、サイト名の敬称は省略させていただきます。

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

※本記事の内容は2014年9月1日時点のデジタルハリウッド株式会社様、株式会社シンクスバンク様、両社のサイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年9月1日時点)。

まずは基本項目の確認です。

いつもどおり、EFOの基本項目からチェックしていきます。

デジハリ KEN
ページ数(新規登録の場合) 入力、確認、完了の3つ 入力、確認、完了の3つ
入力項目 6種類 10種類
必須項目入力欄の数 11個 12個
フロー あり あり
オファー あり なし
必須マーク あり(必須マーク) あり(必須マーク)
利用規約、
プライバシーポリシー
なし ページ内に表示
送信ボタンのサイズ 幅220px x 高50px 幅160px x 高さ40px
入力画面のレイアウト フォーム専用 フォーム専用

両者ともフォーム専用のレイアウトを利用。フローも表示。

今回比較の2社のフォームは、きちんと基本のEFOが考えられている印象を持ちました。
両社とも余計なリンクやナビゲーション等を排したフォーム専用のページテンプレートを用意していたほか、ページ上部に全体の流れと現在地を示すフローを配置していました。

フォームにしっかりと集中でき、迷いなく送信完了できるような工夫と言えるでしょう。

ok_blue デジハリ ページ全体図

余計なリンク等は配置されていない

余計なリンク等は配置されていない

ok_blue KEN ページ全体図

こちらも、フォームに関係ないコンテンツがなく、入力に集中できる

こちらも、フォームに関係ないコンテンツがなく、入力に集中できる

ok_blue デジハリ フロー

シンプルなフロー表示

シンプルなフロー表示

ok_blue KEN フロー

シンプルながらも、現在地が見えると安心します

シンプルながらも、現在地が見えると安心しますね

送信ボタン、エラー表示もGood!

また送信ボタンも、充分な大きさやページから引き立つ色使い、戻るボタンとの差別化など、両社ともEFOの観点からは申し分ないと思いました。

ok_blue デジハリ 送信ボタン
デジハリ 送信ボタン

ok_blue KEN 送信ボタン
KEN 送信ボタン

さらに、エラー表示も各項目ごとに具体的に指示されており、理想的な形だと思いました。

ok_blue デジハリ エラー表示

該当項目の背景色と枠線が赤くなり、修正内容もかなり具体的に指示してくれる

該当項目の背景色と枠線が赤くなり、修正内容もかなり具体的に指示してくれる

ok_blue KEN エラー表示

KENも同様に、色の変化と具体的なアドバイスを表示する。キャプチャでは判りづらいがアイコンが点滅するためかなり目立つようになっている

KENも同様に、色の変化と具体的なアドバイスを表示する。キャプチャでは判りづらいがアイコンが点滅するためかなり目立つようになっている

差がでたのはオファーと項目数

いっぽうで差がついたのは項目の数。必須項目数はほぼ変わらないものの、デジハリは任意項目を極力絞っているためか項目数が少なくなっていました。
さらに、ページの縦幅を節約しているためのレイアウトへの工夫が感じられました。このため、画面がある程度大きいディスプレイであれば、ほとんどスクロールすることなく送信ボタンにたどり着くことができます。

また、オファーを設けているのもデジハリのみでした。
資料の写真や、「3分で完了」などのお手軽さをアピールする文言なども見られます。
ok_blue デジハリ オファー

パンフレットの写真や、フォーム送信の手軽さをアピールする文言で、ユーザーのフォーム送信を促している

パンフレットの写真や、フォーム送信の手軽さをアピールする文言で、ユーザーのフォーム送信を促している

soso_black KEN ヘッダー

ヘッダー

フォームのタイトルだけが表記された非常にシンプルなフォームヘッダー。オファーはとくにない

ここまでで、デジハリが一歩リードかと思いきや、KENは入力支援機能が非常に充実していました。詳しくは下記へと続きます。

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

機能名 デジハリ KEN
ガイド

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

なし なし
離脱ブロック

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

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

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

郵便番号入力で導入 なし
項目ごとのアラート表示

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

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

郵便番号からの住所自動入力機能を搭載

今回両社とも、郵便番号の入力で住所を自動入力できる機能を導入していました。使いやすいフォームにはもはや必須の機能といえますね。

ok_blue デジハリ 住所自動入力

住所自動入力中。

郵便番号入力中。ハイフンを含めなくてはならない


郵便番号の入力が終わると、入力ボタンが押下できるようになる

郵便番号の入力が終わると、入力ボタンが押下できる。また自動入力後にはカーソルが自動的にあてられ、続きをスムーズに入力開始できるように配慮が

ok_blue KEN 住所自動入力

KENの住所自動入力は、トリガーのボタンはなく、入力すると自動的に入力される

KENの住所自動入力は、トリガーのボタンはなく、入力すると自動的に入力される

KENの入力支援機能は充実

KENにはさまざまな入力支援機能が搭載されているようでした。上で挙げた住所の自動入力のほかに、IMEモードを変換したり、全角から半角への自動変換、入力ミスをその場で判定するリアルタイムアラートなどの機能が導入されていました。

ok_blue KEN IMEモード変換

メールアドレス欄では、自動的に英数字入力モードに切り替わり、かなモードへの変換もできないようになっているようです

メールアドレス欄では、自動的に英数字入力モードに切り替わり、かなモードへの変換もできないようになっているようです

ok_blue KEN 全角半角自動変換

住所の番地入力は、全角で入力した箇所が後から自動的に半角に変換されるようになっている

住所の番地入力は、全角で入力した箇所が後から自動的に半角に変換されるようになっている

ok_blue KEN リアルタイムアラート

空欄のまま次に進んだり、入力形式に誤りがある場合など、エラーをその場で判定して表示する。

空欄のまま次に進んだり、入力形式に誤りがある場合など、エラーをその場で判定して表示する。

さらなるユーザビリティへの配慮。離脱対策もしっかり実施

さらに、チェックボックスのlabelの導入はもちろんのこと、クリック領域を広げてさらに選択しやすくするなどのユーザビリティへの配慮も見られました。

ok_blue KEN チェックボックス

チェックボックスのラベルはかなりクリック領域を広げ、さらに選択箇所の背景色を変化させて表示している

チェックボックスのラベルはかなりクリック領域を広げ、さらに選択箇所の背景色を変化させて表示している

ok_blue KEN 離脱ブロック

KENには離脱ブロック機能も導入されており、途中離脱対策もバッチリ

KENには離脱ブロック機能も導入されており、途中離脱対策もバッチリ

デジハリは入力中の項目に背景色がつく工夫が

いっぽう、デジハリには住所自動入力以外に、ユーザーの入力を助ける機能は搭載されていないようでしたが、フォーカス中の項目の背景色が変化するようになっており、今どこを入力しているかが一目瞭然となるような工夫がされていました。

ok_blue デジハリ 入力中の項目

フォーカス時の項目は薄い黄色になる。もう少し目立つ変化でも良いかもと個人的には感じました

フォーカス時の項目は薄い黄色になる。もう少し目立つ変化でも良いかもと個人的には感じました

最後に、フォーム改善アドバイス

それでは最後に、恒例の「勝手に」アドバイスを行いたいと思います。

デジハリ

入力支援機能を充実させると、より完了率に好影響を与えられるのではないでしょうか。
特にエラーを瞬時に判定するリアルタイムエラーや、ふりがなを自動入力する機能、離脱ブロックなどが効果的ではないでしょうか。
また、郵便番号入力のハイフン有無などの入力形式の制約を緩くすることで、ユーザビリティアップが期待できます。

縦幅を節約したレイアウトは見事ですが、2カラムのフォームでは項目の見落としが多くなりがちなので、注意したいところです。

KEN

オファーを用意し、ユーザーのフォーム入力をいっそう動機づけできると良いですね。
項目数が多く見えるので、レイアウトの工夫や任意項目の削除などでスクロ-ル少なく送信ボタンまでたどり着けるように工夫すると、もっと良いフォームになると思いました。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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