2013/08/29

実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ

webフォントの使い方&日本語対応webフォントまとめ

CSS3からwebフォントが利用できるようになりました。

しかし、なかなか日本語に対応するwebフォントがリリースされず、何となく流行ってなさそうだから後回しにしてしまっているデザイナーの方も多いのではないでしょうか。

そこで、今回は実は簡単なwebフォントの使い方と日本語対応のwebフォントをまとめてご紹介します。ぜひ一度使ってwebフォントの魅力に触れてみてください。

目次

■webフォントとは

webフォントとは、CSS3から策定されたWWW上からフォントを表示する技術です。

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

出典:wikipedia
http://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

従来のフォント指定について

今まではOSに標準で搭載されているフォントを使用するのが主流でした。

Windows 8 / 7 / Vista メイリオ
MS ゴシック
MS 明朝
Windows XP MS ゴシック
MS 明朝
MacOS X 10.5以降 ヒラギノ角ゴシック ProN
ヒラギノ明朝 ProN
ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
MacOS X 10.4 ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
iOS HiraKakuProN-W3
HiraMinProN-W3
Android 4.0 モトヤLシーダ3等幅
モトヤLマルベリ3等幅

いくら制作サイドで多彩なフォントを持っていたとしても、ユーザーサイドのPCにフォントのデータが無いので表示が変わってしまい、意図しない表示がされることになってしまいます。

この問題の解決手段として策定されたのがWebフォントです。

フォントのデータをネットワーク上に置き、サイト表示の際はそこからフォントのデータをダウンロードして使用するため、ユーザーの環境に左右されることが無くなります

日本語Webフォントをあまり見かけない理由

現在多くのWebフォントがリリースされていますが、日本語のWebフォントはほとんど見かけません。

普及が遅い理由としては、

  • ■ 用意する文字数が膨大(現行の常用漢字だけでも2136字)
  • ■ 文字数が多いためデータ量が増え、表示速度が低下するおそれがある

といったことが挙げられます。

大文字小文字や数字・記号だけで完結できるアルファベットに比べて、日本語は漢字ひらがなカタカナアルファベット数字記号などを使用します。
フォントを作るのも大変ですが、利用する方も大変です。

日本語Webフォントの表示速度対策

フォントプラスでは、表示速度向上のための対策が施されています。

フォントプラス

こちらでは、サイト内のテキストデータを分析して、必要なフォントデータだけを解凍して使用することが出来ます。
不必要なデータを読み込む必要が無くなる為、表示の高速化が期待できます。

こういった技術の開発により、Webフォントはぐっと利用しやすくなり、日本語Webフォントの制作も盛んになってきました。

■webフォントの使い方

それでは実際にWebフォントを利用する方法を解説していきます。

Webフォントの利用はすごく簡単です。

  • 使用したいフォントを用意する
  • CSS3の@font-faceでフォントファイルを指定
  • CSSでフォントを適応させる

これだけでWebフォントを利用することが出来ます。それでは各手順を細かく解説していきます。

使用したいフォントを用意する

欧文フォント・日本語フォント・アイコンフォントなど数多くのフォントの中から利用したいフォントを選択します。

欧文フォントサンプル

欧文フォントサンプル

League Gothic
ライセンス:個人・商用利用無料

日本語フォントサンプル

日本語フォントサンプル

Fontopo にほんご
ライセンス:個人・商用利用無料

アイコンフォントサンプル

アイコンフォントサンプル

Typicons
ライセンス:Creative Commonライセンス

その他、日本語対応のWebフォントについてはこちらにまとめました。

CSS3の@font-faceでフォントファイルを指定

CSS3から追加された@font-faceを使ってフォントファイル名フォントファイルへのパスを指定します。

@font-face {
    font-family: 'フォント名';
    src: url('フォント名.eot');
    src: url('フォント名.eot?iefix') format('eot'),
         url('フォント名.woff') format('woff'),
         url('フォント名.ttf') format('truetype'),
         url('フォント名.svg#webfontjSpbZQRv') format('svg');
}

CSSでフォントを適応させる

Webフォントを利用したい箇所にCSSを適応させます。

h1 {
    font-family: 'フォント名';
}

以上で設定は終わりです。

とっても簡単に利用出来ますので、ぜひ試してみて下さい!

■Google Web Fontsの利用方法

Google Web Fonts』を利用すれば、先程紹介した方法よりももっと手軽にWebフォントが利用出来ます。

Google Web Fonts

『Google Web Fonts』は個人利用・商用利用問わず無料で利用することが出来ます。

手順は前述のWebフォント利用方法とほぼ同じですが、フォントファイルをアップロードする必要がありません。

まずフォントを選びます。
カテゴリーやタイプなどから探すことが出来ます。

カテゴリーなどからフォントが探せます

さらに赤枠の部分に任意の文字を入れることで、結果を見ながら探すことが出来ます。

文字を入れて実際に確認しながら探すことが出来ます。

使いたいフォントが決まったら"Quick-use"をクリックします。

Quick-use

font-weightなどの設定を行い、ページ中ほどのHTMLをコピーして<head>~</head>の間に記述します。

HTMLをコピー

<head>
<link href='http://fonts.googleapis.com/css?family=フォント名' rel='stylesheet' type='text/css'>
</head>

次に、適応したい箇所に以下のCSSを適応すれば完了です。

CSSを適応

h1 {
    font-family: 'フォント名';
}

サンプルコード

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
	font-size: 20px;
	font-family: 'Playfair Display SC', serif;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>google web fonts</h1>
</body>
</html>

上記のコードをコピーしてブラウザで確認してみて下さい。

このように『Google Web Fonts』を利用すれば簡単にWebフォントを実装することが出来ます。

■webフォントを使うメリット・デメリット

簡単に利用できるWebフォントですが、メリットとデメリットが存在します。
簡単にまとめてみましたので、実装する際の参考にして下さい。

メリット

テキストデータなのでSEOに有利

画像ではなくデザイン性を保ったままテキストデータで利用できるのでSEOに強くなります。

ユーザビリティが向上

画像の文字はコピー出来ませんが、Webフォントは選択出来ますので、コピーして再利用することが出来ます。

メンテナンス性の向上

HTMLやCSSを編集するだけで加筆・修正が可能です。

主要ブラウザがWebフォントをサポート済

新しい技術ですが、実はIE6にも対応しています。
モダンブラウザはもちろん、スマートフォンやタブレット端末でもサポートされています。

デメリット

日本語対応のWebフォントが少ない

前述の通り、文字数の多さやデータ量の大きさがネックとなりフォントのリリースが遅れています。

ブラウザによって若干の差異が生じる

サポート自体はされていますが、各ブラウザによって文字のインデントなどが違うため、若干の差異が生じてしまいます。

読み込みに時間がかかる

バイト数の大きいWebフォントの場合、読み込むまでの間OS準拠のフォントが表示されてしまうなどの問題があります。
また、ページ表示自体も遅くなりユーザーのストレスになる可能性もあります。

■日本語対応のwebフォントまとめ

日本語対応のWebフォントをリリースしているサイトをいくつかご紹介します。
こちらではライセンスの確認はしておりませんので、利用を検討する際は必ずライセンスや利用規約を確認するようにしてください。

FONTPLUS|フォントプラス

フォントプラス

http://webfont.fontplus.jp/

TypeSquare [タイプスクウェア]

タイプスクウェア

http://typesquare.com/

フロップデザインフォント

フロップデザインフォント

http://www.flopdesign.com/freefont/flopdesignfont.html

自家製 Rounded M+

自家製 Rounded M+

http://jikasei.me/

WEBフォント|アマナイメージズ

WEBフォント|アマナイメージズ

http://amanaimages.com/font/web/index.aspx

BiND for WebLiFE* 6.5

BiND for WebLiFE* 6.5

http://www.digitalstage.jp/bind/6-5/

+ OUTLINE FONTS

+ OUTLINE FONTS

http://mplus-fonts.sourceforge.jp/webfonts/

■『Webフォントデザインアワード 2013』開催中

Webフォントデザインアワード 2013

現在、『Webフォントデザインアワード 2013』という企画が株式会社マイナビ主催で開催されています。

日本語のWebフォントを効果的に使ったサイトを対象に、一般部門と課題部門の2部門でエントリーを受付中です。

募集期間 2013年7月1日(月)~9月30日(月)
一次審査 2013年10月1日(火)~10月31日(木)
最終審査 11月中旬(予定)
応募方法 キャンペーンサイトよりエントリー
結果発表 Web Designing 2014年1月号(2013年12月18日発売)誌面およびキャンペーンサイトにて
主催・運営 株式会社マイナビ
共催 ソフトバンク・テクノロジー株式会社、株式会社モリサワ

■まとめ

日本語対応のWebフォント自体の少なさやファイルの重さなどの問題が徐々にクリアされてきています。

デザイン性の幅が広がり、デザイナーの意図した形そのままでユーザーに表示できるようになるため、Webフォントはこれからどんどん活用されていくことでしょう。

ぜひ一度試してみてWebフォントの魅力を感じてみてください。