「Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド」を一読しました。

どうも。Reoです。

今回は、「Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド」を読み終えたので、紹介していこうと思います！

フォームへの苦手意識が強かったので克服したい！という思いと、あとは表紙が好みだったので購入しました。わりと衝動買いでした。

概要

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

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

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

Amazon 紹介文より

自分なりに紹介

私が本書を説明するとしたら以下のような感じですね。

目の見える人、見えない人、JavaScript が動かない環境の人等を含む全ての人を考慮したフォームの設計方法
様々な場面でのフォームの実装方法
デザインの本であり、デコレーションの方法の本ではない。

日本語で言うなら、フォームの設計本であり、どうやってフォームを飾りつけするかの本ではないです。なので CSS は殆ど出てきません。

出てくるコードは、基本的にはHTMLのマークアップです。あとは体験を強化するためにJavaScriptのコードが出てきます。主にjQueryを用いられています。

本書では要素の作成と取得、イベントのリスニングにはjQueryが使用されています。jQueryは必須でもなければ、望ましくもないかもしれませんが、本書のテーマはフォームであり、複雑なクロスブラウザコンポーネントではないのでjQueryを使用しています。

本書の37ページより

どのようにフォームを設計すれば良いかを、各場面（登録・決済・航空券の予約等）ごとに紹介されています。

あとは、とにかく「全ての人が同じように使える」ことに重点を置かれています。

目の見える私は、マウスやトラックバッドでフォームを移動することが多いですが、キーボードを使って移動する人、スクリーンリーダーを用いてフォームを利用する人を考慮した設計になっています。

あと本書は、翻訳本になります。原著は「Form Design Patterns (English Edition)」です。

翻訳本ならではの感じが読みづらい人にとっては読みづらいかも。自分は結構好きなんですが。

言われてみれば当たり前なコト

一読した一番の感想は、基礎的かつ必須である知識だったなぁです。

第2章までは、言われてみればそりゃそうだよなみたいな内容でした。〇〇なのでこれは良くない、こうすると良いという例も、当たり前だなぁと感じていました。当たり前だけど、できてないなぁと。

全体を通して、当たり前のことを言っているだけにすぎないと言われればそうです。それでも言語化して知識として持てているかどうかが、実際に作るものに現れるんだろうなと思いました。

なので、ちゃんとそれを理解している人からすれば少し退屈なのかもしれないですね。基礎的すぎるというレビューをチラッと見たので。（海外勢だけど）

全ての人が使えるための努力

第3章（航空券予約フォーム）が一番クルものがありましたね。

全ての人が同じように使えるようにするために、ここまで努力をするのかと思いました。

DatePicker が未サポートのブラウザがあるからカレンダーを自作…！？！？！？到着地を選択するためのオートコンプリートを自作….(´；ω；`)

本当、そこまでやるのかという衝撃を受けましたね。

普段作っているものの規模が小さいからと言うのは言い訳に過ぎないんですが、それでも使いやすいフォームはそこまで考えられて作られていると知ると、かなりビビりましたね。

第3章が正直一番えぐかった。いい意味で。

フォームを作成する全ての人に

デザイナー、フロントエンドエンジニア、フォームを伴うサービスを作る全ての人にオススメです。

今回コードは流し読みしたんですが、実際にどのようなコードで実装するかも紹介されていますし、コードを読めなくても、設計の話だけでもとても参考になるはずです。

設計の本って、多分年月が経ってもそんなに腐らないものだと思うんですよね。もっと良い方法というものは出てくるかもしれませんが、それは今あるものが悪くなるからではないと思うんです。

コードの書き方は変わってきてしまうかもしれませんが、根本的な部分はそこまで変わらないでしょう。

フォームを作るときには本書を読み返してから作るようにしたいなと思います。そんな頻繁に作っているわけでもないので…。

いや、ほんと、結構面白かったです。

ただ、翻訳本の欠点として、沢山の引用がされているんですが、元が英語なわけですよね。読むのがしんどいのでそこまでして読む気になれない…。ので本に書いてあるだけの知識止まりになってしまうのが、勿体無いなと思いつつ…。さらっと読めるようになったら得る知識が何倍にもなるわけだから強いよなぁ…

そう思うと悔しいですね。一番勉強すべきは英語なのかもしれない。

紹介文の引用

カバーに書かれているオススメ文が、私の感想とかなり近かったので引用させていただきます。

一例を挙げましょう。この本を読んで、アダムがフォームラベルを入力欄の上に表示するようすすめているのを見つけた時の、私の興奮を想像してください。斜め上でもなければ、ユーザーが実際に入力するボックス内部でもありません。当然、位置や方向をその時々で変えるような愚かなこともしません。

実際、とてもラジカルで、読んでいて新鮮でした。ほとんどのデザイナーは意外性を求めます。ですから、私がユーザーに代わってデザイナーに文句を言わねばなりません。インターフェースがわかりにくいと。ユーザーにはそんな時間はありませんから。

誤解しないでください。本書に新しい情報がないと言っているのではありません。わたしはいろいろなことを学びました。「なるほど、それも一つのやり方だね(笑)」ではなく、「えっ、そうか。最初からそうやっておけばよかった」と感じてばかりでした。標準的な要素とシンプルな考え方を組み合わせれば、飛行機の座席選択のような大変なコンポーネントでさえ、アクセシブルかつ論理的で、軽量になります。