たのしいフォントえらび〜 GoogleやDEAN & DELUCA、SPEEDAの事例から〜

こんにちは。ユーザベースのデザイナー、広田です。企業・業界情報サービス「SPEEDA」を担当しています。

とうとう、ブログの順番が回ってきました。 UZABASE Tech Blogの記事ネタは、ユーザベースのエンジニアが一堂に集まる週一のミーティング、そこで話す持ち回りのライトニングトークが元になっています。もちろん、それがすべてではありませんが、記事を書く順番としてはそんな感じです。そして、2月に入社した私にも、ライトニングトークの順番、すなわちブログを書く順番が回ってきたというわけです。

テックミーティングの参加者は、当然ですが、エンジニアばかり。なので、私にとってはチンプンカンプンのエンジニア用語が並ぶわけですが、そんな中で私が話せることってなんだろう？と（一応、真剣に）考えた結果、エンジニアにとっても身近であろうフォントについて話すことにしました。

というのも、入社以来、ずっと気になっていたSPEEDAのロゴのルーツ。その答えを見つけた良いタイミングでもあったので。

・・・と、ちょっと前置きが長くなってしまいましたが、テーマは「たのしいフォントえらび〜 GoogleやDEAN & DELUCA、SPEEDAの事例から〜」に決定しました。

SPEEDAのロゴのルーツ

さて、本題のSPEEDAのロゴですが、残念ながらこのロゴの成り立ちを語れる人を見つけることはできませんでした。それで、ずっとモヤモヤした毎日を過ごしていたわけです。これに似たフォントはなんだろう、、、と。そうやってSPEEDAのロゴのフォントのことをずっと想っていたら、とうとう出会ってしまったんです。

それは、ある日、突然。まるで天から降ってきたかのように。久しぶりに見たフォント本の中にいました。

f:id:uzabase:20150531104840j:plain 2013年発行の「TYPOGRAPHY03」（グラフィック社）

このムックのここに。ほら。SPEEDAのロゴにそっくりでしょ？ f:id:uzabase:20150531105845j:plain

そう「BANK GOTHIC」というフォントです。（ムックには「 BANNK GOTHIC」とありますが、これは誤植ですね。）

このフォントに出会った瞬間、もうね、なんとも言えない晴れ晴れした気持ちになったんですよ。出会うべくして出会った赤い糸＝運命の人？みたいな。それはおおげさですが。。。しかも、フォント名にBANK（銀行）とあるなんて。さまざまな企業の財務情報や業界の動向を提供するSPEEDAにぴったりのフォントですね。

f:id:uzabase:20150531111126p:plain

BANK GOTHICはサンセリフ、ウロコのない書体です。その中でも幾何学的図形のような骨格を持つジオメトリック・サンセリフです。ほら、見てください。ほぼ正方形の形をしていますよね？（青枠に注目）

BANK GOTHICの特徴を他にも挙げると、GやO、Cに見られる正方形部分、この内側部分が直角になっているのに対して、外側が丸みを帯びている点ですね（赤の丸に注目）

参考までに、fonts.com から引用したBANK GOTHICの生みの親、Morris Fuller Bentonについて記しておきます。

Morris Fuller Benton – born 1872 in Milwaukee, USA, died 1948 in Morristown, USA – engineer, type designer. After training as a mechanic and engineer, Benton jointed the ATF, where he became type designer and in-house designer with ATF.

フォント名が明らかになったところで、SPEEDAのロゴの検証をしていきましょう。

まずは現在のロゴ。これが最終形です。 f:id:uzabase:20150531112457p:plain

そしてこれが一世代前のロゴ。いつまで使われていたのか、正確なところはわかりません。 f:id:uzabase:20150531112712p:plain

今のロゴと比較すると一世代前のロゴは少しスリムでしたね。今のロゴのほうが骨太です。その他にも、PとDに変化が見られますね。現在のロゴのほうが尖った印象になっているとと同時に、より堂々とした感じが伝わってきます。そして男性的。

ここからは想像ですが、こんな流れでSPEEDAのロゴができあがったのではないかと。 f:id:uzabase:20150603195800p:plain

BANK GOTHICでSPEEDAを組む …（ A）
（A）をベースに文字の横幅を少しスリムにする（正方形から長方形に）...（B）
微調整（特にSやE）を繰り返して、一世代前のロゴが完成…（C）
さらに微調整を繰り返して、今のロゴが完成…（D）

SPEEDAのお仲間さがし

SPEEDAのロゴのルーツを知り、俄然、BANK GOTHICが身近になった私。そこで、BANK GOTHICを使ったロゴのお仲間を探してみました。

Googleで検索してみると、いろいろ見つかります。いずれもロゴの形を見ての想像でしかありませんが、NINTENDO DSのNINTENDOやER緊急救命室のER、浅草にあるホテルAGOLA PLACEなどはBANK GOTHICではないかと思います。

そして、私たちのオフィス近くにもBANK GOTHICを見つけました。恵比寿駅からオフィスに向かう途中にある恵比寿ビジネスタワー。下の写真をご覧ください。この欧文ロゴがBANK GOTHICっぽいんです。昨年12月、ユーザベースは外苑前からここ恵比寿に移転しましたが、もしかしたら引っ越し先はこのビルにすべきだったかもしれませんね、、、なんて思ったり。 f:id:uzabase:20150531115149j:plain

Google、VOGUE、Dean & Delucaなどのブランドロゴはどのフォントを使ってる？

ロゴとフォントのことをいろいろ調べていたら、有名ブランドのロゴのフォントも気になってきました。そこで、書籍やインターネットなどで調べてみました。

LOUIS VUITTON

多くの人の憧れのファッションブランド LOUIS VUITTON。

f:id:uzabase:20150602000621p:plain

これはMacにも標準で搭載されているFutura（フツラ、フーツラ）で組まれたフォントです。字と字の間を調整している以外は、ほぼ原型のまま使っているっぽいです。実は、ユーザベースのロゴもFuturaなんですね。

f:id:uzabase:20150602224304p:plain

VOGUE

続いて老舗の女性ファッション誌 VOGUE。このロゴで使われているのは、Didot（ディド）です。こちらもMacをお使いの方は持っているんじゃないでしょうか？

f:id:uzabase:20150602002309j:plain http://www.vogue.co.jp/

あらためて書店で平積みされている女性ファッション誌を見てみると、Didotのように、細いところと太いところの差がはっきりしているロゴが多いですね。特に大人の女性向けファッション誌に。まるで女性の理想的なプロポーション、華奢に見えるのに出ているところは出ている、、、みたいな。そんな印象を受けるフォントです。Didotはそれに加えて丸みもあるので、女性らしいしなやかさも感じます。

f:id:uzabase:20150602224332p:plain