ホームページで使用できるフォントについて

ホームページの制作過程で、「ここをこういうフォントで」のようにご指示をいただくことがあります。

業種によっては、ビジュアルがより重要な業種もありますので当然です。

ホームページ上で表示できるフォントはまずは2種類

皆さんが普段目にしているホームページで表示されているフォントは主に2種類です。

画像で作られた文字か、テキストとして打たれた文字

わかりやすく言うと、文字をコピペしようとしてコピペできるのがテキストで打たれた文字で、コピペができないものは画像で作られた文字です。

なぜテキストと画像があるのか？

テキスト

ホームページ上で文字を表示するには、その見てくれているい人のパソコンにも同じフォントがインストールされている必要があります。
そのインストールされているフォントを使って、ブラウザ上に表示をしています。
「○○○というフォントを使ってください」といわれることも多々ありますが、それを使う場合、
そのフォントがインストールされている方のパソコンでは意図したとおりに表示されますが、そうでない場合全く意図していない形で表示されてしまいます。

フォントというのは無数にあり、貴方のPCには入っていても、他の人のPCに入っていないということの方が多いです。

そして、パソコンにもWINDOWSとMACがあり、OSもwindows7,818.1,10 とあり　MACにもOSがたくさんあります。

windows一つをとっても、7まではメイリオが主流でしたが、8以降「游ゴシック」が主流になりつつあります。

しかし、MACでは「ヒラギノ」主流です。

このように、環境によって使われているフォントは様々なので、比較的可能性の高いフォントを複数ピックアップして使用していきます。

なので、ほとんどのホームページの文字が同じようなゴシックばかりなのです。

画像で作る文字

しかし、ビジュアル的にメリハリをつけたいときや、雰囲気を重視したい時など　少しお洒落なフォントを使いたいときもあるかと思います。また、使われているのを目にすることもあります。

しかし、そうしたフォントはたくさんの方のPC環境には入っていない可能性が高いので「画像で文字を作って、画像として配置する」方法をとります。

見た目文字でもあくまで「画像」なので、どの環境でも同じように表示されます。

画像で文字を作るメリットとデメリット

メリットとしては「どんな環境でも同じように表示される」これにつきます。

デメリット①「検索エンジンが文字を読んでくれない」
見た目的には文字でもあくまで画像ですから、検索エンジンはテキストとして読んではくれません。ページ上のテキストはSEOに大きな影響をもたらしますから、可能な限りテキストで打ちたいところ。　なので、ほとんどのホームページでは見出し程度でしか画像で作った文字を使ってはいません。alt属性にテキストを打ち込んで検索エンジンに「ここにこういうテキストがありますよ」と伝えてあげることもできますが、このalt属性はソース内に書かれるだけで普段目にすることがないので、これをある意味悪用してSEO対策をするケースもありました。こうしたこともあり、やはりテキストで打たれた文字には到底及びません。

デメリット②「レスポンシブデザインにとても不向き」

現在主流となったスマートフォンサイト。グーグルも推奨しているPCのホームページとスマホのホームページどちらも同じHTMLを使い、CSSを切り替えて表示する「レスポンシブデザイン」にする際、画像の文字はすでに画像として固まっているため、スマホにあわせて改行などもできません。

また、近年のiPhoneなどで採用されているRetinaディスプレイなどは、通常の倍の解像度を誇ります。ということは普通に画像を配置していると倍荒く（ぼやけた感じで）表示されてしまいます。　これを解消するためには例えば200pxで文字を配置するところに倍の400pxで作った画像を配置し、200pxにCSSで縮小させて表示する必要があります。　そうすると今度は画像のサイズが大きくなりホームページのサイズが大きいとSEOにも不利になります。（表示が遅くなるため）

対して普通にテキストで文字を打っていれば、どんな解像度で見てもすべてキレイに表示できます。

近年のフラットデザインではちょっと古めかしい

近年のウェブデザインはフラットデザインが主流です。一昔前のホームページは「リッチデザイン」といって、いろいろと装飾を付けたりドロップ車道やグラデーションを多様化するものが主流でしたが、最近のフラットデザインでは極力無駄を省いていきます。　極力無駄を省くフラットデザインでは、そもそも画像で文字を作る必要もあまりありません。

ウェブフォント

そうしたことから、ウェブフォントという技術が発展してきました。

見ている人のパソコンにそのフォントが入っていなくても、サーバーからフォントをダウンロードさせて表示するという技術です。今皆さんが読んでくれているこの文字もウェブフォントを使って表示しています。誰のパソコンにも最初はインストールされていませんが、グーグルからフォントを読み込んで表示してくれています。

日本語はとても厄介

ウェブフォントがだんだんと浸透し始めてきてはいますが、日本語のフォントは別です。

アルファベットの場合まず使う人が世界中でとても多いので、フォント作成者も頑張りがいがありますが、日本語は日本でしか使われません。しかもアルファベットは26文字小文字入れても52文字、数字入れてもたいした数にはなりません。

しかし日本語はひらがなだけでも50文字以上、漢字を入れるととてつもない文字数になります。「フォント」として存在する以上それらの文字を誰かが作らなくてはいけません。日本でしか使われないうえに、とんでもない文字数を作らなければいけない。　そんな労力をかける以上無料では使わせたくない…　当たり前でもありますね。日本語のフォントにこだわりたい場合、モリサワフォントが有名です。ライセンスとして1年間、1台のPCで使うという条件で、49,800円（税別）/1年です。

→http://www.morisawa.co.jp/products/fonts/passport-one/

そんなこんなで日本語のフォントは、アルファベットに比べるとなかなか発展しません。

ウェブフォントではアルファベットでは本当にたくさんのフォントがありますが、日本語できちんと漢字にまで対応しているものは本当に少ないです。

まとめ

そんなこんなで、簡単にまとめますと

かっこいい文字にするには画像にしないといけない。　画像にすると検索エンジンに弱くなる。　スマホでの表示にも向かない。　なので極力画像で作る文字は少なくしたい。

これを、これからホームページを作る皆様には頭の片隅にで置いておいてください。