こだわりを詰め込んでモリサワと共同開発！コーポレートフォント『Chatwork Sans』完成
こんにちは。BX部の新免（@melange_t）です。
昨年のリブランディングからしばらく時間が経ってしまいましたが、株式会社モリサワ（以下、モリサワさん）と共同開発したChatworkオリジナルのコーポレートフォント『Chatwork Sans』がお披露目になったので、今回はコーポレートフォントをオリジナルで制作するに至った背景や、フォント完成までの裏側を紹介します。
コーポレートフォント変更の背景
これまでChatworkではコーポレートフォントとして、3種類のフォントを使用するように決めていました。
日本語表記の場合「UD新ゴNT Pro」、英語表記の場合「Akzidenz Grotesk」、Webサイトの本文などで使う場合「Noto Sans JP」を使っていました。これらのフォントをコーポレートフォントとしていた理由などは過去の記事にあるので、そちらを参照してください。
これらのコーポレートフォントを見直すきっかけは、昨年おこなったChatworkのリブランディングプロジェクトになりますが、それ以外にも課題点がいくつかありました。
ブランドの世界観を表現できているか
リブランディングで作った「シゴトがはずむ」というタグラインは、「企業の現場を活性化させていくことで、 仕事をもっとワクワク、心がはずむものに変えていきたい」という想いを込めたものです。その世界観を表現するために、2014年当時に決めたコーポレートフォントが最適なのか検証する必要がありました。
例えば「必要な情報を必要な人に」というコンセプトの元、可読性の高さと、当時のロゴとの相性で決めた「UD新ゴNT Pro」ですが、文字の一つひとつの視認性を高めるために、仮想ボディいっぱいにデザインされています。本文で使うには良いのですが、タイトルなどで使うと少し詰まった印象があり、「はずむ」「ワクワク」といった軽やかな印象から少しずれるような課題感が漠然とありました。
和文と欧文フォントの組み合わせの運用の難しさ
「Chatwork株式会社」という社名ですが、和文と欧文の組み合わせでできています。「Chatwork」の部分を欧文フォントの「Akzidenz Grotesk」、「株式会社」を「UD新ゴNT Pro」で組み合わせていたのですが、やはり和文と欧文で文字の大きさや、太さなどイメージが異なります。太さなどを文字単位で微調整すれば、揃えることもできますが運用面で非常にコストがかかってしまいます。
そのためWebの場合は社名表記は和文フォントのみ、名刺などの紙媒体は和文と欧文フォントの組み合わせなど、運用が複雑化していました。これらの課題を解消しつつ、新しいブランドイメージに最適なコーポレートフォントの選定を開始しました。
フォント選定のポイント
まずはブランドイメージから、どんなフォントを選定するのかイメージを洗い出しました。
ビジネス感はありつつ、親しみやすい書体
幾何学的なモダンスタイルではあるが、少し人間味を感じる書体
軽やかさ、スッキリした印象を受ける書体
上記の印象に加え、ロゴとの親和性や可読性、利用する媒体での見え方などを踏まえ選定していきました。主に検証で見ていた点は下記の3点です。
ふところ：画と画が構成している内側の空間の広さ。ふところが広い書体はおおらかかな印象、ふところが狭い書体は引き締まった印象を与える
重心：文字のバランスの中心がどのあたりにあるか。一般には高めであれば緊張感や品格を生み、低めなら安定感や親しみやすさを感じさせる
字面：文字の形をした部分のこと。一文字分として用意されたスペース（仮想ボディ）に対し、字面の占める広さ（字面枠）のバランスをみて、字間をあけずに組む「ベタ組」のときの印象を確認
引用：株式会社モリサワ 文字の手帳 フォント用語集「字面」
展開時の見え方も含め検証を行い、ある程度イメージに近いフォントは見つかったのですが、「和文と欧文の組み合わせ」「ロゴとの親和性」の部分で決定には至りませんでした。
小文字の「a」がきっかけ、オリジナルフォント開発へ
「Chatwork」のロゴタイプの「a」は、縦棒の形状が直線的な一階建て（single-storey）になっています。その特徴的な形状と合うフォントを探していたのですが、なかなか見つけることができませんでした。
フォント選定時からモリサワさんにはイメージを伝え、イメージに合いそうなフォントをいくつか提案してもらっていました。その中に、小文字の「a」がロゴと親和性のある欧文フォントがありました。
ただし、その欧文フォントは未発表のもの。「じゃあ、使えないじゃん！（笑）」と内心思っていたのですが、そこからモリサワさんから考えてもいなかった提案がありました。
「モリサワが所有する和文、欧文フォントを組み合わせカスタマイズし、オリジナルのフォントを作ることができます！」とのこと。0から開発するより遥かにコストを抑えて、他にはないオリジナルフォントを手に入れることができるということでした。
提案いただいていた和文フォントの中では「あおとゴシック」がイメージと合ったので、そこから既存フォントの組み合わせで、オリジナルフォント作成の話が進みました。オリジナルフォント作成の理由は、イメージに合う和文と欧文のフォントが見つかったからだけでなく、他にもあります。
ベースラインや文字サイズの比率をカスタマイズできるので、和文・欧文の印象をそろえることができる
和文・欧文で別々のフォントで運用しなくて良いので、フォント選びなど運用がシンプルになる
このような理由もあり、モリサワさんとオリジナルフォントの共同開発に踏み切りました。
ちなみに和文のベースを「あおとゴシック」に選んだポイントは下記です。
シンプルな設計でモダンな印象もあるが、少し手書きの風合いが残り親しみを感じられる
字面が「UD新ゴ」よりも小さく、タイトルなどで使ったときに軽やかさがある
デジタルデバイス上での本文利用を目的に制作された書体
Web上で展開することの多いChatworkは、デジタルデバイスでの読みやすさも重要です。これまで本文は「Noto Sans JP」で運用していましたが、これからは『Chatwork Sans』のみで展開できます。
『Chatwork Sans』のこだわりポイント
和文・欧文の印象を揃える
和文と欧文と異なるフォントでは、ウェイトを選択しても同じ印象にならない場合があります。そこをカスタマイズすることで、和文と欧文の印象を揃え1つのフォントファミリーにしています。
グリフデザインのカスタマイズ
『Chatwork Sans』では、「a」の形状だけではなく、細かい部分ですが数字のグリフデザインもカスタマイズしています。導入社数を表示するときなど桁数が多い数字を表示することも多々あるので、数字もなるべくシンプルな形状にし、複雑な印象を与えないようにしています。
このように、細かい文字の調整と検証をすすめながら、『Chatwork Sans』は完成しました。
まとめ
完成した『Chatwork Sans』ですが、徐々にですがサービスサイトや社内ツールなどに使われ始めています。今回、オリジナルフォントを作ることで様々なメリットがありました。
既存のフォントの組み合わせと、細かなカスタマイズで、ブランドイメージにあったオリジナリティのあるフォントで、ブランディングに活かせる
フォントの運用がシンプルになり、運用コストが下がる
オリジナルフォントが手に入り、部内メンバーのモチベーションがあがった！
すべてのアウトプットに『Chatwork Sans』が適応できているわけではありませんが、これから徐々に適応し、フォントからもChatworkを感じられるようにしていきたいと思います。
フォントも企業のアイデンティティの一部です。コーポレートフォントを決めて運用することは、ブランディングにも繋がります。目指すブランドイメージに合うフォントが無いのであれば、今回のように既存フォントの組み合わせで、0から作るよりもコストを掛けずにオリジナルフォントを制作することも可能です。この記事がコーポレートフォント選びの参考になれば幸いです。
Chatworkのオリジナルグッズを販売するECサイト「Chatwork STORE」では、「Chatwork Sans」をデザインに使用した新商品の発売を開始しました。こちらもぜひ、チェックしてください！
また、共同開発をおこなったモリサワさんに事例インタビューをしていただきました。こちらもあわせて、読んでください。