2012.5.16 Wednesday - 10:02

ロゴタイプをWebフォント化してみよう

（私がゲスト出演したTypeTalks第10回で紹介して反響があったネタより。）

国内・海外ともにWebフォントが徐々に広まり、Webデザイン上の文字に大きな変化が起きている昨今ですが、Webフォントを適用するのは本文・見出しだけでしょうか？今回はちょっと変わった「ロゴタイプをWebフォント化する」というテクニックをご紹介します。

事の発端はフォントオンラインストアMyFontsのサイトを眺めていたときでした。MyFontsには通常のトップページと、Webフォントの特設ページがあります。実はこの2つには、MyFontsのロゴ部分に大きな違いがあるのですが、皆さん気づきましたか？

ロゴタイプをWebフォント化してみよう

そうなんです。Webフォントの特設ページのほうは、ロゴタイプ部分が“Webフォント”になっています。マウスカーソルで選択してみてください。 ※残念ながらデザインや仕様が変更となってしまいました。

MyFontsのロゴがスクリプト体であるということもあるのですが、最初これに気づいたときは衝撃を受け、是非とも自分でもやってみたいと思ったのがきっかけでした。

…ということで、簡単ではありますがやり方を解説したいと思います。

1. ベクター形式のロゴタイプデータを用意

Illustrator形式なりEPS形式なり何でもよいです。

ロゴタイプをWebフォント化してみよう1

2. フォント制作ソフトを用意

フォント制作ソフトはプロ向けであれば、定番のFontlab StudioやFontographerなどが挙げられますが、高価なソフトでなくてもOTEditやTT Edit、ハードルが上がりますがフリーのFontForgeなど、とにかくフォントデータをできるソフトを用意します。

今回は当ブログでも紹介しているMac用の新しいフォント制作ソフトGlyphsの簡易版、Glyphs Mini (¥3,900)を使いました。
タイプデザイナーでなくても感覚的に使える便利なソフトで、Mac App Storeにて購入可能です。無料お試し版があるのでまずはそちらをどうぞ。

Monotypeのタイプデザイナー大曲さんがGlyphsの使い方を、映像を交えて分かりやすく解説してくださってますので、初めての方は是非ご覧ください。
http://tosche.net/2012/11/glyphsapp_j.html

ロゴタイプをWebフォント化してみよう2

Glyphs Mini App
カテゴリ: グラフィック&デザイン
価格: ￥3,900

3. 文字をフォント制作ソフト側にコピー＆ペースト

Glyphsを含め、多くのフォント制作ソフトはIllustratorから直接データをコピー＆ペーストできます。必要に応じてカーニングの設定を行い、文字間を調整します。

ロゴタイプをWebフォント化してみよう3

4. フォントデータの書き出し

いわゆる必要な文字だけをフォントデータ化したサブセットフォントデータになります。PETITBOYSの場合は8文字。サーバから配信する想定なので、極力データの容量は減らすようにしましょう。

ロゴタイプをWebフォント化してみよう4

5. Webフォントファイルを生成

FontSquirrelの@font-face Generatorでは、フォントファイルをアップロードするだけで、Webフォント専用のWOFFやEOT形式のフォントデータを作ることができます。さらに古いブラウザにも対応したい場合はOTF (OpenType)やデスクトップ上では使えないTTF (TrueType)、SVGも合わせて作っておきます。
→ Webで任意の書体を使う方法まとめ

ロゴタイプをWebフォント化してみよう5

6. Webフォントキットを用いて設置する

前述@font-face Generatorでは、Webフォントファイルの生成だけではなく、CSS上の面倒なブラウザ分岐処理済のデータが一式ダウンロードできます。これを参考に自分のサイトのHTMLに組み込みましょう。

ロゴタイプをWebフォント化してみよう6

7. ついに完成！

フォントブログのヘッダ（もしくはフッタ）、PETITBOYSのサイトのロゴタイプ部分をご覧ください。ロゴタイプがWebフォント化され、拡大縮小してもボケません。コピー＆ペーストするとしっかり“PETITBOYS”の文字が出てきます。

ロゴタイプをWebフォント化してみよう7

今回はアルファベットだけでしたが、フォント制作ソフト側が日本語フォントに対応しているのであれば、日本語のロゴタイプでやってみるのもよいかもしれませんね。

また数文字ではありますが、実際に「フォントを作ってみる」というよいきっかけになると思います。

最後に、ロゴタイプをWebフォント化することにどのような意味があるのでしょうか。それは、いくつかあるWebフォントの特性の中でもSEO対策の面で最も効果を発揮しそうです。…というのも、社名が入ったロゴデータは、Webデザイン上で最も重要な位置であると言われる、ページ頭の左肩に設置される場合が多いためです。

フォントのレンダリングが…等の問題があるかもしれませんが、将来的に企業のWebサイトの設計項目として組み込まれるかもしれません。ロゴマークも存在する場合は背景イメージにするとか？色々考えられそうですね。

【追記】ただしフォントをそのまま打っただけのようなロゴタイプの場合はライセンス的に厳しいかもしれません。この辺の判断は難しいところですが、念のため注意してください。

アップしたフォントデータをダウンロードできないようにするには？

.htaccessに次の記述を追加し、フォントデータがあるフォルダにアップロードします。こうすることで、指定している拡張子のファイルへのアクセスを拒否できます。http(s)?://(www\.)?hogehoge\.comの部分は、ドメインにより記述を変更してください。
※.htaccessの設置方法等は割愛しますので、解説や注意事項は他のサイトをご覧ください。

RewriteEngine On
RewriteCond %{HTTP:Origin} !^$|http(s)?://(www\.)?hogehoge\.com$ [NC]
RewriteRule \.(woff|eot|ttf|otf)$ – [NC,L]
RewriteCond %{HTTP_REFERER} !.
RewriteRule \.(woff|eot|ttf|otf)$ – [F,NC,L]
Options -Indexes

PAGE TOP