Webフォントデザインアワード 2013

日本語WebフォントによるWebサイト表現と技術、
アイデアのためのコンペティション。

連載記事

Web fonts A Go-Go

Sample Site

後編:「TypeSquare」を導入し、バラエティ豊かな日本語Webフォントで賑やかに

プロのデザイナーには馴染み深い書体を有する日本最大のフォントメーカー、モリサワ社。同社の書体をWebフォントとして提供するサービス「TypeSquare」が、2012年にスタートした。2013年12月末まで無料で試せる「¥0キャンペーン」を実施しているので、利用したことのあるクリエイターも多いのではないだろうか。ここではTypeSquareを導入したサンプルサイトを例に、日本語Webフォントを導入するうえでのポイントを解説していこう。

Service

TypeSquare

Sample Website

http://book.mynavi.jp/wd/special/webfonts/

旅行代理店のランディングページをイメージしたサンプルサイト。ページ上部の画像エリアは、雑誌の表紙をイメージしてデザインした。ランディングページは文字要素こそが主要となり、デザイン上文字が大きく使われることが多いが、それらには画像を一切使わず、TypeSquare が提供するWebフォントを適用している。

Sample Design & Text
Image

山田晃輔 Kosuke Yamada
Webデザイナー/ライター。1982年岐阜県高山市生まれ、東京造形大学卒。都内の広告制作会社退職後、フリーランスとしてWebサイト制作を中心に行うかたわら、雑誌や書籍にて文字や書体、Webフォントに関する記事・コラムを執筆。
http://www.petitboys.com/
http://blog.petitboys.com/

TypeSquareを導入し文字サイズを考慮する
TypeSquareの導入

 TypeSquareは、2013年12月31日まで無料ですべての機能を制限なしで利用できる¥0キャンペーンを実施している。キャンペーンの申し込みは、TypeSquareサイトの「ご利用申し込み」ボタンから「¥0キャンペーン」を選択し、ユーザー登録をするだけといたって簡単だ。
 ユーザー登録をしたら、さっそくTypeSquareを利用してWebフォントを用いたサイトを作ってみよう。まずはマイページにログインして、利用したいサイトのドメインを設定し、専用のJavaScriptタグをHTMLファイルのhead内に挿入する。あとはフォント一覧から利用したい書体を選び、記載されているfont-family:をCSSに記述するだけ。フォントのダイナミック表示や、ブラウザごとの複雑な分岐処理は、すべてTypeSquareのサーバで処理される。
 Webフォントは登録したドメインと紐付いているので、ローカル環境では適用されない。そのため、実際の描写を確認するためには、サーバにHTMLやCSSファイルをアップロードする必要がある。

Sample
TypeSquareの登録は、サイト左側にある「ご利用申し込み」というピンクのバーから案内に応じて入力していくだけ。適用するサイトには、マイページ内にある専用のタグをhead内へ挿入する

Sample
7月末時点で330種の書体を提供していて、書体分類だけでなく、イメージワードや用途、太さ、メーカー別などさまざまな方法から目的のフォントを探すことができる

Sample
Webフォントの描写をTypeSquareのサイト上で確認できる「クラウドフォント・シミュレータ」。文字色や背景色、フォントサイズや行間の値も自由に変更でき、デバイスフォントとの比較もできる

Sample
Webフォントをサイトに適用するには、フォント一覧の「CSSの指定例」にあるfont-family の記述を、CSSへコピー&ペーストするだけでいい

フォントサイズはできるだけ大きく

 サンプルサイトの本文は16ピクセルをベースとし、見出し部分にはさらに大きなフォントサイズでレイアウトをしている。Webフォントを適用する場合は、その書体のデザインが認識できるよう、できるだけフォントサイズを大きくするといい。
 また小さいフォントサイズの場合は、ビットマップデータを持たない書体では潰れてしまうこともあるので、デバイスフォントも選択肢に入れるなど、用途に応じた書体選びをしよう。

Webフォント適用前
Sample
Webフォント適用後
Sample
ローカル環境ではデバイスフォントで表示されているが、登録したドメインのサーバへアップロードするとWebフォントが適用される

Sample
9ピクセルの文字をWindows XPのIE(ClearType ON)環境で描写比較したところ。リュウミンと新ゴはデバイスフォントであるMS P ゴシックのようにビットマップデータを持たない。そのため、小さいフォントサイズでは見づらくないか、あらかじめ確認しておいたほうがいい

文字のアニメーションと装飾
ウェイトの選択

 モリサワが提供する書体の多くは、ウェイト(太さ)のバリエーションを数多く揃えている。たとえば新ゴでは、一番細い“EL”から一番太い“U”まで、8種類が用意されている。この中から見出し、あるいは本文に適切なウェイトを選んで指定していくことになるが、OSやブラウザごとに描写環境が異なるため、適切なウェイトを選ぶのは非常に悩ましい。事前にさまざまな環境で描写を確認するようにしよう。書体のデザインにもよるため一概には言えないが、基本的に本文には標準であるRegular(R)をおすすめする。
 また見出しなどのhタグは、そのままでは太字になるが、太字の処理が加わり書体デザインが潰れてしまうことがある。その場合は、CSSでfont-weight:normal;の指定をするようにしよう。

CSS3やJavaScriptを使った装飾

 Webフォントを適用したテキスト部分には、CSS3やjQueryなどを使ってテキストシャドウやグラデーション、透明度、アニメーションなどを適用することができる。グラフィックソフトで制作する画像文字のように自由自在というわけにはいかないが、非常に効率的に装飾処理を実装することが可能だ。ただしCSS3の対応状況はブラウザによって異なるため、デザインカンプの段階で実際に実現可能かどうか事前に確認しておく必要がある。古いブラウザで実現させるには、別途「CSS3PIE」などの外部ライブラリやポリフィルの利用を検討しよう。CSS3の対応状況はfindmebyIPのHTML5・CSS3のサポート状況一覧ページを見ると分かりやすい。

Sample
タイトル部分は、ユニークなテキストアニメーションを簡単に追加できるjQuery プラグイン「Textillate.js」を使用して、左から表示される。Web フォント描写の若干の遅れを考慮してsetTimeout 処理を加え、約2秒後にアニメーションするように調整している

Sample
航空ダイヤは、日本語と英語が切り替わる空港の電光掲示板をイメージした。アニメーションは、画像のスライドショーで有名なjQueryプラグイン「jQuery Cycle Plugin」の“growY”を使用。仮に修正が入ったとしても、文字を差し替えるだけなので簡単に管理できる

Sample
「詳しくはこちら」や「お問い合わせ・お申し込みはこちら」といったボタン部分はCSS3で立体化していて、文字部分にはWebフォントを使用している

Sample
ステッカー風処理の部分は、CSS3のtransformで10度傾け、box-shadowでシャドウ効果を加えている。円の地にも背景画像は使用せず、border-radiusを使っている

高品質な欧文書体を積極的に使う

 アメリカの著名なフォントブランドFont Bureau社をはじめ、モリサワの年間ライセンスパッケージ「MORISAWA PASSPORT(モリサワパスポート)」で提供されている高品質な欧文書体も、TypeSquareではWebフォントとして利用できる。アルファベットや数字には、日本語書体の欧文(日本語従属欧文書体)だけでなく、本格的な欧文書体を用いるとより一層デザインが栄えるので、積極的に使っていくといい。

Sample
サンプルサイト全体では、複数のフォントを利用している。書体を明記していない本文には、UD新丸ゴ Rを適用した

プロのデザイナーにお馴染みの書体が使える「TypeSquare」

 TypeSquare は2012年2月に発表されサービスを開始した、国内フォントメーカー最大手モリサワによるWebフォントサービス。モリサワではあえて「クラウドフォントサービス」と称して展開している。Web制作の知識がないクリエイターにも利用しやすいよう、わかりやすいユーザーインターフェイスが特長で、昨年のグッドデザイン賞では金賞を受賞し、グッドデザインベスト100にも選出された。
 フォントデータはすべてTypeSquareのサーバから配信されているため、ユーザー側でWebフォントのデータそのものを用意する必要はない。登録後ユーザー専用のJavaScriptを挿入し、CSSのfont-familyに書体名を指定するだけで利用できる。Webページに使われている文字を瞬時に判断し、必要最低限のフォントファイルをダイナミックに生成することで、表示時間の短縮を図っている。
 書体のラインアップにはプロのデザイナーにはお馴染みの新ゴやリュウミン、見出しゴなどの定番書体を中心に、さまざまなジャンルの書体を330種取り揃えている(7月末時点)。2013年3月にはタイプバンク社の書体や学参書体が追加され、さらに2013年7月のサイトリニューアル時には提携するFont Bureau社の欧文書体やARPHIC社・HANYI社の中国語書体、SANDOLL社の韓国語書体が追加された。多言語展開を必要とするグローバル企業のサイトなどにおいては、より便利に利用できるようになった。描写の品質改善も随時行われている。
 サービス開始時から無料で試せる¥0キャンペーンを展開し、日本語Webフォントの啓発に大きな貢献をしている。キャンペーンは年内いっぱいまで行い、その後はページビューによって変わってくる料金体系を選択することとなる。サイトの規模に応じてカスタマイズできるアドバンスドプラン(要問い合わせ)も用意される。

TypeSquare

TypeSquare [タイプスクウェア]

料金

TypeSquareを無料で、書体数やサイト数にも上限なく利用できる「¥0キャンペーン」を実施中。キャンペーンは2013年12月31日(火)まで。最新情報は公式サイトで確認を。

Web Designing2013年9月号より転載)

LINEで送る

前編はこちら »