ボタンは実際の操作を示しクリック後の完了も評価する
ボタンの改善では、何が起きる操作かを伝え、指やキーボードで実行できる状態を作ります。問い合わせが目的なら、クリックと送信完了 を別の段階として測定します。クリックの増加だけでは、問い合わせが増えたと判断する材料が不足します。
料金ページへ移る操作と、問い合わせを送信する操作は役割が違います。見た目を決める前に、操作と文言の対応を確かめましょう。
Webサイトのボタンを改善する｜操作の意味と送信完了を検証
概要
Webサイトのボタンは、文言、操作できる範囲、キーボード操作を合わせて設計します。この記事では、リンクとの違い、操作に合うラベル、サイズと間隔、クリックと問い合わせ完了を区別した改善の検証方法を解説します。
公開日
更新日
文言と要素を実際の操作に合わせる
別のページへ移る場合はリンク、フォーム送信や画面内の操作はボタンが基本です。W3Cのボタンパターンも、ボタンとリンクの役割を区別しています。ボタンの形をしたリンクでも、移動先が料金ページなら料金を見るという文言が対応します。（W3Cのボタンパターン）
申し込みの確定と相談の送信を区別する
予約を確定しないフォームに予約を確定するという文言を使うと、操作の意味が一致しません。相談だけを受けるなら、問い合わせを送信するなど実際の処理を書く方法にします。詳しい原稿例は マイクロコピー を参照してください。
無料、所要1分といった補足は、実際の料金や入力時間を確かめた内容に限ります。読み手の不安を減らす目的で、確認していない説明を加えないことが必要です。
操作範囲とキーボード操作を確保する
文字の大きさと、実際にクリックできる領域を区別します。余白も操作範囲に含まれる設計なら、その領域を計測します。
小さな操作には大きさか十分な間隔を設ける
WCAG 2.2のレベルAAでは、原則24×24 CSSピクセル以上の操作範囲を求めています。小さい操作同士の間隔、文中リンク、同等の別操作などには例外があります。CSSピクセルはページのレイアウトで使う単位です。この最小基準だけで、すべての人に十分な操作性があるとは判断せず、実際の操作も評価します。（W3Cの操作範囲）
キーボードで移動した時は、現在の操作位置を表示します。標準的なボタンはEnterやSpaceで実行できることを点検し、リンクの操作と混同しないようにします。
操作の実行と問い合わせの受付を検証する
文言、位置、周辺の説明を変更した際は、表示、操作、送信結果を点検します。複数回クリックした回数と、1回以上送信を完了した人の数を同じ指標として数えないことが必要です。
改善の比較では分母と成果をそろえる
クリック率には、表示された人数やセッション数など、採用する分母を明記します。送信完了率も同じ集計単位を定義して比較します。同時期の比較は A/Bテストの設計 で説明しています。
クリックが増えて送信が減った時は、入力エラー、実際の料金、受付方法の説明を調べ、問題がある欄や案内を修正しましょう。公開後も、受け付けた問い合わせが届くことを確認します。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
サービス説明から問い合わせへの操作を点検するホームページづくりに、ぜひ使ってみてください！
よくある質問
Q: ボタンは何色がよいですか？
A: 文字と背景を識別でき、ページ内で操作として認識できる組み合わせを選びます。採用は実際の操作と成果の計測から判断します。
Q: クリック率が上がれば成功ですか？
A: 問い合わせが目的なら、送信完了と入力エラーも評価します。クリック数と完了した人の数は別の指標です。
Q: スマートフォンのボタンは24ピクセルで十分ですか？
A: 24×24 CSSピクセルはWCAGの原則的な最小基準です。間隔や操作する人、使う環境も踏まえて領域を設計します。
Q: 料金を見る操作もボタン要素にしますか？
A: 料金ページへ移るならリンクを使います。見た目の形に加え、要素の役割と実際の処理を一致させます。
