ヒラギノフォントの王道感に魅了されるデザイン｜伊達千代の「今日もフォントを探して」Vol.4

自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。今回は2026年3月にリニューアルされた、株式会社SCREENグラフィックソリューションズ（以下SCREEN GA）の、「ヒラギノフォント」サイトについて伺いました。

教えてくれた人

聞き手

「ヒラギノらしさ」を伝える場所

ヒラギノシリーズは明朝やゴシックから、UD書体や行書まで幅広い書体がカバーされています。いずれも「クセがない」と評されることの多い書体で、奇抜な個性はないものの、読みやすく、紙でもWebでも自然に馴染む。日本語フォントにおけるスタンダードのひとつとして、UIから道路標識まで長年にわたって広く使われています。

しかし、その「スタンダードであること」こそが、今回の公式サイトリニューアルにおける最大の課題だったそうです。

お話を伺ったのは、今回のリニューアルを手がけたスタジオ・オータムの萩原俊矢さんと、デザイナーでプログラマーでもある花村太郎さんです。ヒラギノという巨大なスタンダードを、Webサイトでどのように表現するのか。企画から約1年で完成したプロジェクトの裏側には、二人のタイポグラフィへの深い理解と、ユニークな実装への挑戦がありました。

“文字そのもの”を主役にしたトップページ

リニューアル後のサイトで、まず目を引くのがトップページです。

アクセスすると、立体的な空間に文字が浮かび上がるようなビジュアルが現れます。一般的な企業サイトのように写真や大きなビジュアルを前面に押し出すのではなく、あくまで主役は「文字」です。このトップページの方向性を提案したのが花村さんでした。

「ヒラギノって、結局は文字そのものの質感が魅力なんです。だから余計な演出を足すより、文字そのものを見せたほうがいいと思いました」（花村さん）

トップページでは、ウエイトや書体違いの文字がアイソメトリックな3D空間の中に配置され、見る角度や動きによって異なる表情を見せます。文字を“読む”というより、“眺める”感覚に近い体験です。特に印象的なのは、ヒラギノ特有のニュートラルさが、そのまま空気感として表現されている点でした。派手なアニメーションではありませんが、静かに見続けてしまう魅力があります。

　　　　　　

技術的には「Three.js」を使用していますが、制作は決して簡単ではなかったそうです。当初はWebフォントを直接3D描画する方法を試していたものの、フォントごとに利用できる形式が異なったり、表示負荷の問題がありました。

そこで花村さんは、独自のワークフローを構築します。使用文字を抽出し、「Figma」のPlugin APIを使った自作スクリプトで大量の文字要素を一括生成。Figmaから各文字をSVGで書き出し、別のスクリプトでビットマップのスプライトシートに変換。Three.js上でUVマッピングするという方法です。

「ヒラギノってウエイトが本当に豊富なんですよ。しかも、角ゴとUD角ゴ、UD角ゴFみたいに、ぱっと見では近いけれど、実際にはかなり違う。その差異を、視覚体験として見せたかったんです」（花村さん）

確かにサイトを眺めていると、文字そのものの質感や重心、空気感の違いが自然と見えてきます。例えばUD角ゴではその特徴と言える濁点・半濁点の文字が表示されるなど、文字列もフォントの差異を見せるために選ばれていることがわかります。これは単なるフォント見本帳ではなく、“タイポグラフィを体験するトップページ”なのだと感じました。

フォントに精通した二人＋ヒラギノを考えるチーム

このサイトが単なるデザイン先行になっていない背景には、お二人の経歴も大きく関係しています。

萩原さんはWebディレクターとして企画と進行を担当しています。一方の花村さんは、デザインと実装を横断する珍しいタイプのクリエイターで、ビジュアルを設計しながらそのまま実装まで行える技術力を持っています。過去にはお二人とも大日本タイポ組合が編集長を務める「文字による文字のための文字のサイト」type.center（現在は終了）の運営にも携わり、フォントやタイポグラフィについて日常的に議論してきた関係なのだそうです。

今回のプロジェクトでも、単に「おしゃれなサイトを作る」のではなく、「ヒラギノという書体をどう理解してもらうか」が常に中心にありました。さらに実装エンジニアの堀田昌史さんも加わり、風通しのよい少人数の体制で制作は進行。約10カ月にわたり、SCREEN GA社の正木洋介さんらと伴走しながら開発が続けられました。

「クライアントと制作会社というより、一緒にヒラギノを考えるチームだった感覚があります」と萩原さんは振り返ります。

今回のリニューアルでもうひとつ特徴的なのが、サイト全体のフォントやカラーを切り替える「試す」機能です。この機能の面白いところは、単に書体を見本として比較するだけではなく、メニュー表示などのUIの部分まで丸ごと指定したフォントに切り替わるところです。

同じレイアウト、同じ文章でも、フォントが変わるだけでサイト全体の印象が変化する。ユーザーはその違いを、知識ではなく感覚として理解できます。しかも、書体ごとに最適なウエイトへ自動調整されるため、「ただ置き換えただけ」ではない自然な見え方が保たれています。この発想の背景にも、type.center時代の経験があったそうです。

「フォントって、説明を読むより、実際に切り替えて見るほうが圧倒的に伝わるんですよね」（萩原さん）

確かに、フォント紹介サイトはスペックや特徴説明が中心になりがちです。しかし今回のサイトでは、まず体験があり、そのあとに理解が来ます。丸ゴセットに変えた瞬間に柔らかくなる。UDセットにすると読みやすさが増す。角ゴセットにすると少し緊張感が出る。そうした違いを、“サイト全体の空気”として感じられるのです。これはフォントを「知識」としてではなく、「体験」として届けようとする設計なのだと思います。

　　

「成長するフォントサイト」を目指して

今回のリニューアルで、もうひとつ印象的だったのが「読み物」や「事例紹介」「ライセンス」「事例募集」などのコンテンツの豊かさです。特に「読み物」には、タイポグラフィを志す人にとって必見とも言えるわかりやすいnoteの記事がずらりとラインナップされています。

また「事例募集」は、ユーザーがヒラギノを使った制作物を投稿できる仕組みになっています。大小さまざまな事例を実際のユーザーの方から広く募集し、ウェブサイトでの公開を目指しているそうです。こういったコンテンツを盛り込むことで、サイトそのものがヒラギノの使われ方を蓄積していく場になっていると感じます。

「完成したサイトを作るというより、使われながら育っていく場所にしたかったんです」（萩原さん）

フォントも、作られただけでは完成しません。誰かが使い、組み、読まれて初めて、その書体の個性や価値が立ち上がってきます。今回のヒラギノ公式サイトリニューアルは、単なる情報整理やデザイン刷新ではありませんでした。

フォントを「見る」だけではなく、「試し」「感じ」「共有する」。そしてユーザー自身の実践によって、少しずつサイトの表情が変わっていく。それは、フォントサイトを“完成品”ではなく、“育つ場”として捉える、新しい試みだったのかもしれません。

取材・文：伊達千代、編集：栗原亮