成功に導くブランド創りへ 「Webとタイポグラフィの現在地」

2023年11月10日にMonotype主催のタイポグラフィイベント「Monotype+（モノタイププラス）」がスパイラルホール（東京・青山）にて開催されました。

過去10回にわたり運営してきたType&（タイプアンド）の名前を改め、再スタートする運びとなったMonotype+は、9月にMonotypeグループの傘下に入ったフォントワークス株式会社（以下フォントワークス）と初めての合同イベントになりました。

第一回となる今回のテーマを「Typography matters.（タイポグラフィの重要性）」として、タイポグラフィとブランドの関わりについて、グローバル企業を成功に導くブランド創りのソリューションを提供します。

Session 2 は、Webフォント配信サービスFONTPLUSの開発を担当しているフォントワークス 鈴木丈によるプレゼンテーション「Webとタイポグラフィの現在地」です。Webとタイポグラフィにおいてどういったことが可能なのか、実例を交えつつお話ししました。

はじめにWebフォントについて説明しました。

［Webフォント？］
Webフォントとは、その名の通り私たちが普段利用しているWebサイトやWebアプリケーションにおいてフォントを利用する技術のことを言います。スマートフォンやパソコンにはフォントがインストールされています。これはシステムフォントとも呼ばれていますが、O Sやデバイス、環境に応じて違うフォントを採用しているため、（Webフォントを利用していない場合）同じWebサイトを表示しても違うフォントで表示されることが多々あります。同じブランドの印象やメッセージを伝えたい場合は、違って見えてしまい、同じユーザー体験を提供側がコントロールできないという課題があります。

そこでWebフォントを採用することにより、環境に左右されずに、統一したユーザー体験を提供することが可能になります。これがWebフォントの基本的な仕組みです。2011年より提供を開始したFONTPLUSでは、現在4,000近い種類のWebフォントを保有しています。

Webフォントのメリットは、システムフォントにはない表現力豊かなフォントが自由に使える点が最大の魅力です。筑紫明朝などのWebフォントと、システムフォントであるメイリオが適用された二つのページを見ると、内容は問題なく読めるがページから受ける印象は全く異なるということがわかると思います。

［読めればいい？］から［読める→伝わる］へ
WindowsのメイリオやmacOSに入っているヒラギノは、汎用的になるべく多くの方に読みやすい可読性の高いものとして選ばれているシステムフォントです。

企業のメッセージやブランドの世界観、または個人の考え方などを伝えたい時によりふさわしいフォントがあるのではないかという考えのもとFONTPLUSチームは日々開発を行っています。

［読める→心地よく読める］
現在、私たちはWeb上で多くの時間を費やすようになりました。これに伴い適切なフォントを選ぶということだけではなく、どのように画面に配置するか、行間や文字のサイズなどタイポグラフィの問題についても非常に重要になります。

後半は、FONTPLUSを導入した企業事例を通してWebフォントの魅力を解説いたしました。

［ブランドの世界観をWebフォントで伝える］
事例1：株式会社ホテルオークラ東京
最初の事例は、株式会社ホテルオークラ東京のWebサイトを紹介。60年代に開業し2019年にリニューアルした日本を代表する一流のホテルになります。

Webサイトのデザインは株式会社マウントが担当しました。このサイトの特徴は、基本的な情報以外に歴史のあるホテルの強みとより良いホスピタリティを提供できる現代的な施設としての魅力を伝えています。ここでは、懐かしさとモダン、しなやかさと緊張感を併せ持つデザインとして筑紫明朝がWebフォントとして採用されました。

このサイトの素晴らしい点は、予約やサイトを訪れる段階でも特別な体験ができるよう、隅々まで設計された筑紫明朝を使ったサイトのタイポグラフィにあります。Webサイトを通して企業の姿勢やメッセージを存分に堪能できるブランドの成功例だと話しました。

事例２：株式会社WORDS（以下Words）
Wordsは、顧問編集者という珍しい業態の会社になります。編集者が言葉のプロとして経営者の発言、発信をサポートし、言葉によって企業をブランディングしていくというミッションを持っています。Webサイトも言葉が主役となったデザインとして株式会社neccoが制作。ここでは筑紫Aオールド明朝と筑紫ゴシックを採用しています。の二つのフォントが巧みに組み合わさり、言葉の力でブランディングをサポートしていくというメッセージがストレートに伝わるデザインになっています。

Webサイトを制作する際、サイトデザインが先に進み、コンテンツはあとから決まって掲載されることもあると思いますが、このサイトはデザインの初期の段階からデザインやレイアウトとコンテンツを同時に考えて進められました。言葉を軸にしてコンテンツとデザインが相互に影響しあいながら生まれたWebサイトになります。さらに、Webからダウンロードする案内資料についても統一したデザインで制作され、常に同じ企業メッセージを発信することができている例です。

事例３：株式会社MIMIGURI（以下Mimiguri）
経営組織、マーケティングデザインなどのコンサルファームであるMimiguriのWebサイトの紹介です。採用されているWebフォントはMonotypeのたづがね角ゴシックです。文部科学省認定の研究機関であるMimiguriのメンバーの多くは、本を執筆しているという背景もあり、コンテンツはアカデミックな単語が並びます。サイトを訪れたユーザーとの距離感を大切にするためにも、知的で洗練されたイメージを保ちながらも温かみのあるたづがねの強みが生かされています。また、グラフィックと合せることでより柔らかさと親しみやすさを演出することができているサイトであると鈴木は話します。

続いて、Webフォントを効果的に利用できるためのFONTPLUSの機能を紹介しました。

［タイポグラフィ タイプ（活字、フォント）をいかに配置するか］
FONTPLUSでは、Webフォントに機能を搭載すれば、ブラウザ上で日本語の読点、句点、中点、括弧などの役物が連続した時のアキを自動で調整できるようになっています。

和欧混植する際は、和文の中の英数字だけ小さく見えるという問題がありましたが、Webフォントの技術を使ってより簡単に調整することができるようになりました。

これまで、ウェイトやスタイルはそれぞれ違ったフォントファイルとして扱うことが必要でしたが、この複数のバリエーションを１つのフォントファイルとして利用することができるバリアブルフォントの登場により、これまでの表現の幅を広げることを可能にしました。高度なタイポグラフィ表現にはブラウザー側の技術とフォントの機能というものが必須ですが、ここ数年の急激な進化によりこれまでできなかったことが次々とできるようになってきました。

最後に現在のWebデザインとフォントワークスの取り組みを紹介しました。

［Webデザインを取り巻く環境の変化とフォントワークの取り組み］
コラボレーション
これまではデザイナーが1人で最初から最後まで行っていましたが、現在ではFigma、XDなどのコラボレーションツールを使ってチームと連携しながら進めるということが主流になってきています。エンジニアリングだと、GitHubを使用しレビューをしあいながら開発することが当たり前になりました。また、Wixなどのツールを使えば、ソースコードを書かずにホームページを作成するための必要な全ての機能とソリューションを利用することができます。

パフォーマンス
近年、JavaScriptを中心としたフロントエンド技術が飛躍的な進歩を遂げています。これにより画面上で表示速度が早く、より軽快に動くWebサイトやWebアプリケーションが求められています。
フォントワークスでは、FONTPLUSアドバンスト・プランとしてこの新しいニーズにも対応できるようなサービスの開発を進めています。このソリューションは、高速で安定した配信とシンプルで簡単な導入方法を可能にしたものです。
より技術的な詳細などご興味のある方は以下までお問い合わせをお願いします。

FONTPLUSアドバンスト・プランについてお問い合わせ
https://fontplus.jp/service/advanced

FONTPLUSチームでは、今後もWebの領域においてTypography matters.（タイポグラフィの重要性）をより多くの方に理解してもらえるような活動を進めていきます。

トークイベントの動画を公開中！「Monotype+ 2023」企業やブランドにとっての書体の可能性を探る

「Webとタイポグラフィの現在地」鈴木丈
https://youtu.be/fZ17sQF3Jak

「企業事例から学ぶ、ブランド創り」古川智章／佐藤可士和／小林章
https://youtu.be/79uwfp64jlU

「Fontworks × Monotype」藤田重信／小林章
https://youtu.be/2CTZADIylfg