メインビジュアルは、最初に伝えたい内容が一つなら静止画像から検討できます。複数の案内を切り替える必要がある場合にスライドを選び、表示順・操作方法・終了後の差し替えまで決めます。大切な案内を、利用者が待たないと見られない位置だけに置かないことが基本です。
顧客のブランド発信や季節キャンペーンを支援する制作会社・広告会社では、「トップに三つの告知を載せたい」という要望が出ることがあります。そこで画像の枚数だけを決めると、何を優先して伝えるか、スマートフォンでどう見せるかが後回しになります。見た目の提案と一緒に、閲覧と更新の条件を整理しましょう。
静止画像・手動切替・自動切替を比べる
静止画像は、写真と見出しを一組に絞って見せる案です。案内が複数あっても、主役を一つ選び、その下にカードとして並べる方法があります。すべてを大きく見せたいという要望には、優先度と掲載期間を確認し、同じ場所に入れる必要があるかを話し合います。
| 見せ方 | 決めておく条件 |
|---|---|
| 静止画像＋案内カード | 主役を一つ選ぶ。残りの案内は別の入口へ。 |
| 手動で切り替える | 前後のボタン、現在位置、各案内への行き先を用意。 |
| 自動で切り替える | 上記に加え、停止・再開と操作中の挙動も決める。 |
手動切替は、利用者が自分のタイミングで画像を送る方式です。自動切替を選ぶ場合は、読む途中で表示が変わることも想定します。枚数を増やせば案内が届く、静止画像なら問い合わせが増える、といった効果は一律に約束できません。
架空例：春の新作と相談会を同時に案内する
以下は、架空の家具ブランドで「春の新作」と「週末の相談会」を紹介する依頼例です。実在する顧客案件やGreenCodingの実績ではありません。新作紹介を主役にし、日程を探す人が相談会へ直接進める配置を選びます。
依頼メモ：メインは新作の椅子の静止画像と「春の新作を見る」のリンクにする。相談会は直下のカードに日時と「相談会の詳細」を常時表示する。スマートフォンでは写真を縦寄りに切り取り、椅子全体を残す。見出しとリンクは写真に焼き込まず、本文の文字として配置する。相談会終了後は担当者がカードを外し、新作の案内は残す。
この案なら、相談会の情報をスライドの二枚目まで待つ必要がありません。顧客が二枚の切替を希望する場合も、相談会への常設リンクは残し、両方の掲載期間と終了担当を明記します。同じ二つの告知でも、表示方式と更新箇所は別々に判断できます。
スライドを選ぶなら、止め方もデザインする
W3C WAIのカルーセル機能の解説は、前後へ移動するボタンや現在の項目の伝え方を示しています。操作名が分からない矢印や、指で横へ払う操作だけに頼らず、キーボードでも各案内へ進める仕様を実装担当と確認します。
自動切替では「一時停止」と「再開」を利用者が選べるようにし、停止後に別の場所を操作しても勝手に再開しない仕様を検討します。マウスを重ねている間だけ止まる挙動では、読んだ後に別の操作へ移る人の停止手段として不十分です。表示中の案内が変わっても、キーボードの操作位置を突然移さないことも確認します。
WCAGの一時停止・停止・非表示の解説では、自動更新される情報にも、一定の条件下で利用者が制御できる仕組みを求めています。動く情報に関する「5秒」を、スライドを短時間で切り替えれば停止手段が不要という意味に置き換えないようにします。記事中の比較だけで適合を断定せず、実際の動作を検収します。
画面と更新を、同じ仕様で検収する
- 原稿と画像：最初に伝える内容、各リンク先、画像の主役が切れない範囲を決めます。重要な条件は画像の中だけに入れません。
- PCとスマートフォン：切替前後の文字の読みやすさ、ボタンの押しやすさ、キーボードでの移動、停止後の状態を確かめます。画像を待つ間も案内が理解できるか確認します。
- 公開後の差し替え：掲載期限、確認者、更新担当を記録します。一枚に減ったときの不要な矢印や、終了した案内へのリンクが残らないことも確認します。
GreenCodingには、見せ方を決める条件から相談できる
GreenCodingには、支給デザインを基にした静止画像・スライドの実装、スマートフォンでの表示調整、WordPressで差し替える項目の整理、公開前後の動作確認を相談できます。まず優先する案内、画像と原稿、掲載期間、更新する人を共有してください。切替の演出だけでなく、任せたい実装と検証の範囲を具体化できます。