Airbnbはなぜ、1年以上かけ独自のタイプフェイス「Airbnb Cereal」を作ったのか

マーケティングとプロダクトUIは、異なる目的を果たすためにタイポグラフィを用いる──両者のニーズを満たすタイプフェイス開発の軌跡。

Airbnbは5月15日、独自タイプフェイス『Airbnb Cereal』を発表した。Airbnbのマーケティングチームとエクスペリエンスデザインチーム、Dalton Maagによる共同開発だ。

Dalton Maagは、先日Netflixの独自タイプフェイス「Netflix Sans」も手がけたイギリスのタイプフェイス制作会社。2016年のリオデジャネイロ五輪や、Intel、Nokia、Google、Amazonなど、名だたる企業の独自タイプフェイス開発に携わっている。

「ボタンから看板まで」——多様な媒体で一貫した「ブランドらしさ」を体現するタイプフェイスの探求

Airbnbは、サイトやアプリの他にも「Airbnbmag」という雑誌や、地下鉄の広告などを展開している。媒体によりタイプフェイスに求める要素はことなる。たとえば看板では大きく文字を使用する一方、UIでは文字がかなり小さく使用される。Airbnbのデザインランゲージシステム部・クリエイティブリードのKarri Saarinen氏はAirbnb designのインタビューで以下のように語っている。

「UIではタイプフェイスはとても小さく表示されることがあります。ゆえに、あまりにも細く・軽いタイプフェイスだと完全に消えて読めなくなってしまうのです」

Airbnbのデザインチームは既存フォントをいくつも検討するも、「印刷には適していてもUIには適していない」など、すべての要件を満たすフォントが見つからなかった。結果「Airbnb Cereal」開発に至ったという。

「ブランドらしさ」と「読みやすさ」のバランス

「Airbnb Cereal」の開発は関係者のワークショップから始まった。ワークショップや開発プロセスの詳細な内容は公表されていないが、Saarinen氏の記事によると、その中でもはじめに行ったのは指針となるキーワードの設定だったという。

「Crereal」における指針となるキーワードは「人間らしさ(human)」「親しみやすさ(friendly)」「歓迎する(welcoming)」「クリエイティブプロフェッショナリズム(creative professionalism)」。Saarinen氏によるとこの決定によって、Airbnbらしさをまとった現代的なサンセリフ体という方向性が決まったとも語っている。

Dalton MaagのWorkによると、Airbnb社内では当初マーケティング・ブランドチームとプロダクト・UIチームはタイプフェイスに対し異なるニーズを持っていたという。

Saarinen氏も自身の記事で「マーケティングとプロダクトUIは、タイポグラフィを異なる目的を果たすために用いるものである」と語っている。

マーケティング・ブランドチームは、「強力なブランド表現」のためにフォントの開発を望んでいた。たとえば、看板広告では、太く・重みのあるタイプフェイスを活用し、見た人の記憶に残すことが求められるという。

一方、プロダクト・UIチームはデバイス・サイズに応じてさまざまに変更が加わる複雑なUIの環境と、ブランドらしさを接続するという目的を持っていた。

Saarinen氏によると、UIチームは「あまりにも装飾的で遊び心のあるフォントは、人が気をそらす原因となる。重要な情報を見逃してしまい、意図した目的が達成できなくなるのでは?」と考えていたと明かしている。「優れたUIにおいては目に優しく、可読性が高く、コンテンツのみが記憶に残るようなフォントが望ましい」というのがUIチームの考えだ。

オフラインでは「記憶に残ること」オンラインでは「記憶に残らないこと」が求められる。Dalton Maagは、太くなるにつれて重みを増し、表現性を高めることで広告などで用いる配慮をした。同時に、light, book, mediumでは文字幅を狭め、デジタル向けに改良したと語っている。

ほかにも、可読性を上げるため、いくつか工夫が凝らされている。例えば、e,c,oといった、似たような形の文字が混同されないよう、cの口を広く開けている。

また、通常は高さがない小文字に対して、Airbnb Cerealは高さを出すことで小さなフォントサイズであっても大きく見えるようにしている。

専用のテストツールを制作、11,000以上ものデザインを確認

完成までには、開発中のタイプフェイスがUIに親和性があるかの確認もおこなった。

タイプフェイスは、まずは下記の限られた文字のみを試作。これらの中核文字が、他の文字の形状を定義するため、すべてを一度に描く必要はないという。

UIでの親和性を確認するために、この文字のみで違和感がない文章を作るジェネレータを開発。生成された文字列に加え「Airbnb」や「Alice」と言った名前や場所を追加し、より実際に近い文章でUIに馴染むかを確認していった。

あわせて、サイトのジェネレータも開発。新たなフォントを、色とサイズを変えて確認できるようにした。このおかげで、進行状況を共有し、迅速に、より現実的なデザイン上でテストを実施できたという。

最終的に、半年に渡って30回以上のテストを実施し全体的なフォントスタイルを決定。全フォントが整った上で、さらに半年に渡りDalton Maagと緊密に協力しながら精密化とテストを続けたという。

タイプフェイス完成後、Airbnbはこの「Airbnb Cereal」を何千というUIに組み込む必要がある。

新しいタイプフェイスを全製品でテストするために、チームはウェブやモバイル、アプリのタイプフェイスと設定を閲覧できる体制を構築。多数のデバイス・タイプ・サイズを目視で確認し、11,000以上のスクリーンショットをチェックしたという。

創業ストーリーを「Cereal」に込めて

「Cereal」という名前にAirbnbの有する価値観が反映されている。ひねりが効いた、遊び心があり、オープンでシンプルな名前を目指し、いくつかフォント名を検討する中で、最終的にAirbnbの価値観を体現する名前として「Cereal」に落ち着いたという。

Airbnbの初期のサービス名「Airbed & breakfast」の「朝食」と、Airbnbが創業期の苦しい時期に、借金返済のためにシリアルの販売を行っていたことに由来する。名実ともにブランドの価値観を体現するフォント名といえる。

なお、Airbnb Cerealは非ラテン系の7つの言語をサポート。今後は数年かけてさらなる言語対応を目指すという。

img: Airbnb Design, It's Nice That

Tags
Share