2019年 webフォントのメリット、デメリット、SEO対策の効果についてまとめました

見映えよく、おしゃれでかっこいいwebサイトを作りたい!これはみんなに言われます。ただ、この後で、安く、とか、軽く、といった修飾語が付いてくると、話は変わってくるのがweb制作です。

画像でホームページのレイアウトを考えていくと、美しくできるのですが、軽くはないですし、当然ですが、ホームページの制作料金もあがりがちです。
*情報の更新が大変ですから。

そこで、CSS3が一般化してきたので、webフォントの登場です。

webフォント、耳にするけど、何?というweb担当者もいらっしゃると思いますので、復習もこめて、今回は、webフォントについて、まとめていきます!

Webフォントとは

Webフォントとは、web上からフォントのデータを読み込ませて、ホームページ上で、テキスト文字を、指定したフォントで表示する仕組みのことをさします。

簡単に言うと、普通のwebサイトでは、パソコンの中にあるフォントを使いますが、Webフォントを利用すれば、web上から、フォント情報をダウンロードして使います。

そのため、見る人の環境に依存せず、つまり、どんなパソコン、スマホでも、ホームページの提供者が指定したフォントで、ホームページを見せられます。

webフォントを使っているサイトをいくつかご紹介します。

アップル

https://www.apple.com/jp/

ピクシブ

https://www.pixiv.co.jp/

東京都現代美術館

https://www.mot-art-museum.jp/

webフォントを使っているサイトの事例

渋谷区のwebサイト

https://www.city.shibuya.tokyo.jp/

TypeSquareを活用しているようです。

ほかにも、

chatwork

https://go.chatwork.com/ja/

も、TypeSquareを使っているみたいです。

TypeSquareの導入事例ページに記載があります!
https://typesquare.com/ja/example/

 

Webフォントのメリット

Webフォントを使用するメリットは、以下の理由です。

  1. 見やすい、おしゃれなデザイン
  2. 画像ではないので、SEO対策に便利
  3. テキストなので、情報の修正、更新、追加が簡単
  4. SEO対策上のメリットで、レスポンシブデザインにしやすい
  5. スマートフォンでも見やすい
  6. テキストなので、自動翻訳に対応
  7. テキストなので、音声読み上げに対応しやすい

基本は、画像ではなくテキストになるから!というのが、Webフォントのメリットとなるポイントです!

ただ、音声読み上げなど、アレクサなどの普及次第で、今後、webフォントの命運は、ここが最大のメリットになっていく可能性もはらんでいます。

webフォントは遅い?

Webフォントは、ほかのサイトから、ブラウザがフォント情報をダウンロードをします。それゆえ、webフォントのみを使っていると、テキストの表示をするまでの間、時間がかかります。

もちろん、webサイトの作り方や、サーバが良かったり、webフォントのサーバが優秀であれば、すぐにWebフォントを表示させることも可能なのですが。

Webフォントのデメリットは遅いことでSEO対策に悪影響

webフォントを読み込むのに時間がかかるために、ユーザーの利便性を損なうこともあります。これによって、Googleから、利便性の低いサイトと思われてしまい、SEO対策上の悪影響を与えることもあります。

Google検索エンジンでの検索結果で、まったく上位表示されなくなる、、なんてことにもなりかねません。

いつまでたっても画面が真っ白になってしまうかもしれないですからね。

webフォントをCSSで読み込みを速くする方法

そこで、webフォントの読み込みを速くするために、CSSで回避する方法。ウェブフォント読み込み中でも、テキストの表示がされるように指定していきます。

font-faceに対してfont-display: swapを指定するのです

@font-face {
font-family: “font name”;
font-weight: 400;
font-style: normal;
src: url(“遅いURL”) format(“woff”);
font-display: swap;
}

p {
font-family: “font name”, sans-serif;
}

webフォントが読み込まれるまでは一時的にsans-serifを読み込むので、それでテキストが表示されるようになります。

一時的なので、デザイン的にも崩れにくくなります!

Webフォントを選ぶ方法は?

自社のホームページでいいwebフォントを選ぶにはどうすればいいか?それは、webフォントを検索してみていくのが1番ですよね。

そこで、Webフォントの一覧、検索サイトを一挙ご紹介!!

Google fonts 
検索も簡単!人気順や新着順で並び替えもできます
https://fonts.google.com/

サルワカ
Font-familyメーカー:標準フォント一覧からサクッと指定
https://saruwakakun.com/font-family

TypeSquare
フォント検索
https://typesquare.com/ja/fontlist/fontlist

総称ファミリ名分類のフォント名一覧
https://w3g.jp/sample/css/font-family

デジタルステージ フォント一覧
https://www.digitalstage.jp/webfont/lineup/

webフォントは無料でも、利用規約はちゃんと読みましょう。

webフォントは有料のもの、無料のものがあります。無料でも、利用規約もちゃんとあります。必ず、利用規約を読んで、理解してください。商用利用不可なのに、会社のホームページで使ってしまって、結果的に、モメていた話なども聞いたことがあります。裁判などになっても、困りますからね。

まとめ:webフォントは便利で将来性あり

webフォントは、テキストになるので、SEO対策にも効果的。webサイトの作り方次第で、webfontを使っていても、ホームページは遅くならないので、webフォントが遅いとばかり思わないでください

音声認識にも対応しやすいフォーマットなので、今後webフォントの需要は高まる可能性も高いです。レスポンシブデザインにも使いやすいwebfontは、スマホサイトを作るうえでも便利ですね!

webフォントを探すときは、検索や一覧から見ていくのがよいです!

Googleフォントなどは、検索機能も便利です。

webフォントは無料のものもあるのですが、利用規約はしっかりと読んで、トラブル回避をしましょう~

 

web担当者必見!
コンテンツマーケティングのコンテンツ種類まとめ

web担当者必見!コンテンツマーケティングのコンテンツ種類を16個にまとめてみた