WordPress 4.8の画像widgetは画像を置くだけで終わらせずlink先と代替textを確認する

WordPress 4.8では、画像をwidgetの設定から選び、sidebarなどのwidget areaへ表示できます。画像を置く作業が簡単になっても、何を案内する画像か、クリックした人をどこへ送るか、画像が見えない人へ何を伝えるかは自動で決まりません。画像、link先、代替text、表示するpageを一組で決めます。

sidebarの画像は、余った場所を埋める飾りではありません。営業時間の案内、資料請求、採用情報、季節の企画、外部serviceへの入口など、読者に一つの行動を促すために置きます。目的が決まらないまま画像を増やすと、本文より目立つbannerが並び、何を押すべきかが分かりません。

画像を選ぶ前にwidgetの役割を決める

WordPress 4.8の公式案内は、Image Widgetを使ってmedia libraryの画像をwidget settingsから選べることを説明しています。これはHTMLを書かずに画像を出せる入口です。画像そのものがlink、説明、公開範囲、更新期限を決めるわけではありません。

説明用の仮例として、siteの全pageに表示するsidebarへ「無料相談受付中」という画像を置く場合を考えます。読者が画像をクリックしたあと、問い合わせformへ進めるのか、サービスの説明を読むのか、電話番号を見るのかを先に決めます。問い合わせformへ進めるなら、画像内の言葉とlink先の案内が同じ内容であることを確認します。formが一時停止しているのに画像だけ残れば、読者を行き止まりへ送ります。

画像をlinkにしない場合も、役割をなくしたわけではありません。営業日や休業日の告知を画像にするなら、本文に同じ情報を置くか、更新期限を決めます。画像だけに重要な文字を入れると、画面が小さい利用者、画像を読めない環境、翻訳や検索を使う人へ情報が届きにくくなります。大事な条件や連絡先は、HTMLの本文でも確認できるようにします。

代替textはfile名やbannerの文字を写すだけではない

画像widgetで使う画像はmedia libraryから選べます。media libraryのalt属性が空のままなら、画像が見えない人へ何も伝わりません。反対に、画像内の全ての文字を長く詰め込めばよいわけでもありません。画像がlinkとして何を案内するか、周囲の本文に同じ説明があるかで、必要な代替textを決めます。

たとえば、横長の画像が「採用情報を見る」というlinkなら、代替textはlink先と行動が分かる言葉にします。画像の見た目だけを説明する「青いbanner」では、何ができるlinkか分かりません。すぐ上に「採用情報」と文字のlinkがあり、同じpageへ送る同じ内容の画像なら、二つのlinkを並べる必要があるかを先に考えます。文字のlinkと画像linkを重ねれば、読者の選択肢を増やすのでなく同じ操作を繰り返させます。

ロゴや装飾の画像をwidgetへ置く場合も、説明する必要があるかを分けます。会社名を伝えるlogoなら、site titleや周囲の見出しとどちらが名前を担うかを決めます。背景模様のように情報を持たない画像なら、代替textで余計な情報を増やしません。画像の種類、linkの有無、周囲の文を見て決めます。

sidebarの表示範囲を本文と分けて確認する

widget areaは、記事page、固定page、category page、検索結果など、themeの設計によって異なるpageへ出ます。管理画面でwidgetを一つ追加しただけでは、どのpageに表示されるか分かりません。全pageへ出すsidebarなのか、記事だけに出すsidebarなのか、top pageには出ないsidebarなのかを調べます。

相談の受付画像を記事pageだけに出したいのに、privacy policyや送信完了pageまで同じ画像が出れば、読者に不要な操作を促すことがあります。逆に、必要なサービスpageへ画像が出ていなければ、案内を置いた意味がありません。widgetを追加する前に、表示するpageと表示しないpageを一覧にします。

スマートフォンではsidebarが本文の下へ回るthemeもあります。desktopでは目に入る画像が、スマートフォンでは長い本文の後にあり、読者が到達しない場合があります。画像を小さく表示するだけで済ませず、本文の途中へ必要なtext linkを置くか、widget areaをどの順番で出すかを確認します。画面幅が変わっても、読者が必要な入口を見つけられるかを見ます。

更新する人と外す日を決める

画像widgetは管理画面から替えやすいため、期限が過ぎたbannerも残りやすくなります。季節の企画、休業案内、採用募集、価格改定の告知を置く場合は、公開開始日だけでなく外す日と確認する人を決めます。画像fileを差し替えても、古いlink先やmedia libraryのalt属性が残ることがあります。

制作会社へwidgetの追加を頼むなら、画像fileを渡すだけでなく、表示するwidget area、link先URL、代替text、公開開始日、終了日、表示するpage、確認する画面を渡します。作業が終わったあとは、loginしていない状態でdesktopとスマートフォンの両方を開きます。画像の見え方、link先、alt属性、画像を消したときのlayoutを確認します。

WordPress 4.8には画像のほかにvideo、audio、rich textのwidgetもあります。mediaをwidgetへ置けるからといって、videoやaudioを自動再生したり、本文にある説明をsidebarへ重ねたりする理由にはなりません。mediaの形式を選ぶ前に、読者へ伝える内容と、読み込みに失敗したときの案内を決めます。

最初の一手は、追加したい画像widgetを一つ選び、その画像が案内する行動、link先、代替text、表示するpage、外す日を書き出すことです。画像をuploadしてから考えるのでなく、読者が画像を見たあとに何ができるかを決めます。