Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド

この記事は、Web アクセシビリティ Advent Calendar 2019 の19日目の記事です。


このたび監訳で関わらせていただきました「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」が、このクリスマスシーズンに出ることになりました。2018年にドイツの Smashing Magazine から刊行された、Adam Silver 著「Form Design Patterns - A practical guide to designing and coding simple and inclusive forms for the web」の日本語訳です。

Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド

言うまでもなく、ウェブにおけるフォームは、インタラクションの要のひとつです。フォームがあることによって、ユーザーは能動的に自らの意思をシステムに伝えて、それに応じたフィードバックを得ることができるからです。フォームの出来栄えは、ユーザー体験 (UX) を大きく左右すると言ってもよいでしょう。

ことほどさように重要なフォームですが、そこに焦点を絞った書籍はあまりない中 (ぱっと思い浮かぶのは、2008年に Luke Wroblewski が Rosenfeld Media から出した「Web Form Design: Filling in the Blanks」くらいでしょうか)、本書は400ページ近く (原書のページ数ですが) にわたり、ただひたすらフォームについて説明しているという点でユニークな存在です。しかも、インクルーシブであることを標榜し、あらゆるユーザーにとって (たとえ障害や何らかの利用状況を抱えていたとしても) 利用可能なフォームを提供することに徹底的にこだわっているのが特長です。

The Paciello Group の「インクルーシブデザインの原則」(以前、インフォアクシアの植木さんと共同で翻訳させていただきました) を全面的にフィーチャーし、アクセシビリティに軸足を置きつつもあくまでユーザー体験を重視していること、また、お仕着せのベストプラクティスに終始するのではなく、ことあるごとにユーザー調査 (ユーザビリティテスト) をベースにしたデザイン判断を行なうことを説いていることも、本書の特質です。その意味では、アクセシブルな実装に日々奮闘されているフロントエンド系の方々だけでなく、いわゆる UX デザインに関わられている方々にもおすすめできる一冊かと思います。

私自身、本書を通じて、改めてアクセシビリティに優れたインタラクションのありかたを考えさせられました。監訳の過程で原著者の Adam にはたびたび質問させていただきましたが、いつも気さくに、どんな小さな疑問に対しても快く解説していただき、とても勉強になりました。よろしければぜひ皆さんにもお手に取っていただき、どんなユーザーをも不合理に排除しないインクルーシブなインタラクションデザインを、一緒に広めていけたら嬉しいです。

なお、本書の要点は、以下の記事にまとめていますので、併せてご覧ください。

また、本書には下記のとおりデモも用意されており、今回の日本語訳に合わせて (主にラベルまわりを) 日本語化してあります。キーボード操作やスクリーンリーダーでの挙動も含めて確認できるようになっているので、実際に触れていただいて、アクセシビリティに優れたフォームの一例として参考になれば幸いです。

2023年5月3日追記 : 本書各章の冒頭「この章で解説するフォームの完成形」に記載されているデモの URL は、「herokuapp.com」の部分 が「onrender.com」に変更となりました。詳しくは、記事「Form Design Patterns デモ URL の変更 (Heroku から Render に移行)」をご参照ください。

第1章 (登録フォーム)
登録フォーム
第2章 (決済フォーム)
任意の電話番号フィールド
配送オプションのラジオボタン
文字数のカウントダウン付きの配送メモ
支払いフォーム
第3章 (航空券予約フォーム)
オートコンプリート
覚えやすい日付
デートピッカー
ステッパー
座席選択 (入れ子)
座席選択
第4章 (ログインフォーム)
ログインフォーム
第5章 (受信トレイ)
受信トレイ
第6章 (検索フォーム)
検索フォーム
第7章 (フィルターフォーム)
フィルターフォーム
第8章 (アップロードフォーム)
ドロップゾーン
第9章 (経費フォーム)
さらに追加