ローディング

Webフォントって何?Webフォントを使うメリットは?

榊原由己 榊原

今回は、Webフォントについて、ご説明していきます。
「なにそれ?」という方も「聞いたことはあるけど、使ったほうが良いの?」という方も、ぜひご覧ください。

Webフォントって何?

Wikipediaによると、下記のように書かれています。

Webサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。

 

小難しい内容ですが、ホームページでデザイン性のある文字を、テキストとして利用できる技術のことです。
インターネット上のフォントデータが保存されている場所からデータを読み込んでホームページ上に表示させているので、どのPC、スマートフォンからホームページを見た場合も、同じフォントを表示することができます。

Webフォントを使用しているホームページの例

魚道クライミングジム様
文字にもポップな色合いを使い、またゴシック調のフォントを使うことで、楽しさを表しています。

日本語:フォークB
アルファベット:Aref Ruqaa

魚道クライミングジム様サイトイメージ

 

河合塗装様
本文は親しみやすく読みやすい丸ゴシックを採用し、見出しは2種類の書体を組み合わせて使うことで、独自の雰囲気を作りました。繊細なフォントで、スタッフの方々の柔らかい雰囲気と施工の丁寧さを表現しています。

見出し:漢字→解ミン 宙 M/かな→小町 -MM
本文:秀英丸ゴシックB

河合塗装様サイトイメージ

写真や色合いはもちろんですが、フォントもホームページの雰囲気に影響してくるのです。

これまでは、どうしていたのか?

では、デザイン性のある文字を表示したい場合、Webフォントが普及するまではどうしていたのか?

一般的なのは、テキストの画像を作る方法です。画像で作っていれば、見る端末によってフォントが変わることはありません。ただ、ホームページの文章全てを画像で作ると、更新や文言修正に手間がかかるため、ファーストビュー(トップページの一番初めに表示される画像)や、見出しの文字など、目立つ部分だけを画像で表示させるホームページが多数ありました。
デザイン性を重視したい場合は、文章のほとんどを画像で作っているホームページもありました。

Webフォントもあった

実はこれまでもフォントの技術はありました。しかし、これまでのホームページでは、ホームページを見ているPCや携帯に指定したフォントデータがなければ、デフォルトのフォントが表示されてしまう仕組みでした。フォントデータがたくさん入っているPCを持っているのは、デザイナーなど専門職の人くらいですよね。そのため、フォントを指定してもあまり意味がなかったのです。

それが、Webフォントの技術で、どの端末から見ても、デザイン性のあるフォントで、ホームページを表示することができるようになったのです。

Webフォントを使ったときのメリット

ブランディングに繋がる

Wordでも使われている「MSゴシック」「MS明朝」などは、よく知られていますが、現在、日本語だけでも1,000種類以上もの「フォント」があるといわれています。一言で明朝体といっても、リュウミン、ヒラギノ明朝、A1明朝(これは、映画「君の名は。」のタイトルで使われ、話題になりました。)など、ニュアンスや太さの違うさまざまな明朝体があるのです。

その中から、感じてもらいたい印象に合わせたフォントを使用することで、無意識にブランドをイメージさせることができます。こちらは極端な例ですが、もし、料亭でポップなフォントが使われていると、違和感がありますよね。
例)
料亭であれば、高級感のある細い筆文字
ファミリーレストランであれば、ポップなゴシックや飾り文字 など

余談ですが、デザイナー間では、好きなフォント談義がしばしば行われます。

デザイン性とSEO対策を両立できる

検索エンジン(Yahoo!やGoogleなどの検索)は、クローラーと呼ばれるロボットによって、どんな内容のホームページなのか?を認識しています。例えば、クローラーが「ホームページ制作について書かれている」と認識すれば、「ホームページ制作」と検索されたとき、検索結果の上位に表示されるようになります。

しかしクローラーが読み取れるのは、テキストのみ。画像に書かれた文字は認識されないのです。そのため、画像化された文章は評価されず、SEO的に不利になってしまいます。

Webフォントの場合は、テキストのままなので、人間にとってもクローラーにとっても読みやすいホームページになり、画像化されたページに比べてSEO対策で有利になります。

情報の編集がしやすい

画像化された文字を修正する場合、「文字の画像を作り直す」「画像をアップロードしなおす」「alt属性(画像を説明するソースコード)を修正する」など、いくつもの作業が必要でした。そもそも、IllustratorやPhotoshopなどの画像編集ソフトを操作できる人でなければ編集できません。

Webフォントならテキストを修正するだけなので、よりスピーディーに対応ができます。長く使うホームページにとって、更新のしやすさは重要です。

スマートフォンからも見やすい

総務省・平成29年版情報通信白書グラフ画像化された文章は、スマートフォンの閲覧最適化が対応されないため、パソコンでは読みやすくても、スマートフォンでは小さく、読みづらくなってしまうことがあります。読みづらいからといって、そのたびに画面を拡大するのも面倒ですよね。それでは、ホームページの離脱に繋がりかねません。

スマートフォン対応をして、Webフォントを利用すれば、読みやすい文字の大きさで表示されます。

2016年の時点で、インターネットに接続する端末はパソコンが59%、スマートフォンが58%*だったそうです。若い世代から、インターネットの中心はスマートフォンへシフトしつつあるので、スマートフォンでのホームページの見やすさは、集客力に大きな影響を与えます。

*総務省・平成29年版情報通信白書

視覚障害者や外国人にもやさしい

外国語への自動翻訳ソフトや視覚障害者の方のためのホームページ読み上げソフトは、先ほどのクローラーと同様に、画像化されたテキストを読み取れません。

Webフォントはテキストなので自動翻訳や音声読み上げソフトにも対応しています。また、文字の形がわかりやすく、文章が読みやすいように作られたユニバーサルフォントもあります。ホームページは不特定多数の人が見るものですので、自治体のホームページはもちろん民間の団体の場合も、このような配慮をすることが求められています。

 

いかがでしたしょうか?
「Webフォントを使ったホームページにしたい」「ホームページのデザインを今風にしたい」という方も、ぜひリーピーにご相談ください。

榊原由己

この記事を書いた人

榊原

WEBディレクター/2015年入社/愛知県出身/学生時代からアルバイトとしてリーピーに関わっていたため、リーピー歴は3番目に長い/読書をしていると周りから話しかけられても気づかないほど本が好きな幼少期を過ごす/そのとき培った国語力からライティングを担当/特技は和太鼓/2018年は自炊を頑張りたい。

関連記事

一覧に戻る

新規お問い合わせ状況

2018.08.16
静岡県の方より、お問合わせを頂きました。
2018.08.16
東京都千代田区の企業様より、お問合わせを頂きました。
2018.08.16
岐阜県瑞穂市の方より、お問合わせを頂きました。
2018.08.16
愛知県四日市市の方より、お問合わせを頂きました。
2018.08.16
愛知県名古屋市の方より、お問合わせを頂きました。
2018.08.16
東京都渋谷区の企業様より、お問合わせを頂きました。
2018.08.16
東京都新宿区の企業様より、お問合わせを頂きました。
2018.08.09
東京都港区の企業様より、お問合わせを頂きました。
2018.08.09
福岡県福岡市の企業様より、お問合わせを頂きました。
2018.08.08
岐阜県羽島市の企業様より、お問合わせを頂きました。
2018.08.08
岐阜県大垣市の方より、お問合わせを頂きました。
2018.08.08
岐阜県中津川市の方より、お問合わせを頂きました。
2018.08.07
京都市西京区の企業様より、お問合わせを頂きました。
2018.08.07
岐阜県岐阜市の方より、お問合わせを頂きました。
2018.08.06
岐阜県岐阜市の企業様より、お問合わせを頂きました。
2018.08.03
東京都江東区の企業様より、お問合わせを頂きました。
2018.08.03
岐阜県揖斐郡の企業様より、お問合わせを頂きました。
2018.07.30
岐阜県岐阜市の企業様より、お問合わせを頂きました。
2018.07.30
愛知県一宮市の企業様より、お問合わせを頂きました。
2018.07.30
岐阜県岐阜市の方より、お問合わせを頂きました。
2018.07.26
東京都渋谷区の企業様より、お問合わせを頂きました。
2018.07.25
北海道札幌市の企業様より、お問合わせを頂きました。
2018.07.24
岐阜県多治見市の企業様より、お問合わせを頂きました。
2018.07.24
福井県福井市の企業様より、お問合わせを頂きました。
2018.07.23
愛知県春日井市の方より、お問合わせを頂きました。
2018.07.23
東京都墨田区の方より、お問合わせを頂きました。
2018.07.23
岐阜県岐阜市の方より、お問合わせを頂きました。
2018.07.20
岐阜県各務原市の企業様より、お問合わせを頂きました。
2018.07.19
東京都中央区の企業様より、お問合わせを頂きました。
2018.07.18
大阪府大阪市の企業様より、お問合わせを頂きました。

お問い合わせ
全国対応可