大阪DTPの勉強部屋 Webフォントとは?


日本語Webフォントの過去・現在・未来(PDF/69頁/約10MB)

▼ Download ▼

FONTPLUS無料トライアル版導入ガイド(PDF/32頁/約4MB)

▼ Download ▼

大阪DTPの勉強部屋「書体の誕生」展、日本語Webフォントセッションにご参加いただき、ありがとうございました。セミナースライドとお役立ち情報をアップしましたのでダウンロードしてご一読ください。日本語Webフォントは「重い」「遅い」と言われ続けて約3年、皆様からのご意見ご要望を反映させながら現在に至りました。Webフォントの表示速度が大幅に高速化された後、高解像度マルチデバイス時代において日本語WebフォントはWed Design表現の新しい『絵の具』として必須ツールになりました。

『日本語Webフォントは重いんで遅いんでしょ』という声をよく耳にします。そんなことないんです! この動画でお確かめください。昨年までのFONTPLUSが左側のiPad、現在のFONTPLUSが右側のiPadです。
FONTPLUS新旧速度比較
FONTPLUSの「スマートライセンス」(ダイナミックサブセッティング方式)は昨年、超高速化したんです。

「日本語Webフォントはお高いんでしょう」という意見もよく耳にします。初期費用(入会金)が1万円、ランニング費用は120万PVのスマートライセンスで1万2千円(月額1,000円相当)です。でも、FONTPLUSなら、1契約で複数サイト(登録ドメイン無制限)に使用できるので、非常にリーズナブルです。そして、リーク情報です。2014年11月25日正午~2015年2月末まで『入会金0年キャンペーン』を実施します! 700書体使えて、月1,000円(月10万PVチケット)でご利用できます。
購入したPVライセンスは分け合えるのです。Web制作会社においては、複数クライアント案件でご利用いただけます。そして、自社サイト/検証サイト/社員ブログサイトでの併用利用も可能です。
さて、Webフォント料金をどうクライアントに請求するかですが、業務委託費の中に含めるケースが一般的です。ただし中規模以上の案件ではクライアント毎に契約を分けるほうが管理しやすいですね。その場合、Web制作会社が代行して購入するケース(業務委託費の中に含める)とクライアントにFONTPLUSを契約してもらってアカウントを預託運用するケースもあります。SEO効果やサイトブランディング効果を考えれば、すごくリーズナブルです。

ここからは技術情報やお役立ち情報です。FONPLUSではJavaSscriptタグの拡張パラメータをいくつかご用意しています。[Webフォント表示パターン]設定、[文字詰め]機能などです。とりわけ、表示パターン設定の &delay=1 または &delay=2 はステージング環境で試してください。delayパラメータという名称ですがページ読み込み完了までの時間は変わりません。詳しくは導入ガイドの3~5ページをご参照ください。

■FONTPLUSオプションパラメータ一覧
Webフォント適用のタイムアウト時間:
 timeout=1
 (正の整数値 単位:秒)
表示スタイル:
 delay=1
 (1 or 2)
 1: Webフォント適用個所のみ非表示にするv  2: Webサイト全体を非表示
表示位置ズレの自動調整:
 aa=1
 (1以外の場合はパラメータなしと同じ)
文字間の余白削除:
 t=0
 (0のみを利用 pm=1と一緒に利用できません)
プロポーショナルメトリクス:
 pm=1
 (1以外の場合はパラメータなしと同じ t=0と一緒に利用できません)

■FONTPLUS無償API(スマートライセンス用)
非同期コンテンツなどに対応するやため、FONTPLUSでは無償でAPIを公開しています。コンテンツにあわせて、こちらもご利用ください。
FONTPLUS API機能説明

■Webフォント表示品質確認ツール(社内ツール)
表示品質テストツール(1~50ピクセル一括表示)
まず表示させたい文字列を入力します。font-familyも入力し、[更新]ボタンを押してください。なお、50書体font-familyリスト(xls形式)をご用意しましたのでダウンロードしてご活用ください。700書体の中から50書体をチョイスしました。なお、全700書体のfont-familyリストをご希望の方は関口浩之(ソフトバンク・テクノロジー)までご連絡ください。

WebフォントはMac OS/iOSやAndoroid OS環境ではどのフォントでも比較的綺麗に表示されます。しかしながらWindowsマシンのブラウザでは、とりわけ10~20ピクセルの表示品質はメーカー・書体によって多少バラつきがでます。撥音や長音、緩やかな斜め線などで差がでます。
2014年10月1日追記: Windowsマシンでも最近、IGZO(WQHD :2560x1440)や4K(Ultra HD:3840×2160)の高精細ディスプレイのノートパソコンが発売されました。それらのWindowsマシンで実際にWebフォント表示してみたら、Mac Retinaディスプレイ同様もしくはそれ以上に綺麗に表示できました。Windowsだからフォント表示が残念というわけではない時代が来るかもしれません。

■活字と文字のミニ情報
鋳造活字やデジタルフォントで有名な株式会社モトヤさんの活字資料館と丸明オールドで有名なカタオカデザインワークス書体設計家の片岡朗さんのアトリエを訪問した際に掲載許可を貰って撮影した写真をいくつか掲載しました。お楽しみください! 
片岡朗アトリエ
モトヤ活字資料館


FONTPLUSユーザ向けフォローアップ情報です。関口浩之の個人契約サーバのサイトです。