Chatwork Design
こだわりを詰め込んでモリサワと共同開発!コーポレートフォント『Chatwork Sans』完成
見出し画像

こだわりを詰め込んでモリサワと共同開発!コーポレートフォント『Chatwork Sans』完成

Chatwork Design

こんにちは。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)になっています。その特徴的な形状と合うフォントを探していたのですが、なかなか見つけることができませんでした。

Chatworkロゴタイプの「a」と他フォントの比較

フォント選定時からモリサワさんにはイメージを伝え、イメージに合いそうなフォントをいくつか提案してもらっていました。その中に、小文字の「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」をデザインに使用した新商品の発売を開始しました。こちらもぜひ、チェックしてください!

また、共同開発をおこなったモリサワさんに事例インタビューをしていただきました。こちらもあわせて、読んでください。

キャンペーンのお知らせ

今回、モリサワさんと共同開発した『Chatwork Sans』のリリースを記念して、モリサワさんとコラボしたオリジナルデザインのノートPCケースを20名様にプレゼントします。

Chatwork 公式Twitterアカウント「@chatwork_ja」をフォローして、対象ツイートをリツイートすれば応募は完了!抽選に当選された方には、Twitterのダイレクトメッセージにてお知らせいたします。
※通信環境などにより当選者の方へのダイレクトメッセージ配信までにお時間がかかる場合がございます。

プレゼント内容
賞品および当選者数:オリジナルデザインのノートPCケース(13インチ or 15インチ)…20名様

キャンペーン期間
2022年7月27日(水)~2022年8月19日(金)23:59まで

応募方法
1. Chatwork公式Twitterアカウント「@chatwork_ja」をフォロー
    ※すでにフォロー済みの方は、追加の対応は不要です
2. 本キャンペーン対象のツイートをリツイート

注意事項

  • プレゼント画像はイメージです。実際の商品とはデザイン・仕様が一部異なる場合がございます。

  • 本キャンペーンへのご応募に当たって、以下URL記載の「キャンペーン規約」、及びプライバシーポリシーが適用されます。ご応募に当たっては、本ページ記載の内容及び「キャンペーン規約」をご確認いただき、ご同意の上ご応募ください。なお、以下URL記載の内容と相反する内容が本ページの注意事項その他の箇所に記載されている場合、当該事項に関しては、本ページ記載の内容が「キャンペーン規約」に優先して適用されます。

  • 当選されたお客様には2022年8月22日以降にTwitterのダイレクトメッセージにてお知らせします。この当選連絡は、いかなる場合も再発行いたしません。

  • お客様が不正行為等を行ったと当社が判断した場合、プレゼントの獲得は無効となります。

  • 以下の項目に該当する場合は本キャンペーンの抽選対象外となります。あらかじめご了承ください。

    1. お客様がTwitterアカウントを非公開に設定している場合

    2. キャンペーン終了までにTwitter公式アカウントのフォローを外す、または該当ツイートを削除した場合

    3. ツイートが正しく投稿できていない場合

    4. そのほか運営が不適切と判断した場合

Twitterに関する注意事項

  • 本キャンペーンに参加する場合には、Twitterの利用規約またはルール等に従ってください。

  • 複数のTwitterアカウントを利用して応募した場合、お客様は当選資格を失います。

プレゼントの発送

  • プレゼント発送のため、ご当選されたお客様は別途Twitterのダイレクトメッセージにて、ご希望のPCケースサイズ、お届け先情報が必要となります。

  • プレゼントの発送は国内のみとさせていただきます。

  • プレゼントのお届けは2022年9月中を予定しておりますが、事情により変更となる場合があります。あらかじめご了承ください。

なお、モリサワ公式Twitterアカウントでもプレゼントキャンペーンを同時開催中です。こちらも、よろしくおねがいします!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Chatwork Design
「働くをもっと楽しく、創造的に」をコーポレートミッションに掲げる、ビジネスチャット「Chatwork」のプロダクトデザイン(UI/UX)やブランディング(BX)について紹介するブログです。プロダクトデザイン&BX組織でfun & creativeに働く様子もお伝えしていきます!