企業サイトのボタンは、サイト構築の段階でテンプレートに付属していた主色のボタンをそのまま使い、「詳しくはこちら」という文言でファーストビューの右側に配置する、といったケースが少なくありません。公開後は誰も触らず、運用担当者が「訪問者がページを読んでも次に何をすればいいか分からない」と気づくまで放置されます。ボタンは装飾要素ではなく、ページ上で数少ない「明確にアクションを促せる場所」です。ボタンが実用的かどうかを判断する基準はシンプルです。訪問者が一目で見つけられるか、クリックすると何が起こるかを理解できるか、この2点です。
まずこのボタンで何をしてほしいかを明確にする
ボタンを修正する前に、各ボタンにアクションの目的を設定します。よくあるアクションはいくつかの種類に分かれます。詳しく知る（製品ページやソリューションページへ遷移）、問い合わせを始める（電話、フォーム入力、チャット追加）、資料を入手する（ドキュメントのダウンロード、見積もり説明の閲覧）、メイン導線に戻る（カテゴリページへ戻る、すべて表示）。アクションの目的が異なれば、ボタンの文言、配置、スタイルの重要度も変えるべきです。
1ページにつき主要なアクションは1つだけにし、それ以外のボタンは優先度を下げます。1画面に「今すぐ相談」「オンラインメッセージ」「電話で問い合わせ」「見積もりを取得」という同じくらい目立つボタンが4つ並んでいると、訪問者はかえって立ち止まって比較してしまい、アクションが遅れます。運用担当者は紙を1枚用意し、ページ上のすべてのボタンをリストアップして、それぞれがどの種類のアクションに属するかを書き出し、重複しているものや統合できるものを判断するとよいでしょう。
ボタンの文言はアクションと結果を明確に書く
「詳しくはこちら」「ここをクリック」「詳細」といった文言の問題は、訪問者がクリックする前に何が得られるか分からないことです。より実用的な書き方は、アクションと対象を明示する方法です。例えば「製品仕様を見る」「選定の提案を取得」「訪問測定を予約」「見積もり説明をダウンロード」などです。文言の長さは一目で読み切れる範囲に収め、中国語では一般的に4〜8文字が無難です。長すぎるとボタン自体の可読性を圧迫します。
同じページ上で、異なるボタンの文言に類義語を使って互いに干渉させないようにします。「今すぐ相談」と「すぐに相談」を並べると、訪問者は両者に違いがあると誤解しますが、実際には同じページに遷移します。運用担当者は確認時にページのソースコードや管理画面の内容を検索し、意味が重複するボタン文言を1つの表現に統一します。
配置は視覚だけでなく読む順序に従う
ボタンをどこに置くかは、その位置で訪問者がすでにアクションを起こしたいという意欲を持っているかどうかで決まります。ファーストビューのボタンは「ソリューションを見る」のような明確な全体的アクションを受けるのに適しています。製品紹介段落の後のボタンは「見積もりを取得」「選定相談」など、ある程度理解してから発生するアクションを受けるのに適しています。ページ末尾のボタンは、最後まで読んでもまだ決断できていない人に出口を提供するのに適しています。
モバイルは別途確認が必要です。スマートフォンではファーストビューの高さが限られているため、ボタンがスクロールしないと表示されない位置にあると、存在しないのと同じです。運用担当者はスマートフォンのブラウザでページを開き、スクロールせずに最初の画面で主要ボタンが見えるかを確認します。見えない場合は、ボタンを上に移動するか、ファーストビュー上部のテキストや画像を簡素化することを検討します。
複数のボタンが同じ画面にある場合は階層で優先順位を付ける
同じ領域に2つ以上のボタンがある場合は、主次スタイルで区別します。主要ボタンは塗りつぶしでコントラストの強い背景色、次要ボタンは枠線かテキストリンクにします。同じくらい目立つ塗りつぶしボタンを並べると、主次がなくなるのと同じです。色の選択では、主要ボタンの背景色をページ背景や画像と明確に区別し、同系色の画像上にボタンが重なって見えにくくなるのを避けます。
ボタンの周囲には十分な余白を確保します。ボタンがテキストや画像の端に密着していると、クリック時に隣のリンクを誤ってタップしやすくなります。運用担当者は確認時にスマートフォンで実際に何度かタップし、指の位置がずれやすいかどうかを確認します。
公開前にボタンの可用性を一つずつ確認する
ボタンを作っただけでは使えるとは限りません。公開やリニューアルの前に、以下の順序で確認します。
- 各ボタンを一つずつクリックし、遷移先が正しいことを確認する。トップページ、404ページ、旧バージョンのページに飛んでいないこと。
- 電話ボタンがスマートフォンで直接発信できるか、フォームボタン送信後に明確な成功メッセージが表示されるかを確認する。
- ボタンの文言と遷移後のページ内容が一致しているか確認する。「見積もりを取得」と書いてあるのに会社概要に飛ぶことを避ける。
- スマートフォンとパソコンでそれぞれ確認し、ボタンが隠れていないか、画面からはみ出していないか、テキストが途切れていないかを確認する。
- 同じアクションがページの異なる位置で同じターゲットを指しているか確認する。複数の入口が異なるページを指すことを避ける。
これらの確認に技術的な背景は不要で、運用担当者自身で完了できます。重要なのは、新しいページを公開したり内容を調整したりするたびに必ず通す、定型の作業にすることです。
ボタンを日常メンテナンスに組み込み、一度作って終わりにしない
ボタンの遷移先ページは変わり、ビジネスの重点も変わります。運用担当者は四半期ごとに主要ページのボタンを見直すとよいでしょう。文言が現在の主推しビジネスにまだ合っているか、遷移先がまだ有効か、ページ上に新たな重複ボタンが蓄積していないか。調整時は一度に1つの変数だけを変更し、変更後にしばらく観察します。文言、位置、色を同時に変えると、問題が起きたときにどの変更が原因か分からなくなります。
ボタンはサイトの中では非常に小さな要素ですが、訪問者が内容を読んだ後にどこへ進むかを直接左右します。これをコンテンツの一部としてメンテナンスすることは、視覚スタイルを繰り返し調整するよりも価値があります。
