📬

フォームのデザイン

2023/07/11に公開

HTML

フォームの重要性

以下、著書「Form Design Patterns」から抜粋。

フォームなしではウェブはコンテンツを消費する手段にすぎず、受け身のユーザー体験をもたらすだけです。しかし、フォームがあれば、ウェブは協調的でクリエイティブ、そして生産的なものになれます。有意義なインタラクションの中にあるのがフォームであり、それだけにしっかりと取り組む価値があるものです。
Adam Silver（Form Design Patterns著者）

ウェブにおいてフォームというものはインタラクションの重要な要素であり、ユーザーはフォームを通して、システムに意思を伝え、フィードバックを得ることができる。
それゆえにフォームの品質は、ユーザー体験（UX）に大きく影響を与えるものであるといえる👍

今回は登録フォームを例として考えてみた

// 例
<form>
  <label htmlFor="name">お名前</label>
  <input type="text" id="name" name="name" />
  <label htmlFor="email">メールアドレス</label>
  <input type="email" id="email" name="email" />
  <label htmlFor="password">
    パスワード
    <span className="field-hint">
      数字と大文字をそれぞれ１文字以上字含めて、
      <br />
      8文字以上で入力してください。
    </span>
  </label>
  <input type="password" id="password" name="password" />
  <input type="submit" value="登録する" />
</form>

ラベル

すべての人のユーザー体験を向上するために要件は、大きく分けて４つあるとされている。
（Laura Kalbag - Accessibility for everyone）

🟡 視覚：見やすくする
🟡 聴覚：聞きやすくする
🟡 運動：インタラクションを行いやすくする
🟡 認知：理解しやすくする

以上の観点から考えられるラベルの重要性

晴眼のユーザーはラベルを読むことができる
視覚に障がいのあるユーザーは、スクリーンリーダーを使用して聞くことができる
運動機能に障がいのあるユーザーは、ヒット領域が広がり、フィールドにフォーカスを合わせやすくなる

ラベルを使用する上で押さえておくべきポイント

1.上記の「以上の観点から考えられるラベルの重要性」で挙げている3つの理由から、入力を受け取る全てのコントロールには補助的な<label>が必要

// labelが必須
<label htmlFor="name">お名前</label>
<input type="text" id="name" name="name" />

送信ボタンには<label>は必要なく、ボタン内にテキストを表示するvalue属性が、アクセシブルなラベルとして機能する（button要素ではなくinput要素を使用する場合）

<input type="submit" value="登録する" />

入力欄とラベルを結びつけるため、入力欄のid属性とラベルのfor(ReactなどであればhtmlFor)属性は一致し、かつそのページにおいて固有でなければならない

// labelのhtmlForとinputのidは同じ値にする
<label htmlFor="email">メールアドレス</label>
<input type="email" id="email" name="email">

プレースホルダー

placeholder属性の目的は、ユーザーにヒントを提供すること
フィールドへの入力の際、ユーザーは補足的なガイドを得ることができる
パスワードフィールドなど、複雑なルールのあるフィールドで主に使われる
ラベルとは異なり、必須ではないので、状況に応じて利用する
placeholder属性が存在するからといって、無理に使う必要はない

ラベルとプレースホルダーの内容が重複している場合は不要

プレースホルダーのデメリット

プレースホルダーの魅力は、ミニマルで、美しくスペースを節約できる点にあるが、ユーザーにヒントを与えるという意味では良いとは言えない。

入力するとプレースホルダーのテキストは消えてしまうため、ルールやヒントの内容を覚えておく必要がありユーザーの短期記憶に負担をかける
白地にグレーのテキストはコントラストが低く読みにくい
プレースホルダーをサポートしていないスクリーンリーダーがある
プレースホルダーのテキストがテキストフィールドより長い場合は途中で切れてしまう

長いヒントテキストは途中で切れてしまう

改善例

プレースホルダーとしてでなくテキストフィールドの上部に設置する。

<label htmlFor="password">
  パスワード
  <span className="field-hint">
    数字と大文字をそれぞれ１文字以上字含めて、
    <br />
    8文字以上で入力してください。
  </span>
</label>
<input type="password" id="password" name="password" />

入力中もパスワードのルールやヒントの内容を確認しながら入力ができる🎉
ラベル内部に配置することで、スクリーンリーダーで読み上げられやすくなり、ヒット領域も広がる🎉

番外編【aria-describedby】

<label htmlFor="password">パスワード</label>
<p className="field-hint" id="passwordhint">
  数字と大文字をそれぞれ１文字以上字含めて、
  <br />
  8文字以上で入力してください。
</p>
<input
  type="password"
  id="password"
  name="password"
  aria-describedby="passwordhint"
/>

指定したHTML要素に対する追加的な説明や情報を提供する、aria-describedby属性でもヒントと入力欄を結びつけることは可能だが、スクリーンリーダーの読み上げられ方の違いや、DOMの変更との整合性の観点、ネイティブ要素と同レベルのスクリーンリーダー・ブラウザ対応は見込めないことから、推奨されていない。

必要なセマンティクスや動作が組み込まれたネイティブのHTML要素または属性が存在する場合は、要素の転用をARIAのロール、ステート、プロパティの追加でアクセシブルにする代わりに、ネイティブのものを使用します。

https://www.w3.org/TR/using-aria/#rule1

フィールドのスタイル

ラベルの位置

UX matters（UXの専門家たちのウェブマガジン）の記事内のアイトラッキング調査報告によると、、最も有効なラベルの配置場所はフォームコントロールの上であるとのこと

ユーザーがラベルと入力フィールドを別々に見る必要がないため、ほとんどの場合、入力フィールドの上にラベルを配置すると効果的です。次の入力フィールドのラベルを前の入力フィールドから視覚的に分離するように注意してください。

また、フィールドの上にラベルを配置した方がいい理由は他にも以下がある

ビューポートのサイズが変わってもレイアウトが崩れることが少なくなるため、レスポンシブデザインの管理が容易になる
拡大鏡でもラベルを見つけやすくなる
文字数が多い場合はラベルが複数行になるため、コントロールの横に配置すると視覚的なリズムが崩れる

ターゲットのサイズ

ラベルとテキストボックスを読みやすくタップしやすいサイズにすることも重要
フォントサイズは16px以上、タップターゲット全体で44px以上
- テキストフィールドだけでなく、ボタンなどタップやクリック可能な領域はすべて44px × 44px以上を担保することが理想

フォーカススタイル

フォーカスが当たっている箇所をわかりやすく示す
デフォルトでは、フォーカスされている要素がアウトラインで囲まれ、特にキーボードユーザーがフォーカス位置を確認するのに役立つ
キーボードを使ってスクリーン内を移動する人のユーザー体験が著しく悪化するので削除は禁物

/* 改善例パターン1 */
input:focus {
  outline: 2px solid #0974e8;
}

/* 改善例パターン2 */
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0974e8;
}

/* 改善例パターン3 */
input:focus {
  outline: 2px solid #0974e8;
  outline-offset: 2px;
}

最後に

今回の記事は、著書「Form Design Patterns」の内容を参考にさせていただいていますが、フォームのデザインについてさらに深く知りたい方には是非おすすめの一冊です！