スマホ時代におけるフォームのデザイン・実装のテクニックが詳しく解説された良書 -フォーム制作実践ガイド

フォームのデザインや実装が苦手という人は少なくないと思います。スマホ時代における、ユーザーにとって利用しやすいフォーム実装のテクニックを機能・ビジュアルデザイン・実装コードごとに詳しく解説したフォーム制作実装ガイドを紹介します。

さまざまなプロジェクトで利用できるフォーム制作の知識をしっかりと身につけることができます。

本書はSmashing Magazineから2018年に発行された「Form Design Patterns」の翻訳版。洋書だと実例が英語のままで、日本語環境ではあまり参考にならないということがありますが、本書は可能な限り日本語環境に適するように翻訳されています。

本書は本日発売！
書店で見かけたら、ぜひ手にとってみてください。300ページ超で、かなりのボリュームです。

Amazonで掲載されている表紙画像の色味がかなり薄い、、、楽天の方がまし。

紙面のキャプチャで、中身を少しだけご紹介。

本書は10章の構成で、WebサイトやスマホアプリのUXの要であるフォームについて、そのパターンごとに300ページ超のボリュームで徹底解説された一冊です。フォームのデザイン、フォームの機能、フォームの実装のアイデアとテクニックがぎっしり詰まっています。

登録フォームやログインフォームといったシンプルなフォームから、決済や予約や検索といった少し複雑なフォーム、アップロードやフィルターといった高機能なフォームまで、パターンごとに詳しく解説されています。

各フォームごとに、適切なデザイン、デザインで注意すべき点、使いやすくするための機能、そしてアクセシブルな実装方法、機能それぞれの実装コードがすぐに分かります。

例えば、パスワードの入力欄に「パスワードを表示するボタン」があると便利ですよね。パスワードの確認用に2つ入力欄を用意するのではなく、パスワードを表示する機能をつけることでユーザー体験を向上させます。次ページにはこの実装方法がJavaScriptベースで詳しく解説されています。

Eコマースに欠かせないのが、決済フォームです。決済フォームが使いづらいと、それだけで売上が下がってしまいます。

本書ではスマホでのフォームが中心となっており、フォームのパターンによってはデスクトップのものもあります。

ユーザーになんらかの情報、例えばメールや電話番号の入力を求めるには、なぜその情報が必要なのか説明する必要があります。メールであれば「ご注文の確認メールをお送りします」、電話であれば「配送に関するお知らせをお送りします」のような感じです。この一文があるだけで、入力率はぐっとアップします。

サービス系では、ログインフォームが欠かせません。単純なように見えますが、実はユーザビリティの問題を抱えているログインフォームを使用しているサイトやアプリは少なくありません。

例えば標準的なログインフォームだと、ユーザー名とパスワードのフィールドで構成されています。もしユーザー名がメールアドレスであれば、このラベルには「メールアドレス」、もしくは「ユーザー名またはメールアドレス」と記載するとユーザーは戸惑わずに入力できます。

また、「パスワードをお忘れの場合」リンクもその配置場所によって使い勝手が変わります。すべての人が利用する機能ではなく、最近ではパスワードマネージャーで管理している人も増えています。

検索フォームは多くのサイトやアプリで使用されています。ユーザーにとって見つけやすくて使いやすく、シンプルで便利な検索機能を提供しましょう。

検索フォームのデザインで重要なのが、そのスペースです。通常はすぐ見つかるようにヘッダに配置しますが、ヘッダの土地は競争が非常に熾烈です。最近増えてきたラベル非表示の検索フォーム、ボタン非常時の検索フォームなど、省スペースのテクニックもデザイン・機能・コードの面から詳しく解説されています。

ちょっと特殊なフォームについても、同様に詳しく解説されています。アップロードフォームは写真共有やメッセージや事務管理系のアプリで、画像や文書をアップロードするためのフォームです。

画像や文書ファイルをアップロードするためのファイル入力、Ajaxで強化した機能、キーボードユーザーやスクリーンリーダーユーザーにも対応したドラッグ&ドロップのインターフェイスの実装方法なども詳しく解説されています。

フォームには、完了までに長い時間がかかるものもあります。長くて複雑なフォームを管理しやすくするためのパターンが具体的に紹介されています。
一番よいのは、長くて複雑なフォームは避けるですけどね。

Form Design Patternsの目次

1. 登録フォーム|フォームの基本的な品質とその考え方
2. 決済フォーム|決済フローのステップごとのデザインパターンの適用
3. 航空券予約フォーム|ARIAを用いたカスタムフォームコンポーネント
4. ログインフォーム|ユビキタスなログインフォーム
5. 受信トレイ|メールの管理インターフェースからARIAパターンを学ぶ
6. 検索フォーム|見つけやすく、シンプルで、使いやすいレスポンシブな検索フォーム
7. フィルターフォーム|ユーザーが満足できるフィルタリング(選択、抽出ほか)
8. アップロードフォーム|ファイルの選択とアップロード、ドラッグ&ドロップ型への対応
9. 経費フォーム|応用1:大量に追加する項目があるフォーム
10. 長くて複雑なフォーム|応用2:入力に長時間を要するフォーム

Webサイトやアプリで避けて通れないのが、フォームです。そして、インタラクションの中心にあるのも、フォームです。
これ一冊あればフォームのデザインや実装が楽しくなり、どんなフォームでもどんとこい！ です。

献本の御礼

最後に、献本いただいたボーンデジタルの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス