メインコンテンツへ移動
Boletolibre

イベントサイトのヒーロー部分:最初の画面で必要な情報を伝える

ヒーロー部分はイベントページの最初の領域ですが、申込導線のすべてではありません。初めて来た人が、何のイベントか、いつどこで開かれるか、主ボタンを押すと何が起きるかを分かるようにします。写真やレイアウトを決める前に、承認済みの開催情報からその答えを書き出してください。

Boletolibre編集部

公開日

横長のページ枠と細いスマートフォン枠に、同じ情報の優先順位を示す図。タイトルの線、カレンダーと場所の記号、主操作のブロック、独立した画像領域がある。
広い画面からスマートフォンに変わっても、開催情報と操作が分かる状態にします。図形は情報の優先順位を示すもので、製品画面ではありません。

1. 見出しを書く前に開催情報を確定する

初めての人にも分かる言葉でイベント名を書きます。体験内容や対象者を一文で補い、承認済みの日付、タイムゾーン付き開始時刻、会場またはオンライン形式を示します。連続開催なら、このページがどの回や日程を扱うか明記します。通年のブランド標語だけでは現在の日程は伝わりません。変更され得る各情報に担当者を決めます。

編集可能なヒーロー文案・公開確認シートをダウンロード(Markdown、英語)

2. 最初の画面に順序をつける

イベント名を主見出しにし、具体的な日付と場所を近くに置きます。その下で、参加すると何ができるかを短く説明します。装飾的な標語は補助にはなりますが、説明の代わりにはなりません。重要な言葉をポスター画像の中だけに入れず、ページのテキストとして用意します。デザイン承認前に確認シートでパソコンとスマートフォンの順序を比べます。

3. 主ボタンを実際の行き先に合わせる

現在の販売・受付状態に合う主操作を一つ選びます。「チケットを選ぶ」は正しいイベントや日付選択へ、「案内希望リストに登録」は実際のフォームへつなぎ、購入画面に誤誘導しません。プログラムや来場案内など別の操作が必要なら、別の目的が分かるラベルにします。ボタン文言、URL、担当者、確認日を記録します。W3Cは、リンクの目的が文言またはプログラムで判断できる文脈から分かることを説明しています。[1]

4. デザイン資料ではなく公開ページを確認する

公開ページをスマートフォンと広い画面で開き、日付・場所・ボタンが読めるか、画像の切り抜きで情報が隠れないか、横スクロールなしで文章が折り返されるかを確認します。写真の上に文字を置く場合は実際の切り抜きでコントラストを調べます。W3Cは背景画像上のコントラスト不足をアクセシビリティ上の問題として示しています。キーボードと新規訪問者の視点でボタンをたどり、遷移先のイベントと販売状態が一致するか確認します。日付・会場・チケットURLが変わったら再確認します。[2][3]

出典と参考資料

  1. Understanding ReflowW3C Web Accessibility Initiative · 確認日
  2. Failure F83: Background images without sufficient text contrastW3C Web Accessibility Initiative · 確認日