読者です 読者をやめる 読者になる 読者になる

UZABASE Tech Blog

株式会社ユーザベースの技術チームブログです。 主に週次の持ち回りLTやセミナー・イベント情報について書きます。

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

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

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

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

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

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

目次

SPEEDAのロゴのルーツ
SPEEDAのお仲間さがし
有名ブランドのロゴは何のフォントを使ってる?
もしもユーザベースが第3の事業を始めたら...

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

  1. BANK GOTHICでSPEEDAを組む …( A)
  2. (A)をベースに文字の横幅を少しスリムにする(正方形から長方形に)...(B)
  3. 微調整(特にSやE)を繰り返して、一世代前のロゴが完成…(C)
  4. さらに微調整を繰り返して、今のロゴが完成…(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

DEAN & DELUCA

NY生まれのフード&カフェのお店。見たことのないオシャレなパッケージの食材が並んでいて、本当に楽しいお店です。このロゴはCopperplate Gothicですね。いろんなところで目にする人気のフォントです。こちらも私のMacにはインストールされています。

f:id:uzabase:20150602003156j:plain http://www.deandeluca.com/

f:id:uzabase:20150602224348p:plain

Google

そして、いつもお世話になっているGoogle。このロゴで使われているのはCatull BQです。ほぼ手を加えず原型のまま使っているっぽいです。

f:id:uzabase:20150602003639j:plain http://www.google.co.jp/

www.myfonts.com

もしもユーザベースが第3の事業を始めたら...

さて、ここからは私の妄想です。「もしもユーザベースが第3の事業を始めたら…」を妄想して、こんなときにはこんなフォントが合うんじゃ?という視点で、フォントを探してみました。

ユーザベースは、法人向け業界分析情報データベース「SPEEDA」と、経済情報に特化したニュース共有サービス「NewsPicks」という2つのプロダクトの開発・運営を行っています。

もしもユーザベースが「ホラー映画」を作ったら...

そこで、こわーいフォントを探してみました。

さて、どうでしょう? これはAdobe Creative CloudのTypekitにもあるAdobeのIronwoodというフォントです。

f:id:uzabase:20150603232308j:plain

https://www.fontshop.com/families/ironwood

こうやってみるとそんなに怖そうに見えませんが、少し色を工夫すると、イギリスあたりの誰も住んでいない古い館っぽっく見えてきませんか? まるでドラキュラの棲家のような。また、不安定な 3本のラインがなかなか良い効果が出ているようで、「裏切り」や「壊れる」といったサスペンス映画の要素も見えてきます。

f:id:uzabase:20150604002217j:plain

dafont.comを探せば、それはそれは怖いフォントも他にもたくさん見つかるんですが、お勧めしてもいいものとそうでないものの選別が難しいので、ここで紹介するのはやめました。

もしもユーザベースが「自然派化粧品」を売り出したら...

続いて、同じくAdobe Creative CloudのTypekitにもあるBlakely というフォントを使って、自然派化粧品のロゴを作ってみました。

f:id:uzabase:20150604225039j:plain

https://www.fontshop.com/families/blakely

上の図はBoldですが、一番細いLightを使うと印象がぐっと変わります。このLightを使って、今度はNewsPIcksでロゴを作ってみました。

ターゲットは20代女性くらい? 「いつまでもみずみずしいお肌をキープしたい女性へ」「敏感肌のあなたへ」といったところかな。とても涼しげな感じに仕上がったので、今のこの暑い季節に売り出したいところですね。

f:id:uzabase:20150604225617p:plain

もしもユーザベースが「子ども服ブランド」を立ち上げたら…

最後に、もしもユーザベースが「子ども服ブランド」を立ち上げたら…と題して、楽しくてやさしいフォントを探してみました。

f:id:uzabase:20150603221133j:plain https://www.fontshop.com/families/scruff

どうでしょうか? これは scruff というフォントです。 おもちゃ箱をひっくり返したように、とっても楽しそうですよね。

「S」なんて、おもちゃの電車を走らせる線路に見えてくるし、「f」が2つ並んでいるところは双子の兄弟がひげダンスしているように見えてくる。ほら、他の文字も全部楽しそうですよね。

f:id:uzabase:20150603224352j:plain

このフォントは、元気な子ども服ブランドや知育の玩具メーカーのロゴにきっと似合うはず。例えば、こんな感じでね。

f:id:uzabase:20150604220204p:plain

ちなみに、キャッチコピーで使用したフォントは「やさしさゴシック」というフリーのフォントです。日本語のフリーフォントでこれだけ文字の種類が揃っているのは珍しいのでとても貴重です。

長々とフォントについて書きましたが、最後に、敬愛する日本人フォントデザイナー、小林章さんの言葉を載せて、締めくくりたいと思います。

f:id:uzabase:20150531130901p:plain

ユーザベースではエンジニアを募集しています!

  • 大規模で多種多様なデータを扱うことに興味がある方
  • とにかく技術が好きな方
  • 様々なバックグラウンドを持つ人材と働いてみたい方

以上に一つでも当てはまる方は、一度オフィスに遊びに来てください!

www.wantedly.com

【参考サイト・書籍】

matome.naver.jp

matome.naver.jp

TYPOGRAPHY(タイポグラフィ)03  デザイナーなら覚えておくべき 厳選フォント350

TYPOGRAPHY(タイポグラフィ)03 デザイナーなら覚えておくべき 厳選フォント350

フォントのふしぎ  ブランドのロゴはなぜ高そうに見えるのか?

フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか?

新しい価値を生み出すためのブランディングプロセス

新しい価値を生み出すためのブランディングプロセス