FV-007 公開  更新

告知型 ファーストビュー

セミナーやイベント、期間限定のキャンペーンなど、期限のある情報を最初の画面の主役にするファーストビューの設計です。
イベントでは日時・形式・参加費・定員・申込締切、キャンペーンでは期間・対象・適用条件など、参加や利用を判断するために必要な情報を1つの枠にまとめます。
受付の状態をラベルで示し、締切や満席のあとは申し込みボタンを外して表示を切り替えることで、申し込めない告知が申し込めるように見えたまま残らないようにします。

ワイヤーフレーム(PC)

告知型 ファーストビュー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

告知型 ファーストビュー SP版ワイヤーフレーム

SP版の特徴

  1. 縦に並べる:左右に並べると概要の文字が小さくなるため、説明、概要、ボタンの順に並べています。
  2. 概要の枠を詰める:項目名の幅と余白を詰め、補足の説明を減らして、ボタンが大きく押し下げられないようにしています。
  3. 時刻は分断されにくく:「14:00〜」と「15:30」が別の行に分かれて読み違えないようにしつつ、日時全体は画面からあふれないようにしています。
  4. 締切は枠の中に残す:狭い画面でも、締切を見落とさないようにしています。

採用前の判断ポイント

向いているケース

  • 日時や締切のある情報を、最初の画面で伝えたい
  • セミナー、説明会、展示会、体験会などへの申し込みを受け付けている
  • 期間や対象が決まったキャンペーンを案内したい
  • イベントの告知ページ、セミナーの申込ページ、キャンペーンのランディングページなど

向かないケース

  • 期限のない、会社やサービスそのものを紹介したい(言葉で内容を伝える一文訴求型などが向きます)
  • 空いている日時の中から、読み手に選んで予約してもらいたい(日時予約型のフォームが向きます)
  • 締切後に表示を切り替える担当や仕組みを用意できない(期限切れの告知が残ってしまいます)

このワイヤーの特徴

参加するかどうかを決める情報が、最初の画面にそろう

セミナーやイベントのページを開いた人が最初に知りたいのは、いつ・どこで・いくらで・いつまでに申し込めばよいかです。日時・形式・参加費・定員を1つの枠にまとめ、最初の画面で参加できるかどうかを判断できるようにしています。

申し込みの締切と、今の受付状態が分かる

締切が本文の下の方にしか書かれていないと、気づかずに申し込みそびれることがあります。締切を概要の枠の中に目立たせて置き、見出しの上に「申込受付中」のような状態のラベルを付けています。

締切後も、そのまま残る情報にならない

期限が過ぎた告知が申し込み受付中のまま残っていると、申し込めるように見えてしまいます。締切後は申し込みボタンを外し、「申し込みは終了しました」と次回の予定への案内に切り替えています。
開催後も内容は記録として残し、状態を「開催終了」に更新します。

日時を、読み間違えにくい形で示す

日付だけでは曜日を確かめる手間がかかり、オンラインの場合は時間の基準も気になります。日付・曜日・開始と終了の時刻を並べ、日本時間であることを添えています。

SPでは、概要の枠を詰めて、申し込みボタンまで早くたどり着ける

SPで概要の枠をPCと同じように並べると、ボタンが大きく下に押し出されます。項目名の幅と余白を詰め、補足の説明を減らして、申し込みボタンまで早く目に入るようにしています。

制作時のよくある失敗

日時や締切を、画像の中の文字だけで伝える

告知のバナー画像に日時や締切を入れるだけでは、読み上げで伝わらず、文字も小さくなりがちです。
日時・場所・締切はHTMLのテキストで書きます。

締切や開催が終わっても、受付中の表示のまま残っている

期限が過ぎた告知が受付中の表示のまま残ると、読み手は申し込めると思ってしまいます。
締切後は申し込みボタンを外して状態を切り替えます。
開催後は「開催終了」に切り替え、開催日時や内容は記録として残し、必要に応じて当日の資料・開催レポート・次回の案内を加えます。

曜日や時間の基準がなく、日時を読み違えやすい

「10/22 14:00」だけでは、曜日を確かめる手間がかかり、海外から見る人は時間の基準も分かりません。
曜日と開始・終了の時刻を書き、オンラインなら日本時間であることを添えます。

参加条件や費用が、申し込みの画面まで分からない

参加費や対象者、定員の扱いが申し込みの途中で初めて分かると、途中でやめてしまう原因になります。
参加の条件と費用は、最初の画面の概要に含めます。

根拠のない「残りわずか」「まもなく締切」で急がせる

実際の申込数や締切と関係なく急がせる表示は、読み手の信頼を損ないます。
残席などを表示する場合は、実際の数に基づいて更新し、キャンペーンの場合は期間と条件を明記します。

よくある質問

締切後の表示は、どう切り替えればよいですか?

締切の日時をデータとして持たせ、過ぎたら申し込みボタンを外して「申し込みは終了しました」と表示する仕組みにしておくと、手作業での切り替え忘れを防げます。
定員に達した場合は、締切前でも「満席」などに切り替えます。
開催後は「開催終了」に切り替え、ページは消さずに開催日時や内容を記録として残し、必要に応じて当日の資料や開催レポート、次回の案内を加えます。

残りの席数は表示したほうがよいですか?

実際の申込数と連動して正しく更新できる場合は、参加を決める手がかりになります。
手作業で更新する場合や、数が正確でない場合は、「先着順」「定員に達し次第締め切り」のように条件だけを示すほうが安全です。

カレンダーに追加するボタンは必要ですか?

必ずしも必要ではありませんが、申し込みのあとに予定を登録しやすくなります。
置く場合は、申し込みの完了画面や確認のメールに入れると、申し込む前の画面を複雑にせずに済みます。

期間限定のキャンペーンにも使えますか?

使えます。
その場合は、期間・対象・条件を概要の枠にまとめ、終了後の表示の切り替えも同じように用意します。
通常価格と割引価格を並べる場合の見せ方は、キャンペーン価格型の料金表も参考になります。

同じパーツのPattern

ファーストビューの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開