WEBトレ

FONT

WEBフォント

従来Webサイト上のフォントは、あらかじめ制作サイドが使用するフォントを指定し、 Webブラウザが各端末に搭載されているフォントを表示される方法がとられてきました。 しかし、特に家庭用PCの場合、標準搭載されているフォントは少なく、 また各端末のOSによって搭載されているフォントは異なるため、使用できるフォントの選択肢は限られています。 指定されたフォントが各端末にない場合、別のフォントが代用されてしまい意図したものと異なる表示となる、という課題がありました。

各OSの標準搭載フォント

windows初期 MSゴシック・MS明朝／MSPゴシック・MSP明朝／MS UI Gothic
windowsVista メイリオ
windows7 Meiryo UI
windows8.1 游ゴシック・游明朝
windows10 UDデジタル教科書体・Yu Gothic UI
MacOS X 10.4 ヒラギノ角ゴシック Pro・ヒラギノ明朝 Pro・iOS HiraKakuProN-W3・HiraMinProN-W3
MacOS X 10.5以降 ヒラギノ角ゴシック ProN・ヒラギノ明朝 ProN・ヒラギノ角ゴシック Pro・ヒラギノ明朝 Pro
Android 4.0 モトヤLシーダ3等幅・モトヤLマルベリ3等幅

WEBフォントのメリット・デメリット

WEBフォントのメリット

  • 1. SEOに強い(文字検索ができる)
  • 2. 更新・運用のときの文字修正が簡単
  • 3. どの端末で見ても文字の輪郭が綺麗
  • 4. どの端末で見ても同じデザインで表示できる
  • 5. 文字デザインの差別化ができる
  • 6. PC用、スマートフォン用に文字画像を作り分けしなくて良い

WEBフォントのデメリット

  • 1. 日本語のWebフォントがは種類が少ない
  • 2. 日本語のWebフォントは文字数が多いので、表示に時間がかかる
  • 3. フォントによっては著作権(ライセンス)の問題で使えない

フォントの特徴

  • #

    明朝体

    縦線に比べ、横線が細くうろこ（三角形の山）がついているフォントです。
    はねや払い、縦横の線に強弱があり、ゴシック体と比べると文字に動きがあります。
    「視認性が高い」ゴシック体に対して「可読性」が高いのが明朝体の特徴です。
  • #

    ゴシック体

    縦と横の線が均一にデザインされているのが特徴です。
    線の太さが均一で、遠くから見ても見やすく「視認性が高い」書体です。
    強調したい見出しや、遠くから見ても目立たせる必要がある屋外の看板や大判のポスターなどに向いています。
  • #

    デザインフォント

    他のフォントと比べ、動きのある文字としてデザインされています。
    明朝体やゴシック体のように堅苦しく見えないのが特徴です。
    遊びのあるデザインや、目立たせたい場合に向いています。
    他フォントに比べ、フォントが当てはまらない文字が多いので注意が必要です。

職業やイメージごとのフォントの選び方

#

飲食業

飲食店はおしゃれな雰囲気のレストラン、和やかな雰囲気の定食屋、厳かな雰囲気のBARや高級レストランなど 飲食店の持つイメージが多数あるのでその都度フォントをイメージに寄せていく必要があります。
画像を例にするならば、おしゃれなイタリアンというイメージが思い浮かぶので、 フォントは明朝で構成していくのがおすすめ、というわけです。 他にも、BARや高級レストラン、日本料理・日本酒などのおしゃれな和・洋のイメージを持つ場合は明朝が合うと考えられます。

逆に、居酒屋やランチがメインのお店といった明るい・楽しいをイメージを持つ場合は、ゴシック・丸ゴシックで しっかり主張していくのがおすすめといった形になります。

和やかな雰囲気の定食屋やカフェなどは、デザインフォントなどで独自の雰囲気を出していくのも良いと思います。

建築・土木業

建築・土木業は、仕事柄しっかりとしている、頼り甲斐のあるイメージが強いです。なので使用するフォントはゴシック体がおすすめです。
強調や視認性を上げたい場合に使用されるゴシック体は、線の太さが統一されているのでがっしりとしたイメージを持たせることができ、 建築・土木業の雰囲気としては信頼度の高い見え方を期待できます。

建築・土木業
このように字体を太く大きくすることでしっかりとした見せ方をすることもできますが、文章のような小さい文字でたくさんある場合は逆に見づらくなってしまうので、 使用する場合は見出しなどの大きめの文字のみにするか、思い切ってページ全体を明朝にしてしまうのもいいかもしれません。

#
#

建築・土木業

建築・土木業は、仕事柄しっかりとしている、頼り甲斐のあるイメージが強いです。なので使用するフォントはゴシック体がおすすめです。
強調や視認性を上げたい場合に使用されるゴシック体は、線の太さが統一されているのでがっしりとしたイメージを持たせることができ、 建築・土木業の雰囲気としては信頼度の高い見え方を期待できます。

建築・土木業
このように字体を太く大きくすることでしっかりとした見せ方をすることもできますが、文章のような小さい文字でたくさんある場合は逆に見づらくなってしまうので、 使用する場合は見出しなどの大きめの文字のみにするか、思い切ってページ全体を明朝にしてしまうのもいいかもしれません。

#

士業

士業は、真面目なイメージがそのまま信用に繋がっていくので、明朝を使うことでスマートで気品性を持たせるのがおすすめです。 また、士業は他の二種の業種と比べ、写真よりも文字を読んでいただくという形のデザインになっていくので、そういった点でも 可読性の高い明朝がおすすめだといえます。

こちらはゴシック体でも真面目なイメージが損なわれることはないので、明朝体・ゴシック体どちらを使用しても士業のイメージに沿った デザインになると考えられます。

フォント使用にあたっての注意点

WEBフォントは、場合によっては規約や著作権等の理由により使用できないことがあるので
OSごとの標準搭載フォントや、フォントを画像に置き換えて使用する必要があります。
その際、画面サイズによって使用フォントを変更しなければいけなくなったり、画像の画質が荒くなってしまう可能性があるので注意が必要です。
なお、画像に変換してしまった場合はワード検索に引っかからないのでSEO対策という面でも注意すべき点です。