タイポグラフィを主役にする引き算のデザイン|伊達千代の「今日もフォントを探して」Vol.9

自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。今回は2026年8月にリニューアルしたNPO法人 日本タイポグラフィ協会のWebサイトを紹介します。
Creative Director:上田 寛人(coban.lab)、ArtDirector:ブラザトン ダンカン, 佐藤 浩二(株式会社コージィデザイン), オガワヨウヘイ(オガワヨウヘイデザイン、Designer:細尾正行、Front-end Developer:鍋谷真菜香, 松本 朋也(松朋デザイン合同会社)、Back-end Developer:松本 朋也(松朋デザイン合同会社)
目次

教えてくれた人

聞き手

過去ではなく、未来を見つめる

日本タイポグラフィ協会は、60年以上の歴史を持つ、文字やシンボルマークなどの視覚表現に関わるデザイナーや研究者らによる団体です。日本タイポグラフィ年鑑の発行をはじめ、展覧会やセミナー、研究活動などを通じて、タイポグラフィの発展に取り組んでいます。 そんなタイポグラフィど真ん中の団体のWebサイトが、2026年8月、17年ぶりにリニューアルされました。白を基調としたミニマルな画面に、多くの人が目にしてきた親しみのあるゴシック体。このWebサイトは、どのような考えのもとにデザインされたのでしょうか。上田寛人さんや松本朋也さんらとともにリニューアルに携わった、株式会社スピッカートの細尾正行さんにお話を伺いました。
トップ画面に大きく使われているのは、『日本タイポグラフィ年鑑2027』のビジュアル。毎年更新される予定です
細尾さんは印刷会社や文具メーカー、Web制作会社での勤務を経て独立し、現在は同社でWebデザインを中心に活動しています。もともとはイラストレーションへの関心が強く、タイポグラフィを専門的に学んだ経験はありませんでした。
文字への関心が深まるきっかけとなったのは、2008年に飯田市美術博物館のロゴコンペに応募したことでした。細尾さんのデザインは最優秀賞を受賞し、現在も同館のロゴとして採用されています。この仕事を通じてロゴデザインの面白さに目覚め、その後も数多くのロゴを手がけるようになりました。
また、南大阪ではクリエイター同士の交流が盛んで、細尾さんもコージィデザインの佐藤浩二さんをはじめ、多くのデザイナーたちと出会いました。交流会や勉強会、セミナーなどに参加するなかで、文字への理解を深めていったそうです。
日本タイポグラフィ年鑑にも応募を重ね、2023年にはロゴタイプ部門でベストワーク賞を受賞。これをきっかけに協会に入会し、今回、以前から検討されていたWebサイトのリニューアルに参加することになりました。
「日本タイポグラフィ協会のWebサイトとして、何をどう見せるのが正解なのか、最初は本当に悩みました。会員はすごい方ばかりですし、歴史を掘り下げていくと、なかなか前に進めなくなってしまう。そこで、過去ではなく未来を見ることにしました」(細尾さん)
そのヒントとなったのが、日本タイポグラフィ協会のシンボルマークです。読点をモチーフとしたこのマークには、そこで終わるのではなく、先へと続いていくという意味が込められているといいます。
リニューアル後のWebサイトでは、このシンボルマークがページ右上に常時表示され、トップページへのナビゲーションとして機能しています。また、ページ最下部にも大きく配置され、カーソルを合わせると「NEXT」の文字が出現。クリックすると、別の主要コンテンツへと移動する仕組みです。
「シンボルに込められた『続いていく』という意味を、Webサイトの中でも体験できないかと考えました。クリックすることで次々とコンテンツを見て回れるようになっています」(細尾さん)
トップページをスクロールしていくと読点のシンボルマークが表示され、カーソルONで文字が現れます。クリックするとランダムに次の階層に遷移します

権威よりも親しみやすさを

細尾さんがもうひとつ大切にしたのが、同協会の親しみやすさでした。
「実際に入ってみると、長く活躍されている大先輩の方々も気軽に声をかけてくださるんです。もちろん互いへの敬意はありますが、上下関係を強く感じさせない。そういう協会の雰囲気も表現したいと思いました」(細尾さん)
この考えがよく表れているのが、画面を横方向に流れていく会員の名前です。表示される名前や位置はランダムに変わります。
「これは協会の上下関係のなさを表現したかったんです。長く活動されている方も、理事たちも、若い会員も関係なく、どの位置に出てくるかわからないようにしています」(細尾さん)
肩書きや経歴による序列をつくらず、誰もが同じように登場する。協会のあり方が、文字の配置と動きによって表現されているのです。名前をクリックすると会員のプロフィールや作品を見ることができ、それぞれの活動を知る入り口にもなっています。
会員のリストがランダムかつ互い違いに左右に流れ、クリックすることでプロフィールや作品が表示されます
サイト全体にも、こうした動きによる演出が随所に取り入れられています。要素が画面に現れるときだけでなく、ページを移動する際にも細かなアニメーションが加えられています。ミニマルなデザインでありながら、スクロールやページ遷移のたびにさまざまな動きに出会うことが、サイトを巡る心地よさにつながっています。
たとえば、お知らせの一覧は基本的に文字だけで構成されていますが、カーソルを近づけると関連する画像が現れます。普段は情報をすっきりと見せ、必要なときだけビジュアルを加える仕組みです。
また、このサイトには、会員の活動や作品を発信するプラットフォームとしての役割もあります。現在は協会側で行っている活動報告や作品情報の更新も、将来的には各会員が自ら行えるように設計されているそうです。
全体がミニマルな作りだけに、マウスオーバーで表示される画像にハッとさせられます

なぜ中ゴシックBBBを選んだのか

サイトを見てまず印象に残るのは、徹底して要素を絞った画面構成です。背景は白を基本とし、情報の多くを文字で表現しています。 「会員の活動や作品を見せる場所なので、サイト自体はあくまで箱として機能させたいと思いました。ミニマルでありながら、タイポグラフィ協会なので、書体そのものも主役になるようにしたかったんです」(細尾さん) そのため、使用する書体については特に悩んだそうです。当初は、協会らしく毎年サイトの書体を変えるというアイデアもありました。メインビジュアルを公募し、そのデザインに合わせて書体を選ぶというものです。しかし、継続的な運用を考えると実現は難しく、改めて書体選びを検討することになりました。 そこで選ばれたのが、モリサワの「中ゴシックBBB」です。 「僕の中では、商品の品質表示などに使われているイメージが強かったんです。きっちり情報を伝えるための書体という感じですね。ミニマルで日本らしい印象もありますし、今回のサイトに合うと思いました」(細尾さん)
和文には中ゴシックBBB、欧文はInterを使用
長年デザインに携わってきた人にとっては、中ゴシックBBBという書体には写植からデジタルへの移行期の記憶が重なるかもしれません。長く使われてきた書体だからこそ、見る人によって受ける印象が異なるのかもしれません。一周回った面白みがあり、現在のWebではあまり使われることのない書体としての新鮮さも感じられます。
  中ゴシックBBBは、現代的な角ゴシック体(ここではNoto Sans)と比べて細部のニュアンスが多いのが特徴です
一方、欧文には「Inter」が採用されています。実は初期案では欧文も中ゴシックBBBで組んでいましたが、英数字の詰まり具合について指摘があり、組み合わせを再検討したそうです。 「Interはファミリーが充実していて、読みやすさもあります。それに、書体としての色があまりないところがいい。ここで個性的な書体を入れてしまうと、表現が別の方向に振れてしまうと思ったんです」(細尾さん) WebやUIで広く使われるInterのニュートラルな表情は、中ゴシックBBBの持つ独特の味わいを邪魔しません。歴史を感じさせる和文書体と現代的な欧文書体。意外にも思える組み合わせですが、互いの個性を抑えたり補ったりすることで、静かで整った印象をつくり出しています。

文字は、まず読めること

細尾さんがWebデザインで大切にしているのは、「機能美」だといいます。
「Webサイトには、何か目的があって情報を得たい人が来ます。だからナビゲーションも文字も、わかりやすく、きちんと読めることが大事だと思っています」(細尾さん)
Webの文字表現は、CSSの進化によって以前よりも自由になりました。文字詰めや変形、アニメーションなど、さまざまな表現が可能です。しかし、表現の幅が広がったからといって、それらをすべて使う必要はありません。
今回のサイトでも、細尾さんは中ゴシックBBBの持つ雰囲気を生かしながら、文字サイズや行間、余白を調整し、読みやすさを重視した文字組みを目指しています。
ナビゲーションの文字にザブトン(白い四角)を入れたことで、2027年の年鑑ビジュアルとも連動しているように見えますが、これは「たまたま」(細尾さん)だそう
こうしたタイポグラフィの感覚を身につけるには、どうすればよいのでしょうか。
「僕自身、文字の歴史や専門的な知識には難しさを感じていたんです。でもロゴタイプをつくる仕事が増えて、文字の形を少し変えるだけで、明るく見えたり、力強く見えたりすることが面白くなってきました。文字そのものが持つキャラクターに興味が湧いてきたんですね」(細尾さん) その興味から、文字の形やバランスを調べるようになり、知識も少しずつ広がっていきました。 「自分が興味を持てるところから入ればいいと思います。面白いと思ったことを掘り下げていくうちに、自然と学べることもあるんじゃないでしょうか」(細尾さん) 取材の終盤、細尾さんはWebサイトをデザインするとき、まずフォントから決めていることに、話しながら改めて気づいたといいます。 文字の専門家として出発したわけではない細尾さんが、いまでは書体選びをデザインの起点にしている。その歩みもまた、タイポグラフィとの向き合い方が一様ではないことを教えてくれています。

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

WD SELECTION|あなたが手がけたWebサイトを紹介します(掲載無料・公開/リニューアルしたサイトの事例を募集中)
  • URLをコピーしました!
目次