近年のテレビ番組では「詳しくは番組ホームページをご覧ください」と放送内でWebへ誘導するスタイルが増え、テレビ局側もWebコンテンツを充実させる傾向が見られる。放送する番組のジャンルやボリューム、そしてさまざまな視聴者をターゲットとしているため、多様な情報が混在し、毎時更新・蓄積を続けるテレビ局のWebサイトで求められるデザイン、フォントとはどうあるべきなのか。

今回は、東海３県を放送エリアとするメ～テレ（名古屋テレビ放送）を訪問。メ～テレではイベントのポスターやPOP、SNSバナー制作などにモリサワのフォントを使っており、2017年からはWebフォント「TypeSquare」も活用している。本インタビューでは、Webサイトにおけるフォント選定方法、求める要素について、Webディレクターの富永氏、デザイナーの大山氏に話を聞いた。

メ～テレにおけるWebサイト制作のプロセスとして、まずは各番組を担当するスタッフからWebディレクターの富永氏に制作オーダーが届けられる。企画書から番組の内容や出演者のキャラクターを把握し、番組ロゴやテロップから方向性をイメージしてクリエイティブの方向性を決め、デザイナーと共にサイト制作を進めていく。

Webデザインを行うとき、まずはターゲットとなるペルソナ（典型的な顧客層）を設定し、その年代・嗜好に寄り添うデザインのトーン＆マナーを指針として掲げるのが一般的だ。しかし、同社はテレビ局。取り扱う番組は報道、地域情報、バラエティ、ドラマ、アニメなど幅広い年代や趣味嗜好を持つ視聴者がターゲットとなり、加えてWebサイト内にはイベント情報や企業情報などもプラスされる。

このように多種多様かつ膨大な量の情報がメ～テレのWebサイトへ集約されるからこそ、ページ制作時に重視する点が二つあるという。一つは番組の内容とデザインのテイストに乖離がないかどうか。そしてもう一つが、デザインのトーン＆マナーがメ～テレ色に統一されているかどうかだ。「色使いやフォントの選び方など、ページ全体を通してユーザーに違和感を与えないクリエイティブが“良いデザイン”だと考えています」と、富永氏は話す。

同社は元々MORISAWA PASSPORT（現在はサービス終了）を導入しており、モリサワが提供する書体やサービスへ馴染みがあった。そこへWebフォントがトレンドとして浸透しはじめた時代背景が後押しとなり、2017年2月頃からTypeSquareの一部採用を決定したという。

まずはMORISAWA PASSPORTに付帯していたTypeSquareを利用し、ごく限られた番組サイトの見出し部分へのみWebフォントの試験導入を開始。サービスの使い勝手や文字の表示速度に満足できたこともあり、Webフォントを使った番組サイトを徐々に増やし、見出しだけではなく本文部分にも使用範囲を広げていった。プラン内でトライアルとして活用していた範囲でも、Webフォントのメリットを十分に感じていたことから有償プランに切り替えて利用を継続し、現在は90本以上の番組サイトでWebフォントを活用するまでに急伸している。

かつては、キャッチコピーや見出し部分で使うデザイン文字は解像度に配慮しながら全て画像に書き出して、都度Webサーバーへアップロードしていた。しかしWebフォントの導入によってこの手間が無くなり、修正が必要な際にも文字の編集ができることで作業時間の大幅な短縮につながったと話す。

「Webフォントを使ってデザインできることで、我々の作業はとても楽になりました。そしてTypeSquareを導入したことについて、社内外から不満の声は特にありません。これはWebフォントを使ってもスムーズにページが表示できていることの現れで、良いことですよね」と富永氏が語るように、同社が目指す“ユーザーに違和感を与えないWebサイト”を実現している。

Webフォントを活用する機会が増えた今、TypeSquare導入から2024年12月時点までに同社が使用したフォント数は実に100を超えた。他社のWebサイトと比較して、これはかなりのフォント使用数といえる。実際に使われている文字数をカウントすると、Webの本文で採用されることが多いゴシック系のフォントが約70％を占めている。しかし、書体の分類比を見ると、1つの番組ページ内に複数のフォントを使うなど、さまざまな書体がバランス良く選ばれていることが分かった。

テレビ番組と同様にメ～テレのWebサイトで発信する情報は多岐にわたり、シリアスな内容からコミカルな話題まで、その振り幅の大きさが特徴である。報道やバラエティといった番組ジャンル別にデザイン担当者を置くこともできるが、サイト全体のディレクション業務を担う富永氏はそれをしない。「『A1明朝』が好きなデザイナーもいれば、新しく追加されたデザイン書体をいち早く使うデザイナーもいる。そこでデザインには細かなレギュレーションを設けず、担当者のクリエイティビティに任せて自由に制作してもらっています」と富永氏が語るように、各々の得意分野を活かせるよう番組毎に都度デザイナーを選定することが、結果として多彩なフォント活用につながった要因ともいえるだろう。

デザイナーの大山氏へデザインの手順についてたずねると、まずは番組内容によって角ゴシックを使うのか、もしくは丸ゴシックを使うのかを検討すると話す。「一度全体のデザインを角ゴか丸ゴで組んでみてから、見出しだけ個性的なデザイン書体に変えたり、番組内容を紹介するキャッチコピーをグラフィカルにまとめたり、細かな調整を行っています」

フォント選びで重視しているのは、やはり視認性や可読性だと言う。横画の線が細い明朝体は読む・見るデバイスによってかすれて視認性が低くなることに配慮しウエイトはM以上で指定する、報道番組や教育番組など公共性が高い番組サイトでは、確実に情報が伝えられるようUD（ユニバーサルデザイン）フォントも取り入れるなど、テレビ番組サイトならではのさまざまな配慮が行われている。

テレビ番組に欠かせない演出「テロップ」で使用するフォントには、番組スタッフの嗜好やこだわりが反映されていることが多いそうだ。しかし、番組サイトで用いるフォントに対して指定がくることは多くない。

もし、番組スタッフが思い描いているフォントをそのままWebフォントとして使用できれば、番組スタッフの考えがWebサイトに反映され、より視聴者に番組の魅力が伝わるデザインになるのではないか。大山氏は、あらゆる作り手、見せる側に使いやすく、見る側にも優しいフォントをうまく駆使して、Webサイトを通じた分かりやすい情報発信を続けていきたいと話を結んだ。