【改善実例】フォーム改善、実際にやってみました[Vol.1]～現状分析編～

本エントリーを含む、数回のシリーズにて、実際にフォームを改善しながらフォーム最適化の手順をお伝えしていきたいと思います。

題材とするのは弊社（株式会社エフ・コード）のコーポレートサイト（http://f-code.co.jp）のお問合せフォームです。

このフォームの役割は、弊社のサービスについて興味をもったお客様に、お問合せをしていただくこと。
EFOツールを開発・販売する当社ですが、現在、フォームに「エフトラEFO」は導入されているものの、
コーポレートサイトのこのフォームは4～5年間前のサイトリニューアル以来、なかなか大きく手を加えられずにいるのが現状です。

今回、「フォーム改善を謳う企業のフォームが使いにくい」という矛盾を打破するためにも（笑）、このシリーズを通して改善を進めていきたいと思います。

まずは現状分析を行います。

フォームの改善を行う際。まずは「現状分析」を行なっていきます。

現状分析とは、その名の通りフォームの現在の状態を把握することです。
解析ツールなどを活用して、フォームに関する客観的なデータを取得してきます。

具体的には、フォーム送信のステップに応じてフォームの成績を計測・分析し、問題点を洗い出していきます

現状分析については過去記事でも詳しく触れていますので、そちらを参考にしてみてください。
フォーム完了率を最短距離で最大化する【現状分析】の手法

解析からわかったこと

今回、当該フォームには「エフトラEFO」が導入されているため、そのレポート機能を使ってフォームの解析を実施しました。
そこから、判明したことは、確認画面およびエラー画面がこのフォームの最大の課題であること。ここからユーザーの多くが離脱しているようです。

フォーム送信の各ステップにおいての傾向は以下の通りでした。

フォーム直帰率は、一般的な数値

フォーム到達ユーザーが入力を開始することなくフォームを離脱した数は、良くも悪くもない平均的な数値でした。

入力途中離脱は少なめ

エフトラEFOの入力支援機能が導入されているためか、いったん入力をはじめた人が離脱する割合はわずかでした。

確認ページの離脱率が非常に高い

なんと確認ページに進んだユーザーの多くが、具体的には半分を越える割合が離脱している結果に。
ただし、エラーページのURLが同じであるため、この数もカウントされています。
いずれにせよ、エラー画面および確認画面から大量のユーザーを逃してしまっているようです。

15カ条と照らし合わせる

確認＆エラーページに課題あり、ということで、そこを中心に改善を行なっていくことになるとは思いますが、
念のため、「エントリーフォーム最適化15カ条」と照らし合わせてほかに改善すべきポイントがないかをチェックしていきます。

「エントリーフォーム最適化15カ条」については、Web担当者Forumの連載などで紹介しているものと同じで下記の通りです。

• 【第1条】1つ目の項目は、入力しやすい項目にすべし
• 【第2条】何のためのフォームかを伝えるべし
• 【第3条】ファーストビューに収めるべし
• 【第4条】入力例や入力形式を明記すべし
• 【第5条】入力に達成感を感じてもらうべし
• 【第6条】最低限どの項目に入力すれば良いかを伝えるべし
• 【第7条】入力エラーをリアルタイムで伝えるべし
• 【第8条】エラー画面をわかりやすくすべし
• 【第9条】離脱要因となる不要なリンクを減らすべし
• 【第10条】離脱ブロックを導入すべし
• 【第11条】クリアボタン、キャンセルボタンはなくすべし
• 【第12条】入力の手間を減らすべし
• 【第13条】他のCV（コンバージョン）手段があれば伝えるべし
• 【第14条】送信完了の勘違いをなくすべし
• 【第15条】送信ボタンは大きく、具体的な文言にすべし

これら15カ条のうち、達成できている条件とそうでないものにわけてみました。

達成できていた条件

【第1条】1つ目の項目は、入力しやすい項目にすべし

フォームの最初の項目はチェック形式の選択項目なので、ハードルは低めです。

【第4条】入力例や入力形式を明記すべし

しっかりと入力例がプレースホルダーで記載されています。

【第5条】入力に達成感を感じてもらうべし

必須項目を入力すると、背景のピンク色が消える変化があり、達成感を感じることができます。

【第6条】最低限どの項目に入力すれば良いかを伝えるべし

必須と任意はそれぞれテキストを表記したアイコンで、はっきり明示されています。

【第7条】入力エラーをリアルタイムで伝えるべし

エフトラEFOのリアルタイムアラートが作動し、入力形式にミスがある場合アラートが発動します。

【第8条】エラー画面をわかりやすくすべし

今回課題があるとされるエラー画面ですが、一応、該当の箇所に目立つ表記でエラーが出ています。
さほど不親切なわけではないようですが…

【第11条】クリアボタン、キャンセルボタンはなくすべし

一応、キャンセルやクリアのボタンはなく、一度入力された項目の値は保持するようになっています。

【第12条】入力の手間を減らすべし

今回、住所やふりがななどの項目がないため、自動入力の機能については必要ない印象でした。また、名前の姓と名なども統一されています。

エフトラEFOの基本の入力支援機能が導入されているため、15カ条のうちの半分以上の条件を達成していました。
これらが功を奏して、入力途中離脱が少ないのかもしれません。

達成できていない・課題が残る条件

反対に、達成できていない条件は以下のとおりでした。

【第2条】何のためのフォームかを伝えるべし

「お問合せフォーム」との表記があるのみで、ユーザーに何をすればいいのか何の記載もありません。

【第3条】ファーストビューに収めるべし

ファーストビューにすべてをいれこむことは難しいですが、大きなページ共通のヘッダーがあり、貴重なファーストビューの領域を占領してしまっています。

【第9条】離脱要因となる不要なリンクを減らすべし

ヘッダーやサイドバー、フッターなどにページ共通のリンクがたくさん存在しています。

【第10条】離脱ブロックを導入すべし
今回2014年7月31日時点では、フォームには離脱ブロックが導入されていませんでした。

【第13条】他のCV（コンバージョン）手段があれば伝えるべし

ヘッダーやフッターに電話番号の記載がるものの、フォームのなかにも電話で問合せのフォーム送信が代替できるという明確な記載があると親切でしょう。

【第14条】送信完了の勘違いをなくすべし

確認ページにも何の説明もなく、同じデザインのページに入力内容が機械的に表示されるのみ。スクロールしなければボタンも見えず。離脱ブロックも導入されていません。

【第15条】送信ボタンは大きく、具体的な文言にすべし

文言こそ具体的になっているものも、クリックするにはサイズが小さすぎるうえ、右に配置されることの多い送信ボタンが左側に配置されており、非常に紛らわしい

次回へと続きます

いかがだったでしょうか。
今回はフォーム改善の題材の紹介と、客観的な現状分析を進めてみました。
現状を客観的に分析してみるだけでも、課題が浮き彫りになってきますね。

次回からはいよいよ具体的な問題解析・改善検討に進んでいきますので、お楽しみに。

続きはこちら：【改善実例】フォーム改善、実際にやってみました[Vol.2]～問題解析編～【改善実例】フォーム改善、実際にやってみました[Vol.2]～問題解析編～