グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?

2015年9月 7日 17:30

このエントリーをはてなブックマークに追加
             
                 
    

150907google_logo01.png


そんなに違うの?

グーグルの新ロゴが発表され、旧ロゴのファイルの大きさは14,000バイトだったのに対し、新ロゴはたった305バイトになったそうです。どうしてそこまで変わるのか? UIデザイナーのIlya YakubovichさんがQ&AサイトQuoraでわかりやすく解説してくれています。


***


グーグルの古いロゴにはローマン体のフォントが採用されていて、セリフと呼ばれる飾り(線の端にちょこんと付いてるやつ)あるため、ベジエ曲線を使わないと作れないデザインでした。その結果、ロゴ全体でのアンカーポイントは100箇所。ファイルの大きさは6KB(6,380バイト)になり、圧縮しても2KB(2,145バイト)といったところです。

一方シンプルになった新しいロゴの場合、小文字のg以外の大部分が丸と長方形だけを使って作られています。


150907google_logo02.png


ロゴを構成するもの

10個の丸(大文字のGと小文字のgに2つずつ、oに2つずつ、eに2つ)
5個の長方形(大文字のGに2つ、小文字のlに1つ、eに2つ)
7箇所のアンカーポイントがある形1個(小文字のgの下部分)

まだグーグルは最適化された305バイトのロゴをリリースしておらず、オンラインでも利用可能になっていないようですが、私はきっとグーグルの主張に嘘はなく、新ロゴは本当に305バイトまでサイズダウンされたんだと思います。

では、それが本当かを検証していきましょう。まず最初の1文字「G」をSVGフォーマットを使って再現してみました。その結果、圧縮なしで302バイト、圧縮して195バイトになりました。

下が圧縮していないGの図形です。2つの丸と2つの長方形から構成されています。


<svg xmlns="http://www.w3.org/2000/svg">
<circle r="100" cy="100" cx="100" fill="#4885ed"/>
<circle r="70" cy="100" cx="100" fill="#ffffff"/>
<rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/>
<rect height="30" width="88" y="87" x="111" fill="#4885ed"/>
</svg>


図を整えると右側のGに。


150907google_logo03.jpg


他のユーザーさんの指摘では、新ロゴはフィル(fill、塗り)ではなくストローク(stroke、線)でも作ることができるそうです。これも旧ロゴではありえなかった特徴の1つ。そうすると、もっと小さいファイルにすることができます。

Jaume Sanchez Eliasさんによれば、ロゴ全体を作るコードで290バイトになったそうです。


<svg xmlns="SVG namespace" width="600" height="250">
<g stroke-width="16" fill="none">
<path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/>
<circle cx="227" cy="128" r="32" stroke="#d83038"/>
<circle cx="313" cy="128" r="32" stroke="#f4c022"/>
<path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17" stroke="#4a87ee"/>
<path stroke="#4ab95a" d="M449 51v115"/>
<path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/>
</g>
</svg>


この方法をとれば、新ロゴ全体は2つの丸(oに1個ずつ)と4つ線(G、g、l、e)でできていることになります。


150907google_logo04.jpg


***


なるほどー! 同じ「Google」の文字でも、作るプロセスが違うとここまで変わってくるものなんですね。東京オリンピックのロゴしかり、プロによるデザインはパッと見では到底わからない奥深さがあります。


source: Ilya Yakubovich

Ilya Yakubovich - QUORA - Gizmodo US[原文
(SHIORI)

このエントリーをはてなブックマークに追加

この記事が気に入ったら「いいね!」してね

お知らせ