• オススメ

サーバー関係なく使える、フリーのWebフォント活用事例

BiNDにはサーバー環境を選ばずに利用できるフリーのWebフォントが多数搭載されています。本文やキャッチコピーなど、デザインに合わせてフリーフォントを活用してみましょう。

Webサイトを制作する上でWebフォントを上手に活用できると、デザインの幅が広がり、SEOにも有利などの利点があります。

freewebfont_ui_01
BiNDで使用できるWebフォントは大きく分けて3種類あります。「日本語フォント」はBiNDクラウドなどBiND専用のサーバーにアップロードする必要がありますが、「日本語フリーフォント」と「Google Fonts」はサーバー環境を選ばずに利用できます。
https://bindcamp.digitalstage.jp/developers/10723

9月のアップデートで「日本語フリーフォント」に21種類のフォントが追加され、実際のサイト制作でもより使いやすくなりました。今回はどのサーバーでも利用できるフリーのWebフォント活用事例をご紹介します。

見出しや本文に使いたいスタンダードなフリーフォント

源ノ角ゴシック+Open Sans

freewebfont_standard_02
まずはゴシック体の組み合わせ例です。

見出しには日本語フリーフォント「源ノ角ゴシック」のBold、本文には「源ノ角ゴシック」Regularを使用しています。
源ノ角ゴシックはAdobeがGoogleなどと共同開発したフォントで、収録されている文字もウェイト(太さ)の種類も充実しているので、見出しや本文などに幅広く利用できます。
欧文に使用しているのはGoogleフォント「Open Sans」。多くのWebサイトで使用されている代表的なサンセリフ体です。

源ノ明朝+Merriweather

freewebfont_standard_01
明朝体の組み合わせ例です。
見出しには日本語フリーフォント「源ノ明朝」のMedium、本文には「源ノ明朝」Regularを使用しています。
源ノ角ゴシック同様、源ノ明朝もAdobeとGoogleの共同開発フォントであり、文字やウェイトも充実しています。見出しや本文などに幅広く利用できるフォントです。
欧文に使用しているのは「Merriweather」。クラッシックな印象でありながら、スクリーンでも読みやすくデザインされています。

ほのかアンティーク角+Satisfy

freewebfont_standard_03
日本語フリーフォントの「ほのかアンティーク角」はゴシック体(漢字)とアンチック体(仮名)を組み合わせた書体です。欧文は「Satisfy」。飾りっぽい雰囲気で欧文を入れたいときは、手書き風フォントが雰囲気を演出するのに役立ちます。

ユニークなフリーフォントでビルボードを印象的に

フリーフォントにはユニークなデザインのフォントもいろいろ揃っています。このようなフォントは本文にはあまり向きませんが、ビルボードなど目立たせたいポイントで使うと一味違った印象になります。

ふぉんとうは怖い明朝体+Fontdiner Swanky

freewebfont_hero_01
日本語フリーフォントの「ふぉんとうは怖い明朝体」はハロウィンなどのデザインに活用できそうです。欧文はGoogleフォントの「Fontdiner Swanky」です。

ピグモ00+Barrio

freewebfont_hero_02
日本語フリーフォント「ピグモ00」のようなとてもユニークなデザインは、ロゴっぽいデザインに向いています。欧文はGoogleフォントの「Barrio」を合わせました。

Kaushan Script+マメロン

freewebfont_hero_03
オシャレに演出したい時は、欧文フォントをメインにデザインしてみてもよいでしょう。こちらの組み合わせ例で使用したGoogleフォントの「Kaushan Script」はこれからのホリデーシーズンなどで活躍しそうです。日本語は、日本語フリーフォント「マメロン」を使用しています。

Webフォントを選ぶ際は、本文で使用したいフォント、キャッチコピーで使用したいフォントなど、目的に合わせて選んでみてください。
サイト全体のバランスを崩さないことも大切です。サイトの趣旨やデザインとのバランスも考慮し、それぞれサイトに合ったフォントを探してみましょう。

サンプルのサイトデータ

今回のサンプルのサイトデータを用意しました。下記よりログインするとダウンロードできますのでご利用ください。(BiND10以降、BiNDクラウド対応)
今回ご紹介したサンプルの画像素材はすべてmaterialsから選んだものです。気になったものがあればポイントを利用してダウンロードしてみてください。

続きを読む

関連記事

  • デザイン
  • BiNDの使い方

どの色が相応しい?介護施設のホームページを3つの違う色で作ってみた

サイトのメインカラーが違うだけで与える印象が変わりますが、なかなか異なる色をいくつも作って比べるのは至難の業。簡単な質問に答えるだけで目的にぴったりのホームページが作れる「AiDジェネレーター」なら、出来上がりのサイトから見比べることが可能!介護施設のサイトに合う色はどれか試してみました。

2017.07.04 - あい