WordPress 4.7のvideo headerは画像だけでもヘッダーの役割を果たすようにする

WordPress 4.7のvideo headerは、動画を見せることより先に、画像だけでもヘッダーの役割を果たすようにします。動画は全ての閲覧環境で同じように再生されるとは限りません。ヘッダーに置くサイト名、案内、リンクは、動画が動かない状態でも読めなければなりません。

WordPress 4.7では、Custom Headerで動画を扱えるようになります。video headerは、動きのある装飾として扱われます。動画を扱える環境では、最初に出したヘッダー画像を動画へ置き換えます。テーマ側は、動画そのものだけでなく、画像、再生と停止のボタン、画面幅ごとの表示を確認します。

動画があることで、headerの説明を省いてよいわけではありません。はじめて来た人は、動画が何を表しているかをすぐ理解できないことがあります。site名、扱うサービス、次に読むpageへの入口は、文字とlinkで確認できるようにします。動画の上へ置く文字が動きに埋もれるなら、文字の色、背景、画像の選び方を見直します。動画の印象と、情報を読めることを同じ判断にしません。

header画像は、動画の静止画をそのまま使えばよいとは限りません。再生中には問題なく見える一場面でも、画像だけで見ると暗すぎる、文字と重なる、主題が分からない場合があります。動画が使えない状態を開き、logo、site title、menu、最初の案内が読めるかを確認します。画像は失敗時の代用品ではなく、headerの基本状態として選びます。

画像、動画、操作を別の状態として確認する

説明用の仮例として、店舗の雰囲気を見せる短い動画をヘッダーへ置く場合を考えます。動画が再生されないとき、何もない背景だけが出れば、訪問者はサイトが何の案内か分かりません。代わりに出るヘッダー画像には、文字を詰め込むのでなく、サイト名やヘッダー内の文章が読める背景を用意します。

動画が動く状態で文字やメニューが読めても、画像へ戻したときに読めなければ、画像を使う環境でヘッダーの役割を果たせません。反対に、画像だけで内容が伝わっていれば、動画は補助として扱えます。この順番なら、動画を使う理由と使わない状態の責任を混同しません。

説明用の仮例で、店舗の外観を映す動画を使う場合を考えます。動画では人の出入りや店内の雰囲気を見せられても、画像だけの状態では場所、営業時間、予約方法までは分かりません。headerのすぐ下やmenuから、来店前に必要な案内へ進めるようにします。動画を見終えるまで待たせるのでなく、初めて表示された時点で次の行動を選べる状態にします。

動きが強い動画は、文字の可読性だけでなく、利用者が停止できることも確認します。停止と再生のbuttonがあるなら、動画の上に重なる文字やlinkより操作しやすい位置にあるか、buttonの意味が分かるかを見ます。テーマがbuttonのCSSを用意していない状態では、背景と同化して見えないことがあります。buttonを飾りとして小さく置くのではなく、実際に押して状態が切り替わることまで確認します。

テーマは標準のmarkupを出してから整える

テーマでvideo headerを有効にするには、Custom Headerの設定へ'video' => trueを加えます。表示にはthe_custom_header_markup()を使うと、ヘッダー画像と動画を同じ仕組みで出せます。動画が設定されている場合は、必要なJavaScriptも読み込まれ、利用できる環境では画像を動画に置き換えます。

動画を再生できる状態では、wp-custom-header.jsが停止と再生を切り替えるボタンを挿入します。このボタンへWordPress本体はCSSを当てません。テーマがボタンを見えない位置へ追いやらず、背景と重なって読めなくならないように整える必要があります。見た目を整える作業と、利用者が停止できることは別に確認します。

テーマを作るときは、the_custom_header_markup()が出す状態を画像だけに固定して考えません。設定によってvideo、画像、外部動画のiframeを含む表示が出るため、headerを囲むHTMLとCSSがどの状態でも崩れないかを確認します。独自のvideo要素を別に足すと、標準のmarkupと二重に出たり、停止buttonがどちらを操作するか分からなくなったりします。まず標準のmarkupを出し、必要な見た目だけをtheme側で整えます。

video headerを使わないpageでも、同じheaderがsiteの主題を伝える必要があります。記事page、固定page、検索結果のpageで画像だけになるなら、top pageだけを確認して終わらせません。headerの出し方がpage templateごとに違うthemeでは、動画が出るpageと出ないpageを一つずつ選びます。どのpageで何が出るかを決めずにCSSを直すと、別のpageでlogoやmenuが隠れることがあります。

表示される条件を決めてから見た目を調整する

標準では、動画はフロントページで、幅900px以上かつ高さ500px以上の表示領域にだけ読み込まれます。ほかのページでは、the_custom_header_markup()を呼んでもヘッダー画像だけが出ます。動画を表示する範囲を広げるなら、画像だけの状態を例外ではなく標準の一つとして設計します。

ヘッダーのコンテナには、画像、動画、外部動画を使う場合のiframeが入ることがあります。CSSを画像だけに合わせると、動画へ置き換わったときに幅や高さが崩れます。.wp-custom-header内の画像、動画、iframeを同じ条件で確認します。

画面幅を替えるときは、動画が出ない小さい画面を不具合として扱いません。標準の条件では画像だけが出るため、小さい画面では画像、文字、menu、本文への入口の順で読めるかを見ます。大きい画面では動画が出ても、menuを開いたときにvideoが前面へ残らないか、buttonが本文の操作を妨げないかを確認します。desktopの見栄えと小さい画面の利用しやすさは、別々に確認します。

ヘッダーは動画の見せ場より入口として考える

header videoが目を引いても、訪問者が次に何を読めばよいか分からなければ、サイトの入口として足りません。動画の尺や動きの強さを先に決めるのではなく、ヘッダーで伝える主題、続けて読むページ、動画を使わない状態を決めます。

公開前には、動画を選んだ状態、画像だけの状態、停止した状態を別々に開きます。大きい画面だけでなく小さい画面でも、ロゴ、メニュー、本文への入口が隠れないかを確認します。最初の一手は、動画を外した状態でヘッダーを開き、サイトの主題と最初のリンクが読めるかを見ることです。

外部へthemeの調整を頼む場合は、動画を置く依頼と、headerで伝える内容を分けて渡します。使用する画像、動画が出ないときの表示、buttonの位置、確認するpageと画面幅、公開前に内容を確認する人を決めます。CSSを書く人が動画を表示できても、営業条件や問い合わせの案内まで決めるとは限りません。headerの見た目を任せることと、siteの入口で何を伝えるかを任せることは別です。