Webフォントを自社配信してみた。表示速度・商用利用・注意点とは？

前回は、AIでOGP画像を作った話をしました。

前回の記事はこちらです。

AIでOGP画像を作ってみた。SNSで見えるサイト画像の作り方とは？

Webフォントの自社配信とは？

Webフォントの自社配信とは、フォントファイルを自分たちのサーバーに置いて、そこから読み込む方法です。

通常、Webフォントは外部サービスから読み込むことがあります。

例えば、Google Fontsのようなサービスです。

外部サービスを使うと、設定は比較的かんたんです。

ただし、今回はサイト全体の完成度を高めるために、自社配信を選びました。

今回、自社配信したフォント

今回のサイトでは、主に次のフォントを使いました。

DM Sans
Noto Sans JP
Noto Serif JP
Yaku Han JP
Yaku Han MP

見出し、本文、英字、約物の見え方を整えるために、複数のフォントを組み合わせています。

約物とは、句読点やカッコなどの記号のことです。

日本語サイトでは、この約物の見え方が、意外と印象に関わります。

なぜ、Webフォントを自社配信したのか？

Webフォントを自社配信した理由は、主に次の通りです。

サイトの見た目を、安定させたかった
外部サービスへの依存を、少し減らしたかった
読み込みを、自分たちで管理したかった
キャッシュ設定を、調整しやすくしたかった
サイト全体の完成度を、上げたかった

フォントは、サイトの印象を大きく変えます。

同じ文章でも、フォントが変わると、受け取る印象が変わります。

今回のサイトでは、余白や色だけでなく、文字の見え方も大切にしました。

フォントで、サイトの印象は変わる

フォントは、見た目の土台です。

派手な装飾ではありませんが、ページ全体の空気を作ります。

今回のサイトでは、見出しと本文で、役割を分けました。

見出しは、印象を作る

見出しには、落ち着きや余韻が出るようにしました。

特に、使命・理念のページでは、言葉そのものが強く見えるように意識しています。

見出しが整うと、ページに芯が出ます。

反対に、見出しが弱いと、ページ全体の印象も弱くなります。

このは屋

使命・理念｜このは屋悔いの無い生涯を謳歌する。鼻歌商売から、鼻歌生涯へ。

本文は、読みやすさを優先する

本文では、読みやすさを優先しました。

コーポレートサイトでは、雰囲気だけでなく、内容がきちんと読まれることも大切です。

そのため、本文では次の点を意識しました。

文字サイズが、小さすぎないこと
行間が、詰まりすぎないこと
スマホでも、読みやすいこと
日本語として、自然に見えること
長く読んでも、疲れにくいこと

フォントは、見た目の好みだけで選ぶものではありません。

読者が読みやすいかどうかも、かなり大切です。

Yaku Han JPを使いたかった理由

今回、Yaku Han JPも設定しました。

Yaku Han JPは、日本語の約物を調整するためのフォントです。

約物とは、句読点、カッコ、記号などのことです。

約物が整うと、文章がすっきり見える

日本語では、句読点やカッコの余白が、少し広く見えることがあります。

それ自体が悪いわけではありません。

ただ、Webサイトの見出しや短いコピーでは、少し間延びして見えることがあります。

Yaku Han JPを使うと、そのあたりの見え方を整えやすくなります。

小さな違いが、全体の印象につながる

約物の調整は、かなり細かい話です。

でも、こうした細かい部分が、サイト全体の完成度につながります。

今回のサイトでは、余白、色、フォント、改行を、できるだけ丁寧に整えました。

その中で、Yaku Han JPも大切な要素になりました。

Webフォントの自社配信で確認したこと

Webフォントを自社配信する場合、確認することがあります。

単にフォントファイルを置けば良い、というわけではありません。

確認した項目

商用利用できるか？
自社サーバーから配信して良いか？
ライセンス表記が、必要か？
フォントファイルの形式は、適切か？
ファイルサイズは、重すぎないか？
スマホで、正しく表示されるか？
ブラウザごとに、表示が崩れないか？
キャッシュ設定は、適切か？

フォントは、権利面と技術面の両方を確認する必要があります。

特に、会社サイトで使う場合は、安心して使えることが大切です。

商用利用やライセンスは、大丈夫なのか？

Webフォントを使うときに、気になるのが商用利用です。

今回も、この点は慎重に確認しました。

確認した考え方

フォントを使うときは、次の点を確認します。

そのフォントは、商用利用できるか？
Webサイトで使って良いか？
自社サーバーから配信して良いか？
改変や変換に、制限はないか？
ライセンス表記が、必要か？

フォントによって、条件は違います。

そのため、名前が有名だから安心、とは限りません。

使う前に、配布元のライセンスを確認することが大切です。

不安な場合は、無理に使わない

少しでも不安が残る場合は、無理に使わない選択もあります。

Webフォントは、必須ではありません。

システムフォントでも、十分に読みやすいサイトは作れます。

大切なのは、安心して使えることです。

今回も、安心して使える範囲で進めました。

フォントファイルの形式は、どう考えたか？

Webフォントでは、ファイル形式も大切です。

よく使われる形式には、次のようなものがあります。

TTF
OTF
WOFF
WOFF2

Webサイトでは、WOFF2がよく使われます。

ファイルサイズを、軽くしやすいからです。

WOFF2化も検討した

今回、フォントファイルのWOFF2化も検討しました。

WOFF2にすると、読み込みが軽くなる可能性があります。

ただし、変換には注意が必要です。

ライセンス上、変換して良いか？
安全な変換方法か？
変換後に、表示が崩れないか？
今後の更新管理が、複雑になりすぎないか？

軽くできるからといって、何でも変換すれば良いわけではありません。

権利面と運用面を見て、判断する必要があります。

表示速度は、遅くならなかったのか？

Webフォントを使うと、表示が遅くなるのではないか？

そう感じる人もいると思います。

実際、Webフォントは、読み込み方によっては重くなります。

ただし、設定を整えることで、かなり軽くできます。

表示速度で意識したこと

今回、表示速度では、次の点を意識しました。

必要なフォントだけ、読み込む
フォントファイルを、キャッシュさせる
画像形式も、軽いものを使う
不要な外部読み込みを、増やしすぎない
ページ速度測定で、実際に確認する

結果として、Webフォントを使っていても、かなり軽い表示になりました。

実際に、ページ速度測定でも高得点を確認できました。

ただし、点数は環境やタイミングで変わります。

そのため、点数だけを目的にするのではなく、実際の表示感も見ることが大切です。

キャッシュ設定も大切だった

Webフォントを自社配信する場合、キャッシュ設定も大切です。

キャッシュとは、一度読み込んだファイルを、ブラウザ側に保存しておく仕組みです。

キャッシュが効くと、2回目以降の表示が軽くなります。

フォントは、キャッシュと相性が良い

フォントファイルは、頻繁に変わるものではありません。

そのため、長めにキャッシュさせると、表示が軽くなりやすいです。

今回も、フォントファイルは長くキャッシュされるように設定しました。

ただし、更新時には注意が必要

キャッシュは便利ですが、更新時には注意が必要です。

古いファイルが残って、新しい表示が反映されにくいことがあります。

そのため、更新する場合は、ファイル名や読み込みURLのバージョン管理を考える必要があります。

便利なものほど、扱い方を決めておくことが大切です。

自社配信のメリットとは？

Webフォントを自社配信してみて、良いと感じた点があります。

メリット1：読み込みを管理しやすい

フォントファイルを自分たちのサーバーに置くため、読み込みの状態を把握しやすくなります。

外部サービスの仕様変更に、影響されにくい点もあります。

メリット2：サイト全体の完成度が上がる

フォントまで整えると、サイト全体の印象が変わります。

特に、今回のようにデザイン性を重視する場合、文字の見え方は、かなり大切です。

メリット3：外部依存を少し減らせる

外部サービスから読み込む場合、そのサービスの状態に影響を受けることがあります。

自社配信にすると、その依存を少し減らせます。

メリット4：キャッシュ設計をしやすい

自社サーバーに置くことで、キャッシュ設定を自分たちで管理しやすくなります。

一度読み込んだフォントを、効率良く使えるようになります。

自社配信の注意点とは？

一方で、Webフォントの自社配信には注意点もあります。

注意点1：ライセンス確認が必要

まず、ライセンス確認が必要です。

商用利用できるか？
自社配信できるか？
変換して良いか？

を確認します。

ここを飛ばすのは、おすすめしません。

注意点2：ファイル管理が必要

フォントファイルを自社サーバーに置くため、ファイル管理が必要です。

どのフォントを、使っているか？
どのフォルダに、置いているか？
どのCSSで、読み込んでいるか？
更新時に、何を差し替えるか？

あとから分からなくならないように、管理しておくことが大切です。

注意点3：更新管理の手間がある

フォントにも、更新が入ることがあります。

ただし、毎回すぐに更新しなければいけないわけではありません。

サイト表示に問題がなく、ライセンス上も問題がなければ、無理に更新し続けない運用も考えられます。

大切なのは、更新しない理由を分かった上で、その状態を管理することです。

注意点4：読み込みすぎると重くなる

フォントを増やしすぎると、表示が重くなります。

使うフォントは、できるだけ絞った方が良いでしょう。

見出し用
本文用
英字用
約物用

役割があるものだけを使う、という考え方が大切です。

Webフォントは、使えば良いわけではない

Webフォントは便利です。

でも、使えば必ず良いサイトになるわけではありません。

サイトによっては、システムフォントでも十分です。

Webフォントが向いている場合

ブランドの印象を、文字で整えたい
見出しの雰囲気を、大切にしたい
サイト全体の世界観を、作り込みたい
デザイン性を、高めたい
表示速度とのバランスを、調整できる

システムフォントでも良い場合

とにかく軽さを、最優先したい
フォント管理を、増やしたくない
デザインより、更新性を重視したい
ライセンス確認や管理が、不安

どちらが正解、という話ではありません。

目的に合わせて、選べば良いです。

AIに相談しながら、フォント設定を進めた

今回のフォント設定も、AIに相談しながら進めました。

AIには、次のようなことを確認しました。

どのフォントを、どう組み合わせるか？
CSSでは、どう指定するか？
自社配信では、どこにファイルを置くか？
キャッシュ設定は、どうするか？
表示速度への影響は、どう考えるか？
更新管理は、どう考えるか？

フォントは、デザインと技術の両方に関わります。

そのため、AIと相談しながら整理できたのは、とても助かりました。

ただし、ライセンスや商用利用の最終確認は、自分で行う必要があります。

AIの回答を、そのまま信じすぎないことも大切です。

今回、Webフォントを自社配信して感じたこと

実際にやってみて、Webフォントの自社配信は、かなり良い選択だったと感じています。

ただし、誰にでも絶対おすすめ、というものではありません。

良かったこと

サイトの文字表現が、整った
見出しの印象が、強くなった
本文の読みやすさを、調整できた
外部依存を、少し減らせた
表示速度も、良い状態にできた

気をつけたいこと

ライセンス確認は、必ず行う
フォントを、増やしすぎない
ファイル管理を、分かりやすくする
キャッシュ設定を、考える
更新管理の方針を、決めておく

フォントは、サイトの印象を支える大切な要素です。

だからこそ、見た目だけでなく、運用まで考えて設定することが大切だと感じました。

まとめ

今回は、Webフォントを自社配信してみた実践についてお話ししました。

要点をまとめます。

Webフォントの自社配信とは、フォントを自分たちのサーバーから読み込む方法
フォントは、サイトの印象や読みやすさに大きく関わる
Yaku Han JPを使うと、日本語の約物を整えやすい
商用利用や自社配信の可否は、ライセンス確認が必要
WOFF2化などの変換は、権利面と運用面を確認して判断する
キャッシュ設定を整えると、表示速度を安定させやすい
フォントを増やしすぎると、重くなるため注意が必要
目的によっては、システムフォントでも十分な場合がある

Webフォントは、地味なようで、サイトの印象を大きく左右します。

今回のコーポレートサイトでも、文字の見え方は、大切にしました。

実際のサイトはこちらです。

このは屋のコーポレートサイトを見る