MENU
  1. ホーム
  2. WEBデザイン基礎
  3. フォントの基礎

フォントの基礎

WEBデザイン基礎
目次

フォントの見た目による印象の違い

WEBデザインにおいてフォント選びはとても重要です。

同じ文章でもフォントの種類や大きさ、太さが変わるだけで、見た目の印象が大きく変わります。

フォントの見た目が与える印象を理解することでより効果的で魅力的なデザインを制作することができるようになりますので、デザイン制作の際には文字の見た目を意識して制作を行なってみてください。

フォントの活用の注意点

利用規約を確認する

フォントには、「商用利用可能」なものと「個人利用のみ可能」なものがあります。

また、有料のフォントと無料のフォントもあります。

フォントを利用する際はフォントを配布しているサイトの利用規約を必ず確認し、利用規約に商用利用について書かれていないフォントに関しては商用利用は避けるようにしましょう。

例えばAdobe Fontsというサイトで配布されているフォントは商用利用は可能ですが、会社のサイトや通販サイトといったサイトの制作時に使用する場合はクライアントがAdobeを契約する必要があります。
そのため、サイトデザイン制作時はGoogleFontsのように無料で商用利用可能なフォントを基本的に利用します。

使用するフォントの種類は多くなりすぎないようにする

フォントを何種類も使用するとまとまりのない印象になりやすく、統一感のないデザインになりやすい傾向にあります。

また、サイトデザインではフォントの種類を増やすとフォントの読み込みによりサイトの表示速度が落ち、表示速度が遅いとサイトからユーザーが離れやすくなってしまう傾向にあります。

そのためサイトデザインでは使用するフォントは2種類までとし、バナーやSNS画像制作では多くても4〜5種類までとしましょう。

フォント探しにおすすめのサイト

GoogleFonts

GoogleFontsで配布されているフォントは、商用利用可能で無料で使用することができます。

配布されているフォントの種類が多く、コーポレートサイトやECサイトではGoogleFontsのフォントを利用することが一般的です。

もちろんバナーのようなWEBサイト以外のデザイン制作時でも使用することができます。

GoogleFonts：https://fonts.google.com/

SANKOU! font

商用利用可能な日本語のフリーフォントを探すことができるサイトです。

サイト内でフォントが配布されているわけではないので、フォントをダウンロードする先はダウンロードページで利用規約を必ず確認の上フォントをダウンロードするようにしてください。

SANKOU! font：https://sankoufont.com/category/japanese-free-font

FONTDASU

商用利用可能な日本語フォントと欧文フォントを探すことができるサイトです。

「SANKOU! font」と同様にサイト内でフォントが配布されているわけではないので、フォントをダウンロードする先はダウンロードページで利用規約を必ず確認の上フォントをダウンロードするようにしてください。

FONTDASU：https://fontdasu.com/

フォントの探し方

フォントは「GoogleFonts」や「SANKOU! font」のようなサイト内で探すことができますが、Google検索で「ゴシック体　商用利用可能フォント　おすすめ」や、「GoogleFonts　明朝体　おすすめ」のようなキーワードで検索をし、検索結果上で出てきたフォントを紹介しているサイトから使いたいフォントを探すことも可能です。

おすすめフォントがまとめられているサイトから探すと、効率よく探すことができます！

また、最近では「ChatGPT」や「Claude」のようなAIツールに要件にあったおすすめのフォントを聞いてみるとチャットで候補が挙がってくるので、AIツールを使ってフォントを探すことも可能です。

フォントのインストールとアンインストールの仕方

インストールの仕方

フォントによってはダウンロードとインストールをしないと使うことができないものもあるため、これらの作業が必要なフォントを使いたい場合は配布サイトからダウンロードを行い、インストールをする必要があります。

フォント配布サイトにはフォントをダウンロードすることができるボタンがあるので、ボタンをクリックします。

（例）

参考：https://fonts.google.com/download/next-steps

zipファイルをダウンロードすることができるので、解凍をしてttfもしくはotfファイルをダブルクリックします。次に表示された画面でインストールをクリックするとフォントをインストールすることができます。

アンインストールの仕方

インストールしたフォントはアンインストールすることも可能です。

Macの場合

  1. アプリケーション > Font Book を開く
  2. 左側のリストから削除したいフォントを選択
  3. メニューバーの「ファイル > 削除 」をクリック
  4. 確認ダイアログで「削除」を押す

Windowsの場合

  1. コントロールパネルを開き、デスクトップのカスタマイズを開く
  2. 「フォント」をクリック
  3. 削除したいフォントの上で右クリックし、続いて削除をクリックする

おすすめフォント集

バナーやサイトデザインの制作で使いやすいフォントは以下の章でまとめているので、ぜひ参考にしてみてください！

あわせて読みたい
おすすめフォント集 WEBデザイン制作で使いやすいフォントをまとめています。 主にGooglefontsとAdobefontsのフォントを紹介しておりますので、ぜひ活用してみてください！ 日本語フォント ...
WEBデザイン基礎
目次