ウェブのUXの要であるフォームのデザインについて、300ページ超のボリュームで、誰もが使えるアクセシブルな実装方法を解説!

本書ではあらゆるユーザーにとって利用可能なフォームの実装のしかたを解説しています(ロバスト、プログレッシブエンハンスメント、アクセシビリティ、といった軸で、ウェブの特質を最大限に活かした形でのフォーム実装を説く内容です)。

フォームのパターンごとにHTMLタグの意味が丁寧に解説されており、フレームワークを弄ることから入門したようなフロントエンドエンジニアの方々でも違和感なく学習できます。機能、ビジュアルデザイン、実装用コードで構成されており、本書をベースにデザインシステム(パターンライブラリ)に発展させることが可能です。

対象読者

ビジュアルおよびインタラクションデザイナー、UX実務者、フロントエンド開発者、インクルーシブデザインやアクセシビリティ実務者におすすめします。

目次と概要

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

著者・監訳者プロフィール

著者：アダム・シルヴァー（Adam Silver）

インタラクションデザイナー。Tesco、BBC、Argos、Boots、Just Eat、News Corp、Selfridges、The Financial Times、T-Mobile、Department for Work and Pensionsなどイギリスの政府機関や企業で15年以上にわたり働き、シンプルで人間的でインクルーシブなデジタルプロダクトをデザインしている。インクルーシブデザインとデザインシステムに特に関心を持ち、ブログやA List Apartなどの人気のあるデザイン関連の出版物に寄稿している。

監訳者：土屋一彦

ウェブサイトの設計、評価、ガイドライン策定といった仕事のかたわら「Website Usability Info」を運営、ウェブユーザビリティ、アクセシビリティ、情報アーキテクチャ (IA) に関する話題を発信している。ユーザビリティ / アクセシビリティ両面を見据えたサイト改善や情報設計を得意とする。HCD-Net 認定 人間中心設計専門家。

1章 登録フォーム

• 1.1 登録フォームの一例
• 1.2 ラベル
• 1.3 プレースホルダー
• 1.4 フロートラベル
• 1.5 質問プロトコル
• 1.6 フィールドのスタイル設定
• 1.7 メールフィールド
• 1.8 パスワードフィールド
• 1.9 ボタンスタイル
• 1.10 バリデーション
• 1.11 まとめ

2章 決済フォーム

• 2.1 1ページにつき1つのこと
• 2.2 フローと順序
• 2.3 ゲスト決済
• 2.4 1.メールアドレスの入力
• 2.5 2.携帯電話番号の入力
• 2.6 3.配送先の入力
• 2.7 4.配送オプションの入力
• 2.8 5.配送メモの入力
• 2.9 6.支払情報の入力
• 2.10 7.入力内容の送信前チェック
• 2.11 8.送信後の確認ページ
• 2.12 2回めのユーザー体験
• 2.12 レイアウト
• 2.13 まとめ

3章 航空券予約フォーム

• 3.1 1.到着地
• 3.2 2.出発日
• 3.3 3.乗客の選択
• 3.4 4.フライトの選択
• 3.5 5.座席の選択
• 3.6 まとめ

4章 ログインフォーム

• 4.1 標準的なログインフォーム
• 4.2 「ユーザー名」ラベルとヒントテキスト
• 4.3 自動大文字化、オートコレクト、スペルチェック
• 4.4 パスワードフィールドのデザイン
• 4.5 自動タブ移動
• 4.6 送信ボタンのテキスト：ログインかサインインか
• 4.7 「ユーザー名またはパスワードが一致しません」の問題
• 4.8 コンテキストに応じたフォーム
• 4.9 ソーシャルログイン
• 4.10 まとめ

5章 受信トレイ

• 5.1 リストのタイプ
• 5.2 メールをアクション可能にするマーキング
• 5.3 メールへのアクション
• 5.4 レスポンシブメニュー
• 5.5 マウスオーバーとクリック
• 5.6 本来あるべきメニュー
• 5.7 すべてを選択
• 5.8 動作完了メッセージ
• 5.9 まとめ

6章 検索フォーム

• 6.1 何でも検索できるようにする
• 6.2 基本のフォーム
• 6.3 スペース不足に対応する
• 6.4 フォームの表示／非表示を切り替える
• 6.5 検索結果を表示する
• 6.6 まとめ

7章 フィルターフォーム

• 7.1 インタラクティブフィルターとバッチフィルター
• 7.2 レイアウト
• 7.3 マークアップ
• 7.4 自動送信
• 7.5 リンクに変えればよい？
• 7.6 Ajax
• 7.7 ユーザーが結果の更新に気づかない
• 7.8 折りたたみ可能なフィルター
• 7.9 スクリプト
• 7.10 小さい画面での体験
• 7.11 選択中のフィルターの提示
• 7.12 まとめ

8章 アップロードフォーム

• 8.1 ファイルピッカー
• 8.2 複数ファイル用のファイルピッカー
• 8.3 持続的なアップロードフォーム
• 8.4 ドラッグ＆ドロップのエンハンスメント（強化）
• 8.5 その他の考慮事項
• 8.6 まとめ

9章 経費フォーム

• 9.1 「持続的なフォーム」パターン（再登場）
• 9.2 分岐および「1ページにつき1つのこと」
• 9.3 「さらに追加」パターン
• 9.4 まとめ

10章 長くて複雑なフォーム

• 10.1 「事前にチェック」パターン
• 10.2 「タスクリスト」パターン
• 10.3 まとめ

1章 登録フォーム

• ログインフォーム

2章 決済フォーム

• 任意の電話番号フィールド
• 配送オプションのラジオボタン
• 文字数のカウントダウンつきの配送メモ
• 支払いフォーム

3章 航空券予約フォーム

• オートコンプリート
• 覚えやすい日付
• デートピッカー
• ステッパー
• 座席選択（入れ子）
• 座席選択

4章 ログインフォーム

• ログインフォーム

5章 受信トレイ

• 受信トレイ

6章 検索フォーム

• 検索フォーム

7章 フィルターフォーム

• フィルターフォーム

8章 アップロードフォーム

• ファイルピッカー
• ドロップゾーン

９章 アップロードフォーム

• さらに追加