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

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種類」選んでから変更できた

監修者情報

グロースマーケティング研究部

福田湧基

コンサルテイング本部 事業開発課所属

福田湧基(ふくだ ゆうき)

クラウドサーカス株式会社で、デジタル集客およびDX支援コンサルを担当。
昨今のAI時代における企業の競争力強化を最大の目的とし、AIO対策サービスの開発から市場への展開までを主導しています。

監修者情報

グロースマーケティング研究部

白道 獅化

コンサルテイング本部 事業開発課 AI部門所属

白道 獅化(しらみち しか)

SEO・広告を中心としたデジタルマーケティングの領域で5年目を迎え、これまで1000社以上のサイトデータ分析に携わってきました。
現在はAIO対策のコンサルティング支援を提供する事業のサービス開発を担当しています。

成功へ導く
6つの要素