この連載を読んで初めて、「Webフォント」という言葉を知った方がいるかもしれません。Webビジネスに携わるすべての人が、今後利用することになるかもしれない「日本語Webフォント」を、この第3回と第4回で解説していきます。

パソコンのフォント、意識してますか?

Webフォントを学ぶ前に、パソコンに標準搭載されているフォントの歴史をひも解いてみましょう。

インターネットが普及しはじめた1990年代半ば～後半にかけ、MicrosoftとAppleの各OSにバンドルされていた日本語フォントは数種類しかありませんでした。Windows 98で言えば、「MS ゴシック」「MS Pゴシック」「MS UI Gothic」「MS 明朝」「MS P明朝」が、Mac OS Xでは「ヒラギノ角ゴ Pro W3」「ヒラギノ角ゴ Pro W6」「ヒラギノ角ゴ Std W8」「ヒラギノ明朝 Pro W3」「ヒラギノ明朝 Pro W6」「ヒラギノ丸ゴ Pro W4」といった具合です。

しかし、ネットが定着した90年代後半～2000年代初頭に入ると少しずつ増えはじめ、最新OSのWindows 10では10種類以上の日本語フォントが、MacのmacOS Sierraでは30種類以上の日本語フォントが標準搭載されるようになりました。

ただ、これらのフォントがパソコンで利用するすべてではありません。というのも、Microsoft Officeや年賀状ソフトなどのソフトウェアをインストールすると、フォントが付属するためです。これらのソフトは、購入したパソコンに初期からインストールされているケースも多く、ユーザーはあまり意識せずに利用しています。もちろん、好みのフォントを利用したい方が、フリーフォントや有償フォントを自身で追加インストールすることもあります。

自分のパソコンにインストールされている日本語フォントを正確に把握すれば、ビジネス文書や案内状、年賀状を作成する際に「そうだ、このケースでは、この書体を利用しよう」「見出しでは太いフォントを使用しよう」と意識して書体を選択できるようになります。

ディスプレイの高解像度化とフォント

昨今のスマートフォンやタブレットは、画面の解像度がかつてないスピードで高まっています。ただ、ppi(pixcel per inch:画素密度などを表す単位で、数値が高いほど精細度が増す)で遅れをとるノートパソコンの液晶画面も、より高解像度のRetinaディスプレイや4Kディスプレイが増えることでしょう。

そうした環境では、第1回でも軽く触れた「スケールできない固定されたフォント」ではなく、きれいなフォントを柔軟に用いて、コンテンツやブランディングに応じた書体を利用するケースが増加すると思われます。

ここで質問です。キャッチコピーが書かれたメインビジュアル画像はどのように制作しているでしょうか?

デザイナーさんに「キャッチコピーは可愛い書体に」「今回は高級感のある明朝体で表現を」などと発注し、IllustratorやPhotoshopを駆使した画像データが納品されると思います。下のバナーはその一例です。

黒板

しかし、このケースではテキストがコピーできず、スマホで拡大して見ると、文字がぼやけてしまいます。飲食店などに多いのですが、かっこいいフォントを用いて住所やメニューを画像データでWebサイトに掲載するため、ユーザーが友達に場所を伝えるためにコピペしようとしてもコピーできないといったケースが見られます。

ユーザーの利便性を損ねる結果となってしまったわけですが、これはもちろん、パソコンに搭載されているフォントの限界から「こだわりの書体を使うには画像データで」という時代が故の問題でした。

では、下に掲載したバナーはどうでしょうか?

黒板
特別課外授業「天体観測」
11月3日、細い月と金星と土星が並ぶ。望遠鏡で土星の輪も観察するよ！
2016年11月3日（木）
Cafe IT Search+ 屋上

上と同じバナーのはずですが、テキストがコピーできますよね? これらの書体は、一般的な環境のパソコンには搭載されていないはずです。

「Webフォント」は、使用したい書体の必要な文字列を、瞬時にダウンロードして表示しているのです。フォントですから、リアルタイムにレンダリングされ、どれほど拡大しても、常に綺麗な表示を保つことができます。

Webフォントの利用には副次効果があり、「alt属性(画像の代替となるテキスト)」の記述漏れを防ぐことでSEO対策にも繋がります。また、テキストデータがWebサイトに残るため、ブラウザなどの翻訳機能とあわせてインバウンド需要への対応、読み上げ機能といった付加価値創造にも繋がります。

画像データのテキストデータ化だけが、Webフォントのメリットではありません。ステッチ枠付きの見出しを「システムフォント」と「Webフォント」で比較してみましょう。システムフォントとWebフォントを比較すると、視認性や表現力がアップしていませんか?

  • システムフォントで表現
カフェ IT Search+ 開店中

カフェ IT Search+ 開店中

上段見出し[font-family: sans-serif;]
下段見出し[font-family: 游ゴシック体, ‘Yu Gothic’, YuGothic, ‘ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;]

  • Webフォントで表現

カフェ IT Search+ 開店中

カフェ IT Search+ 開店中

上段見出し[font-family: FOT-ロダンNTLG Pro B;]
下段見出し[font-family: FOT-くろかね Std EB;]

  • 色んな書体のWebフォント

      • 下記の4つの書体は通常、パソコンにインストールされておらず、すべてWebフォントで表現しています。書体が変わると第一印象が変わります。

      最高のおもてなし　ホテルIT Search+

      最高のおもてなし　ホテルIT Search+

      最高のおもてなし　ホテルIT Search+

      最高のおもてなし　ホテルIT Search+

      1段目[font-family: “FOT-古今髭 Std EB{pm}”;]
      2段目[font-family: “FOT-マティスえれがんと Pro EB{pm}”;]
      3段目[font-family: “FOT-コメット Std B{pm}”;]
      4段目[font-family: “FOT-コミックミステリ Std DB{pm}”;]

      一番下の書体はあまり使用しないものですが、お化けイベントを企画したい時にこの書体を用いると、一番ぴったりだったりしますよね。一番上が「個室温泉付き宿泊プラン」、二番目は「女子力アップ宿泊プラン」、三番目は「天体観測宿泊プラン」の見出しといったように、企画内容とフォントを連動させることは、受け手のイメージを2倍、3倍にも膨らませることができるのです。 次回はこうしたWebフォントの魅力について、具体的な導入事例を交えて導入方法などを解説します。

      著者プロフィール

      関口 浩之
      ソフトバンク・テクノロジー(SBT) Webフォント エバンジェリスト


      1995年にソフトバンク技研(SBTの前身)へ入社。数多くの新規事業立ち上げに携わる。
      現在は日本語Webフォントサービス「FONTPLUS」のエバンジェリストとして日本全国を飛び回る。小さい頃からガリ版印刷やレタリングが好きで、活版印刷にも興味を持つ。真空管やトランジスタに関心があり、パソコンは漢字トークやMS-DOS、パソコン通信の時代から勤しむ。