ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

最低限知っておきたい、WEBフォントの基礎知識【参考リンク付き】

  • WEBデザイン

いきなりですが、WEBフォントをご存知ですか?言葉はよく聞くし、書体に関することだということくらいはわかる。でも、詳しいことは知らない…。そんな方もいらっしゃるのではないでしょうか?今回は、スマホやタブレットでのホームページ閲覧割合が増えて来たことも相まって、ますます利用が増えて行きそうなWEBフォントを取り上げたいと思います。

自社のホームページを企画する時や、制作会社との打ち合わせにあたって、知っておきたい基礎知識に加え、「自社のブログで、ちょっとためしてみたい…」などという方のための参考情報も、合わせてご紹介したいと思います。やってみると意外と簡単なので、ぜひ試してみてください。

WEBフォントとは?名前はよく聞くけど、どんなもの?

フォントとは、文字の書体のこと。従来のホームページ制作では、見出しなどの文字にデザイン性のある書体を使いたい場合、文字を画像化して使用していました。テキストでは、たとえ書体を指定しても、それが閲覧者のパソコン内になければ替わりの書体で表示されてしまうため、確実に狙い通りの書体で表示させることができないからです。

しかし、これは決して望ましい方法ではありません。そこで出てきたのが、WEBフォント。WEBフォントでは、ブラウザがフォントファイルをダウンロードして表示に使ってくれるので、閲覧環境にフォントが入っていなくても、望みどおりの書体で文字を表示できるのです。Wikipediaにも詳しいWEBフォントの説明がありますので、引用しておきます。

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

引用元Wikipedia

つまり、WEBフォントを使用することによって、WEBデザインの表現の幅が広がり、よりクオリティの高いWEBサイトが制作できるようになったのです。

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

従来の画像化する方法と違い、WEBフォントにはどのようなメリットがあるのでしょうか。その主なメリットをまとめてみましょう。

メリット1.テキストデータなのでSEOに強い

WEBフォントはテキストなので、検索エンジンに対するSEO対策に有利です。SEOにおいて重要な要素となるタイトルや見出しを、デザイン性重視のために画像化してしまった場合、適切なタグの表記をしなければ、SEO効果が低下してしまいます。WEBフォントなら、タイトルや見出しはもちろん本文にも、SEOに強いテキストのままで、デザイン性の高い書体を使えます

メリット2.ユーザーが使いやすい

WEBサイトを見ている時、見出しや本文をコピーして使用したいケースは多くあります。特に最近では、気になる記事や面白い記事があれば、ソーシャルメディアで紹介する方も増えています。その時にタイトルやキーワードが画像のためにコピーできないと、シェアする気もなくなってしまいます。WEBフォントなら、もちろんテキストとしてコピー&ペーストが可能です。

また、読み上げソフトを利用している方や、ページの翻訳サービスを利用する場合などにも、テキスト情報は便利。しかも、WEBフォントならレスポンシブウェブデザインにも対応可能。デバイスの幅にあわせた文字の改行が可能になります。ユーザーに親切で、ユーザビリティが向上します

メリット3.メンテナンス性が良い

WEBフォントを使用しておけば、変更が必要な時にもテキストの打ち換えだけで対応できます。デザインを優先してタイトルなどの文字を画像化してしまった場合、細かい修正が入るたびに制作会社に連絡して差し替え画像を作ってもらわなければならないなど、手間も時間もかかり、費用が発生する場合もあります。WEBフォントを使用すれば、そのようなことがなくなります。

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

もちろん、いいことづくめではありません。デメリットも挙げておきたいと思います。

デメリット1.読み込みに時間がかかる

WEBフォントは、サーバー上にあるフォントファイルを読み込んで、それを閲覧者のブラウザ上に反映するしくみ。そのため、どうしても表示までに時間がかかってしまいます。また、WEBフォントが読み込まれるまでの少しの間は、パソコンのフォントが表示されてしまうなどの問題があります。特に日本語は英語に比べると文字種や画数が多くデータ量が重いため、表示されるのに時間がかかりがち。しかしこのような問題は、技術の向上によって日々改善されています。

デメリット2.使用料がかかるものもある

通常のフォントでもそうですが、WEBフォントにも無料で使えるものもあれば、有料のものもあります。特にモリサワのフォントなど、印刷物でよく使われるような日本語フォントは、有料であることの方が多くなります。導入の仕方によっては、ひと手間かかる場合もあり、WEBフォントを使用することで、WEBサイトを制作するための費用が高くなる場合もある…、ということは頭に入れておきましょう。

WEBフォントを使ってみたい方に…

ここからは、「HTMLやCSSなどは詳しくない」「でも自社のブログで、試しにWEBフォントを使ってみたい」、そんな方のための情報です。

簡単に使用できるWEBフォント「Google WEB Fonts」

非常に簡単に導入できるWEBフォントとしては、「Google WEB Fonts」があります。

Google WEB Fonts
Google WEB Fonts

Google WEB Fontsは、その名の通りGoogleが運営するサービスで、600種類を超える欧文フォントがウェブフォントとして提供されています。利用方法も、HTMLまたはCSSのソースコード内に指定の1行を加えるだけ。とても簡単に使うことができるWEBフォントです。使い方の手順は、下記の記事でわかりやすく紹介されていましたので、参考にしてみてください。

望みのフォントで表示できる!ウェブフォントの使い方(All about)
望みのフォントで表示できる!ウェブフォントの使い方(All about)

Google WEB Fontsは、登録も不要で無料で利用できて便利ですが、残念ながら日本語には対応していません。日本語を使用したい場合は、日本語のフォントメーカーの提供する書体やフリーフォントを利用します。

TypeSquare(モリサワ)
TypeSquare(モリサワ)

モリサワが運営する「TypeSquare」では、モリサワ以外のフォントも提供しています。1ヶ月のPV(ページビュー)や利用書体数ごとに料金が設定されている有料のサービスですが、月間1万PV以下のサイトなら1書体に限り無料で利用できますので、試用してみてもいいかもしれません。

その他にも、商用利用もできる日本語のフリーフォントは、いろいろあります。「最新-2014.12:日本語WEBフォント情報。(+アイコンフォント)」のようなWEBフォントに関するまとめ記事もたくさんありますので、日ごろからどんなフォントがあるのかチェックしておくといいかもしれませんね。

今回のまとめ

スマホやタブレットを使う人が増えているマルチデバイスの時代。ホームページ制作では、さまざまなデバイスから閲覧されることを考えて画像はなるべく使わず、テキストで表現可能なものは、できるだけテキストを使う方が良い…、という流れがあります。

そのような流れに沿って、しかもデザイン性の高いホームページを制作するために、WEBフォントはますます欠かせないものになっていくでしょう。まだ使っていないという場合には、新規制作やリニューアルの際に、「WEBフォントは使えますか?」と、制作会社に相談してみてはいかがでしょう?

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」