私たちが日常的に閲覧しているWebサイトですが、色々なフォントが使われています。
サイトによっては「웹 글꼴」が使用されているかもしれません。
閲覧する際にはあまり意識しない部分ではありますが、サイト制作にかかわる人にとっては「Webフォント」の利用はさまざまな利点があります。
そこで、Webフォントの基本的な仕組みやメリット、一歩先の使い方など、Webフォントのいろはをご紹介いたします！
Webフォントの仕組み
◆Webフォントの概要
Webフォントはサーバーから指定されたフォントを配信し、Webサイトで表示する仕組みです。
例えばモリサワの「UD新ゴ」をWebサイト内で指定した場合、通常は閲覧者のPCやスマホに「UD新ゴ」が入っていないと表示することができませんが、Webフォントを使用した場合、閲覧者の端末にフォントがなくても問題なく表示することができます。
そもそもWebサイト内のフォントがどのように表示されているか、ご存知でしょうか？
文字が問題なく読めればあまり文字やフォントというのは意識しない部分ですので、考えたこともないという方が多いかもしれません。
通常のWebサイトでは、サイトを閲覧する側のPCやスマホなどの端末に入っているフォントで文字が表示されます。
サイト制作者が特にフォントを指定していない場合はブラウザのデフォルトのフォントで表示されることになります。例えばGoogle Chromeを使った場合、Windowsではメイリオ、Mac OSであればヒラギノ角ゴ ProN W3で表示されます。
同じサイトを見ていても、人によって表示されるフォントが異なっている可能性があるということですね。
サイト制作側が特定のフォントを指定することはできますが、閲覧者が使っている端末のOSやバージョンによってインストールされているフォントが違うので、閲覧者の端末にそのフォントが入っていない場合、別のフォントに置き換えられて表示されることになります。
それに対して、Webフォントであれば閲覧側の環境に左右されることなく、指定したフォントで表示ができるというわけです。
◆Webフォントの利点
Webフォントの仕組みはお分かりいただけましたでしょうか。
では次に、Webフォントを使うと何が良いのか、その利点をご紹介します。
1.メディアを越えてイメージを統一できる
例えばある雑誌に関して、紙媒体のものとWebサイトで異なるフォントを使ってしまうと、イメージにズレが生じる可能性があります。
Webフォントを使用すると、印刷物で使用したものと同じフォントを簡単にWebサイトでも使用することができ、メディアを越えてイメージを統一することができます。
2.文字を画像として作成した場合の問題点を解決できる
今までは使用したいフォントをWeb上で表示するには画像化するしかありませんでした。
しかし、Webフォントを使うことで画像化することなく使用したいフォントを表示できるようになります。
画像ではなくテキストベースでサイトを作成することにより、下記のメリットがあります！
・文字修正が簡単
画像化したフォントを修正するには画像そのものを修正する必要があり大変でしたが、Webフォントであれば文字を打ち換えるだけなので、Webサイトの作成・修正を効率化することができます。
・拡大してもクリアな表示
画像化したフォントはスマホなどで画面を拡大すると表示が荒くなり、文字が読みにくくなってしまうことがあります。Webフォントであれば拡大縮小してもクリアに表示できます。
・検索性も保持
画像化したフォントは文字としての情報がないため、そのままでは検索に引っかかりません。文字情報をalt属性としてタグに記述することはできますが、手間がかかります。Webフォントであれば当然文字情報を持っていますので、そのままで検索にヒットさせることができ、SEO対策になります。
※SEO対策とは：ウェブサイトを検索結果でより多く露出するために行う一連の取り組みを指します。
・自動翻訳や音声読み上げ機能なども活用可能
画像化したフォントは文字としての情報がないため、自動翻訳や音声読み上げ機能が使えません。読み上げ機能については文字情報をalt属性としてタグに記述することで対応可能ですが、前述の通り手間がかかります。Webフォントであればこれらの機能も問題なく活用できます。
文字表現にひと工夫。Webフォント使いこなしのコツ
Webフォントの基本を理解したうえで、さらに一歩踏み込んだ“使いこなしのコツ”を紹介した3本の記事をご案内します。
どれも、実際の制作現場ですぐに役立つTIPSばかりです。
人名、地名もこれでバッチリ Webフォントで異体字を使おう！
同じ文字でも微妙に形が違う「異体字」。人名や地名などで正しく表記したいときに役立つ、Webでの異体字対応のポイントを紹介しています。
レスポンシブデザインに適したフォントって？ コンデンス書体を使いこなそう！
スマートフォンやPCなど、画面幅によって文字の見え方が変わるときに便利なのが「コンデンス書体」。狭いスペースでも読みやすさを保つ工夫が詰まっています。
「和欧混植」「欧文合字（リガチャ）」「スワッシュ字形」で欧文書体を活用しよう！
日本語と英語を自然に組み合わせたいときや、欧文書体で少しおしゃれなアクセントを加えたいときにおすすめ。合字（リガチャ）やスワッシュなどの使い方をやさしく解説しています。
Webフォントの仕組みを知り、ちょっとした工夫を加えるだけで、文字の表現はぐっと広がります。
ぜひこれらの記事を参考に、デザインに“フォントの力”を取り入れてみてください。
モリサワのWebフォント
モリサワでもWebフォントを提供しています。
モリサワのWebフォントサービス「Morisawa Fonts Webフォント」では、高品質で多様なフォントを提供しており、さらに高度なタイポグラフィを実現するための機能も豊富に備えています。
ご利用規模に合わせたプランと、月契約／年間契約の契約方式をご用意しており、Webサイト制作・運営を幅広くサポートしています。
| Webフォント Lite | 웹 글꼴 | |||
| 契約期間 | 1ヶ月 | 1年 | 1ヶ月 | 1年 |
| 基本PV数 / 価格 | 25万PV 2,750円 | 300万PV 33,000円 | 100万PV～ 5,500円～ ※100万PV単位で400万PVまで | 1,200万PV～ 66,000円～ ※1,200万PV単位で4,800万PVまで |
| プロジェクト数 | 1 | 無制限 | ||
| 利用書体数 | 5書体まで | 1プロジェクトあたり10書体まで ※プロジェクト数無制限 | ||
| 登録ドメイン数 | 4ドメインまで | 1プロジェクトあたり10ドメインまで ※プロジェクト数無制限 | ||
▼モリサワのWebフォントに関する詳細は以下をご参照ください
イベントアーカイブのご案内
モリサワでは、デザインやブランディングをテーマにした無料のオンラインイベントを実施しています。
過去に開催された中から、Webサイトの制作やWebフォントを主題としたイベントをご紹介します。ぜひアーカイブ動画を御覧いただき、Webサイトの設計や制作にお役立てください！
そうだ、Webフォントでいこう。キャラクターを意識したフォント選びと文字組
Webの世界では少しハードルの高い、文字と文字を並べる（組版）表現方法。
本セミナーでは、NEWTOWN代表 犬飼氏が実際に制作したWebサイトを実例に、紙面のデザインで使われてきたテクニックやフォントの使い方をお伝えいただきました。
アーカイブ視聴申し込みは여기
Webデザイナー1年⽬に聞きたかった、明⽇から役⽴つ⽂字表現のエッセンス
Webデザインの最先端で活躍されている桑原 翔 氏をお招きし、「自分自身がWebデザイナー1年目の頃に知っておきたかった、フォントにまつわるあれこれ」をテーマに、Webでの文字表現を総ざらいします。
アーカイブ視聴申し込みは여기
ブランドを毀損しないためのウェブアクセシビリティ
– 攻守でバランスよく実現するブランド価値 –
「Good Design, Good Experience」を掲げてWeb制作やWebマーケティングを手がける株式会社デパート様をお招きし、ユーザーがサイトを通して得られる情報や体験、また、機会損失やイメージダウンなどでブランドを毀損しない努力・準備の重要性についてお話しいただきました。
アーカイブ視聴申し込みは여기
문의
주식회사 모리사와 이벤트 사무국
【E-mail】 public-biz@morisawa.co.jp
주식회사 모리사와가 운영하고 있는 사이트입니다.
모리사와에 대해서는여기