宅配トラッカーのfaviconとロゴ（案）

きっかけと経緯

【緩募】宅配トラッカーのfavicon (利用者増えてきてちょっと焦ってる)

— ただただし (@tdtds) 2015, 7月 16

というツイートをタイムラインで目にしたので宅配トラッカーのfaviconを考えてみました。

関連リンク

faviconと拡大図

16x16ピクセル4倍に拡大

宅配をイメージするトラックと、通知などを知らせるアイコンでよく使われる吹き出しをモチーフにして組み合わせました。そしてついでにロゴもSVGで作ってみました。

共通のコンセプトとしては、単色で構成することで色の展開をしやすくできるようにしたことです。例えばカラーバリエーションはこのようになります。

「宅配トラッカー」のコンセプトカラーに応じて再加工してください。制作者側としては色については特にこだわりは無いので、自由に変更して構いません。

別のパターン

ロゴについては、こういう吹き出しの形もありかもしれませんね。

ここから追記

バランスをもう少し調整したものも作ってみました。

（追記ここまで）

SVGの使い方と簡易的なフォールバックについて

SVGはJPEG,GIF,PNGのようなラスター画像と同じようにimg要素で手軽に使えるのですが、IE8以下、Android3未満の標準ブラウザなどSVG未対応な環境は依然として残っていますから、なんらかのフォールバックが必要になります。

フォールバック用のJavaScriptライブラリ（SVGeezy, Modernizrなど）もありますが、ロゴ一つだけであればこうした方法が簡単です。

onerrorを利用する

ロゴ

<img src="logo01.svg" onerror="this.onerror=null;this.src='fallback.png';" width="200" height="200" alt="ロゴ">

onerrorを利用した手法で、このフォールバックはアメコミ出版社のDark Horse Comics、メジャーリーグ全チームのWebサイト（例：ニューヨークヤンキース） 、ジャクソンビル市観光局などで利用されています。

インラインSVGでimage要素を利用する

<svg width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image xlink:href="logo01.svg" src="fallback.png" width="200" height="200" alt="ロゴ"></image>
</svg>

SVG対応ブラウザにはsrc属性が無視され、未対応ブラウザにはimage要素がimg要素として解釈されることを利用したフォールバックです。採用例としてはThe New York Times、box、ドイツの美術館ZKMなどで使われています。

メリットとデメリット

インラインSVGを用いる手法はJavaScript無効の環境でも使える反面、欠点としてはスクリーンリーダーなどではまだインラインSVGへの対応が進んでいないためWAI-ARIAの指定が必要になる点が挙げられます。

参照記事：HTML5 と SVG で考える、これからの画像アクセシビリティ - slideshare

さらに言えば、国内で利用者の多い高知システム開発社のスクリーンリーダー PC-Talker + NetReader1はSVG未対応・WAI-ARIA未対応のため別途対応が必要で、アクセシビリティの面を考えると難しい面があります。

onerror方式はJavaScript無効では使えない点がネックですが、img要素なので幅広い環境で使える点がメリットでしょうか。

参考記事

SVG未対応ブラウザのシェアは今どれくらいか？2015年5月版 - 未対応の環境はかなり減っていますが