先週、エフトラEFOのサービスサイトがリニューアルいたしました。
サイトには「無料トライアル」「お問合せ」などのフォームがありますが、
本日のエントリーでは実際にそのフォームページを作った時に工夫した点・気をつけた点をEFOの観点からご紹介したいと思います。
全部で以下の4回に渡ってお伝えする予定です。
- 入力ページ編
- 入力補助機能編
- 確認ページ編
- 完了ページ（サンクスページ）編
今回は第1回の＜入力ページ編＞として、入力ページの制作において気をつけたポイントについてお伝えします。
題材のフォーム
今回取り上げるフォームは、こちら。
エフトラEFOの機能を30日間無料でお試し頂ける無料トライアルフォームです。
それでは、さっそくこのフォームを制作するうえで気をつけた点・ポイントをまとめていきます。
目次
ヘッダー、フッター
今回は、サイト全体のものとは別のページテンプレートを用意しました。
フォームページの大鉄則：不要なリンクを付けないためです。
サイト全体のテンプレート
サイト全体のテンプレートでは、オレンジ色のは破線部分がリンクエリアとなっています。1カラムのシンプルな作りとはいえども、たくさんの離脱リスクがあることがわかります。
フォームのテンプレート
こちらがフォーム用に用意したテンプレート。
ヘッダーのロゴ部分にしかリンクはなく、フッターについては削除しています。
複数カラムのサイトの場合も、フォームだけはこのようにシンプルな１カラムにすると良いです。
オファー画像
フォーム送信のメリットなどをアピールするオファー画像。
エフトラEFOでも、フォームの上部にオファー画像を設置しています。
メリットは簡潔に伝える
メリットをダラダラと長い文章で伝えていても、ほとんどのユーザーは細かいところまで読んでくれません。
できるだけ簡潔にまとめ、見出しを見ただけで概要が把握できるくらいが理想的です。
エフトラEFOのフォームでは、メリットを3点のポイントにまとめました。それぞれ「30日」「1分」「無料」と、内容も極シンプルです。
挿絵やアイコン画像で親しみやすく、わかりやすく
文字だけで伝えるより、挿絵やアイコンがあるとキャッチーで見やすく、わかりやすくなります。
エフトラEFOではそれぞれのメリットを想起させるアイコンを作成してみました。
ぱっと見ただけでもポイント（メリット）が3つあることがおわかりいただけるのではないでしょうか。
フロー画像
フォーム送信前後の流れなどを伝えるフロー画像。
勝手に比較シリーズなど、このブログでもよく話題に上がるEFOの定番ですが
今回エフトラEFOのフォームでは使用しませんでした。
理由としては、以下の通りです。
ユーザーがフォーム送信の流れに戸惑うリスクが低い
- ＜入力⇒確認⇒送信＞と一般的なフォーム送信の流れである
- サイトに訪れるユーザーも、（サービスの性質上）日頃PCを使い慣れている人がほとんど
ファーストビューを優先
- 少しでもファーストビューにフォームの入力エリアを見せておきたい
EFOの定石を踏んでいくことも大切ですが、このように優先度に応じ＜導入しない＞という選択も時には必要です。
フォームパーツ
フォントを少し大きめにし、内側に余白をとって入力しやすくしています。
また、フォーカス時には項目の枠線の色を変え、今自分がどこにいるのかが明確になるようにしています。
※入力補助機能については第2回で詳しくお伝えしようと思います。
必須項目のデザイン
よくある必須項目の目立たせ方として、項目のラベルに＜必須＞というアイコンを付けるやり方ですが、
今回、必須項目が5つに対して任意項目が1つでしたので、必須アイコンをつけるとかなりしつこくなってしまいます。そこでシンプルに任意の項目だけに＜任意＞とアイコンを付けました。
いっぽうで必須項目には背景色を設定し、必須と任意の差は明確に認識できるようになっています。
ボタン
しっかり主張するピンク色でクリック仕損じないサイズのボタンを作成しました。
文言も、「入力内容を確認」と具体的な次のアクションを示す文言にしています。
最後に
いかがだったでしょうか。
本日のエントリでは、エフトラEFOのフォーム作りで実際に気をつけたポイントをご紹介しました。
新しいサイトの立ちあげ時やリニューアル時に、ついついおろそかにしてしまいがちなフォームですが、新規制作時からEFOについて考えたつくりにしておくと、その後の改善がグンとラクになります。
少しでも参考にしていただければ幸いです。
入力補助機能編へ続きます：【EFO実例】エフトラEFOサイトのフォーム制作時に気をつけたこと～入力補助機能編～
