この章では、ボタン、リンク、フォームの基本を学びます。
Webページは、読むだけでなく操作されます。
操作できる要素がわかりにくいと、見た人は次に何をすればよいか迷ってしまいます。
操作できることを伝える
ボタンやリンクは、操作できることが見た目で伝わる必要があります。
たとえば、ボタンなら、背景色、枠線、余白、ホバー状態などでクリックできることを伝えます。
リンクなら、本文と区別できる色や下線が必要です。
確認したい項目は次の通りです。
- どこがクリックできるかわかるか
- ボタンとただの装飾が区別できるか
- リンクが本文に埋もれていないか
- スマホで押しやすい大きさか
- ホバーやフォーカスの状態があるか
操作できる場所がわかることは、使いやすさの基本です。
ボタンの役割
ボタンは、行動を促すための要素です。
たとえば、次のような行動です。
- 問い合わせする
- 予約する
- 資料をダウンロードする
- 詳細を見る
- 購入する
- 送信する
ボタンは、ページの目的とつながっている必要があります。
目立つボタンをたくさん置くのではなく、どの行動を優先するかを決めます。
ボタンの見た目
ボタンの見た目では、次のことを確認します。
- 文字が読みやすいか
- 内側余白が十分か
- 背景色と文字色のコントラストがあるか
- 幅が広すぎないか
- 高さが押しやすいか
- 角丸や影のルールが統一されているか
- 他のボタンと役割が区別できるか
主ボタンと補助ボタンを分けることもあります。
たとえば、「問い合わせ」は強い色のボタン、「詳しく見る」は枠線だけのボタンにするような使い分けです。
ボタン文言
ボタン文言は、押すと何が起きるかがわかる言葉にします。
たとえば、「送信」だけよりも、「問い合わせを送信する」の方がわかりやすい場合があります。
文言の例です。
- 詳しく見る
- 料金を見る
- 予約する
- 無料相談する
- 資料をダウンロードする
- お問い合わせする
ボタン文言は、短く、具体的にします。
「こちら」だけだと、何が起きるかわかりにくいことがあります。
リンクの見せ方
リンクは、クリックできることが伝わる必要があります。
本文中のリンクは、本文と区別できる色や下線を使うとわかりやすくなります。
ただし、色だけに頼ると見分けにくい場合があります。
重要なリンクでは、下線やアイコンも検討します。
確認したい項目は次の通りです。
- 本文とリンクが区別できるか
- ホバー時の変化があるか
- 訪問済みリンクが必要か
- 外部リンクだとわかる必要があるか
- クリック範囲が狭すぎないか
リンクは、見た目を控えめにしすぎると見落とされます。
フォームの役割
フォームは、ユーザーが情報を入力する場所です。
問い合わせ、予約、資料請求、会員登録などで使います。
フォームが使いづらいと、ページの目的達成に大きく影響します。
フォームでは、次のことを考えます。
- 何を入力すればよいかわかるか
- 必須項目がわかるか
- 入力欄が押しやすいか
- エラーがわかりやすいか
- 送信前に不安がないか
- スマホで入力しやすいか
フォームは、見た目以上に使いやすさが重要です。
ラベルとプレースホルダー
フォームでは、入力欄にラベルを付けます。
ラベルは、その入力欄が何の項目かを示すテキストです。
プレースホルダーは、入力欄の中に薄く表示される補助テキストです。
プレースホルダーだけに頼ると、入力中に項目名が見えなくなることがあります。
基本的には、ラベルを表示したうえで、必要ならプレースホルダーで補足します。
| 要素 | 役割 |
|---|---|
| ラベル | 入力項目名を伝える |
| プレースホルダー | 入力例や補足を伝える |
| 補足文 | 入力ルールや注意点を伝える |
エラー表示
フォームでは、エラー表示も大切です。
入力ミスがあった時に、何が間違っているか、どう直せばよいかがわかる必要があります。
エラー表示では、次のことを確認します。
- どの項目にエラーがあるかわかるか
- エラー理由が具体的か
- 色だけでなくテキストでも伝えているか
- エラー後に入力欄へ戻りやすいか
- スマホでエラー文が見切れないか
「エラーです」だけではなく、「メールアドレスの形式で入力してください」のように書くとわかりやすくなります。
状態変化
ボタン、リンク、フォームには状態があります。
たとえば、次のような状態です。
- 通常
- ホバー
- フォーカス
- 押下中
- 無効
- エラー
- 完了
状態変化があると、操作していることが伝わりやすくなります。
特に、キーボード操作時のフォーカス表示は消さないようにします。
この章のまとめ
- ボタンやリンクは、操作できることが見た目で伝わる必要がある
- ボタン文言は、押すと何が起きるかがわかる言葉にする
- フォームでは、ラベル、必須表示、補足、エラー表示が重要
- 色だけに頼らず、テキストや状態変化でも情報を伝える
- 次の章では、UIパーツをバラバラにしない一貫性を学ぶ