🤵🏻‍♂️

フォームデザインパターン - フロントエンドエンジニアが知っておくべきこと -

cigar

2024/08/14に公開

form

designpatterns

tech

 フォームデザインパターンとは現代のウェブ開発において、フォームはユーザーとサービスを繋ぐ重要なインターフェースです。

しかし、適切にデザインされたフォームを提供することは、ユーザーエクスペリエンスを大きく左右します。

本記事では、Form Design Patternsを通じて学んだ知識をもとに、登録フォームやログインフォームを中心としたデザインパターンを解説します。

特に、ユーザーにとって使いやすく、かつアクセシブルなフォーム設計について考察します。

 Form Design Patternsを読んでみましたForm Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイドを読んで得た知見を、フロントエンドエンジニアとしての視点からまとめました。
出典: 「Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド」より
「ひとりのユーザーとして、私は『あなたのサービス』にログインしたい。そうすることで、『物事を行うこと』ができるから」
そんな人いるわけがない！
...つまり、ユーザーはあなたのサービスを通じて何らかのベネフィットを得たいのであって、登録/ログインフォームはそのための手段に過ぎません。

したがって、ユーザーにとって入口であるフォームの負担をできるだけ小さくすることが重要です。

 ユニバーサルデザインユニバーサルデザインはすべてのユーザーに対して公平でアクセスしやすいインターフェースを提供するための重要な考え方です。

本書でも強調されていますが、実際のプロダクト開発においては、対応の優先順位を適切に設定することが必要です。

特にスタートアップの初期段階では、まず基本的な機能とユーザーエクスペリエンスを優先し、その後でユニバーサルデザインを実装していくアプローチが現実的かもしれません。

 ユーザーエクスペリエンス（UX）の向上ユーザーエクスペリエンスを向上させるためのフォーム設計は、ユーザーがサービスに迅速かつスムーズにアクセスできることを目指すべきです。

以下のポイントに注意してフォームをデザインしましょう。

 簡潔なフォーム
ユーザーに負担をかけずに必要な情報を取得するためには、フォームの簡潔さが重要です。

最小限の入力項目: 最初に求める情報をメールアドレスとパスワードに限定し、その他の詳細情報は後から入力できるようにします。これにより、ユーザーがストレスなくサービスを利用開始できます。

例えば、登録時に入力する内容はメールアドレスとパスワードのみにしておき、ユーザー情報はもっと後の必要なタイミングに入力してもらうようにする、などです。
<form action="/submit" method="post">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">パスワード</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">ログイン</button>
</form>

 視覚的なヒント
ユーザーが迷わずにフォームを入力できるようにするためには、視覚的なヒントが有効です。

プレースホルダーの使い方: プレースホルダーはシンプルなデザインを保ちながら、入力フィールドのスペースを有効に活用できます。しかし、プレースホルダーが入力中に消えることで、重要な情報が見えなくなる可能性があります。例えば、パスワードのルールをプレースホルダーに記載する代わりに、ラベルの下にサブラベルとして表示することが考えられます。

aria-describedbyの活用: アクセシビリティを考慮し、aria-describedby属性を使用して入力フィールドとヒントを関連付けることで、スクリーンリーダーなどでも適切に情報が伝わるようにします。
<form action="/submit" method="post">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" placeholder="例: user@example.com" required>
  
  <label for="password">パスワード</label>
  <input type="password" id="password" name="password" placeholder="8文字以上のパスワード" aria-describedby="password-help" required>
  <small id="password-help">パスワードは8文字以上である必要があります。</small>

  <button type="submit">ログイン</button>
</form>
フロートラベル
UIライブラリ（例えば MUI Text Field ）でよく見かけますが、本書では否定的に評価されています。
おしゃれに見えますが、スペース節約にはならず、入力済みのフィールドと誤解されるリスクがあります。

入力前
入力後

フォームUIはフォームらしくあれ
ユーザーが慣れ親しんだフォームのデザインを維持することが重要です。おしゃれさよりも、ユーザーが他のサイトで見慣れたデザインとの一貫性を重視すべきです。
例えば、空のテキストボックスは四方を枠で囲んだデザインが一般的です。

 アクセシビリティの考慮アクセシビリティは、すべてのユーザーが問題なくフォームを利用できるようにするために欠かせません。以下のポイントに注意して、アクセシブルなフォームを設計しましょう。

 ラベルの明確化
各入力フィールドには明確で一貫性のあるラベルを付けます。システムがメールアドレスをユーザー名として使用している場合は、ラベルにもそれを反映させます。

一貫したラベルの使用: 例えば、メールアドレスをユーザー名として扱う場合、「ユーザー名」ではなく「メールアドレス」と明示することで、ユーザーに誤解を与えません。

 エラーメッセージの提供
入力エラーが発生した場合には、具体的でわかりやすいエラーメッセージを提供します。

明確なエラーメッセージ: エラーメッセージは簡潔で明確にする必要があります。ユーザーに具体的な修正方法を示すと共に、平易な言葉を使って理解しやすくします。

エラーメッセージの一貫性: 例えば、「名前を入力してください」というように、能動態でシンプルな表現を使い、ユーザーに行動を促すメッセージを心掛けます。

わかりやすい
わかりづらい

 プログレッシブエンハンスメント
プログレッシブエンハンスメントは、基本的な機能を全ユーザーに提供しながら、より高度な機能を利用できるユーザーには追加の体験を提供する戦略です。

Next.js App Routerの活用: Next.jsを使用する場合、App RouterとServer Actionsを活用することで、JavaScriptが無効な場合でもフォームが正しく動作するように設計できます。これにより、広範なユーザーに対応可能なフォームを実現できます。

費用対効果の検討: JavaScriptが無効なユーザーは少数であり、モダンCSSなどを使ったエンハンスメントも含め、どこまで対応するかはプロジェクトのコストとメリットを天秤にかける必要があります。

 まとめフォームデザインは、ユーザーエクスペリエンスとアクセシビリティを高めるための重要な要素です。

本記事で紹介したデザインパターンを活用することで、より使いやすく、包括的なフォームを設計することが可能になります。