はてなブックマーク

アクセスの多いサイトでは特に、スパムによるメッセージ送信やアカウント登録を防ぐための対策が欠かせません。 本日はスパム対策の定番「CAPTCHA（キャプチャ）」をはじめとする、さまざまなフォームのスパム対策方法についてまとめてみたいと思います。 ※CAPTCHA（キャプチャ）とは「Completely Automated Public Turing test to tell Computers and Humans Apart」の略で、応答者がコンピュータでないことを確認するために使われる認証技術のこと スパム対策の基本は、「人」ではないとできないこと スパムメールは何らかのツールやプログラムを使って自動的に大量送信されているものです。ですので、当然ながらフォームに訪れているのが人間なのかどうかを判別するための手法がスパム対策であると言えるでしょう。 極端な話、自動的に送れないようにフォー

フォームは基本的には、縦方向の流れで項目が並びますが、時には横方向に、複数列のレイアウトを利用して項目を並べる場合があります。 本日は、そんなフォームにおける複数カラム（＝列）表示について考えてみます。 スペースの有効活用ができる2カラムレイアウト 2カラムや横方向に入力欄を配置することで、フォームで生まれがちな左右の余白を有効活用することができます。 フォームにおいて複数カラム表示や横方向の配置を行うのは、主に下記のようなパターンで用いられることが多いかと思います。 項目の意味合いから横方向に配置する場合 よく見かけるのは姓と名、住所、電話番号、生年月日などのように連続する情報を横方向に配置する方法。 基本的には縦方向の並びで、上記のように部分的に横並びを取り入れるのは、一般的な手法といっても良いでしょう。 なるべくスクロールを少なくするために用いる場合 項目の意味合いとは関係なく、横並

テキストボックスやテキストエリアの中にあらかじめ表示しておくテキストをプレースホルダー（初期表示文言）と呼びます。 このプレースホルダーに入力例などを表示することで、ユーザーが直感的に入力開始できるというほか、 スペースの節約にもなりフォームページ内の要素を美しくスッキリと見せてくれるという効果から、すでにご担当のフォームで活用しているという方も多いのではないでしょうか。 ※プレースホルダー活用のメリットについては、以前の記事で詳しくお伝えしています。 EFOで大切な＜入力例＞の存在と、＜プレースホルダー＞活用のススメ【後編】 https://f-tra.jp/blog/column/2719 しかしこのプレースホルダー、使い方を誤るとフォームのユーザビリティを著しく損なう危険性があります。 上記の記事内でも軽く触れていますが、本日はプレースホルダーを誤った活用方法で用いないための方法を考

※本記事は、タグマネージャーの使い方をお届けするシリーズの第２回目です。 前回の記事（第１回）は下記からお読みいただけますので、ぜひ合わせてご覧ください。 Yahoo!タグマネージャーの使い方・基本編～対象ページのURLが別な場合～ https://f-tra.jp/blog/howto/7360 単純にURLのみを条件に設定できない場合に対応する 前回は、URLを条件にしてページを登録し読み込むタグを分ける設定について説明しました。この方法は、最も一般的な設定方法です。 一般的に、静的なページであれば、＜ページ内容＞と＜URL＞は一対一対応していることが多いと思いますので、この方法で対応できるケースも多いと思います。 しかし、システムが関わる動的なページ遷移の場合は、同じURLだが状態が違い、かつ、読み込みたいタグも状態によって別、という状況もありうると思います。 例えば、当社EEFOツ

あなたのサイトは「ユーザーに求める行動」を何種類持っているでしょうか？ ひとつのサイト内に「見積もり」「資料請求」「お問い合わせ」「会員登録」などといった数種類のコンバージョンポイントが存在する例は少なくありません。 ユーザーに多様な行動の可能性を提示するという点では、一見優れているように見えるこの施策。 実は、ユーザーに特定の行動を促す「CTA（＝Call To Action）」の設計次第では、かえってユーザーを逃す結果になる可能性があるということをご存知でしょうか？ 本日は、複数のアクションを促すウェブサイトのCTAで気をつけたいことについてお伝えしていきたいと思います。 必ずしも選択肢は多いほど良い、というわけではない 私達人間にとって、選択肢が多いこととは一見、幸福に直結することのように思えます。ですが、実際は必ずしもそうとも限りません。 米国の２人の社会心理学者Sheena S.

突然ですが、「美味しいラーメンを食べにいきたい」と考えたときに、あなたはどういった情報にアクセスしてお店選びの意思決定をするでしょうか？ おそらく、お店のHPに書いてあるキャッチコピーよりも、 「行列ができているかどうか」「クチコミサイトで高い評価を得ているかどうか」「その店に行ったことある知り合いのコメント」 等を考慮に入れてどのお店に行くかどうかを検討している、という方が多いのではないでしょうか。 このように、わたしたちはものごとのよしあしを判断するときに、第三者の意見を重要視する傾向があります。 そして、ウェブサイト上で行動を起こすときについても同様のことが言えます。 あなたのページに訪れたユーザーは、そこに一方的に書かれている魅力やメリットだけではその価値を正しく判断することが難しいでしょう。 ソーシャルプルーフを活用する 「ソーシャルプルーフ」という言葉をご存知でしょうか？「ソー

ご担当のサイトでは、むやみやたらにCTAを配置していることはありませんか？ ユーザーに行動を喚起するときはまず、そのアクションの内容が現実的かどうかを念頭に置いて設計することが大切です。 また、同じアクションを喚起するにしても、ユーザーが気軽にアクションを実施できるかどうかの考慮があるかどうかでクリック率、CV率は大きく変わってきます。 本日は喚起するアクションに対してユーザーが感じる心理的ハードルを下げるためには、どういったことを行えば良いかをご紹介してみたいと思います。 ハードルの低いアクションを設計する まずは、喚起するアクションそのものは、ユーザーが気軽に行える範囲の内容であるかをチェックすることからはじめてみましょう。 無料で行えるか アクションが無料か、それとも有料かは、その心理的ハードルを決める大きな要素の一つです。 当然のことながら、多くの場合、有料のアクションをユーザーが

本日は海外記事から、効果的なCTAボタンを作る為の17のポイントについてご紹介します。 取り上げるのは、worldstreamブログより、「17 Best Practices for Crazy-Effective Call-To-Action Buttons」です。より詳しい内容については元記事（英語）をぜひご覧下さい。 効果的なCTAボタンを作る為の17のポイント 紹介されていた全17の方法は下記のとおりです。 アクションを含んだ文言を使用する 色にこだわる 形にこだわる 大きく 文言を長くしすぎない 一人称を使う 緊急性をもたせる ファーストビュー内に配置する ほかのボタンよりも目立たせる ユーザーに価値を提供する文言を使用 ボタンを装飾する ボタンのそばに補足のテキストを配置する EC向け施策：Paypalボタンを配置する 選択肢はなるべく少なく ボタンは自然な位置に配置 余白を確

「数量限定」「今だけ無料」「あと1個」「早い者勝ち」etc…。ついついこんな言葉に惹かれて買い物をしてしまった経験、誰しも一度はおありではないでしょうか。 人は緊急性のある訴求に弱いものです。「機会を逃したくない」「損したくない」という心理が働くのです。 今日はそんな「緊急性」をテーマに、効果的なCTAをつくる方法をご紹介したいと思います。 緊急性とは？ 緊急性とは、ユーザーに急いでアクションしなくてはならない、と感じさせることです。 例えば、ある商品を買おうと決めているユーザーにとって、今日買うのか、それとも明日買うのかを選択するのは自由です。 しかし、購入を明日に先延ばしにした場合、明日の帰り道に通りかかった他のショップでその商品を購入してしまうかもしれません。 もしくは、そのまま購入するのを忘れてしまうかもしれません。 ですので運営者としては、できれば「決めている」ユーザーについては

本日はkeepitusableのブログより「Call to Action Buttons: 5 Psychology tips to increase conversion 」をご紹介します。 この記事では、CTAボタンをつくる際に参考にしたい、5つの側面から見たユーザー心理のヒントが紹介されています。 気になる方は元記事（英語）をご覧になってみてください。 コンバージョンを増やすために知りたいユーザー心理の特徴 具体的には、以下の5種類のユーザー心理について紹介されていました。 色彩心理学 配置の心理 視覚の心理 言葉遣いの心理 感情の心理 色の心理学 ボタンの色は、コンバージョン率に大きな影響を与えます。 このブログでも、フォーム送信の文脈でボタン色の重要性については何度もお伝えしてきました。 ボタンの色は、何色にするべき？～ケーススタディから見る、送信ボタンに最適な色とは～ http

CTAでユーザーに行動を喚起するときには、そのアクションを取ることでユーザー自身にどういったメリットがあるかどうかを提示する必要があります。 本日は、具体的にどのようにメリットをアピールすればよいか、その方向性やフレーズをご紹介したいと思います。 ご紹介するのは、以下18パターンのメリットの提示方法です。これらは大きく5つのタイプに分けることができます。 ユーザーに提示するメリットのパターン一覧 お得さをアピール 無料 トライアル、お試し 割引 送料無料 緊急性を提示する 数量限定 タイムリミット 商品のよさをアピール 心地よさ・便利さ クオリティ 作り手、熟練 オンリーワン ソーシャルプルーフを提示する 人気・話題性 利用状況 満足度 その他定量的メリット 付加サービスをアピール サポート スピーディ プレゼントを提示する プレゼント 抽選 以下、順番に説明していきます。またそれぞれ具体

フォームの成績が 15分で 平均22%アップします。 f-tra EFOを活用すれば、先進企業のEFO（フォーム最適化）の ベスト・プラクティスを今すぐ開始できます。 今すぐ始める

本日は海外記事であるhubspotのブログに掲載された「16 Call-to-Action Formulas That Make People Want to Click」から、CTAボタンの文言として使える16種類のフレーズをご紹介したうえで、それらの特徴やポイントとなりそうな観点についてまとめます。 16種類のフレーズについて詳しくは、元記事から全文をお読み下さい。 ユーザーがクリックしたくなるCTAの決まり文句 ユーザーが思わずクリックしたくなるCTAの常套句として紹介されていたのは、下記の16種類です。（元記事は英語ですので、弊社により翻訳しました。） ○日間無料で試す 今すぐ始める 今日申し込む もっとよく知る 無料登録する 無料トライアルを今すぐ始める 今すぐ私に商品を届ける 今日だけの特典を受け取る 無料で受け取る 今すぐ購読する どのように動くか見てみる 私達と話す （サー

ユーザーはなぜ、フォームの入力を途中でやめてしまうのでしょうか？ EFO（入力フォーム最適化）を考えるにあたり、まずは相手であるユーザーを知ることは非常に大切です。 リアルなユーザーーの声を得るために当社では、全国のインターネットユーザーに対し、入力フォームに関するアンケート調査を行いました。（※2013年調査 有効回答数449人） 以前発表したスライドの中でも少し触れておりますが、 本ブログでは、数回に渡ってそのアンケート結果を詳しくご紹介したいと思います。 まず第１回の今回は、離脱編と題し、フォームから離脱するユーザーの心理に迫りたいと思います。 目次 69%がフォーム途中離脱の経験アリ！ フォーム離脱、その後の行動は？ 途中離脱、その原因は？ベスト５発表 ユーザー心理からの教訓 69%がフォーム途中離脱の経験アリ！ 「ウェブフォームの入力を途中でやめてしまった経験がありますか？」とい

リアルタイムアラート（バリデーション）とは、ユーザーがフォームに入力した内容についてミスがないかを判定し、修正が必要な場合にその場でアラート表示する機能で、EFOに大きな効果をもたらすテクニックのひとつです。すでにご担当のフォームにリアルタイムアラート機能を導入しているという方も多くいらっしゃるかと思います。 その場で修正を促すことで、送信ボタン押下時にエラーがずらりと表示されるあのガッカリ感やイライラ、そしてそのストレスによる離脱までも防止してくれるリアルタイムアラートは、EFOになくてはならないもの。しかし、ただ導入すればいいというわけではなく、使い方を間違えれば、かえってユーザーのストレスを助長してしまう可能性も。 せっかく導入するならば、ぜひ正しく活用していただきたいリアルタイムアラート。今回は導入時に気をつけたいポイントをご紹介したいと思います。 デザインに関するポイント まずは

本日は、人気のウェブサービスやSNSから、シンプルで入力しやすい会員登録フォームを持つサイトをピックアップし、フォームの特徴とともにまとめてみたいと思います。 Naver まず取り上げるのはWEBキュレーションサービス「NAVERまとめ（http://matome.naver.jp/）」を利用する際に必要な「NAVERアカウント」の会員登録フォームです。

本日はUnbounce社のブログ記事「12 Surprising A/B Test Results to Stop You Making Assumptions（和訳：あなたの仮説を覆す驚くべき12のABテスト結果」で紹介されていたABテスト事例のなかから、フォームに関係するものをいくつかピックアップして紹介させていただきます。 とくにランディングページを作る際や、フォームのオファーを検討する際に参考になるのではと思います。 ※以下ABテストの内容は、弊社が作成したイメージ画像を用いて説明します。実際のテストに使われた画面は元記事を参照いただけますと幸いです。 短いコピーVS長いコピー まず紹介するのはコピーの改善によるトライアルフォームのABテスト事例です。 左のバージョンAでは、大見出しで簡潔にコピーが書かれています。対してバージョンBでは、大見出しは短めですが、中見出しに詳しい内容が

入力欄を単一にするか、もしくは複数に分割するかどうかは、フォームを作るうえでの論点のひとつです。 よくあるのは、名前の「姓」と「名」、郵便番号の「上3桁」と「下4桁」。 その他メールアドレスの＠前後、電話番号、住所の都道府県や地名番地、建物名などが代表例です。 結論から言えば、当社ではなるべく入力フォームは分割せず、ひとつの入力欄として統合するべきと考えています。 以下、その理由を紹介したいと思います。 入力項目を統合するべき５つの理由 理由1: 項目が少なく見える ユーザーがフォームにたどり着いた時の印象に関わる部分です。 ぱっと見た際の印象で、ユーザーはそのフォームに入力を開始するか、それとも離脱してしまうかを判断します。 入力欄の数が多いフォームは煩雑そうに見えてしまいます。 トータルの入力量が同じであっても、入力欄が統合されているフォームのほうがシンプルに見えるでしょう。

あなたのフォームは、ライバルに差を付けられていないでしょうか？ EFO（入力フォーム最適化）、すなわちフォームのコンバージョンを増やすための施策を考えるにあたり、 目標値・KPIのひとつとなりうるのは、フォームの入力完了率かと思います。 その指標策定にあたり、大きな判断材料となるのが競合他社です。 同じ業界の同じ種類、となれば、そのフォームがユーザーに要求する情報はある程度似通っています。 しかし、そこで「どの競合も同じくらいの完了率なんでしょ？」とたかをくくってしまうのは早計かもしれません。 今回ご紹介するのは、当社調査によりあきらかになった業界別のフォーム完了率（＝フォームを訪れたユーザーが送信完了した割合）に関するデータ。 以前発表のスライドでも少し触れていますが、５つの業界のフォームについて、 入力完了率の平均値 成績優秀なフォームの完了率 をご紹介していきます。 目次 EC系購入

複数の選択肢から１つを選ばせるフォームの単一選択のコンポーネントには、ラジオボタンとセレクトボタン（プルダウンメニュー）の２種類が存在します。 それぞれにメリット・デメリットがあり、通常選択肢の数に応じて使いわけることが一般的ですが、スマートフォンにおいてはまた状況が異なってきます。 本日の記事では、スマートフォンにおける単一選択フォームコンポーネントのユーザビリティについて考えます。 PCの場合の一般的な使い分け 選択肢の展開、選択、と合計2回のクリックが必要なセレクトボックスに対し、ラジオボタンは選択肢をクリックするのみと手間が少ない一方、 あらかじめ展開しておく必要上、画面領域を大きく要するために、選択肢が多い場合にはフォームを長く、複雑に見せてしまうというデメリットがあります。 ※セレクトボックスとラジオボタンの比較 メリット デメリット 向いている設問

フォーム入力でユーザーに最もストレスを与え、離脱につながるきっかけのひとつであるエラー表示。 このエラー表示時のストレスをいかに軽減させるかがEFOにおいては非常に大きなポイントです。 エラー表示の改善については過去に何度もお伝えしてきましたが、本日の記事ではこれまで取り上げた内容を15のポイントにまとめてお伝えいたします。 フォーム改善の際に、チェックリストのように役立てていただければと思います。 表示について 同じエラーでも、見せ方によってユーザーが受け取るストレスの大きさが左右されます。 まずはどのようにエラー内容を見せるかという側面から7つのポイントをお伝えします。 1. 入力画面上でエラーを表示する 例えば、エラー内容だけを示したページに遷移する方法や、ダイアログ内にエラー内容を表記する方法では、ユーザーがエラー内容を参照しながら修正を行うことができません。エラーが複数ある場合に

本日の「勝手にEFO徹底解剖」では、コスメ・美容の総合サイトである＠cosme（アットコスメ）の会員登録フォームを取り上げます。 ＠cosmeは、化粧品のクチコを中心に商品のランキングや美容に関するブログなどを提供するソーシャルサイトで、2015年8月時点での口コミ数は約1,200万件以上もある日本最大のコスメ系クチコミサイトです。 店頭のコスメ売り場でも「ランキング1位」「殿堂入り」などといった＠cosmeランキングに基づいたレコメンドがあるなど、サイト内での商品の評価はユーザーが化粧品を選ぶ際の大きな指標のひとつとなっているようです。 多くのユーザーを抱える＠cosmeの会員登録フォームにはいったいどのような工夫が隠されているのでしょうか。さっそく徹底分析していきましょう。 ※本記事の内容は2015年8月10日時点の＠cosmeのフォームを分析した内容を記載しています。なお今回ご紹介し

本日はフォーム改善に関する興味深い海外記事をご紹介したいと思います。 econsultancy.comより、「21 first class examples of effective web form design」というタイトルで公開されたエントリーでは、フォームの最適化に関する21のベストプラクティスを他のサイトでの例を紹介しながらまとめています。 21つの事例についてここではタイトルのみ紹介いたします。 明確な説明を用意する パスワード強度のインジケーター インラインのフォームバリデーション メールアドレスの修正機能 モバイルでの簡単な入力 フォームをユーザーに適応させる 小文字への自動変換 モバイルのカード決済画面 カード会社を認識 ポストイット状のデザイン モバイルでの簡単なリピート購入 ステキなデザイン 垂直方向のラベル配置 一般的な質問への対処 明確なオプションの表示 緊急度

本日は、フォームのアクションボタン（次に進む／送信など）をユーザーが迷いなく押下するために重要なメソッドのひとつとして、「ボタンの配置」にフォーカスをあてて考えていきたいと思います。 複数ボタンがあるシーンは多い フォームにおいては「戻る」「キャンセル」のように、ひとつのページに複数のボタンが並んでいるという光景は非常に多く見られます。 このように配置されたボタンは、多くのユーザーにとって押し間違えてしまうリスクが高いでしょう。 もちろん文言を注意深く凝視すれば問題ありませんが、入力～送信の流れを一旦切ってしまうことになり、フォーム完了率を高める観点からはあまり好ましくありません。 できれば入力からのスムーズに流れに乗って送信してもらいたいものです。 また「戻る」ボタンであればまだしも、当然「リセット」や「キャンセル」を誤って押下した場合にそのまま離脱してしまう可能性は非常に高くなると思い

住所の入力は、郵送が必要な資料請求や購入フォームでは必須のフォーム項目です。 しかし、郵便番号、都道府県、市区町村、町域、丁目番地、建物名、号室…などと、入力量のボリュームが比較的大きいために、ユーザーの負担は大きくなりがちです。 本日は、そんな住所入力に関するフォームの改善ポイントについて紹介していきます。（※日本の住所に限って説明します） 郵便番号からの自動入力はもはや必須の機能 住所入力において代表的なEFO機能のひとつが、郵便番号からの住所の自動入力です。 もはや説明不要かもしれませんが、ユーザーが入力した郵便番号のデータから、対応する都道府県や市区町村の値を自動的に割り出し、入力欄へ挿入する機能です。 この機能はいまでは多くのフォームが採用しており、もはやユーザーにとってはついていて当たり前の機能です。必ず導入するようにしたいですね。 ボタンを押す一手間も削減できるとベスト 便利

本日は、エラー画面に関する改善アイデアをご紹介したいと思います。 エラー画面といえば、フォーム入力中のユーザーをイライラさせ離脱に直結させてしまうことから、EFOでは最も注意を払うべき存在のひとつです。 エラー画面でのストレスのひとつ「エラー箇所さがし」 そんなエラー画面でのストレスのひとつに、どこがエラー箇所なのかが直感的にわからないというパターンがあります。 もちろん、下記のように入力項目が少なくファーストビューに収まるフォームであれば、エラーがどこにあるかは一目瞭然です。 しかし、画面内にたくさんの入力項目やコンテンツがあったり、ファーストビュー内にフォーム全体が収まっていない場合では、エラー箇所を漏れ無く発見するのは簡単ではありません。 エラーを漏れ無く発見できなかった場合、修正できないまま再び送信してしまい、ユーザーは何度も同じエラー画面を見せられることとなり、さらにストレスを与

本日のエントリーでは、これまで紹介した会員登録フォームに特化した内容の改善のポイント・方法について、チェックリスト形式にまとめました。 リストは35もあり、かなりボリュームが多くなってしまいましたが、ぜひ会員登録フォームの改善案を検討する際に参考にしていただければと思います。 目次 フォームへの導線 会員登録フォームはサイトのホームページ上に配置する 会員登録の場所をわかりやすくする 会員登録とログインに同じフォームを使用する オファー、補足について アカウント作成のメリットを提示する ソーシャルプルーフを表示 製品やサービスの内容を明確にする 次に何が起こるかを明記する 個人情報の安全性を明記 アカウント削除が可能な旨を表記 スパムメールが送られないことを明記する ソーシャルログインでは、友人にスパムが送られない旨を表記する 項目数、種類、順番 入力項目は最低限に留める フィールドをメー