Categories
Book Review

Form Design Patterns

ウェブサイトで最も重要な要素はフォームです。

これは別にポジショントークとかで言ってるんじゃなくて、実際にいろんなサイトを思い返してもらうとわかると思いますがあらゆるサイトで重要なところにはフォームが使われています。ログインするのも買い物するのもフォームです。

インタラクティブであることがウェブというメディアの強みであるとよく言われますが、そのウェブのインタラクティブ性を一手に担うのがフォームです。フォームがなければウェブサイトは一方通行の看板に過ぎません。

そんな重要なウェブフォームですが、不思議なことにこれまでフォームを専門に扱った書籍がほとんど見当たりませんでした。とても残念なことです。なので Form Design Patterns の日本語版が出版されたことは大変に喜ばしいことだと思います。

原著者の Adam Silver さんは A List ApartSmashing Magazine などのウェブデザイナー向け有名オンラインマガジンの寄稿者だそうです。

この本が訴えることは当たり前のことばかりです。プレースホルダーをラベルの代用として使うなとか、JavaScript が無効のときでも最低限機能するようにしろとか、ネイティブ要素で実現できるなら aria-* 属性を濫用するなとか。奇抜なテクニックを期待した読者は物足りなくて退屈するでしょう。でも経験を積んだフォーム実装者ならわかるはずですが、当たり前に見えることこそ難しく、かつ重要だったりするものです。

当たり前のことばかりと書きましたが、それでも僕にとって新しい発見や、すぐにでも Contact Form 7 で採用してみたいアイデアが豊富にありました。日頃フォームに関わる機会の多い人にはぜひお薦めしたいと思います。

一方で、この本は非常に上級者向きなところがあって、これからフォームの作り方を学びたい初学者には薦めにくい、とまで言うと語弊があるかもしれませんが、少なくとも、この本を読んだらフォームを実装できるようになる、という期待は持たない方がいいでしょう。

というのも、ウェブフォームの機能のうち重要な半分を占めるサーバーサイドの話がこの本にはいっさい出てきません。入力値バリデーションにも触れられません。この本のテーマがブラウザーサイドのフォームデザインにあることを考えれば納得できることではありますが。

この本の残念なところについても指摘しておくべきでしょう。この本にはアクセシビリティに偏りすぎの傾向があります。

これは僕の持論ですが、ウェブフォームの実装にあたっては

  • プライバシー
  • セキュリティ
  • アクセシビリティ

の三点にバランスよく配慮することが必要です。このうち一つでも疎かにすれば、たとえ他の二点が完璧であったとしても、良くて無用の長物、悪くすれば甚大インシデントの原因すら作ることになります。

原著の出版が2018年とあるので時期的に微妙だったかもわかりませんが、プライバシー保護のための規定を定めた GDPR の発効後、ウェブフォームにおいてもどうすれば適合するかという議論は避けられないものになっています。重要なポイントの一つにフォーム送信時に個人データの扱いに関する同意を得るというものがあり、同意を求めるフォームコントロールのデザインやラベルの文面というのはこの本のテーマから外れていないと思うのですが、そういった話は取り上げられていません。

セキュリティに関して言えば、ファイルのアップロードというのはウェブフォームのセキュリティにおける鬼門であり、完璧に設計されなければたいへんカジュアルに重大事故を引き起こしかねない代物なのですが、この本では一章を割いてアップロードフォームを取り上げていながらセキュリティに関する注意書きもありません。これではうっかり実装してしまって大変なことになる読者が出てきそうで心配です。

と、くどくど指摘もしましたが、全体としてこの本はなお有意義であり、また優れた訳注が本の価値をさらに高めています。こういったフォームに関する書籍がもっと出てきたらいいですね。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s