サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
EFO対策（エントリーフォーム最適化）におけるタブーまとめ22選 | ボクシルが運営する法人向けクラウドサービス紹介メディア ボクシルマガジン！
EFO対策（エントリーフォーム最適化）とは？ EFO（Entry Form Optimization）とは、エントリーフォーム最適化（入力フォーム最適化）のこと。 エントリーフォームは、商品購入、資料請求、会員登録、メルマガ登録、問い合わせ、予約…とあらゆる場面で活躍し、今や企業のホームページに欠かせない存在。ただ、「とりあえず必要項目を並べて作った」だけのエントリーフォームは、ユーザーにとって使いにくいものもあります。「ダメエントリーフォーム」では、ユーザーが離脱することも！ そこで、EFO対策を行い、ホームページのエントリーフォーム入力の際にユーザーが感じる負担を減らすことで、コンバージョン率を高めることができるのです。 EFO対策（エントリーフォーム最適化）を行えばCVRは劇的に上がる!? もし、コンバージョン率が上がらない…と悩んでいるなら、一度エントリーフォームを見直してみても
99%のEmailアドレスにマッチする正規表現公開される | ソフトアンテナ
一見Emailアドレスにマッチする正規表現を組み立てるのは簡単そうに思えますが、RFC 5322に厳密に準拠した正規表現を創りだそうとするととんでも無い努力が必要となるようです。 「Email Address Regular Expression That 99.9% Works」は、様々なプログラミング言語ごとに、Emailアドレスに99%マッチする正規表現を掲載したサイトで、例えばPerl 5.10より前のバージョンのPerl用として、掲載されている長大な正規表現を見れば、その難易度の高さを確認することができます。 正規表現にはなんの解説もなくどのような意図をもって作られたのか説明はありません(よって99%マッチするかどうかは本当のところは不明)。ちなみに日本語で読める貴重な情報「Perlメモ」では、「perl5.6.0以前の perl ではメールアドレスの正規表現を正確に記述すること
メールアドレスが微妙に違っていたら「これですか？」って教えてくれるjQueryプラグイン「mailcheck.js」
twitter facebook hatena google pocket メールアドレスが微妙に違うので、ログインできない。 これって離脱率が上がる要因ですよね。 jQueryプラグインのKicksend/mailcheckを利用すると、「もしかしたら・・・これじゃない？」ってのをリコメンドしてくれちゃいます。 sponsors 下記みたいなフォームがあったとします。 <input id="email" name="email" type="text" /> Kicksend/mailcheckからファイルをダウンロードして下記を記述。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.mailcheck.js"></s
APIベースのメール配信システムMailgunを使ってみた
Transactional Email Service & APIs for Developers – Mailgun ランディングページを見ただけで、開発者向けのツールなことが伝わってきます。逆に非エンジニアの人は、すぐに閉じてしまいそうです。 メール配信システムと言っても、メールアドレスのリストを登録して、定期的にお知らせを配信するようなものではなく、アプリケーションのバックエンドで使うような目的で作られているものです。 Mailgunは、2012年のYコンビネータ出身で、クラウド事業者のRackspaceに買収されています。 とりあえずテスト送信 新規登録には、名前とメールアドレスとパスワードが必要です。 この時点ではクレジットカードは必要ありませんが、登録すると利用できるドメイン数が増えるなどの特典があります。 登録が完了すると、まずはテスト送信の仕方の説明画面に移ります。 テスト
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
あなたのサイトは2秒以内？表示速度がフォームコンバージョンに与える影響 | UI改善ブログ by f-tra
インターネット環境の日進月歩の進化により、わたしたちはより快適にウェブページを閲覧することができるようになりました。 しかしその便利さは、裏を返せばユーザーは「読み込みは速くて当たり前」と考えてしまうということ。 サクサクと閲覧できないウェブページにはユーザーはストレスを感じ、ますますせっかちになっています。 そしてこれはフォームのコンバージョンにも影響を与えるであろうことが容易に想像できますね。 今回の記事では、そんなウェブサイトの表示スピードとEFOについて考えていきたいと思います。 サイトのパフォーマンスが購買行動に与える影響 では、実際にユーザーは表示速度が遅いとユーザーはどのくらいストレスを感じているのでしょうか。 Kissmetricsが公開している、ページスピードとEコマースサイトの利用状況の関係を示すインフォグラフィックは非常に興味深い内容となっていますので、そのデータの一
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
selectタグの機能を大幅に向上させる「selectivity」:phpspot開発日誌
Fort.js
入力フォームは「1000×550px」で作る！ 1画面に収めて直帰率を減らす／15か条の3 | 勝手にEFO分析-エントリーフォーム改善