さて、私たちが日常的に閲覧しているWebサイトですが、サイトによっては「Webフォント」が使用されているかもしれません。
閲覧する際にはあまり意識しない部分ではありますが、サイト制作にかかわる人にとっては「Webフォント」の利用は様々な利点があります。
今回はこの「Webフォント」について取り上げてみたいと思います♪

 Webフォントはサーバーから指定されたフォントを配信し、Webサイトで表示する仕組みです。

例えばモリサワの「UD新ゴ」をWebサイト内で指定した場合、通常は閲覧者のPCやスマホに「UD新ゴ」が入っていないと表示することができませんが、Webフォントを使用した場合、閲覧者の端末にフォントがなくても問題なく表示することができます。

そもそもWebサイト内のフォントがどのように表示されているか、ご存知でしょうか？
文字が問題なく読めればあまり文字やフォントというのは意識しない部分ですので、考えたこともないという方が多いかもしれません。

通常のWebサイトでは、サイトを閲覧する側のPCやスマホなどの端末に入っているフォントで文字が表示されます。
サイト制作者が特にフォントを指定していない場合はブラウザのデフォルトのフォントで表示されることになります。
例えばGoogle Chromeを使った場合、Windows10ではメイリオ、macOS（12.0）であればヒラギノ角ゴ ProN W3で表示されます。

同じサイトを見ていても、人によって表示されるフォントが異なっている可能性があるということですね。

サイト制作側が特定のフォントを指定することはできますが、閲覧者が使っている端末のOSやバージョンによってインストールされているフォントが違うので、閲覧者の端末にそのフォントが入っていない場合、別のフォントに置き換えられて表示されることになります。

それに対して、Webフォントであれば閲覧側の環境に左右されることなく、指定したフォントで表示ができるというわけです。

Webフォントの仕組みはお分かりいただけましたでしょうか。
では次に、Webフォントを使うと何が良いのか、その利点をご紹介します。

1.メディアを越えてイメージを統一できる

例えばある雑誌に関して、紙媒体のものとWebサイトで異なるフォントを使ってしまうと、イメージにズレが生じる可能性があります。
Webフォントを使用すると、印刷物で使用したものと同じフォントを簡単にWebサイトでも使用することができ、メディアを越えてイメージを統一することができます。

2.文字を画像として作成した場合の問題点を解決できる

今までは使用したいフォントをWeb上で表示するには画像化するしかありませんでした。

しかし、Webフォントを使うことで画像化することなく使用したいフォントを表示できるようになります。
画像ではなくテキストベースでサイトを作成することにより、下記のメリットがあります！ 

・文字修正が簡単
画像化したフォントを修正するには画像そのものを修正する必要があり大変でしたが、Webフォントであれば文字を打ち換えるだけなので、Webサイトの作成・修正を効率化することができます。

 ・拡大してもクリアな表示

画像化したフォントはスマホなどで画面を拡大すると表示が荒くなり、文字が読みにくくなってしまうことがあります。Webフォントであれば拡大縮小してもクリアに表示できます。 

・検索性も保持
画像化したフォントは文字としての情報がないため、そのままでは検索に引っかかりません。文字情報をalt属性としてタグに記述することはできますが、手間がかかります。Webフォントであれば当然文字情報を持っていますので、そのままで検索にヒットさせることができ、SEO対策になります。
※SEO対策とは：ウェブサイトを検索結果でより多く露出するために行う一連の取り組みを指します。 

・自動翻訳や音声読み上げ機能なども活用可能
画像化したフォントは文字としての情報がないため、自動翻訳や音声読み上げ機能が使えません。読み上げ機能については文字情報をalt属性としてタグに記述することで対応可能ですが、前述の通り手間がかかります。Webフォントであればこれらの機能も問題なく活用できます。

上記のような様々な利点のあるWebフォントですが、現在Adobe社の提供する「Adobe Fonts」やGoogle社の「Google Fonts」など、無料のものも含めてさまざまなサービスがあります。

もちろんモリサワでもWebフォントをご提供しております！

それが「TypeSquare（タイプスクエア）」です。多くの印刷物で使用されているモリサワのフォントをWebサイトでも使用することができます。

現在ラインナップは1000書体以上あり、一般的な明朝体やゴシック体はもちろん、デザイン書体、かな書体、装飾書体、UD（ユニバーサルデザイン）書体など多数のフォントを利用できます。
日本語だけでなく、欧文書体や中国語、韓国語などの外国語も多数あります。

書体一覧

簡単にWebフォントをご利用いただけるスタンダードプラン（無料/Ⅰ/Ⅱ）と、大規模サイト・カスタマイズ案件向けのアドバンスドプランがあります。

スタンダードプランにはPV数に制限はありますが無料で1書体使えるプランもありますので、『とりあえずWebフォントを使ってみたい！』という方もトライしやすいですね♪

 ※スタンダード無料プランは、2022年8月1日以降に毎月 1千 PV までになります。

100万PV/月を超えるサイトでのご利用や、Webアプリケーション上でWebフォントを表示させたい、Webサービスの機能としてTypeSquareを組込みたいといった場合、アドバンスドプランをご案内しています。アドバンスドプランに関しては、こちらの窓口までお気軽にお問合せください！

また、各プランの詳細はこちらをご参照ください。

自分のWebサイトがモリサワのWebフォントでどのように変わるのか、「TypeSquare Web Font Tryout」にて試すことができます。
操作は非常に簡単で、URLを入力して「Tryout」をクリックするだけです！

 TypeSquare Web Font Tryout

せっかくなので、今見ていただいているこのMorisawa DTP Lab.で試してみます！

2022年3月25日の「簡単に“映える”！ Photoshop Cameraで写真を撮ってみよう♪」のURLを、コピーペーストして、Tryoutをクリック！

「見出し」と「本文」のフォントをWebフォントに変更して表示することができます。
今回は「見出し」に「新丸ゴ エンボス」、「本文」に「くもやじ」を選択してみました。

次に「page2022 モリサワブースレポート＆RISAPRESS Color7100リリース」の記事でも試してみました！

こちらでは「見出し」に「秀英にじみアンチック」、「本文」に「しまなみ」を選択してみました。

いかがでしょうか。フォントを変えることにより、Webサイトから受ける印象が大きく変わります！

『自社のWebサイトをもっと魅力的にしたい！』とお考えの方は、ぜひ一度トライアウトをお試しください。
もしそこで気に入るフォントがありましたら、TypeSquareについてもご検討いただけると幸いです！

それでは次回のDTP Lab.もお楽しみに♪