ホームページの成果を最大限に引き上げるEFOの技術ポイント

ホームページの見直しえをしたいと考えたときに、どんなポイントで修正するのがいいでしょう？

・デザインをかっこよくする？ ・写真素材などを、一新する？ ・お知らせやニュースなどで最新情報を掲載する？

これらは、流入をアップさせるための施策なので、 SEOと共に、トップページや商品ページなどから、離脱を防ぐ施策です。 多くの会社が、すでにホームページを作っているのですが、 そのホームページからの成約率が少ないと嘆いています。 そして、成約率をアップするために、一体何をすればいいのかがわかっていないという事も事実です。 そんな人は、手軽にできて、効率のいいEFOがオススメです。 「ホームページ最後の砦」と言われる、入寮フォーム、お申し込みフォームなどでの離脱を 極限まで減らすことができる = 成約率がアップする これを実現させるのがEFOと言われる、入力フォームサポートです。 すでにSEO対策をしている人で安心しているのではなく、次に行うのはEFOであるということは間違いありません。 今回の記事を読んで、EFOを熟知して、ホームページを最大限に活用する組織にしてみてはいかがですか？ ちなみに、SEOという言葉すらわからない人は、今回の記事は、オーバースペックなので、 Webマーケティングについて、学習をしてからお読みいただくことをオススメします。

EFOについて

Entry Form Optimization（入力フォームの最適化） これを略してEFOと言います。 実は、自分は、日本で最初にEFOというサービスを世の中で作ったエンジニアでもあります。 とある会社で、お客様からヒントを受け、EFOを製品化して、その会社を上場企業に導いた実績をもとに、 その会社での研究開発も含め、EFOとはなんたるものか？という事を10年近く経験と実績を積んだ内容について、 ブログにまとめておきたくなったので、 技術者、マーケター、経営者、ホームページ管理者、Web制作者... このような人は、お作法として知っておくべきEFOについて、まとめておきたいと思います。

有料サービスのEFO

EFOというキーワードで検索すると、多くの会社の有料サービスでのEFOがヒットします。 ホームページをすでに構築してある会社が、今よりも売り上げを上げたり、お問い合わせ件数などを増やすことで、 自社の業績アップを短期間で目指したいのであれば、こういうサービスを利用するのは悪くありません。 しかし、エンジニアであれば、そんなサービスを使わなくても、自力でEFOを設置することもできます。 一つだけ有料サービスでメリットがあるとすれば、 入力フォームでのユーザー操作のロギング機能ですね。 これは、個人で作るとなると、なかなか難しい領域でもあるので、GAでの計測や それなりのログ収集ツールを使うことで、ある程度のログは収集できますが、 ・ページ跨ぎによる、離脱分析 ・コンバージョン率向上の効果原因 ・離脱ユーザーによるエラーの特定箇所 こうしたログは、有料製品の得意分野でもあるので、「分析をしたい」という要望の場合は、短期間で利用してみるのもいいでしょう。

EFOの機能について

ここで、EFOって一体どんな機能があるのか、一覧で書き出してみたいと思います。

1. 入力内容のバリデーションチェック
2. 入力エラー時の表示機能
3. 送信完了までの残り項目数の算出
4. 郵便番号から住所を自動入力する機能
5. 文字属性（半角や全角など）の自動調整
6. 未入力状態で送信ボタンが押せないようにするブロック機能
7. 条件分岐が発生する入力必須制御
8. 登録完了しているユーザーの判別（重複登録防止）
9. サイト内の特定ページを経由している等の判定（あしあと機能）
10. 各種ロギング機能

結構たくさんあって、これを全部構築するのはまあまあ、骨の折れる作業だと思いますが、 これらを全てプログラミングする必要はありません。 OSSサービスや、すでにCSSで手軽に実現可能なものもいくつかあります。 あと重要なのは、業種や職種によって、必要となる機能も違ってくるし、不要な機能というもの存在します。 機能の内容を熟知して、自分の会社や組織のホームページには何が必要なのかを考えてみるきっかけにしてもらえれば幸いです。

1. 入力内容のバリデーションチェック

間違った文字をチェックする機能です。 金融サイトなどに多い、全角数値や、ひらがな、カタカナなどを厳密に判定することで、ユーザーの入力エラーをシステム側が認識します。 エラーをユーザーにいち早く知らせることで、ユーザーが入力し直すことを促すことで、離脱が格段に減ります。 記号の入力や、無駄な半角スペースが入った場合など、 想定していないエラーで、ユーザーが入力できないと思って離脱してしまうことほど、もったいない機能損失はありません。 ホームページの設置で獲得できた売上が水の泡になってしまいますからね。 ちなみに、これはStyleSheet(CSS)で、ほぼ対応できます。

2. 入力エラー時の表示機能

入力エラーを最も効率的に、ユーザーに伝えるのは、 ルールチップかモーダル表示です。 漫画的な吹き出しで表示するのも悪くないでしょう。 これらは、ユーザーのエラーを検知したリアルタイムなタイミングで表示するのが最もこいう率的で、 入力が全て終わった段階や、送信ボタンを押した次のページで表示したら、確実に離脱につながります。 でも、入力しているそのタイミングで、その箇所で、間違いを指摘してくれるとユーザーは離脱せずに、その場で修正してくれます。 このリアルタイム性こそが、EFOで最も重要なポイントと言ってもいいでしょう。 この表示も、CSSで行うことがオススメです。

3. 送信完了までの残り項目数の算出

入力をするユーザーは、できる限り入力は早く終えたいと考えています。 入力項目を1つでも減らすという企業努力は、裏の会議で存分にしてもらうとして、 実際の入力するユーザーは、 「一体あと何個の項目に入力をすればいいの？」 というのが、心の中で発せられています。 そんな時に、「あと⚪︎個入力してください」 とゴールの数値が目で見えているだけで（またはプログレスバーなど）、 入力をやめないユーザーは意外とたくさんいます。 残念なページとしては、送信ボタンを押したら、また大量の入力フォームが存在しているうんざり感は、 ユーザーのモチベーションという心をへし折ります。 「入力完了まで、あと⚪︎分」とかで、モチベーションが折れない仕組みを作るのはサイトの特性を考えて、 色々とアイデアを出すポイントでもあります。

4. 郵便番号から住所を自動入力する機能

郵便番号から住所を自動入力させる仕組みは意外と簡単に作れます。 まず、郵便局サイトからダウンロードできる、 全国の郵便番号リストと、 事業所（会社）の郵便番号リストを 利用することで、サーバーAPIを作り、Javascriptなどで、fetchして、対象の郵便番号から住所を取得することができます。 ※以下のサイトでダウンロードができます。 郵便局でーたのダウンロードページ ただし、このデータは、1ヶ月ごとに更新されているため、郵便番号と住所データを更新する処理が必要になります。 そうした更新の手間を考えると、OSSでのサービスを利用することで、無料で郵便番号からの住所入力機能が導入できます。 YubinBango 興味のある人は全国の住所データを見てもらえると、京都や北海道など、他の都道府県と違った住所がたくさんあって、 何かしらの地方ルールがあるという事も読み取れます。

5. 文字属性（半角や全角など）の自動調整

パソコンで入力できる機能は、キーボードに印字されているだけと思っていたら、大間違いです。 たとえば、ハイフンって、半角と全角ぐらいだと思っている人は、次のブログを読んでみてください。 「ハイフン」って言ってもたくさん種類があるんだよ ハイフンと似た形状も含めて、なんと9種類もの横棒の形状が存在します。 きっとユーザーは、どれを入れても同じと考えるはずなので、こうした文字コードに応じて記号の扱いを厳密（または、見た目重視）にする会社ルールを設ける必要があります。 もちろん、登録後にデータベースに登録する文字種別にも依存してくるので、システムと相談して決めることになります。 ただ、これもCSSでの判別はほぼできてしまうので、正規表現などを突き詰めて学習することで、自作対応可能になるでしょう。

6. 未入力状態で送信ボタンが押せないようにするブロック機能

ページ内に、1つでも入力エラーが存在している場合、送信ボタンを押さないようにしたほうがいいです。 ハッキリ言って、送信ボタンを押して、次のページで、真っ赤なエラー文字が表示されているのをみたユーザーは、99%ぐらい離脱します。 この画面を見せないようにするのが、EFOの仕事と言っても過言ではありません。 入力ページは、「ホームページの制約完了の最後の砦」です。 ここでの離脱は本当に勿体無いんですよ。 なので、送信ボタンは、エラーが無い時以外は非表示にして、 「まだ入力が完了していない」というメッセージを表示（ボタンと入れ替えが望ましい）するのがいいでしょう。

7. 条件分岐が発生する入力必須制御

クレジットカード決済なのか、 銀行振り込みなのか・・・ こうした、入力分岐は、入力ページでは、意外と多くあります。 その場合、それぞれの分岐先によって、必須項目が変わりますよね？ クレカを選択したら、クレカ番号が必須になり、 銀行振込を選択したら、振り込みメモに書いてもらうユーザーIDなどが必須になります。 これは、CSSだけで判断させる方法もありますが、Jaavascriptで判定したほうが確実だと思います。 EFOを導入するサイトのルールをちゃんと理解して、必須ルールをちゃんと設計して、 送信後のサーバー処理のバリデーションと合わせることが重要とも言えるので、エンジニアリング領域でもありますね。

8. 登録完了しているユーザーの判別（重複登録防止）

Webマーケティングでは、PV (Page View)とUU (Unique User)を明確に判別して計算します。 送信するページにもよりますが、 「おひとり様１回のみ送信可能」 のような、キャンペーンサイトにおいて、すでに登録されたユーザーを判別することはCookieを使って行うのがセオリーです。 でも、EFOとして、こうしたUU判定で（ユーザー別の登録回数）を取得できる仕組みがあると、少しぐらい複雑なキャンペーンルールでも対応できるようになります。 過度なルールは、売り上げダウンにつながりますが、軽度なルールはあって然るべきかもしれません。 インターネットリテラシーを警告して、悪質ユーザーを排除するのもEFOで対応できる範囲だと思いますね。

9. サイト内の特定ページを経由している等の判定（あしあと機能）

Aの商品と、Bの商品を両方みてから、Aの商品を購入している人に、 「Cの商品もあるよ」というお知らせを出してあげることも、ユーザーにとっての利益につながります。 「結局サイトで何を買ってくれてもいい」というスタンスの売り手であれば、そんな無駄なことは考えないけど、 客の視点に立つと、「自分が買った後、後悔することを防いでくれた」という感謝につながり、 優良顧客や、リピーターにつながることも考えられます。 正直この機能はEFOという機能よりは、LPOという、手前ページでの機能とも言えるのですが、 EFOにあっても全然いい機能だと考えています。 商品購入以外であっても、どのページを経由してコンバージョンしてくれたのかを知ることで、 手前ページの評価をすることも可能になります。 こうした機能は「あしあと機能」と言われて、ページ遷移履歴を保持して、それをコンバージョン時に、時系列で判別する まあまあ高度なテクニックが必要な機能でもあります。 広告業界や、フロント系のマーケティング業界のエンジニアなら熟知している人も多いですが、EFOでこれを使って、成果を上げるという思考になっているエンジニアはまだまだ少ないようです。 そう考えると、会社の売り上げアップの施策は未知数と言ってもいいかもしれませんね。

10. 各種ロギング機能

サーバーエンジニアであれば、「ログは大事」だと言い切りますが、 フロントや、Wordpressを利用する程度のWebエンジニアは、ログの重要性を理解していないケースが多いようです。 EFOでのログは、

・入力ログ（成功したか失敗したか） ・入力にかかった時間（１項目ごと） ・どんなエラーが表示されたかという内容 ・ユーザー毎の、ページ遷移

必須な項目は上位のような感じです。 これらのログを元に、入力フォームの改善に繋げるPDCAができると、 どんどんWebからの売り上げアップにつながる運用ができるようになるでしょう。

あとがき

EFOは、実は、ユーザーの個人情報を一切取得しないというのが、有料サービスの特徴です。 もちろん、こうした概念を知らないと、ユーザーのパスワードなどを平気で平文で、サーバー問い合わせしてバリデーションチェックをしてしまったりするエンジニアが出てきてしまいます。 ユーザーの個人情報は、ページから一切出さないというのを、技術ポイントとしてちゃんと理解しておきあないと、とんでもないセキュリティ漏洩して、しっぺ返しを喰らってしまうことになりますからね。 郵便番号は、住所検索で仕方がない外部API連動ですが、これもhpptsセキュリティや、その他いくつかの暗号化などで対応できる方法もあるので、 それはエンジニアの技術レベルに合わせて行うことをオススメします。 とりあえず、EFOの概要と簡単な技術ポイントをブログに書いてみましたが、引き続きこうした情報はブログで掲載していこうと思います。 また、もっと話が聞きたいという会社のWeb担当者の方は、お気軽にお問い合わせくださいませ。 無料で壁打ちすることもできますよ。