顧客が抱える「課題」を独自メソッドで「成功」へ導くマガジン。

KNOWHOWノウハウ

  1. HOME
  2. ノウハウ
  3. UI/UX
  4. テキストは、デバイスに関係なく閲覧できる「Webフォント」を1〜2種類までに絞って構成できている
UI/UX

更新日

テキストは、デバイスに関係なく閲覧できる「Webフォント」を1〜2種類までに絞って構成できている

「Webフォント」は、デバイス(iPhone/Android、タブレット、PC/Macなど)・ブラウザ(Chrome、Safari、FireFox、Edgeなど)に何を使っているかの関係なく、すべての環境で同じ「書体」のテキストを表示できるため、Webサイトではよく使用されます。

せっかく制作した自社サイトが、デバイス・ブラウザの違いで「文字化け」したりしてしまっては、閲覧困難で困るばかりか企業の信用性を損なってしまいます。

サイトの文字フォントにはどんな「書体」が使われているか一度、確認してみましょう。

自社サイトの、「文字フォント」に使われている「書体」をチェックする

自社サイトで使用するテキストに「Webフォント」にすることには、利用者の視認性だけでなく、検索エンジンの評価の面でも良い影響を与えます。

「Webフォント」にはいくつかの種類がありますが、これらのWebフォントを自社サイトに使用することで、Googleはそのサイトがユーザーフレンドリーを考慮しているサイトであると認識します。また、代表的なWebフォントである「Google Fonts」であれば尚更です。Google社が提供している書体ということもあって世界中でも問題なく閲覧することができる上に、クローラーも認識しやすいフォントであるため、SEO対策にもなります。

自社サイトの文字書体にどのようなフォントが採用されているかは、Chromeストアで入手できる拡張機能ツール「WhatFont」などを使えばすぐチェックできます。

サイトの文字書体を、Webフォントを「1〜2種類」選んでから変更する

Webフォントには色々な種類があります。「Google fonts」や「Adobe Fonts」などのグローバル企業が用意している欧文/和文書体もあれば、日本のモリサワフォント(TypeSquare)など和文書体が豊富なものなどがあります。

Google Fonts(欧文フォント) Adobe Fonts(欧文/和文フォント) Fonts.com(欧文/和文フォント) TypeSquare(和文フォント)※モリサワフォント FONTPLUS(欧文/和文フォント)

この中でも、Google Fontsは「無料」なので使い勝手が良いかもしれません。サイトからダウンロードすればすぐに使用することができます。以下のフォントが一般的によく使われます。

ゴシック体(Sans Serif)

Noto Sans JP、BIZ UDGothic、さわらびゴシック

明朝体(Serif)

Noto Serif JP、さわらび明朝

実際に変更する際は、社内のHTMLコーディングをしているデザイナー/エンジニアに相談した方が良いですが、基本的にはCSSファイルの「font-family」にWebフォント名を入れればすぐ変更可能です。h1タグの文字(XXXXXXX)を変更する場合は、以下の通りです。

HTML例

もちろんGoogle Fontsではなくてはいけない訳ではありませんが、少なくとも自社サイトの文字テキストには「Webフォント」を使用するのが望ましいです。また、Webフォントであれば種類はいくつでも使って良いということではなく、「1〜2種類」に絞って使いましょう。

バラバラと「書体」を使い分けるよりも厳選して絞った方が、自社サイト全体に「統一性」を持たせることができ、結果として視認性の高い「ユーザーフレンドリー」なサイトとなります。

まとめ

1つでも当てはまったらチェックしましょう。

  • 自社サイトの、「文字フォント」に使われている「書体」をチェックできた
  • サイトの文字書体を、Webフォントを「1〜2種類」選んでから変更できた
グロースマーケティンググループ 編集部

グロースマーケティンググループ
編集部

「成果を、共に」
顧客と共に考え、実行を繰り返しながら「成果」を追求するグロースマーケティンググループ(GMG)の、デジタルマーケティング情報メディア。BtoB企業の営業・マーケティング担当者がすぐに使える「お役立ち情報」を発信していきます。

関連記事

成功へ導く
6つの要素

成功メソッド:タグ編