ちょろげ日記

日々のちょろっとしたことを

Googleの新しいロゴへの批判と、実はロシア生まれかもしれないという話まとめ

Googleのロゴが新しくなりました。

私は、いちユーザーとして新しいロゴは結構気に入っていて、特にコンパクトバージョンのロゴ(Gのみのバージョン)は前より良くなったと感じています。

Googleの検索結果からタブを開きまくって探しものをすることが多いので、ロゴ(ファビコン)が目を引いたほうがいいんですよね。あぁ、さっきのGoogle検索結果を開いているタブはこれか、と。

f:id:tyoro_ge:20150905233721p:plain

公式の言葉を借りるなら、このタブにはGoogleの魔法が働いてるな、という感じでしょうか。

新しいロゴはユーザーの皆さんの利用シーンにあわせて、どんな小さな画面であっても、そこに Google の ”魔法“ が働いていることをお知らせできるように変わりました。新しいデザインは、入力方法や端末サイズにとらわれず、シームレスにつながっているコンピューティングの世界を表しています。Google Japan Blog: Google のロゴが新しくなりました

ちなみに、他のサービスだとピンタレストのファビコンも結構好きです(上のキャプチャ画像の左から3つ目)。

 

新しいGoogleロゴへの批判

さて、そうは言っても万人に受けるデザインというのは中々ありませんから、この新しいロゴについてもいろいろと意見はあるようです。

www.cnn.co.jp

米ニューヨーク市立大学のイーナ・ザルツ教授は、グーグルの新ロゴを「子どもっぽくて野暮ったい。幼児向けの粘土のようだ」と酷評する。さらに、小文字の「g」と「l」の間隔が狭く、最初の「G」と最後の「e」の角度の違いに違和感があり、大文字の「G」の右下が必要以上に突き出していると批判。フォントを変えずに従来のロゴを改良するにとどめるべきだったと主張している。

なんでこういうデザインなのか?という批判の多くは幾何学的なバランスに対してされることが多いような気がします。

もちろん、私のような素人が当て推量でデザインの根拠を探そうとすると、やはり幾何学的な根拠に頼ることになるでしょう。例えば、最後の「e」は「g」に合わせて角度を変えてるじゃないかとか。

f:id:tyoro_ge:20150906001732p:plain

ロゴを見ただけでデザイナーの狙いや思考プロセスまで透視することはできませんから、客観的に誰でも指摘しやすい幾何学的なバランスに批判が集中するというのは、まぁしょうがないかもしれません(実際は素人が線を引いただけではわからないような幾何学的な観点もあるのだと思いますが)。

ただ、そこはGoogle様、ぬかりなくコンセプトを説明するページをしっかりと用意していて、ロゴに込められた思いが伝わるように努めているように感じられます。

design.google.com
 

この辺は東京オリンピックのエンブレム問題で議論の焦点の一つがコンセプトの所在や説明不足にあったところにも通じる話なのかもしれません。

そういう意味でもこのツイートはなんというか皮肉が効いている感じがするようなしないような。

 

「G」マークに不安を感じる?

で、今回のGoogleの新しいロゴに対する、そういった線を引いてずれてるずれてないという指摘でもっとも盛り上がっているのがこちら。

Googleの新アイコンは何かがおかしい、良く見ると気づく意図的なデザインの破綻

そう、このGのマークは、パイチャートのように、円が青、緑、黄、赤で分けられているが、それぞれのパイの切目は円の中心には向いていないのである。このGのマークを良く見ると、どことなく不安な感じがするという人が現れているのもそれが元となっているのだろう。

View post on imgur.com

このロゴをみて不安になる人がいる、その理由は色分けされた切れ目の線を延長してみたら円の中心に向かっていなかったから、という指摘です。

ちなみに、そもそも指摘元のgifで使われているロゴが本来のロゴと違うよ(実際は「赤と黄色の境界の延長線上に緑と青の境界がくる」)という記事への指摘がありましたが、それでも趣旨はかわらないという追記がされています。

これについては指摘の通りとなるが、この指摘をしている人も書いているように「それはロゴの説明の動画を見なければ判らない」のである。 その意味において、何ら知識を与えられずにこのGロゴを見せられて、それぞれのパイの切れ目がどこに向かっているのか、示すと結果的に、上のアニメーションGIFのようになってしまうだろう。

指摘の不備はありますが、たしかになんでだろう?という疑問は少なからず浮かびますね。
 

「G」をぐるっと、Googleによる説明

この点について、先で紹介したGoogleがコンセプトを説明しているページではどう書かれているんでしょうか?

The color proportions convey the full spectrum of the logotype and are sequenced to aid eye movement around the letterform.(適当意訳:色のバランスは、Googleロゴの全領域であることを伝えていて、文字をぐるっと目で追うような並びにしている。)

うーん、なんとなく言わんとしていることがわかるような気がしますが、英語の訳は我ながらうさんくさいので、動画を見ながら理解を進めてみます(以下、Evolving the Google Identity - Articles - Google Designの動画より)。

f:id:tyoro_ge:20150906022931p:plain

Googleのロゴで使われている全色を配置することで、「G」の文字一つでGoogleロゴを示していて、

f:id:tyoro_ge:20150906020447p:plain

緑と黄、黄と赤の境界線によって、視線に方向性をもたせて、

f:id:tyoro_ge:20150906023149p:plain

ぐるっと「G」の文字を一回りするような目の動きを誘う。

つまり、単に「G」一つに「Google」ロゴの配色をしただけでなく、目で文字周りを一周させるようなしかけを入れることで「Google」ロゴそのものを見たことと同義のようにしているということでしょうか。

「G」をぐるっと見回してグーグル。

この解釈が合っているのであれば、すべての切れ目が円の中心に向かっているだけのロゴにしなかった理由がよくわかります。
 

それでも綺麗に線が引けないとおかしくない?

元記事では、だったら(上のような解釈が書かれていないのでどう解釈しているかわかりませんけれど)綺麗に線が引けるように黄色の領域を広げればいいんじゃない?という追記がされています。

f:id:tyoro_ge:20150906043324p:plain イメージとしてはこんな感じ

 

この点については明確な答えは見つけられませんでしたが、わかりやすい示唆があったので、次の意見を紹介しておきます。

ロゴについて議論がされていたredditへ投稿されたデザイナーを名乗る方の意見です。

www.reddit.com

The lack of symmetry and geometric balance is intentional. Our eyes don't see on a perfect grid - things like color, gaps, etc all influence our perception of the weight of things. A very basic example is the letter S. An S from a geometric font like Futura looks pretty close to being symmetrical, but if you you flip it over you can see how far off our perception is.(適当意訳:対称性と幾何学的なバランスの欠如は意図的ですよ。私たちは完全な格子で見ているわけでじゃないし、色とかで、私達がそのものの重みをどう認識するか変わってくる。たとえばとっても基本的な例でいうと、「S」という文字。Futuraフォントの「S」は一見、かなり対称であるように見えるけれど、反転させた場合どうみえる?)f:id:tyoro_ge:20150906030910p:plain

 
上の「S」は上半分と下半分が対称(回転対称?)に見えますが、実際はそうではありません。図面上で綺麗に線引したものが、実際に人間が見て綺麗に見えるとは限らないよ、という指摘です。

この意見には多くの賛同が集まっていて、例えば、デザイン経験のある別の方がこういった書き込みをしていました。

First I try to balance everything mathematically and then I fiddle with things until it feels right to me.I've noticed that very often I have to add a pixel or two of white space where, technically, there should be a fixed amount (eg, spacing between all elements is a multiple of 15 pixels)because even if things are perfect on paper they don't feel perfect when I look at them.(適当意訳:デザインする時は最初数学的にバランスをとるよう試すよ、その後、自分が正しいと思うまでいじるんだ。で、1または2ピクセルのスペースを追加することが頻繁にあるって気づいた。紙の上で完璧であっても、実際に見たとき完璧だと感じることはないから。)

この書き込みに対して「S」の例を示した方の書き込みがこちら。

Exactly!It's a real art form to find that balance. I have a ton of respect for designers who have mastered it. (適当意訳:その通り!そのバランスを見つけるのが本物の芸術形式だよ。それをマスターしているデザイナーは本当に尊敬するね。)

 
つまり、幾何学的にバランスがとれているということと見た人がバランスがとれているとことは別である、と。綺麗に線が引けないじゃないか!という指摘が必ずしもデザインの本質をついた指摘になるわけではないんですね。

そう考えると、新しい「G」のロゴを見て不安を感じる人がどれだけいるのかという話なのかもしれません。意外と多かったりして。
 

新しい「G」はロシア生まれ?

ところで、いろいろと調べていると新しい「G」ロゴにベースとなるデザインがあったという話をみつけました。

www.dailytech.com

2008年にロシア人デザイナーのDenis Kortunovさんが、Googleのファビコンをかえるべきだ!と4つのデザインを提案する記事を投稿していて、そのうちの1つのデザインが今回の新しい「G」ロゴのベースになっているそうなのです。

ウェブアーカイブにその2008年の記事が残っています。

web.archive.org

Теперь есть все четыре цвета и литеру G видно более явно.(ロシア語がわからないので機械翻訳:今四色があり、文字「Gをより明瞭に見ることができます。あなたの小さな光沢を配置します。) f:id:tyoro_ge:20150906050654p:plain

 
このロゴに線を引いてみると、色の境界線の向きが中心に向かっています。

f:id:tyoro_ge:20150906051149p:plain

ベースとなったロゴと現在のロゴどちらがバランスよく見えますか?私は現在のロゴのほうがバランスよく見えますが、みなさんはどうでしょうか。
 

まとめ

新しいGoogleロゴへの批判とロシア生まれかもしれないという話をまとめてみました。

円状の「G」にGoogleロゴの全4色を配色するというアイデアをもとに、視点の動きを考慮した配色バランスを考え、幾何学的なバランスを越えて人が見て満足するバランスにブラッシュアップしていく。

ロシア生まれが事実だったとしてですが、現在のロゴにいたるまでのプロセスが見えてくるようでなかなかおもしろかったです。 
 
オリンピックのエンブレム問題でも原案と修正が公開されてその過程の説明がありましたが、抽象的な表現だけでなくもう少し具体的で丁寧な説明が必要だったような気がします。まぁ、そうはいっても最終案の好き嫌いで話が終わってしまうので、デザインの仕事というのは大変な仕事なのだなぁと思います。
 

ちなみに、新しいロゴのコンセプトはもっと詳しく読みこむとさらに新しい発見が沢山ありそうです。

例えば、Googleがコンセプトを説明しているページで、これまで14000バイトだったロゴをたったの305バイトにできるようになったという記載があります(305バイト版のロゴはリリースされていないかも)。

only 305 bytes, compared to our existing logo at ~14,000 bytes.

これがどう実現されているか、こちらで解説がされていました。

How could Google's new logo be only 305 bytes, while its old logo is 14,000 bytes? - Quora

A simplified version of the new logo, on the other hand, can be constructed almost entirely from circles and rectangles (with the exception of the lower-case g)(適当意訳:新しいロゴの簡易版は(小文字のgを除いて)円や長方形でほぼ完全に構築することができます。) f:id:tyoro_ge:20150906053040p:plain

簡単な図形のみで表現できるので、SVGタグで書けてしまうそうです。

紹介されているコードを貼り付けるとこの通り。

すごいですね!