うさぎがEFOを加速させる!

2010年09月13日UP
  • このエントリーをはてなブックマークに追加

今日の主役

うさぎとEFO・・・

似ても似つきません。

私事なのですが、最近(と言いましても2ヶ月ほど前ですが)うさぎを飼い始めました。
これがまた可愛すぎてたまらない。
(ちなみに今日の主役もうちのうさぎです^^)

で、

うさぎを中心に記事が書きたいなと思い書いてみました。

うさぎと言えば、耳の長さが特徴的のかわいい動物です。
EFOと言えば、フォーム送信率をアップさせるWEB上での対策です。

この全く関係のないと思われる『うさぎ』と『EFO』がどのように関わってくるのか・・・

フォーム以外にもEFO!?

EFOと聞くと、エントリーフォーム改善ということを思い浮かべると思いますが、フォーム内だけでなく、フォームを置いているページ内でしたらすべての改善がEFOと呼べると私は考えています。

「遠足は帰るまでが遠足」ならぬ、「EFOはフォームに辿り着くまでもEFO」です!

フォームに辿り着くまでに「余計な文章がフォームまでの間に入っている場合」や、「ユーザーにとって魅力的なリンクが張ってある場合」は、送信ボタンを押されることなく離脱してしまうということがあります。

“フォームページにはフォームのみ”、もしくは“載せても少量のテキスト”
というほうが送信率を考えても最良ですし、また解析もしやすいということで、私はおすすめをしています。

ですが、サイト構成の都合上や販売形式の都合上で、フォームページで説明が必要な場合やリンクを張らなければならない場合もあると思います。

そこでとっても可愛いうさぎクンの登場です。

うさぎはEFOの守り神

フォームを置いているページへ辿り着いたはいいものの、肝心なフォームに辿りつくまでに文章やリンクを張らなければならないようなサイトは、途中でフォームに辿り着かせる工夫が必要になります。

特に、開いてすぐのページトップには注意が必要です。

【お申し込みはこちら】
というリンクをクリックしたのにも関わらず、お申し込みフォームが見える場所に存在しなかったら高確率で離脱してしまいます

ですので、フォームが置いているページを開いてすぐ見える部分にフォームがない場合は、インパクトを与えて下まで進んでもらうよう注意を促す必要があります。

うさぎでナビ

このような感じです。

うさぎは可愛すぎるので、サイトのデザイン・コンセプトによっては使えない可能性がありますが、なんらかのキャラクターや人物を使ってナビゲーションをすると、ただ文章で書くよりもフォームまでたどり着く率が上がるときもあります。

ちなみにこれを文字だけで促した場合はこちら。

文字でナビ

並べて見ると、文字だけの注意はなんだか無機質に感じられませんか?

リアルなお店で店員さんに素っ気ない態度を取られると、そのお店で買いたくなくなりますよね。
それと同じでナビゲーションも無機質でしたら買う気がなくなってしまいます。

文字+キャラクターの画像をページトップに掲載することによりフォームまで辿りつく率はもちろんのこと、送信率もアップさせられる場合もあります。


このことはページトップに限った話ではなく、フォーム内でも通用します。

明日は「フォーム内のキャラクターナビ」ついてお話したいと思います。

では、今日もお読みいただきましてありがとうございました!

追記:
続きの記事はこちらからどうぞ→うさぎがフォーム内でナビゲーション

labelタグの必要性

2010年09月12日UP
  • このエントリーをはてなブックマークに追加

今日は<label>タグの必要性と使い方について話したいと思います。

labelタグは、フォーム制作時にユーザビリティを考える(ということはEFOを考える)上では必須のタグですので、フォーム制作時には必ず記述するようにしましょう。

また、フォームに訪れたユーザーの満足度を向上させる効果もあります。

type="text"の例

まずは使用した場合とそうでない場合の入力欄を御覧ください。

●<label>使用なし

お名前

●<label>使用あり

見た目ではわからないので、項目名(ここでは「お名前」の部分)をクリックしてみてください。

これでおわかりいただけると思いますが、項目名をクリックすることでinput内をフォーカスさせることができます。これがlavelの役割です。

そしてlavelを使用した上記例の記述は以下になります。

label記述 HTMLタグ

  1. <label for="onamae">お名前</label>
  2. <input type="text" id="onamae" name="" />

label for と input id を認識し、どの入力欄にフォーカスさせるかを判別しています。
(ここはどのような文字列でも同じでしたら機能します。)

『onamaeのlavelが付いている場所をクリックすると、id="onamae"にフォーカスする』
このような覚えておくとすぐに思い出せると思います。

type="radio"の例

大半のユーザーは直接入力欄をクリックしますので、上記のような input type が "text" でしたら、送信率にはさほど影響することはありません。

ですが、 type "radio" や "checkbox" の場合は送信率にも影響してきます。

その理由は使用例を見ていただければ一目瞭然です。

●type=radio label使用なし

性別 男性
女性

●type=radio label使用あり

性別

labelを使用することによりマークさせるポイントが大幅に広がりますので、もしちょっとズレた場合にもユーザーに余計なストレスを与えずに済みます。

さらに少し改造して、クリックポイントのポインタの形を変えたり、どこにチェックを付けるのかわかりやすくするためチェック項目を枠線でくくったりしますと、更なるストレス軽減に繋がります。

●type=radio label使用あり 改造版

性別

type="radio" label記述 HTMLタグ

  1. 性別
  2. <p style="border: 1px solid #ccc; padding: 2px 10px;">
  3. <input id="3-1" name="3-1" type="radio" />
  4. <label for="3-1" style="cursor: pointer;"> 男性</label>
  5. </p>
  6. <p style="border: 1px solid #ccc; padding: 2px 10px;">
  7. <input id="3-2" name="3-1" type="radio" />
  8. <label for="3-1" style="cursor: pointer;"> 女性</label>
  9. </p>

※ 改造版のソースコードです。

type=text との違いで注意するところは、全体的な項目名(ここでは「性別」)を<label>で囲むのではなく、チェック項目(ここでは「男性」と「女性」)を<label>で囲むということです。

項目名にlabelを指定してしまうと、性別をクリックすると男性または女性にチェックが入ってしまうことになりますので、チェックが自分とは違う箇所についてしまっては逆にストレスになってしまいます。


余談ですが、<a>タグ、つまりリンクを作るタグも、数文字を指定するのではなく、“範囲”で指定したほうがクリックポイントが広くなりクリックしやすくなるという効果もあります。

クリックポイントはフォームでなくてもWEBサイトでしたら重要な点になりますので、ユーザーの事を考え設定するようにしましょう。

では、今日もお読みいただきましてありがとうございました!

絶対に送信されない/しなくないフォーム

2010年09月11日UP
  • このエントリーをはてなブックマークに追加

ユニークエントリーです。

『〇〇なフォーム』と題して様々なエントリー(入力)フォームをご紹介していきます。

今日は絶対に『送信されない、したくならない入力フォーム(Part1)』です。

ご覧になって、驚き、苦笑していただくのはもちろんのこと、EFOとは真逆のことをやっていますので、これを参考に送信率の高いフォームを目指していただければと思います。

※ すべての画像は、クリックで実際にフォームを観覧することができます。

大きすぎるフォーム

大きすぎるフォーム サムネイル

サムネイル画像では分かりづらいのですが、非常に大きなサイズのフォームです。

「Ctrl+↓」などでサイズを小さくすれば通常サイズのフォームになりますが、開いた瞬間にこんな大きなフォームが表示されては、まず送信されないでしょう。

大きすぎるフォームを見に行ってみる

小さすぎるフォーム

小さすぎるフォーム サムネイル

次は、逆に小さすぎるフォームです。例によってサムネイルでは意味がわかりません。(汗)

大きすぎると同様に「Ctrl+↑」などでサイズを大きくすれば通常サイズのフォームになりますが、まず送信されないでしょう。

小さすぎるフォームを見に行ってみる

項目名がやたらと長いフォーム

項目名が長いフォーム サムネイル

次は、サイズは普通なのですが、項目名が長すぎて何が言いたいのかがよくわからないフォームです。

また途中に意味のわからない英文も含まれています。(笑)

項目名がやたらと長いフォームを見に行ってみる

カラフルなフォーム

カラフルなフォーム サムネイル

一変して色のネタです。

複数の色を使い、なんだか『海外のグミ』を思い出させるようなフォームです。笑

カラフルなフォームを見に行ってみる(目には良い影響を与えませんので注意してください。)


『〇〇なフォーム』は今後も取り上げていこうと思いますので、もしありそうでないフォームや、こんなフォームがあったら笑えるなど、作ってもらいたいエントリーフォームがありましたらコメントを下さい。

では、今日もお読みいただきましてありがとうございました!

ASP型HTMLフォームの利点と注意点

2010年09月10日UP
  • このエントリーをはてなブックマークに追加

※ 前回エントリーの続きです。

フォームシステムは『CGI型(インストール型)』と、『ASP型』が存在するとお伝えしました。

(それぞれのシステム概要については前回エントリー【HTMLフォームの作成方法】を御覧ください。)

今日は「ASP型」の利点と注意点をお話します。

→「CGI型」の利点と注意点はこちらから

ASP型HTMLフォーム利点(メリット)

すぐに簡単に使える

ASP型はサービス提供会社と契約(お申し込み)をすれば、すぐに使用することが可能です。

また、プログラミング知識がなくてもブラウザ上(IE等)で簡単に設定して使用することも可能です。

管理がいらない

さらに、サービス会社のサーバ内で運用されるシステムですので、サイト運営者がシステムの管理をする必要がありません。
使用しているとき、もしトラブルが起きた場合はサービス提供会社に連絡しますと大抵の場合は改善されます。

これにより、わからない問題のために時間を割く必要がなくなります。

セキュリティの心配がいらない

フォームシステムを提供しているASPは、ほぼ例外なくSSLサーバを使用しています。

利用者側でSSLを導入する必要がありません。

ASP型HTMLフォーム問題点(デメリット)

月々の料金がかかってしまう

継続して利用する場合、会社や機能にもよりますが、月3,000円前後のコストがかかってしまいます。

CGI型はシステムを購入してしまえば永久無料で使用できますので、それに比べると少しの痛手になります。

といいしても、セキュリティを考えるとCGI型は別でSSLを申込む必要がありますので、フォーム使用という全体的なコストを考えるとASPのほうが安くなります。

融通がきかない

ASPのフォームシステムはある程度決まっていて、ユーザー一人が「この機能が欲しい!」と意見しても対応してくれるわけがありません。

申し込んだときは納得のいく機能でも、使えば使うほど必要な機能が増えていきますので、そうなったときに、かゆいところには手が届きません。

信用がない

ASP側のサーバ・ドメインで使用することになりますので、フォームページに移動するとドメインが変わってしまいます。

これは信用がなくなり、フォーム送信率がダウンする原因になります。

また、フォームをHTMLへ埋め込みができるASPもありますが、フォームページがサイト運営者側のドメインになるということは、ページ自体がSSL認証されていないページになりますので、この場合も信用度は下がります。

参考:SSLが導入されたページのIE8でのアドレスバー↓

27

※ SSLでないサイトのアドレスバーは緑ではなく白になります。
現在ブラウザ上部に表示されているとおりですのでご確認ください。


私の結論は、今のネットは口コミや信用が第一ですので、最終的にはCGI型を使用することをおすすめします。

(初めはコストをかけたくないという方は、ASPを使用したのち、利益になると確信、利益になる構造を構築できたらCGIに移行するのもいいと思います。)

集客・フォームまでのナビゲーションがしっかり出来ているのでしたら、CGI型のほうが確実に売上が上がります。
自分/自社で運営するのが困難でしたら、(費用対効果を考え)WEB会社に依頼してでもCGIを導入することをおすすめします。

では、今日もお読みいただきましてありがとうございました!

CGI型HTMLフォームの利点と注意点

2010年09月09日UP
  • このエントリーをはてなブックマークに追加

※ 前回エントリーの続きです。

フォームシステムは『CGI型(インストール型)』と、『ASP型』が存在するとお伝えしました。

(それぞれのシステム概要については前回エントリー【HTMLフォームの作成方法】を御覧ください。)

今日は「CGI型」の利点と注意点をお話します。

CGI型HTMLフォーム利点(メリット)

一度購入するとコストがかからない

やはりこれが一番の利点かと思われます。とにかく安いです。

CGI型は買切りシステムですので月額費用が一切かかりません。

また、システムによっては数千円で手に入るものもあります。(機能は別です。)

信用がある

自分の(レンタル)サーバに置けるということは、同ドメイン内で管理できるということで、フォームページURLもトップページと変わることがありません。

これにより、フォームの信用度を増すことが出来ます。

自由度が高い

多少のプログラミング技術が必要になる場合もありますが、決められている制約がほぼありませんので、自由に使うことが出来ます。
(例えば、項目の数やHTMLへの埋め込み等)

コピーが早い

CGI型はシステムファイルの集まりですので、複数のフォームに設置する場合に同じシステムを使用するのであれば、簡単にコピーすることができます。

パソコンを使用していれば一度はフォルダをコピーしたことがあると思うのですが、それと同じ要領で同システムを使用することが出来ます。

プログラミング技術が学べる

これは利点かどうかはわからないのですが・・・

HTMLやCSSもそうですが、プログラミングは一から本などで学ぶよりも、完成しているシステムを使用し、編集しながら学習していくするほうが覚える速度が格段に早いです。

CGIを学ぶと大抵のWEBシステムは作ることが出来ますので、覚えるとあなたが使いたい、時間短縮できる自動システムを自由に作ることが出来ます。

CGI型HTMLフォーム問題点(デメリット)

実際に使用するまでが少し大変

言えば、家電で言うテレビやパソコンなどと同じ「製品」ですので、購入後は自分で設置する必要があります。

CGIというなんとも機械的な名前ですから、初めて見たかたには、ごちゃごちゃとした英字や記号の羅列で書かれています。

しかし、ほとんどの場合、設置説明書が付いていますので、初めてでも1日・2日で設置できると思いますが、やはり慣れていないプログラミング言語を相手にするのは疲れる作業です。

問題を自分で解決する必要がある

何度も言いますが、管理はすべて運営者側ですので、送信できない等、何らかのトラブルがあった場合もすべて運営者が解決する必要があります。

SSLサーバを運営者側で用意する必要がある

SSLとは「インターネット上で情報を送受信する際に、暗号化して送受信する方法」で、個人情報を送信させるフォームなどでは必須です。

これが一番の問題点です。

今までにフォームを設置したことない方や、価格でCGI型を選んでしまう方が陥りやすいのですが、前エントリーでご説明したようにCGIは運営者側のサーバに置くシステムです。
ですので、SSLサーバも運営者が用意しなければ送受信の情報が暗号化されません。

ちなみに日本での主流ブラウザIE(Internet Explorer)で、SSL認証がされていないサーバへ情報送信を試みますと派手な警告が表示されます。↓

250

この警告により送信率も大幅にダウンしてしまいますので、ユーザーのためを考えても、運営者側の利点を考えても、SSLは必ず導入する必要があります。


CGI型のメリット・デメリットについてはこのような感じです。

私の総評は以下のとおりです。

製品自体の価格は安いので一見 得なように見えるが、別でSSLを導入する必要があり、コスト的にはASPと大差はない。
また、多少のプログラミング技術が必要になり、習得できたら一生の財産になるが、慣れるまでは、CGIの設置やトラブルの際に時間がかかってしまう。

このように思います。

次回はASP型についての説明をしますので、比較してみてください。

では、今日もお読みいただきましてありがとうございました!

HTMLフォームの作成方法

2010年09月08日UP
  • このエントリーをはてなブックマークに追加

今日は原点に戻り、HTMLフォームの作り方についてご紹介します。
(EFOを求めてご訪問いただいた方には今回のエントリーはつまらない話になってしまうかも知れません。汗)

今からHTMLフォームのご用意を考えている方は参考にしていただければと思います。


まず初めに重要なことをひとつお伝えします。
HTMLファイルだけではフォームを作ることは出来ません。

・・・これだけですと誤解される方がいるかも知れませんので正確に言いますと、HTMLファイルを制作することによりブラウザでの見た目だけは表現できるのですが、

「入力した内容をあなたのアドレスに送信する」

とか、

「自動返信メールをユーザー側に送信する」

といった処理をさせることができません。

フォームに入力された情報をメールとして送信するには、HTMLとは別のシステムが必要になります。

HTMLフォームを機能させるために必要な3点セット

・<form>要素を使い、ブラウザでの見た目を作るHTMLファイル
・そのHTMLをアップロードするサーバ
・さらに入力内容を送信するフォームシステム

“あなたの今思い描いているHTMLフォーム”を制作するには、最低でもこの3つが必要になります。

きっと当ページをご覧になっている時点で、HTMLを置くサーバは既に用意できていると思いますので、その他の、1番目「見た目のHTMLファイル」と、3番目「フォームシステム」が必要になります。

最近ではフォームシステムを契約・購入するとサンプルHTMLが自動で制作されますので、HTMLの制作も必要です。
※ EFOを考慮しているかは別です。

一番問題になり悩む部分は『フォームシステムの用意』です。

ここではその悩みどころのフォームシステムについての説明をします。

2種類存在するフォームシステム

フォームシステムは大きく分けて2種類存在します。

・自サーバや契約しているレンタルサーバに自分でアップロード・設定するタイプ

・フォームシステム自体を提供しているサービスを契約するタイプ

この2種類です。

WEB上では、前者が『CGI型(インストール型)』、後者が『ASP型』などと呼ばれています。

それぞれの利点と注意をご説明する前に、どのような仕組みになっているのかを、上記2タイプに分けて特徴をご紹介します。

フォームシステムCGIタイプ

(いつ・どこからこのような名前が付けられたのかはわかりませんが、)
CGI型とは、文字通りCGIプログラム(拡張子.cgi)で作られたフォームシステムということです。

CGIとは、Common Gateway Interface (コモン・ゲートウェイ・インタフェース)の略で、ウェブサーバ上でユーザプログラムを動作させるための仕組みです。

引用:wikipedia

と、このようなややこしい話は覚えなくても大丈夫です。

肝心な特徴としては、フォームシステムを今お使いのサーバに格納するタイプということです。

ざっくり言いますと、あなたが今運営しているサイトの中にフォームシステムを丸ごと置いて運営することになります。

つまり、アップロードやセッティングもあなたが行うことになります。

システム使用のイメージはこのような感じです。

CGIフォームシステム使用イメージ

フォームシステムASPタイプ

これも文字通り、ASP(Application Service Provider:アプリケーションサービスプロバイダ)を使用したフォームシステムということです。

特徴としては、 フォームシステムがサービス会社のサーバ上に格納してあるタイプです。

これまたざっくり言いますと、あなたが今運営しているサイトの中には何も置く必要がなく、HTMLの記述だけで使用することができます。

システム使用のイメージはこのような感じです。

ASPフォームシステム使用イメージ

2つの大きな違いとしては、フォームシステムをどのサーバで運営するかということです。

CGI型は自分(レンタル)のサーバー、ASP型は人(サービス提供会社)のサーバにフォームシステムが置いてあるということになります。

それではどちらの方があなたにとってプラスになるシステムなのか!?

次回はCGIタイプの利点と注意点を詳しくご紹介します。


最後に・・・

もし、自作でフォームシステムを作ろうと考えていた方は、プログラミング(PerlやRuby等)の技術が必要になってきますので、ここではあまりおすすめできません。

これには相当な時間がかかってしまうと予想されますので、現時点では既にフォームシステムが完成している、『ASPの契約』もしくは『CGI購入』をご検討することをおすすめします。

では、今日もお読みいただきましてありがとうございました!