BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. Webデザイナーからすると、Webフォントってめちゃ魅力的!という話
by taniguchi taniguchi

Webデザイナーからすると、Webフォントってめちゃ魅力的!という話

Webデザイナーからすると、Webフォントってめちゃ魅力的!という話

こんにちは、Webデザイナーの谷口です。

私は普段、デザイン業務を担当しているのですが、フォントまわりって結構悩みます。

どんなフォントを使用するかで、サイトの印象が大きくかわる場合があるので、フォント選びはかなり重要です。

しかしWebデザインでは、使用できるフォントに制限があるのです…

この制限がデザイナーとしてはすごくもどかしい!!

今回はWebデザインにおいて、フォントにどんな制限があるのか、その制限をなくすWebフォントについてお話ししようかと思います。

画像データとテキストデータ

まず、Webで文字を表示せさるには、画像データとテキストデータの2種類があります。

画像データ

画像データは、下記のような、文字通りjpgやpngなどの画像のデータです。画像データです

 

なので、フォントは何を使用してもOK。

特殊なフォントや少量なら画像データでも良いかと思いますが、大量のページで使用するなど、運用や、SEOのことを考えると、文字を表示するにはテキストデータの方が良いです。

テキストデータ

テキストデータとは、下記のようなテキスト情報としてコピペできるデータのことです。

「テキストデータです。」

修正や展開がしやすく、読み込みも早く、レスポンシブにしやすいですし、SEOのことを考えると極力テキストデータでいきたいところ…なのですが、フォントの選択肢が限られるんです…

それはなぜかというと、デバイス(端末)にはデバイスフォントというものがあり、さらにそれは、デバイスによって違うからなのです。

デバイスフォントとは?

デバイスフォントとは、PCやスマホの、Windows、Mac、Android、iPhoneに最初からインストールされているフォントのことです。

このデバイスフォントが、Windows、Mac、Android、iPhoneでそれぞれ違います。

例えば、Macには「ヒラギノ丸ゴ Pro」というフォントが最初から入っていますが、Windowsには入っていないため、Macと同じ見た目にはなりません。

Windowsでは、丸い印象の「メイリオ」にするなど、近い印象のものにするしかないのです。

WindowsとMacで表示されるフォントのイメージ画像

全てのデバイスで同じ見た目にはならない…デザイナーとしては、なんか悲しい。

だからWebフォントなのです!!

Webフォントとは?

Webフォントとは、サーバーなどに置かれたフォントのデータをユーザーが読み込んでサイトに表示させることができるものです。

Webフォントの説明

ユーザーが使用しているデバイスに、指定のフォントがインストールされていなくても表示させることができるのが大きな特徴です。

Webフォントのメリット

  • 同じフォントを表示させることができるので、サイトの印象が統一化される
  • テキストデータなので、SEOに有利
  • 修正や展開がしやすい
  • レスポンシブにしやすい

と、メリットばかりのWebフォントですが、唯一の弱点が!!

それは、日本語のフォントは「読み込みに時間がかかる」ということです。

それもそのはず。日本語は漢字・かな・カタカナとあるのでその分、欧文フォントよりもデータ量が大きくなります。

とはいえ、高速化も進んでいるみたいなので、今後に期待です!!

色んなWebフォントサービス

無料・有料と、色んなWebフォントのサービスがあるので、ピックアップしてみました。

無料

Google Fonts

Googleが提供しているWebフォント

有料

TypeSquare

モリサワが提供しているWebフォント

Adobe Fonts

Adobeが提供しているWebフォント

FONT PLUS

fonts.com

まとめ

全てのデバイスで統一した見た目にするには、Webフォントがおススメなのですが、如何せん日本語フォントは欧文フォントに比べると遅い。

複数使用するとなるとかなり遅くなるので、1種類にするとか、欧文フォントでしたらそこまで遅くはならないと思うので、取り入れやすいのではないでしょうか。

他のサイトと差別化を図る意味でも◎!

もちろん何を優先するかで違ってくるかと思いますが、選択肢としては大いにあり!!あとは高速化に期待です。

では、また~

 

ページの先頭に戻る