伊達千代の「今日もフォントを探して」Vol.3｜情報の密度や緩急を描き出す、エッジィなフォント選び
自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。今回は、
教えてくれた人
91kido
デザイナー・フロントエンドエンジニア
1991年生まれ・北海道出身。Web制作会社での勤務経験を経て、2018年にフリーランスとして独立。2023年に株式会社pattern.を設立し、携わるプロジェクトごとの最適な「体験」を模索・検討しながら、ジャンルや媒体を問わずアートディレクション・デザイン・フロントエンド開発を行う。
https://pattern-inc.jp
聞き手
伊達 千代
株式会社TART DESIGN OFFICE代表。グラフィックデザイナー・ライター。メーカーのデザイン室、広告制作会社勤務を経て独立。デザイン・編集・執筆のほか大学や企業でのトレーニングも行う。2017年よりフォントかるた制作チームに参加。著書に『文字のきほん』（グラフィック社刊）。監修に『デザイン9×9』（ホビージャパン刊）など。絶対フォント感は持っていないが、毎日文字のことだけを考えて暮らしたいくらいのフォント好き。
デザインからコーディングまでを担う
『Fate/Grand Order』のバーヴァン・シー（妖精騎士トリスタン）や、『刀剣乱舞』の京極正宗などのキャラクターデザインで注目を集めるイラストレーター・望月けいさんは、2025年から2026年にかけて、東京と大阪で本格的な個展「俗世」を開催中です。
本展の特設Webサイトのデザインを担当したのが、91kidoさん。本展の世界観をWebという媒体でどのように表現したのか──制作の背景やデザインの狙いについて話を伺いました。
91kidoさんは、はじめからデザイナーを目指していたわけではありません。文系の大学に通うなかで同人誌制作に取り組み、独学でデザインへの関心を深めていきました。コーディングにも興味を持ち、卒業後はWeb制作会社に入社。フロントエンドエンジニアとして約4年半勤務したのち、フリーランスを経て、現在は一人法人として活動しています。現在の業務は、Webデザインから実装までが約8割、グラフィックデザインが約2割を占めています。
本展のディレクションを手がけるのは、日本デザインセンター／有馬デザイン研究室の有馬トモユキさん。91kidoさんと有馬さんは、コミックマーケットなどのイベントに足を運んだり、互いに出展したりするなかで交流が始まりました。
「有馬さんから『ご一緒できませんか』と声をかけていただき、本展の前にもイラストに関連したコンテンツのプロジェクトを複数回ご一緒しています。尊敬し、信頼している方なので、お声がけいただけるのはとても嬉しいですね。なぜ自分に声をかけてくださるのかは少し怖くて聞けていないのですが（笑）、制作スピードを評価していただいているのではないかなと思っています」（91kidoさん）
実際、有馬さんからは、デザインがある程度固まった後工程で「めちゃくちゃ早い！」と何度も驚かれたそうです。デザインとコーディングの両方を担える人材は決して多くありません。イラスト表現への深い理解と高いデザイン力に加え、Webサイトの実装までを一貫して担える点も、91kidoさんがクライアントから信頼を集めている理由のひとつと言えそうです。
文字周りのガイドラインとフォント選択
本展では会場の設営から図録などの紙媒体、Web、プロモーションビデオなどが制作されました。ディレクターの有馬さんを始め、ロゴデザインは雷雷公社、グッズデザインは越阪部ワタルさんと錚々たるメンバーがクレジットされています。
「Webサイトの設計と並行して、本展示のディレクターである有馬さんが、フォントに関するガイドラインを作成してくださいました。デザイン制作時には、このガイドラインに沿って進めていくことになります」（91kidoさん）
今回特別に見せてもらった文字まわりのガイドライン「ロゴと使用フォント」では、セリフ系書体としてType Projectの『濱明朝』と『Cormorant』の組み合わせが採用され、サンセリフ系にはMonotypeの『たづがね角ゴシック』と『Degular』が選定されています。一方、Webサイト向けには別途ページが用意されており、「Webメディア向けには入手性の高いGoogle Fontsセレクトを用意しました」との記載がありました。媒体ごとの特性を踏まえながら、全体の統一感を維持するためのフォント設計が行われていることがうかがえます。
Webサイト用のガイドラインでは、セリフ系書体の和文に『しっぽり明朝』、サンセリフ系には『Noto Sans JP』が選定されており、実際のサイトでもこの指針に基づいたフォントが使用されています（注：閲覧環境によっては代替フォントで表示されます）。一方で、ガイドラインに含まれていないフォントも部分的に用いられており、これが印象的で目を引くデザインのアクセントとなっています。
「私はWebサイトを制作する際、まずフォント選びから始めることが多いんですが、今回の『俗世』のサイトでは、事前に有馬さんがフォントを選定されると聞いていたため、明朝体やセリフ体が中心になるだろうと想定して検討を進めました。その過程で出会ったのが、VJ Typeの『Pilot』です。繊細さと適度な個性のバランスがあり、選定いただいたものと別のフォントを使用することにはなるのですが、PC等の横長画面で見栄えがよい点が使用の決め手になりました。実は縦長のスマートフォン画面では別の書体を使用し、デバイスごとに最適な見え方になるよう設計しています」（91kidoさん）
読みやすさとアート性のバランス
91kidoさんが手がけるWebサイトは、アート体験そのものを前面に押し出すというより、必要な情報を読み取りに来るユーザーを想定したものが多いそうです。『俗世』のサイトでも、参加作家や会場、会期といった情報を確認する目的で訪れる人が多いと考え、設計を進めました。基本的にWebのタイポグラフィは、フォントサイズや行間、カーニングといった文字組みの細部を丁寧に調整し、ストレスなく情報を読み取れることを最優先にしているといいます。
『俗世』の場合は、望月けいさんの持つダークで尖った世界観に合わせ、書体選びや見せ方においてアート性とのバランスを探った部分もあったそうです。特に印象的なのが、スクロールすると現れる、プロフィールセクションです。古いモニタを思わせるざらついた質感の中で文字がフラッシュし、大きく配されたロゴを中心に、左右には押しつぶされたように変形した明朝体の文章が並びます。Webサイトにおいても望月さんによる監修が行われていますが、特にこのセクションは、望月さんからのアイデアを取り入れながら仕上げられたそうです。
「当初のワイヤーフレームでは、プロフィールとイントロダクションのテキストは別セクションとして配置する想定でした。ただ、イントロダクションの文章は読むためというより、雰囲気をつくる装飾として機能させたほうがよいのではないかと考え、プロフィールの横に配置する構成にしました。あえて文字を小さくしたり崩したりすることで、少しいびつな印象を狙っています。私も実際にイベント展示を見に行ったら言葉よりも作品の力で圧倒されるような体験だったので、結果的にルック重視の設計で合っていたのではないかと思います」（91kidoさん）
最後に、タイポグラフィの学び方について91kidoさんに聞いたところ、やはり基本が大切だと教えてくれました。書籍で基礎を身につけながら、看板や広告など生活の中にあふれる文字の使われ方を注意深く見ることで、新しい発見が生まれるといいます。確かに、意識して見てみるだけで、参考になる実用的な例は身の回りに数多く存在しています。
一方、Webのタイポグラフィは少し特殊で、デザインデータ上だけでなく、スクロールやスワイプといった動きの中でどう見えるかを確かめることも重要です。91kidoさんも実装後は必ず実機で確認し、必要に応じてデザインへ立ち戻り調整を重ねているそうです。地道な作業の積み重ねこそが、情報の密度や緩急を描き出す91kidoさんのWebデザインにつながっているのだと感じました。
取材・文：伊達千代、編集：栗原亮
