twitter の新ロゴデザインが美しすぎて調べてみたら、黄金比で構成されてた。

ougonnhiritu

twitter のトレードマークである青い鳥が新しくなりましたね。前回のロゴよりも美しい曲線で描かれており、公式のプロモーションともに圧巻でございました、これこそデザインだわーっとね。

 

そんな感じで朝から影響を受けまして、どのように構成されて描かれているのか調べてみたら、Apple のロゴと同じくやっぱり黄金比で作られておりましたよというお話。

ツイッターの新ロゴデザイン登場。

皆さんおなじみの青い鳥がリニューアルしたとの どくさんからTL が流れてまいりまして、さっそくサイトにアクセス!

Twitter / Logos & Brand

 

プロモーションを見ていたら、『これはすごい!』っと朝から大興奮でございました。
twitternew

前回のロゴに比べてスタイリッシュになりましたね。

 

adf000506
Twitter、ロゴを変更--テキストをなくし、鳥のイラストも一新 - CNET Japan

そんな新しいロゴはPNG 形式と EPS 形式でダウンロードが可能になっているので、さっそくイラストレータ上にて、どのように構成されているのか確認してみます。

 

黄金比の構成チェック

 

というわけで、黄金比!黄金比!('A') とか言ってますけど、そもそも黄金比とはなんぞやっという方もいると思うので簡単にご紹介。

adf000508
神秘の調和、アップル社のプロダクトデザインに隠された「黄金比」 - DNA

 

このように、APPLEのロゴが構成されているように、優れたデザインは黄金比で構成されているのとのこと。

adf000509

ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法 | コリス

 

コリスさんの記事でも紹介されています。

ロゴだけでなくWEBサイト、写真、など全てデザインにおいてこのような構図・要素を取り入れる事によって美しく見えるのだよね。

 

さて、早速ツイッターの新ロゴを検証してみたいと思います。

 

adf000514

 

頭の部分を 1 として円を描きます。

 

adf000515

 

この 1 の円がくちばし部分、羽根の部分の曲線になっています。

 

adf000513

 

頭を構成していた 1 の円を2倍にしたのがこちらの 2 の円です。尻尾の部分とくちばしの下などの曲線になっています。
adf000517

1 と 2 を組み合わせるとこんな感じです。

 

adf000518
1 の円を3倍にしたのが上記の 3 の円になります。これは羽根の部分やくちばしのとがった上の曲線などが構成されていますね。

 

adf000519

すべて組み合わせるとこんなかんじ、1:2:3でほとんどの曲線が構成されているのですね。・・・・ってあれ、お腹の部分は??どうなっているの

っとなるわけです。

adf000520

 

これですね。この円だけ、統一性がなくて少々大き目にできております。、どうやってこの円が構成されているのだろうか・・・

そもそも、黄金比は 1:1.61 なので、この比率を考えた場合、頭の円を 1 とした考えがそもそも間違っているのではないかと想定します。

adf000521


どういう事かと言うと、下の青い数字が上の構成されていた3つの円になります。

頭の部分の1を黄金比の5として仮定した場合、

adf000527

1:2:3:5:8:13 になるわけですね。ここで重要なのは新しい1ができるわけです。

adf000522

 

この1に対して 黄金比である 1:1.6をかけていきます。

iCloud の構成が1:1.6になっているというのがヒントですね。

ちなみに頭の部分の構成(1:2:3個々)に1.6をかけても


お腹周りのサイズにならないのですね。

adf000523

それであればと、先ほど1:16で作った円に、頭が構成されているように、倍の数値をかけてみます。

1.6... 3.2..  4.8... 6.4...  8...
んで、1.6をx9倍にした際に求められる大きさ 14.4 の比率が

これが、お腹の部分とまったく同じ大きさになります。w

 

adf000524

 

うおーすごい。('A') 考えられて設計されているものだなーっとちょっと感動でした。

おなかのサイズが本当に合わなくて、ここまでやるのに1時間くらい・・・
(円だけで構成されているのだろうと調べたけで、全然合わなくて1:1.61なのかもしれないとやってみたら、x9で出来上がりました。邪道かもしれないけれど、その辺は突っ込まないでくださいなw)


https://dev.twitter.com/

twitter API のトップはこのような絵もあるんですね。

というわけで、今回は円の構成だけでしたが、角度とかその辺も設計されているかもしれませんね。全てのデザインが黄金比で構成されているわけではないのですが、制作において参考にはなります。('A')ノおしまい

参考に黄金比関連の書籍をいくつか乗せておきます。

51QZfoHQsUL._SL500_AA300_
黄金比(アルケミスト双書): スコット・オルセン, 藤田優里子: 本

51RVWMKYY7L._SL500_AA300_
黄金比はすべてを美しくするか?―最も謎めいた「比率」をめぐる数学物語: マリオ リヴィオ, Mario Livio, 斉藤 隆央: 本


2012.6.8 追記しました。
『これ黄金比じゃねーよ、カス!』という突っ込みをもらってますw。この記事は新しいロゴが美しすぎて、どのように構成されているのか調べている時に、どうしても規則性がわからず、黄金比の1.6を組み合わせたら出来上あがり執筆した内容です。自分のやり方は強引すぎるという指摘も多いので、本気で黄金比について関わっている方がいらっしゃいましたら是非ご連絡頂ければ幸いです。また、自分ならこうやるというデザイナーさんがいたらツイートしてください。


最後に、新ロゴは個人的にすごくスタイリッシュで好きです。『このように構成されているのかぁー』っと喜んでいただければ嬉しいです。(‘A’)ノではでは、すしぱく。