印象的でSEOにも有利！日本語Webフォントの設定方法と素材サイト5選
- 2017年1月25日
- 433
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 著者詳細はこちら
ホームページを印象的でオリジナリティ溢れる見せ方をする方法は様々ありますが、その中でも最も簡単かつ効果的な方法がWebフォントを使う方法です。
Webフォントはブラウザやデバイスに依存しないため、あらゆる環境で好きなフォントを表示することができます。
Webフォントは、HTMLとCSSの基本的な知識さえあれば簡単に組み込むことができるため、設置の敷居が低いことも特徴です。
また、日本語のWebフォントを使ったホームページも増えてきたので、見かける場面が多くなったのではないでしょうか。
そこで今回は、日本語Webフォントを設定するための具体的な方法や日本語を取り扱うWebフォントサービスサイトをご紹介します。
これから説明する手順に従えば簡単に導入することができるので、ぜひ設定してみてください。
Webフォントとは？
Webフォントとは、その名前のとおりWeb上で表示するのに最適化されたフォントのことです。
従来は、ユーザーが持っているフォントデータでないとフォントを表示できなかったのが、サーバー側でフォントデータを用意することで、どのブラウザやデバイスでも同じように文字を表示することができるのです。
Webフォントを使うメリット
それでは、Webフォントがここまで広がってきた背景はどこにあるのでしょうか。
Webフォントを使うメリットを具体的に読み解いてみましょう。
1. オリジナリティを表現できる
Webフォントを採用していないホームページもある中、ほかのホームページとは違ったフォントで文字を表示することで、オリジナリティをアピールすることができます。
2. SEOに有利
Webフォントが広がる前は、ブラウザで表示できないフォントは画像にして表示していました。
しかし、画像では検索エンジンが文字を読み取ることが難しく、結果的にSEOの上でも不利になってしまいます。
Webフォントを使うことで、文字データとしてコーディングしていくので、検索エンジンにもアピールしやすいホームページ作りが可能です。
3. レシポンシブ対応も簡単
テキストを画像化してしまうと改行することができないので、そのまま画像を縮小するしかありません。
スマートフォンをはじめとするモバイル端末では、そうしたテキスト画像が見にくくなってしまうことがあります。
しかし、Webフォントを使えば、ブラウザが適切な位置で改行を行ってくれるので、レスポンシブにもしっかり対応してくれます。
4. 画像より修正が簡単
テキストを画像化してしまうと、修正する際には画像エディタを開いて修正する必要があります。
Webフォントでは、HTMLファイルを直接修正するだけで更新できるので、修正スピードが変わってきます。
5. 高画質ディスプレイにも対応
テキスト画像は、軽量化するとギザギザしてしまい、鮮明にすると容量が大きくなってしまうので読み込み時間にも影響します。
一方、Webフォントはベクターデータなので、拡大しても綺麗に表示されます。
Ratinaディスプレイなどの高画質ディスプレイでも美しく表示することができます。
Webフォントの使い方
それでは、具体的なWebフォントの使い方を確認していきましょう。
1. 使いたいフォントを見つける
まずは、使いたいフォントを決めていきます。
Webフォントを使う場合には、フォントスタンドと呼ばれるWebフォントを配布しているサイトに登録して利用する場合と、自分でフォントファイルをサーバーにアップロードして使う方法があります。
2. フォントファイルを指定
CSSの「@font-face」を利用してフォントファイルをブラウザに読み込ませます。
@font-face {
font-family: 'フォント名';
src: url('フォント名.eot'), url('フォント名.woff') format('woff'), url('フォント名.ttf') format('truetype');
}
3. フォントの適用
Webフォントをページ全体に適用させるには、bodyに「font-family」を指定します。
部分的にWebフォントを指定したい場合は、bodyの部分を任意で変更してください。
body {
font-family: 'フォント名';
}
自分でWebフォントデータを用意する場合
フォントスタンドで公開されているフォントの数は限られているため、もしかしたら自分が扱いたいフォントがないかもしれません。
そんな時は、自分で既存のフォントデータをWebフォント用に変換して、サーバーにアップロードするという方法もあります。
ただし、自分でWebフォントデータを用意する場合はライセンス確認を必ず行いましょう。
著作権がフリーのフォントでも再配布禁止であることがあるので注意が必要です。
1. 使いたいフォントを見つける
まずは、利用したい日本語フォントを見つけてダウンロードしておきましょう。
2. フォントのサブセット化
欧文フォントは文字数も限られているので、1つのフォントファイルが250KB程度です。
しかしながら、日本語フォントは20MB前後あるため、そのままアップロードすると読み込み速度が非常に遅くなってしまうのです。
そこで日本語フォントでは、「第一水準漢字」を中心として日常でよく使う漢字だけを抜き出す「サブセット化」と呼ばれる作業を行います。
サブセット化することで、ファイルサイズをできるだけ小さくして、読み込み速度を上げることが可能です。サブセット化をするためのソフトはインターネット上で配布されています。
3. Webフォント化
次に、軽量化したフォントファイルを「.woff」という拡張子に変換していきます。
この拡張子は、ブラウザでの表示に対応しています。変換用のソフトは同様にインターネット上で配布されています。
4. サーバーにWebフォントをアップロード
Webフォントファイルの変換が完了したら、サーバーにWebフォントをアップロードします。
URLに関しては、外部サーバーに設置する場合は絶対パスで記述する点に注意しましょう。
@font-face {
font-family: 'フォント名';
src: url('フォント名.eot'), url('フォント名.woff') format('woff'), url('フォント名.ttf') format('truetype');
}
日本語Webフォントを取り扱うオススメのサービスサイト
日本語Webフォントを使う手間をできるだけ省きたい場合は、Webフォントサービスサイトを利用するのがオススメです。
会員登録して使いたいフォントを選べばサンプルコードが表示されるので、そのコードをHTMLやCSSファイルにコピー＆ペーストするだけです。
そこで今回は、オススメのWebフォントサービスサイトを5つ紹介していきます。
1. Adobe Typekit
https://typekit.com/fonts?browse_mode=japanese
「小塚明朝」や「源ノ角ゴシック」をはじめとして、日本のタイポグラファーによってデザインされた美しい本格的なフォントを使うことができます。
940個以上のフォントが毎月25,000ページビューまで表示される無料プランもあるので、まずはこちらから試してみてはいかがでしょうか。
2. Fonts.com
「メイリオ」や「モトヤフォント」などの定番を中心に220以上の日本語フォントがラインナップ。
25,000PVまでは無料で3,000ものフォントの中から選ぶことができる無料プランがあります(ただし提供はCSSを除いたJavaScriptのみ)。
3. もじでぱ
「ぷちくまふぉんと」や「ふい字」など、手書き文字のラインナップが多いのが「もじでぱ」です。
完全無料で使えるのはもちろん、文字やページを装飾するための様々なエフェクトが揃っています。
4. TypeSquare
「モリサワフォント」や「新丸ゴ」といったプロ仕様のフォントをWebフォントとして利用することができます。
10,000PVまでは無料で使えるスタンダードプランからスタートしてみましょう。
5. Font+
「筑紫明朝」や「スーラ」「ロダン」など、雑誌や広告でもよく使われるフォントが850書体以上あります。
5,000PVまで・6ヵ月まで無料トライアルが用意されています。
まとめ
今回は、日本語Webフォントを設定するための方法と便利な日本語フォントスタンドを紹介しました。
Webフォントを使うと、ほかのホームページとの差別化ができるだけではなく、イメージどおりのホームページに仕上げることができます。
実際に表示するには、短いコードを挿入するだけです。
ぜひお気に入りのフォントを見つけて、自身のホームページやブログに取り入れてみてください。