ブログ

ホームページのデザインを変えるかもしれないWebフォント。でもまだ時期尚早?

Webフォントって何!?

皆様おはようございます。八王子市南大沢は薄曇りの朝です。
お盆も過ぎて、夏の甲子園大会も終わり、8月もあと少しとなって参りましたが、今日も朝からじんわりと蒸し暑くなっております。それでもなんとなく秋の気配が感じられる気がするのは気のせいでしょうか?

ところで今回はホームページのデザインを変えるかもしれない「Webフォント」のお話です。
 

Webデザインの悩みどころの一つ、フォントの問題。

ホームページのデザインで悩ましいのは書体の問題。
ホームページはいろいろなパソコンで見てもらうものなので書体の選択肢はあまりありません。
基本的には閲覧者のパソコンに最初から入っている(インストールされている)書体を使うことになります。

使用候補となる具体的な書体を挙げると、
Windowsなら8以降は游ゴシックかメイリオ。
7以前ならメイリオ一択。

ちなみに明朝体の書体はWindows7では綺麗に表示されない傾向なので個人的には避けております。

MS Pゴシックもさすがに古く見栄えも宜しくないので、よほど理由がなければ使う必要はないかと。
Macならヒラギノか游ゴシック(OS X Mavericks 以降)。

Windowsでの游ゴシックは使い方によっては読みにくくなることも結構ある(白抜き文字をFirefoxで表示したりすると結構可読性が厳しくなる)ので、Win用にメイリオ、Mac用にヒラギノを指定しておけば無難ではあります。
(※メイリオがインストールされたMacではメイリオでの表示になります。)
 

「システムフォント」だけではデザイン的に物足りない?

こうしたパソコンに元から入っている書体を「システムフォント」と呼びますが、ウェブサイト全体をシステムフォントだけで構成すると、やはりデザイン的にはちょっと物足りない感じはあります。

少し前までは見た目を良くするために見出しはシステムフォントではない書体で作成したものを「画像」として書き出してホームページに配置する手法が一般的でした。

が、最近はRetinaディスプレイなど、高精細なディスプレイが普及して来ており、標準的な解像度で作成した見出し画像では少々ぼやけた表示となってしまいます。

SEO(検索対策)的にも見出しも画像に頼らずテキストで作成してCSS(スタイルシート)で装飾した方が有利。「alt属性」といって画像に文字情報を設定することもできますが、やはりテキストそのものでの見出しの方が有利な様子です。
 

パソコンに入っていない書体が使える「Webフォント」

これに対し、最近は「Webフォント」(ウェブフォント)というものも登場しています。

書体のデータをインターネット上からダウンロードしてきて表示することができるので、パソコンに入っていない書体がかなり自由に使えるというものです。

見出しでも本文でも使用OK。

ウェブサイトによってはアクセスすると数秒程度キャッチフレーズなどの入った画面が表示され、その後ホームページが表示されることがあります。そういうホームページは大抵Webフォントを使っています。

つまりオープニング風の画面を表示させておいて、Webフォントの書体データを読み込むための時間を稼いでいるわけですが、Webフォントのデータはそれだけ「重い」(データサイズが大きい)ということになります。
 

データの読み込みに時間がかかってしまうという問題

欧文書体の場合はアルファベット26文字とその他記号類があれば済むのでフォントデータは比較的小さいのですが、日本語の場合、文字の種類が大量にあるので書体データも大きくなりがち。そのためインターネットの回線の速度が遅いとWebフォントデータの読み込みに時間がかかってしまうという問題があります。

スマホでの閲覧の場合、データ通信量を増やしたくない人が多い(料金的にも速度的にも)と思いますが、Webフォントを使ったサイトを閲覧する場合、書体のデータをいちいちダウンロードするのでデータ通信量を増やすことになってしまいます。

現実的対応としては、使用するWebフォントのすべての書体データをダウンロードせず、ある程度絞り込んだ文字のフォントデータのみダウンロードする手法でしのいでいるのが現状です。
 

Webフォントは、文字詰め(カーニング)ができる

Webデザインでは文字詰め(カーニング)の問題があります。

例えばひらがなは漢字より横幅が狭いものが多いので、そのぶん「文字詰め」をして文字と文字の間を全体に均等にしたいところです(横書きの場合)が、通常の日本語フォントではこれが使えません。(欧文書体では使えるのですが。。。)

ただWebフォントでは文字詰め情報を持っているものがあり、比較的簡単に文字詰め可能。
これ、デザイン的には結構大きいです。

イメージに近い書体が選択できて、文字詰めなどもある程度コントロールできると、仕上がりの完成度はかなり進歩すると思われます。Webデザインはどうしても文字組みの自由度の制限が大きく、デザイン的にかなりの妥協をしなくてはならない場面も多かったのですが、Webフォントの導入でホームページのデザインの常識が変わることになるかもしれません。
 

Internet Exproler 11では綺麗に表示されない(かもしれない)問題

残念ながら、Windows7の標準Webブラウザである「インターネットエクスプローラー(通称「IE」)」では日本語のWebフォントはきれいに表示されなかったりします。特に明朝系の書体はかなり見づらくなることが少なくありません。

書体によっては比較的綺麗に見えるものもありますが、文字のサイズが小さくなると急激に見づらくなる傾向があるので、使うとしても見出しなどの大きな文字限定にされるのがおすすめ。

Windows7のユーザーはまだ大勢おられることを考えると、Webフォントの使用はちょっと「時期尚早」な場合があるかもしれません。それでも1年前に比べればWebフォント使用の状況は確実に進歩してきています。

あと数年後にはWindowsの世代交代も進み、通信速度も速くなるでしょうから、Webフォントを使用したサイトはかなり増えていると思われます。
 

広告物の制作実績を、このホームページでご確認頂けます

チラシやパンフレット、メニューなどの印刷物/ホームページの制作、運営管理/写真撮影やイラスト作成まで幅広く行っています。各種広告制作物の実績の一部を公開中です。

制作の実績