福岡県でデザインパンフレットのことならお任せ!地域密着型サポートに自信あり!日広株式会社
電話番号092-573-7011、営業時間は8:30〜19:30までとなっております(土・日・祝休み)
Design & Production  of the Menu
カテゴリー

2017.01.24

(火)

キブキブ

クリエイティブ


WEBフォントを使ってみよう!

webfon

最近では一般的なフォントよりも、利便性の高いWEBフォントを利用するサイトが増えてきました。

様々な面で使い勝手が良い反面、利用する際には注意すべきデメリットも存在します。

 

WEBフォントとは

そもそもWEBフォントとは、あらかじめサーバに格納してあるフォントを利用することで、ユーザーの閲覧環境の影響を受けず表示できる文字のことをさします。サーバからデータを読み込むことで表示する仕組み上、以前は表示に時間がっかることがありましたが、現在では各種対策によりほぼ問題なくスムーズに表示されるようです。

 

WEBフォントを利用するメリット

1.どのデバイスでも同一に表示できる

Webフォントはサーバから情報を取得するので、ユーザーの閲覧環境に左右されず、誰が見ても統一されたデザインで閲覧できます。

 

2.画像の枚数が減るため、ページのデータ量を小さくできる

画像で表示していたテキストをWebフォントに変更すれば画像の枚数を削減することができるため、ページのデータ量を小さくすることができます。

 

3.レスポシブデザインに対応しやすい

レスポンシブデザインで画像を使用する場合、一つのデザインに対して複数枚の画像を用意する必要があります。

Webフォントで代替できるデザインであれば、HTMLとCSSの記述のみで表示させることができるため、その分の効率化が図れます。

 

4.ベクター形式で表示される

一般的な画像は「ラスタ形式」であることから、拡大表示したり高解像度ディスプレイで表示すると輪郭がガタガタしたジャギーが出てしまいます。対して、Webフォントは「ベクター形式」で表示するため、拡大されても劣化させずに綺麗な輪郭で表示できます。

 

5.メンテナンスに手間がいらない

画像を使用する際、変更点があると差し替えといった手間がかかります。

WebフォントであればHTMLとCSSを編集するだけで修正ができるため、メンテナンスが楽というのもメリットの一つです。

 

Webフォントを利用するデメリット

1.費用が発生する場合がある

有料のWebフォントを使用する場合は費用が発生します。

ほとんどの場合、Webフォント提供元への一括支払いか、PV数による従量課金に分類されます。

無料で使用できるものでもライセンス表示が必要な場合があります。

特にPV数による従量課金制の場合は、自分のサイトが日にどれぐらいアクセスされているか、しっかりと把握しておかないと、思った以上に費用がかかったり、フォントが表示されなくなることもありますので注意が必要です。

 

2.データが重く、ページの表示速度が遅くなる場合がある

日本語の場合、ひらがなやカタカナを使用するため文字数が増えます。

そのためフォントデータが重くなり、ページの表示速度が遅くなってしまうことがあります。

現在はこの点に関してさまざまな改善が行われているため、以前よりは表示速度が改善されているものもあります。

この点を改善する方法として、Webフォント情報がブラウザにキャッシュされるように設定することで、一度見たページと同じフォントを使用すれば読み込み速度を上げる方法があります。また、Webフォントの情報を非同期で読み込ませることで、読み込みが完了するまでの間は代替フォントでページを表示することができます。

 

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

文字数の多さやデータ量の大きさなどの問題から、欧文に比べて日本語で利用できるWebフォントがまだまだ少ないのが現状です。費用やライセンス表示の件からも選べる幅が少ないのも状況です。

 

 

WebフォントがダウンロードできるWebサイト

日本語に対応しているWebフォントがダウンロードできるWebサイトを一部ご紹介します。

 

1.Noto Sans Japanese

https://www.google.com/get/noto/

Googleが提供しているフォントサイトです。

 

2.TypeSquare

http://typesquare.com/

日本で最も有名な和文フォントサイトです。

日本のフォントメーカーの「モリサワ」が提供しています。

当サイトもこのフォントを利用しております。

 

3.FONT+

http://webfont.fontplus.jp/

企業が利用することを想定した約20種類以上の字体が提供されているフォントサイトです。

 

4.Line Font

http://font.websozai.jp/

Extra Lightよりもさらに細い、Extra Thinウェイトのフォントがダウンロードできるフォントサイトです。

5.うつくし明朝体オールド

http://www.flopdesign.com/freefont/utsukushi-mincho-font.html

横書きで見ても美しい明朝体がダウンロードできるフォントサイトです。

 

6.たぬき油性マジック

http://tanukifont.com/tanuki-permanent-marker/

手書き感があたたかみを感じさせるデザインのフォントサイトです。

 

7.白舟書体

http://www.hakusyu.com/download_education.htm

古代中国の遺跡に掘ってあるような、独特のフォントがダウンロードできるフォントサイトです。

 

8.Japan Sans

http://webfontfan.com/japansans/

一般的なデザインから、少し変わったデザインまで、様々な種類のデザインのフォントがダウンロードできるフォントサイトです。

 

9.DynaFont Online

https://dfo.dynacw.co.jp/

2016年3月29日にリリースしたフォントです。Webに関する知識が低くてもフォント指定ができ、特殊な書体が多いフォントサイトです。

 

 

Webフォントを使用できると、デザインの幅が広がり、Webサイトを閲覧しているユーザーに、より企業のブランドイメージを認識してもらいやすくなります。

 

まだまだ日本語対応のWebフォントは少ないですが、今回ご紹介したWebフォンとサイトや、Googleから提供されている「Noto sans Japanese」でも十分にデザイン性を高めることができるので、ぜひ利用してみてください。

お見積もり大歓迎!お問い合わせはこちら
フクオカマンガドットコム
福岡キャラクタードットコム
外国語反訳パンフ制作
新卒採用戦略
コンペ参加します
特集メニュー
専門用語まるわかり

複雑な広告用語や印刷用語などをスタッフが楽しく分かりやすく紹介しています。

ついつい始めちゃいました福岡パンフレットブログ
広告・販促情報満載!!NikkoMagazine!メルマガ始めました
メールマガジンのバックナンバーはこちら
パワーポイントテンプレート無料配布中!
よくあるご質問