Google25周年ロゴを見て、ロゴの使い方を愚痴る

昨日のことになっちゃいますが
Googleが25周年とのこと。

なんとなく2000年ごろという
イメージがあったんですが
創業は1998年だったんですね。

昨日はGoogleのトップページが
25年仕様で
これまでのロゴマークが次々に
表示されるアニメが出ていました。

Google25周年

結構微妙な違いもあるけど
全部Googleだな
という当たり前の感想。

とはいえ、時代ごとに
テカテカしてたり
フラットになっていったり
webの歴史とオーバーラップ
しているようにも思いました。

さて、工務店も社名のロゴを
持っているところがほとんどです。

ロゴマーク、という風に
いう人もいますが
ロゴマークはいわゆる和製英語で

先のGoogleの例だと正確には
「ロゴタイプ」
です。

シンボルマークとロゴタイプを
合わせて
ロゴマークと呼ぶ人もいれば

全部合わせてロゴマークと呼ぶ人も
います。

どっちでもいいだろって?

デザイナーとロゴの話をすると
この辺でお互いが持っている
言葉が食い違うことがあるので
豆知識ね。

うちの事務所でも
いくつかの工務店さんの
ロゴを作成させていただきましたが
そういうめんどくせえ話も
一応お伝えしてます。

さて、webサイトを持っていれば
大抵はロゴが上部に表示されていますね。

webの制作、リニューアル時には
気にしているかもしれませんが
多分普段は全然気にしてないですよね。

このロゴが状況によっては
とってもダサく表示されてしまうことがあります。

細かい話は置いときますが
画像のデータって大きく2種類あって

ラスター形式と
ベクター形式

ラスターというのは、写真に代表されるような
点の集まりで作られているデータです。

ベクターというのは、工務店なら
CADのデータがそうだ、と聞けば
わかりやすいかな?
線のデータです。

CADのデータはいくら拡大しても
スムーズな線で表示されますが
写真は思いっきり拡大したら
なんだか汚くなってきますよね。

これは当然ロゴにも適用されます。

webサイトのロゴに使われている画像形式の
多くはpng、jpgといった
ラスター形式です。

昔はこういう形式しかwebブラウザが
認識しなかったので仕方ないのですが

今はベクター形式の
SVGファイルも使えるようになっています。

SVGだといくら拡大しても
汚くなりません。

例えば、下は「びおソーラー」の
SVGロゴ(ベクター形式)。

SVG

下はpng(ラスター形式)

ぱっと見は同じかもしれませんが
拡大してみると違いが出ます。

上の方にちっちゃく表示するだけなら
あんまり違いは出ないことが多いですが

それでもPCの画面と
精細なスマホの画面では
違いが出ることもよくあります。

社長と制作会社が見ている環境と
違う環境でwebサイトを見る人も
当然います。

ロゴが思わぬクソダサい状況で
表示されてしまうことも
まあまああります。

ここで触れませんが
webの背景が白でなくて黒で表示されたら
思わぬ状態になったり、とか。
(これは僕も割と抜けてることが多い…)

こまけえことはいいんだよ!
というか
わかんねえからおまかせ
という社長がほとんどですが

自分が見ているのと同じように
お客さんも見ているわけじゃない
というのがwebの怖いところです。

WindowsとiPhoneでしか見たことないという
社長も多いけど
MacやAndroidで見る人もいるし

従業員が「なんか変だな」と思っていても
社長には言わずにいることもあるから

webには思わぬ落とし穴がある
気づいたら言ってね

という環境を作っておかないと

せっかくのブランドが台無しになる
かもしれませんよ。

たかがロゴと舐めちゃいけません。