コーディングで使用するフォントとは？

今回はコーディングで使用するフォントについて解説していきます。
フォントはサイトの印象を左右する重要な物なので、しっかり押さえておきましょう。

そもそもフォントとは？

最初にフォントについて少し説明します。 フォントとは、パソコンなどで使用する文字を表示や印刷できるようにデータ化した物です。

元々は同一の書体デザイン、サイズがセットにされた金属活字を指す欧文活字の用語でしたが、現在ではパソコンなどのコンピューターに表示させる書体データファイル指すことが多くなっているようです。

フォントの種類

Webサイトで使用するフォントにはいくつか種類がありますが、大きく分けて4種類あります。

OS標準フォント

これはパソコンやスマホに最初から入っているフォントで、Webフォントと違ってデータの読み込みがない為、表示速度が速いのが特徴です。

注意点としては最初から入っているフォントというのが端末によって違う事です。

後で解説しますが、例えばヒラギノというフォントを設定した場合、ヒラギノはWindowsには入っていないので表示されません。

なのでOS標準フォントを使用する際は表示される端末を確認しましょう。

フリーフォント（無料）

OS標準フォントは比較的無難で癖のないフォントですが、フリーフォントは個性的なフォントが多くあります。

フリーフォントはサイトからダウンロードしてインストールすれば使えます。

コーディングで使用する場合はダウンロードしたファイルをCSSで読み込みます。

フリーフォントは無料で使用することが出来ますが、商用利用不可の場合もあるので注意しましょう。

市販フォント（有料）

これもフリーフォント同様に個性的なフォントが沢山ありますが、こちらは有料のフォントを指します。 有料フォントと言っても必ずしも商用利用できるとは限らず、再配布禁止などもあるので利用規約は必ず確認しましょう。

料金は1つの書体につき10000円〜15000円くらいが主流となりますが、中には30000円以上のフォントもあります。

使い方はフリーフォントと同じです。

コーディング案件では有料のフォントを使用する事は滅多にないと思いますが、もしデザインカンプを見て有料フォントが使用されていたら必ず商用利用なども含め確認しましょう。

Webフォント

これはファイルをダウンロードするのではなく、サーバー上に置かれたフォントデータを読み込むという使い方をします。

Webフォントにも有料無料と色々ありますが、有名で実案件でもよく使うのはGoogle FontsやAdobe Fontsになります。

後で詳しく解説しますが、Google FontsとAdobe Fontsは両方無料で使えますが、Adobe Fontsを使用するにはクライアントがAdobeのアカウントを持っている事が条件となるのでご注意下さい。

Webサイトへの使用推奨フォント

Webサイトで使用するフォントですが、何を優先するかで変わってきます。

それぞれの特徴を見てみましょう。

OS標準フォント（ページ速度、SEO重視）

デザインにこだわりがない場合は使用するフォントはOS標準フォントだけとなります。

例えば游ゴシック体を使いたい場合はCSSで以下のように書きます。

※色んな書き方をしている理由は、WindowsやMac、safariなど様々な端末やブラウザで見れるようにする為です。

また最後のsans-serif（ゴシック体）はブラウザにフォント指定を委ねる総称フォントと呼ばれるものです。

なのでブラウザのデフォルトフォントが変わればフォントも変わりますが、デフォルトのフォントというのはそんなに頻繁に変わるものではありません。

この総称フォントは指定したフォントが全て表示されなかった時の保険として指定しておきましょう。

ちなみに総称フォントは他にも以下のようなものがあります。

よく使うのはsans-serifかserifになります。

OS標準フォント一覧

Windows10、macOS、iOSで使用頻度の高いOS標準フォントは以下になり、よく見ると同じ游ゴシックでもWindowsでは「游ゴシック」macOSでは「游ゴシック体」と表記が微妙に違います。

これが先ほど游ゴシックで色々な書き方をした理由になります。

【ゴシック体】
Windows：ＭＳ ゴシック / ＭＳ Ｐゴシック / メイリオ / Meiryo UI / 游ゴシック / Yu Gothic UI / ヒラギノ角ゴシック / ヒラギノ角ゴ ProN / ヒラギノ角ゴ Pro / ヒラギノ丸ゴ ProN W4 / ヒラギノ丸ゴ Pro W4

macOS：メイリオ / Meiryo UI / 游ゴシック体 / ヒラギノ角ゴシック / ヒラギノ角ゴ ProN / ヒラギノ角ゴ Pro / ヒラギノ丸ゴ ProN W4 / ヒラギノ丸ゴ Pro W4

iOS：ヒラギノ角ゴシック / ヒラギノ角ゴ ProN / ヒラギノ角ゴ Pro / ヒラギノ丸ゴ ProN W4 / ヒラギノ丸ゴ Pro W4

【明朝体】
Windows：ＭＳ 明朝 / ＭＳ Ｐ明朝 / 游明朝 macOS：游明朝体 / ヒラギノ明朝 ProN / ヒラギノ明朝 Pro iOS：ヒラギノ明朝 ProN / ヒラギノ明朝 Pro

【英字フォント】
Windows：Arial / Arial Black / Segoe UI / Verdana / Times New Roman

macOS：Arial / Arial Black / Helvetica / Helvetica Neue / Verdana / Times New Roman

iOS：Arial / Helvetica / Helvetica Neue / Verdana / Times New Roman

Webフォント・フリーフォント・市販フォント（デザイン性重視）

Webフォントやダウンロードして使用するフォントは個性的なフォントが多く、和風のサイトであれば和風のフォントを使うといった事が可能です。

さらにOS標準フォントのように端末の環境に左右される事はないので、どの端末で見ても同じフォントが表示されるというメリットがあります。

しかしWebフォントはOS標準フォントと比較して容量が大きく、ページ速度が遅くなるというデメリットがあります。

特に日本語のWebフォント（和文フォント）は非常に文字数が多く容量が大きいので、もしOS標準フォントだけでは物足りないという場合はOS標準フォント＋英字のみのWebフォント（欧文フォント）という組み合わせも出来ます（欧文フォントは和文フォントと比べて文字数が少ないので容量も小さい）

これは日本語はOS標準フォントで、英字部分だけWebフォントにするという形で、コーディング案件でも良くある組み合わせです。

例えば英字だけRobotoというWebフォント（Google Fonts）を使い、日本語は游ゴシック体を使いたい場合はCSSで以下のように書きます。

指定したフォントは左から順番に適用されるので、英字の場合はRobotoが適用され、日本語は欧文フォントであるRobotoは適用されずにその次にある游明朝が適用されます。

デザインによっては容量の大きい和文フォントを数種類使用している場合もありますが、その分サイトが重くなるだけでなく、フォントの種類が多いほどサイトの統一感も失われていくのでデザインをする人は気を付けましょう。

コーディング時の注意

フォントに関してコーディング時に注意したい点について解説します。

フォントが有料の場合

デザインカンプを貰ったらコーディングを始めますが、まず最初にフォントの確認をしましょう。

フォントには先ほど解説した通り無料と有料があり、有料のものが使用されている場合は「このフォントは有料ですが構いませんか？」と確認しましょう。

するとほぼ無料のフォントに変更してくると思います。

ここでなぜ最初にフォントの確認をする必要があるのかと言うと、フォントがデザインカンプと違っているとピクセルパーフェクトでコーディングするのが困難だからです。

なぜなら同じ文字でもフォントの種類が違えばサイズが異なるからです。

もしコーディングが全て終わった後でフォントが変わると、余白などが変わる可能性があるのでそれを避ける為にも極力コーディング開始前に確認するようにしましょう。

またAdobe Fontsは無料で使えますが、Adobeのアカウントを持っていないと使えません。

コーダーであればAdobeのアカウントはあると思うので、Adobe Fontsを使うのに必要な埋め込みコードを発行する事は可能ですが、クライアントが使用する場合はクライアントのアカウントで発行しなければいけません。

利用条件では、2019 年 12 月 31 日以降の再販は許可されていません。

それ以降にフォントライセンスや web フォントホスティングが中断されないようにするには、クライアントの web サイトは、独自の Creative Cloud サブスクリプションから Adobe Fonts を読み込む必要があります。
引用元：Adobe公式サイト

仮にコーダーのアカウントで発行した場合、もしコーダーがAdobeを解約したら使用していたAdobe Fontsは表示されなくなります。

なのでコーディングを始める前にAdobe Fontsを使っている場合は「Adobe Fontsを使うには埋め込みコードを発行して頂く必要があります」と伝えましょう。

アカウントを持っていれば埋め込みコードを発行してくれる場合もありますが、アカウントが不要なGoogle Fontsに変更する場合も多いです。

端末に依存するフォント（OS標準フォント）

端末に入っているフォントを使用する場合注意しなければならないのは、端末によっては入っていないフォントがあるという事です。

例えば、
・ヒラギノ → Windowsには入っていない（Windowsで使用する場合は購入する必要がある）
・明朝体 → Androidには入っていない

これらは知らないデザイナーさんもいるかも知れないので、「ヒラギノはWindowsでは表示されませんがどうしますか？」など確認しましょう。

特にWindowsを持っていない方はWindowsにはヒラギノが入っていない事を知らない人もいると思います。

またAndroidでは明朝体はゴシック体になり、サイトの雰囲気が大きく変わってしまうので必ず確認しましょう。

ちなみにWebフォントの場合はどの端末でも同じように見れるので、Androidで明朝体を表示させたい場合はWebフォントを使う事が多いです。

OS標準フォント以外で日本語フォントを使用する場合

和文フォントは26種類のアルファベットしかない欧文フォントと違い、漢字、ひらがな、カタカナと膨大な種類があります。

なので容量も大きくページ速度が遅くなり、検索順位の低下などSEOにも影響してきます。

しかし実際に使用するフォントは限られているので、使用頻度の高い文字だけ抜き出して使用すれば容量を小さくする事が出来ます。

この作業をサブセット化と言います。

サブセット化の方法については以下の記事を参照下さい。

日本語Webフォントを軽量化してWebサイトに設置する方法

フォントの太さ

フォントには太さを指定することが出来、指定方法はCSSでfont-weightを使います。

デザインカンプにはフォントの太さも指定されているので、正確に指定してデザイン通りにしましょう。

主な太さ指定は以下になります。

数値指定は100から900まで100単位でありますが、実際に9種類の太さが用意されているフォントはあまりありません。

なので数値を変えても太さが変わらない事もあります。

使用頻度の高い順としては、400,700 > 500 > 300,600 となるかと思います。

以上になります。

主にOS標準フォントとWebフォントの違い、コーディング時における注意点を中心に書きました。

冒頭にも書きましたが、フォントはサイトの印象を左右する重要な項目なのでしっかり押さえておきましょう。

---

ビー・コーディングでは、セマンティックコーディングや構造化データを使用したコーディング代行でSEOに強いサイトを制作いたします。
簡単お見積りシステムでおおよその金額をライブでご確認いただくことも可能です。
コーディング代行なら弊社にお任せください。