こんにちは！ASUE通信編集部です。

Webサイトだけでなく、広告文やバナーを見せるためにも必要不可欠な「文字」。インターネットを見ていても、街を歩いていても、字形や太さ・大きさなどが違う、様々な種類の文字を見ることがあると思います。

このような、同一の書体デザインで同じ大きさの文字ひと揃いを「フォント」と呼び、フォント選びはデザインにも大きな影響を与えます。

ということで、本日はフォントの種類と選び方について簡単にご紹介していきたいと思います！が、種類も膨大なので、今回は主にブログなどのテキストによく使われるフォントについてご紹介します。

フォントの基本

ゴシック体？セリフ体？ 書体の種類と特徴

書体は、ひらがなや漢字まで含まれる日本語書体と英数字と記号の欧文書体があり、日本語書体はゴシック体・明朝体・筆書体・デザイン書体、欧文書体はサンセリフ体・セリフ体・スクリプト体・デザイン書体のそれぞれ4種類に分けられます。

明朝体とセリフ体は文字の線などの端に装飾（明朝体ではウロコ、セリフ体ではセリフという）がある書体、ゴシック体とサンセリフ体は文字の線の太さがほぼ一定な書体で、これらはシンプルで読みやすいため、幅広いシーンで使われ、主にビジネスシーンで使われる書体です。

その他の筆書体・スクリプト体・デザイン書体（日本語・欧文）は、クセがあったり装飾性が強かったり……と、可読性が重要な場面では向かない書体になります。

読みやすい文章にするにはどんなフォント？

日本語書体の場合、読み物の文章（Webサイトだったらブログ記事の本文など）には可読性の高い明朝体・ゴシック体が主に使用されます。

ブログやニュース記事などの本文のような長文の場合、太めの字体などを使用すると文章全体の黒の割合が高くなり、可読性が下がって目に負担となります。そのため、明朝体やゴシック体ならなんでもいい！というわけではなく、細めの書体を用いるのが良いと思います。

続いて、Webサイトでよく使われるフォントをご紹介します！

よく使われる日本語フォント

PCやスマートフォンのデバイスによって搭載されているフォントは様々で、さらにユーザーが自分でインストールしたフォントなどもあるため、人によって自身のデバイスで閲覧できるフォント環境は大きく違います。例えば、MacやiOSではヒラギノ角ゴシック・ヒラギノ明朝が搭載されていますがMSゴシック・MS PゴシックやMS 明朝・MS P明朝は搭載されておらず、Windowsではその逆でMSゴシック・MS PゴシックやMS 明朝・MS P明朝が搭載されヒラギノ角ゴシック・ヒラギノ明朝が搭載されていません。

そのため、Webサイトでのフォント指定はそれを考慮した指定をすることが好ましく、優先順位の高い順に複数の日本語フォントを指定しておくことが普通です。その場合は、閲覧環境によって表示されるフォントが変わる場合があるため、各デバイスでのチェックはしっかりおこないましょう！
→「どんな環境でWebサイトを見られている？ ブラウザやデバイス・ユーザーによって変わるかもしれないサイト表示」https://asue.jp/blog/?p=18262

どんなWebサイトでも同じフォントで同じように表示したい……！という場合は、Webフォントを使うという手もあります。よく使われるフォントでもあげた「Noto Sans」「Noto Sans Serif」などもGoogle FontsなどからWebフォントとして使えるフォントの一つです。

今回は、このNoto Sansについて少し詳しくご紹介します！

Webフォントは便利ではありますが、ページの読み込みが遅くなるなどのデメリットもあるので、導入の際はよくよく検討する必要もありますが……

Noto Sans（Source Han Sans / 源ノ角ゴシック）

ASUEのWebサイトでも利用されている「Noto Sans（Source Han Sans / 源ノ角ゴシック）」をご紹介します。このフォントはGoogleとAdobeが共同開発したフォントで、ライセンスさえ守れば誰でも無料で自由に使用が可能なフォントになります。Google Fonts上では「Noto Sans」、Adobe Fonts上では「Source Han Sans / 源ノ角ゴシック」と呼ばれているためややこしいですが同じフォントを指しています。

ダウンロードはオリジナルソースの他、Google FontsやAdobe Fontsから可能で、Webフォントとして使えるコードなども取得が可能です。

フォント名の由来は豆腐！？「Noto」が「豆腐フォント」と呼ばれる理由

フォントというのは、打ち込んだ文字のデータがフォントデータに含まれていることで文字が正しく表示されます。ですが、例えば漢字には多くの異体字や中国語の繁体字・簡体字などたくさんのバリエーションがあることがあり、字形の種類によっては正しく認識されずにうまく表示できないことが多くありました。

そんなフォントデータに含まれない文字が打ち込まれたときに代わりに画面に出るのが「□」です。最近では、Webサイト上ではあまり見ることもない（足りない文字は別のフォントに置き換わる設定になってたりするので……）ですが、illustratorなどのソフトでいろんなフォントを使用していると、フォントが対応していない文字がこうなったりします。

この「□」がネットスラングで豆腐と呼ばれており、この豆腐を取り除くために生まれたフォントだから「ノー・豆腐」略して「Noto」というフォント名になったそうです。

無料なのに種類が豊富で使いやすい超有能フォント！

このフォントのすごいところは、ウエイト（太さ）の種類が多いことと異体字にもしっかり対応していることから、見出し・本文かかわらずどんな場所に配置するテキストでも、どんな文字を使ったテキストでも対応できます。また、先述の通り、ライセンスを守れば誰でも使用可能でWebフォントとして使用することも可能なので様々なWebサイトに広く使用されているフォントです。

可読性にも優れているので、デザイン以外にもプレゼンやレポート資料に使えるフォントになっています！

まとめ

配色などと同様、フォントも見た人の印象を左右するほか、ページの情報を正しくユーザーに伝えるためにも非常に重要な要素です。

今回は超基本的なお話+ASUEのサイトで使用している豆腐フォント「Noto Sans」をご紹介しましたが、他にもフォントはたくさんあるのでその時々で最適なものを選択しましょう！

ASUEではWeb制作やWeb広告などWebマーケティングに関する情報をメールマガジンで発信しております！

よかったらご登録くださいね！