メインビジュアル (ヒーローイメージ) や背景の動画による演出
ウェブサイトのメインビジュアル (ヒーローイメージ) や、メインコンテンツの背景が、動画になっているものを最近よく目にします。高品位な動画を提示することで、サイトが扱う商品やサービスの特長、雰囲気、質感、姿勢、などをユーザーに効果的に印象付けることが期待できます。以下は、本記事執筆時点で見つけた数ある中のほんの一例です。
こうした演出は、商品やサービスの「予期的 UX」醸成やブランディング訴求といった側面が重視される中、今後ますます増えててゆきそうですが、ウェブコンテンツである以上はこうした側面を十分に活かしつつも、基本的なユーザビリティやアクセシビリティをしっかり押さえることで、ユーザーのフラストレーション (ひいてはビジネス面での余計な機会損失) を防ぐようにしたいものです。
ページの読み込み速度
一般的に、動画が埋め込まれていると、その分ページ全体の読み込み (コンテンツの提示) は遅くなります。このようないわばパフォーマンスの低下は、ユーザビリティ (ユーザーの目的達成の効率や、ユーザーの満足度) に悪影響を与えることがあります。
とりわけ、スマートフォンやタブレットを用いて比較的回線速度が遅い環境でウェブを閲覧するユーザーも多いことを考えると、読み込みが遅いことでユーザーを「必要以上に待たせる」ことの影響は、よくよく考える必要がありそうです。くれぐれも、サイト制作側/運営側の自己満足でこのような演出をすることは避けたいものです。
スマートフォンでの表示時にはメインビジュアル (ヒーローイメージ) を静止画にする、動画は任意再生にする、といったことも含め、検討するとよいでしょう。
カラーコントラスト
メインビジュアル (ヒーローイメージ) 部分にサイト名やサービス名、タグライン、キャッチコピー、行動喚起 (CTA : Call To Action) ボタンなどユーザーに伝えたい情報が乗る場合、文字色と背景色のコントラストに配慮し可読性を担保する必要があります。(参照 : WCAG 2.0 達成基準 1.4.3)
特に静止画でなく動画の場合、文字に対する背景色は時々刻々と変化することになるため、コントラスト比の確保には慎重なチューニングが求められます。動きや色の変化が生じない (あるいは僅かな) エリアをうまくあしらって、適切なコントラスト比を保ちつつ、肝心なメッセージや行動喚起がしっかり伝わるようデザインしましょう。
なお、行動喚起ボタンなどユーザーが操作可能な UI コンポーネントについては、フォーカスの可視化も併せてデザインに盛り込みたいところです。(参照 : WCAG 2.0 達成基準 2.4.7)
動きのコントロール
メインビジュアルや背景の動画が5秒より長く続く場合、WCAG 2.0 達成基準 2.2.2 で言うところの「動きのある」情報に該当し、一時停止、停止、または非表示にできるメカニズムが求められます。これは、認知障害や学習障害を持つユーザーのコンテンツ利用 (コンテンツへの集中) が妨げられる恐れを回避するためです。
エモーショナルな演出をするのにわざわざ機能的な UI コンポーネント (停止ボタンなど) を盛り込みたくないというデザイン側の意図はあるかもしれませんし、ページをスクロールすることでユーザーが任意に動画部分を隠すことができれば問題ないのでは、という考えもあるかもしれません。しかし「達成基準 2.2.2 を理解する (WCAG 2.0 解説書)」を読む限り、スクロール操作によって動画を隠せることでOKとする解釈はできないので、(将来はもしかしたらユーザーエージェントが動画の自動再生を任意でブロックする仕組みを持つかもしれませんが) 現時点では、うまくデザイン的な折り合いをつけつつ、動画を停止できる機能をコンテンツ側に実装するべきでしょう。もちろん、動画の長さを5秒以内にまとめたり、動画の再生はユーザーの任意とする (たとえばこちらの焼き立てカスタードアップルパイ専門店のサイトのように、デフォルトでは高品位な静止画を提示し、その中に動画再生を誘う UI を仕込むのも面白いと思います) といったことも、プライオリティの高い選択肢として積極的に検討したいところです。
個人的には、ユーザーに伝えたい情報 (サイト名やサービス名、タグライン、キャッチコピー、行動喚起ボタン、など) が動画に乗る場合は別として、あくまで背景イメージとして動画を盛り込む場合は (上記の例で言うとキッズバイクのサイト)、スクロール操作による解決も認められてよいのでは、という気がしないでもないですが、このあたりの是非については、障害当事者への実際の影響を踏まえたうえでの現実的な知見が、ウェブアクセシビリティのコミュニティの中で蓄積され議論されるといいな、と思います。
また最近では、訴求したいことを絞ることで動きを最低限にした動画も増えてきていますが (上記の例で言うと宿泊施設のサイトや炭酸入浴剤の販売サイト)、このように控えめな演出の動画の場合、コンテンツ利用 (コンテンツへの集中) が妨げられる恐れはどの程度なのか (ある一定程度の動きより「抑えめな」な動きであれば特に支障ない、と言うことができるものなのか) も気になるところです。このあたりも、障害当事者への実際の影響を踏まえつつ現実的な落としどころを探ることができたらいいな、と思います。