入力フォーム改善（EFO）に関する情報まとめ

これまでブックマークしてきた入力フォーム改善（EFO）関連の情報をまとめました。もしかしたら古い情報もあるかもしれません。

# 総合的な改善

### [入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善 | Web担当者Forum](http://web-tan.forum.impressrd.jp/e/2014/02/28/16995)

15回にわたって有益な情報が提供されている。まずはこれをすべて読む。

### [今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ - ICS MEDIA](https://ics.media/entry/11221)

自動入力への対応や、スマートフォンへの最適化などの実装例。

### [スマホに最適化させたエントリーフォーム 〜3つの基本方針〜 – NET BIZ DIV. TECH BLOG](http://tech.recruit-mp.co.jp/design/post-7998/)

スマートフォンに最適化した UI 設計。

### [モバイルにおける入力フォームデザインのためのチェックリスト – U-Site](http://u-site.jp/alertbox/mobile-input-checklist)

モバイル向けフォームの UI 設計検討項目が、チェックリストとしてまとめられている。

### [分かりやすいWeb入力フォームのための十戒 | デザイン | POSTD](http://postd.cc/the-10-commandments-of-good-form-design-on-the-web/)

UI デザインの基本１０か条。

### [ユーザーエラーの防止：無意識なスリップの回避 – U-Site](http://u-site.jp/alertbox/slips)

制約やデフォルト値の与え方で、エラーを減らす UI 設計。

### [How To Build An Awesome Form — Medium](https://medium.com/@kubachrzecijanek/how-to-build-an-awesome-form-1e9b2c1bd00d#.wktxba28c)

いいフォームを作るための様々な視点とそのステップ。

### [The current state of web forms by Kevin Suttle on CodePen](http://codepen.io/kevinSuttle/post/the-current-state-of-web-forms)

現状のブラウザの問題点と、その改善方法の解説。

### [10 Rules For Efficient Form Design](http://babich.biz/10-rules-for-efficient-form-design/?utm_source=Frontend+Weekly&utm_campaign=3eeeccf454-Frontend_Weekly_Vol_848_23_2016&utm_medium=email&utm_term=0_9af01549dd-3eeeccf454-371916225)

基本的な UI のルール。

# UI デザイン

### [Which Input When? — Morgan Carter — Product Designer](http://morgancarter.com.au/design-solutions/which-input-when)

フォーム UI の使い方の解説。

### [Styling & Customizing File Inputs the Smart Way | Codrops](http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/)

ファイルアップロードの UI のデザイン改善の具体的な実装方法。

### [Design Better Forms — uxdesign\.cc – User Experience Design](https://uxdesign.cc/design-better-forms-96fadca0f49c)

フォーム UI の Good / Bad を具体的なイメージで説明。

### [エラーメッセージはフォームのどこに表示するべきか | UX MILK](https://uxmilk.jp/73902)

フォームの入力エラーメッセージをどこに表示するかの考察。

# 自動入力

### [Google ウェブマスター向け公式ブログ: オンライン フォームを入力しやすくするために](http://googlewebmastercentral-ja.blogspot.jp/2015/03/helping-users-fill-out-online-forms.html)

Chrome の「autocomplete」属性サポートのアナウンス。

### [Enabling Password AutoFill on an HTML Input Element](https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element)

iOS 等でオートフィルを有効にする HTML のマークアップ仕様。

### [Google Maps Javascript APIでフォームでの住所入力を自動補完する・「Autocomplete for Addresses and Search Terms」 - かちびと.net](http://kachibito.net/useful-resource/autocomplete-for-addresses-and-search-terms)

タイトル通り。

### [Algolia Places](https://community.algolia.com/places/)

住所の自動補完。

# バリデーション（入力エラー処理）

### [Form Validation Techniques](https://bitsofco.de/form-validation-techniques/)

フォームのバリデーションの実装例。CSS や JavaScript のコードを交えて解説。

### [Form validation best practices – Andrew Burton – Medium](https://medium.com/@andrew.burton/form-validation-best-practices-8e3bec7d0549)

バリデーションの UI 実例集。様々な事例を紹介。

# クレジットカード・支払い

### [\[iOS8\]クレジットカード読み取りに対応したフォームの作り方 \- Qiita](http://qiita.com/okmr-d/items/c5c28117b999252e22ca)

カメラを使ったクレジットカード番号読み取りの方法。

### [The anatomy of a credit card payment form — Gabriel Tomescu](http://gabrieltomescu.com/blog/2015/6/27/anatomy-of-a-credit-card-form?utm_source=Frontend+Weekly&utm_campaign=21cc6574ac-Frontend_Weekly_vol_277_22_2015&utm_medium=email&utm_term=0_9af01549dd-21cc6574ac-371916225)

クレジットカード入力フォームのデザイン例。各入力項目ごとに詳しい解説がある。（英語）

### [Payment Request API で簡単・高速な決済を実現する  \|  Web  \|  Google Developers](https://developers.google.com/web/updates/2016/07/payment-request)

支払い方法・配送先住所・配送方法を、簡単・高速かつ一貫した方法でユーザが選択・追加できる、ネイティブユーザインタフェースを提供。現状、Android Chrome が対応。

# ラベリング

### [入力フォームの「必須」「任意」のラベルは両方付けないとコンバージョン率が下がる | 海外SEO情報ブログ](https://www.suzukikenichi.com/blog/you-need-to-mark-both-required-and-optional-on-entry-form/)

### [Why Users Fill Out Less If You Mark Required Fields - UX Movement](http://uxmovement.com/forms/why-users-fill-out-less-if-you-mark-required-fields/)

「必須」「任意」のラベルのつけ方について。２つの記事で結果が違うのは、言語（文化？）によるもの？

# パスワード

### [横柄なパスワード – パスワード認証に関する改善策 | デザイン | POSTD](http://postd.cc/patronizing-passwords/)

パスワードあるあると改善提案。

### [ユーザーにパスワードを変えたことを思い出させる方法 | UX MILK](http://uxmilk.jp/10453)

細かい気遣い。

### [実は危険な“秘密の質問”、Googleが研究結果を発表 -INTERNET Watch](http://internet.watch.impress.co.jp/docs/news/20150522_703219.html)

Google の調査結果。

# ライブラリ

### [Smoke](http://alfredobarron.github.io/smoke/#/)

Bootstrap 向けのフォーム用ライブラリ。パスワードの強度や一致などのチェック機能もある。

# 事例集

### [20 Awesome Form Designs Visitors Want To Fill Out](http://line25.com/inspiration/form-designs)

おしゃれなデザインのフォーム事例。

### [こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 - マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価](http://mamion.net/2014/12/%E7%9A%87%E6%BD%A4%E3%81%AE%E5%85%A5%E5%8A%9B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8C%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84%E7%90%86%E7%94%B1/)

改善内容を実際のフォームでわかりやすく解説。

# 調査

### [100のフォーム調査から判明した、購入フォームの傾向（海外EFO情報） | UI改善ブログ by f-tra](https://f-tra.jp/blog/overseas/5987)

購入時に会員登録やメルマガ登録などを求めているサイトの数の調査。

### [Form Inputs: The Browser Support Issue You Didn’t Know You Had – Smashing Magazine](https://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/)

ブラウザの対応状況について。１年前の情報なので、改善されているものもあるかも。