お問い合わせフォーム・新規会員登録フォーム等、Webサイトに必須の画面であるフォーム。
デザイナーはトップ画面の見栄えやコンテンツ画面の見やすさには気を配るけれど、フォーム画面は通り一辺倒のものを作って終わってしまうことが多いのですが、しかしよくよく考えると、一番重要視すべき画面は、他でもないフォーム画面ではないでしょうか。
- お問い合わせを増やす
- 資料請求を増やす
- 新規会員を増やす
といったWebサイトが目指すべきゴール地点こそがフォームです。
だからこそ、フォームはユーザーにとってノーストレス＆使い勝手が良く、他のサイトと同様のフォーマットである必要があります。変にオリジナリティを出さない方がユーザーの好感度は高い。
とっても大事なフォーム画面だけど、じゃあ、どのような点に気をつけて制作すればいいのか。世間一般的にどのような動きが望ましいとされているのかという基礎的な知識を紹介しているのが、今回紹介する「Form Design Patterns」という本です。
「シンプルでインクルーシブなフォーム制作実践ガイド」という副タイトルにあるように、フォーム制作における必要概念＆実践的なコードを400ページに渡ってまとめた、フォーム制作のみに特化している珍しい本です。
とにかく、フォームの基本的な知識を身につけたい人に最適な一冊。特に今までなんとなくフォームを作ってきた人には一度目を通して欲しい良書だと思います。
著者は外国人なので、少し日本のスタンダードとは違うところもあります。しかし、ユーザーにとって最適なインタラクションを考える、という思考は非常に勉強になります。
本書は全10章に分かれ、各フォームの作り方を具体的なソースコード付きで細かくポイントを抑えた解説をしています。
第1章：登録フォーム
第2章：決済フォーム
第3章：航空券予約フォーム
第4章：ログインフォーム
第5章：受信トレイ
第6章：検索フォーム
第7章：フィルターフォーム
第8章：アップロードフォーム
第9章：経費フォーム
第10章：長くて複雑なフォーム
フォームのHTMLコードの作り方にはある種のルールとコツがあります。しかし他社のサイトを参考にしようとしても、プラグインやライブラリを用いられていることがほとんどで、余計なコードがまざって複雑になってしまっていることも珍しくありません。
その点本書で書かれているコードはシンプルなフォームのHTMLとなっており、またスタイルシートによる装飾のやり方も説明しています。
一方で、単純にテキストフォームやラジオボタンの作り方を説明しているわけではありません。
例えば
・送信後の確認ページに何を表示させるべきか
・合理的な質問の順番
・ユーザーストレスのない画面遷移
といったあくまでユーザー目線のあるべきフォームの作り方について収支言及しています。
また、フォーム作成でよくつっかかる
・注意書き（例：半角英数字で入力ください）をどう表示するか
・セレクトボックスを使うべきか。ラジオボタンを使うべきか
といった小さなお悩みポイントにも独自の回答を記載しています。この本が正しいというわけではなく、あくまで回答のひとつとしてですが。
JavaScriptのソースも並んでいるので一見フロントエンド向けにも読めますが、全編を読むとむしろデザイナーやUI設計者向けに、フォームデザインにおいて最初に押さえておくべき基礎的な事象をまとめた本だと感じました。
外国の翻訳本ということもあるし、ページの配色も白黒で基本コードが並んでいるだけ。
なのでWebデザインを習い始めたばかりの人にはとっつきづらいかもしれません。
しかし、一回でもサイトを設計したことがある人、実際にコーディング・デザインしたことがある人にとっては、「なるほど！」と思わされる章も多いはず。
時代は完全にモバイルファーストとなり、スマホで申し込み・予約・問い合わせをするのが主流となりました。PCより小さい画面で、よりユーザビリティを意識したフォームを作らなければいけません。特にスマホアプリにおいてはフォームの価値は非常に高い。
今一度、なぜフォームにこの機能が必要なのか。なぜこのデザインなのか。といったフォームの本質について学ぶのに非常に適した一冊だと思います。おすすめです！