WordPressのsite iconは画像を作る前にtabで見分ける印と変更後の確認を決める

WordPressのsite iconは、会社ロゴをそのまま小さくするための画像ではありません。browserのtabやmobileの画面で、読者が開いているsiteを見分けるための印です。細かな社名、長い横組みのロゴ、説明文まで入れると、小さく表示されたときに読めません。まず、どの形なら小さな表示でも区別できるかを決めます。

WordPress 4.3ではsite iconを標準機能で設定でき、desktopとmobileのiconとして扱えるようになりました。設定画面へ画像を入れる作業は簡単でも、元画像の管理、themeを替えたあとの表示、logoとの役割は別に確認します。site iconを新しくしたことと、会社の案内が整ったことを同じに考えません。

logoとsite iconは同じ画像でなくてもよい

headerに出すlogoは、会社名やservice名を読ませるための画像です。横長のlogo、細い文字、sub titleを含むmarkでも、headerの広さがあれば読めます。一方、site iconは小さな正方形の領域で見分けることが必要です。同じimage fileを縮小すればよいとは限りません。

説明用の仮例として、会社名と図形のmarkからなる横長logoを考えます。headerでは会社名を含むlogoを使い、site iconでは図形のmarkだけを使う方が、tabの中で判別しやすい場合があります。二つの画像が完全に同じでなくても、色、形、印象が会社の識別としてつながっていれば、読者は迷いません。

反対に、site iconを派手な飾りにして、headerのlogoと関係がなくなると、読者は別のsiteを開いたように感じます。新しい流行のiconを使うことより、company nameやlogoが持つ要素のうち、何を残すかを決めます。site iconは広告用の画像ではありません。小さな印として一度で見分けられることを優先します。

小さく表示した画面で形を確認する

大きな画像で見ると読める文字や細い線も、tabでは消えます。画像を作ったら、編集画面のpreviewだけでなく、browserで複数のtabを開きます。白い背景で線が見えなくなっていないか、濃い色がつぶれていないか、ほかのsiteのiconと並んでも区別できるかを見ます。

mobileでは、desktopと違う場所や大きさで見える場合があります。画面へ追加するicon、bookmarkに使うicon、browserのtabで使うiconを一つの見た目として決めないようにします。実際にすべての端末を試せない場合でも、少なくとも主要なbrowserと手元のmobile画面で、site名を読まなくても目印になるかを確かめます。

画像の細部を直すときは、何を見分けにくくしているのかを一つずつ確認します。図形が小さすぎるのか、余白が多すぎるのか、文字が入っているのか、背景と近い色なのかを分けます。形、色、文字を一度に変えると、どの修正で見やすくなったか分かりません。小さなiconほど、要素を増やさずに整えます。

画像を設定する仕事と元dataを残す仕事を分ける

WordPressのsite iconへuploadした画像は、siteで使うためのdataです。元にしたlogo file、画像を作った人、使用してよい範囲、差し替えるときの手順まで自動で残るわけではありません。制作会社へ画像を頼む場合も、site iconだけを受け取って終わりにせず、元fileと更新に必要な情報を会社側へ残します。

たとえば、事業名を変えたり、logoを更新したりすると、site iconも見直す場合があります。そのとき、どの画像が正本か分からなければ、古いmarkを使う、別の担当者が似た画像を作るといったずれが起きます。header logo、site icon、SNS用画像の役割を一覧にし、どの画像を誰が更新するかを決めます。

画像を外部の素材から選ぶ場合は、利用範囲も確認します。site iconは小さくても、公開siteの識別に使う画像です。権利関係が不明なmarkを、目立たないからといって使いません。独自のlogoを使えない事情があるなら、文字、図形、色の扱いを決め、後で差し替えられるようにします。

theme変更とcacheを別に確認する

WordPressのsite iconはthemeに依存せず設定できる仕組みとして案内されています。それでもthemeを替えたときは、headerのlogo、titleの表示、mobile menu、site iconをまとめて確認します。site iconが残っていても、新しいthemeのheaderで別のlogoが出る、site nameの見せ方が変わることがあります。設定の場所が一つだから、読者に見える印象まで同じとは限りません。

画像を差し替えたあと、すぐに前のiconが見える場合もあります。browserやnetwork側に以前の画像が残っているか、管理画面で別のimageを選んだのか、公開URLが正しいかを分けて確認します。表示が変わらないからといって、何度も画像をuploadし直す前に、実際にどのimage fileが読まれているかを見ます。

themeの調整を外部へ頼む場合は、site iconを誰が設定したか、元画像はどこにあるか、変更後にどの画面で確認するかを渡します。作業を頼むことと、companyの識別を管理することを同じ人へ任せる必要はありません。会社側は、表示しているlogoとsite iconを確認できる状態を残します。

最初の一手は、いま使っているheader logoを見て、site iconに残す要素を一つ選ぶことです。図形、頭文字、色のどれを目印にするかを決め、browserのtabで確認します。小さな画像を飾るより、読者が開いているsiteを間違えないことを優先します。