クオートワークスのブログ 東京のWeb制作会社 株式会社クオートワークスのブログです。ここではWeb制作におけるノウハウやナレッジ、ビジネスに関する覚書などまとめて発信しております。 「お問い合わせ数が一向に増えない。。。」 「お問い合わせフォームまで到達しているのに、離脱されてしまう。。。」 「お問い合わせフォームの入力内容に不備が多い。。。」 このような悩みはありませんか？ Webサイトの運営を行う中で、よく直面する問題かと思います。 しかし、これらの問題の多くはフォームの最適化（EFO：Entry Form Optimization）によって改善することができます！ この記事では、フォームの離脱を少しでも減らしコンバージョンを増やすために気をつけるべきことと、具体的な改善方法を12個でまとめました。 1. 入力項目数は最小限にする フォーム設計でよく見られる課題は、不必要に入力項目が
ペースト出来ないID/パスワード欄 4つに分割されてるクレジットカード番号入力欄 入力した後で記号は使えませんとか言ってくるパスワード欄 あと一つは？
日付入力欄は、適切なデザインパターンを利用して、あいまいさのない、タスク達成に役立つものにしなければならない。小さなデザイン変更で、大きなユーザーエラーが防げる可能性もあるのだ。 Date-Input Form Fields: UX Design Guidelines by Angie Li on January 22, 2017 日本語版2017年4月24日公開 日付入力欄の書式設定など、ささいなことだと思うかもしれない。しかし、書式の実装が不適切だと、ちょっとしたインタラクションによって、入力のプロセスが立ち往生してしまうこともある。日付入力に関するデザインが良くないと、ユーザーが悩んだり、イライラすることになり、その入力フォームを全面的に断念してしまうというリスクがあるからだ。それどころか、ユーザーが間違った日付を指定してしまって、取引自体が悲惨なことになってしまう可能性もある。たと
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
モバイルフォームのボタンをどこに置くかは、ユーザーのタスクの完了と効率に影響します。もしボタンがユーザーが予期するところに置かれていなければ、ユーザーはタスクを放棄し、フォームから離れてしまうかもしれません。 ボタンを探すのに余計に数秒かかっただけでも、ユーザーはイライラし、戻るボタンを押すことがあります。そのため、フォームの入力を完了したら、ボタンはユーザーの目の前に表れるべきです。 多くのモバイルサイトは、この点を間違っており、フォームボタンをアクションバー（つまりナビゲーションバー）に置いています。調査によると、ユーザーはしばしばアクションバーに置いてある送信ボタンを見逃してしまいます（出典）。また、アクションバーにある保存ボタンも見逃し、設定を保存しないままフォームを離れてしまいます。 予想外の送信ボタン ユーザーがアクションバーにある送信ボタンを見逃してしまうのは、フォームの入力
【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 問題 フォームがEnterキー押下でsubmitしてくれたり、くれなかったりするのですが、何かルールがあるのですか。 特に、サブミットボタンがないフォームについて。 特に、入力欄が1つのときと、2つのときの違いについて。 例1 form内にinput[type=”text”]が1つだけ <form method="post" action="?"> <input type="text" name="test"> </form> Enter押下でSubmitします（だいたいのブラウザで） 例2 form内にinput[type=”text”]が2つある <form method="post" action="?"> <input type="text" name="test"> <
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
住所の番地以下を入力するときに､｢(全角)｣とかこっそり書いてあって､登録終わったと思って次へボタン押した時に 赤い文字で｢登録情報を確認してください｣とか出てきて､よくみると数字も全角じゃなければいけないエラー｡ 全角数字は気持ち悪いんじゃハゲッ!!!!!!!!!!!!!!
参考：エフトラEFOブログ せっかく入力フォームまでたどりついたユーザーの約50％が、目的達成に至らず離脱していることが分かります。 広告がネット上での集客なら、入力フォームは接客の一部です。 コンビニでお菓子を買おうとレジに並んだが、列がなかなか進まず、買うのをやめてしまうことがあるでしょう。この場合、列が早く進んでいたら、そのまま買っていたわけです。 入力フォームも同じで、欲しいものを手に持ったユーザーがレジに来ているのに、入力フォームが使いにくいというストレスのために、途中でやめてしまうことがあります。 だから、入力フォームを改善するだけで、必ず成果が上がるのです！ 3. 入力フォーム改善テクニック18選3-1. 絶対おさえる基本の9ポイント1. 項目数は最低限にする 参考：J&B Labo 上記の例では入力項目を減らしただけで、コンバージョン率が1.3倍になっています。 ユーザーの
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
どうもこんばんは。Toshikuraです。今回のTipsは【簡単！チェックボックスやラジオボタンを装飾する方法】です。プラグインを使用しても良いのですが、ここでは設定の手間や容量が気になるので使用しません。実装方法はとても簡単ですのでぜひお試しください。 発展編 20. チェックボックスのデザイン 画像の準備 まずはチェックボックスに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。 基本設定 – 背景画像へ設置 画像を準備したらチェックボックスを囲っているラベルに背景画像として設置します。その際基点を左上に設定し、リピートを無しにします。 HTML <label class="cbxbd"><input type="checkbox"/>Check 1</label> CSS .cbxbd{ background:url(im
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
Appalled at the fact that you have to load 300kb of jquery and jquery UI or hook up bootstrap just to use a calendar? This is a vanillaJS [date][time]picker that’s powerful, easy to use, and looks good out of the box. Almost every large SPA or project involves date and time input. There are limited options, however, if you also prefer to keep your projects lean and consequently stay away from heav
どうもこんばんは。Toshikuraです。今回のTipsは【【42選】かっこ良くて面白い！参考になるコンタクトフォームデザイン – 42 Cool Contact Form Designs】です。最近フォーム関連の記事を連続して書いていますが、その番外編になります。連続記事の方でユーザビリティの方を底上げし、かっこいいフォームを参考に仕上げをするのもよろしいのではないでしょうか。 justdot 黒板の様な質感のある背景にフォームを配置しています。とても可愛くデザイン性が高いなと思います。 svn2ftp メモ帳の上にフォームがあります。よく見るスタイルですがさりげないセンドボタン等、細部にこだわっています。 heartbreakerfashion 手紙の上にフォームがあるデザイン。フォームである事のサジェストが上手になされています。 ftdesigner シンプルですが高級感のあるデザイ
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く