日本語Webフォントお役立ち情報


Webフォントの基本講座と事例にみる導入効果(PDF/77頁/約12MB)

▼ Download ▼

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

▼ Download ▼

WDF & HTML5Fun 「Webフォントセッション」にご参加いただき、ありがとうございました。セミナースライドとお役立ち情報をアップしました。ダウンロードしてご活用ください。日本語Webフォントは「重い」「遅い」と言われ続けて約3年、皆様からのご意見ご要望を反映させながら現在に至りました。Webフォントの表示速度が大幅に高速化され、また、高解像度なマルチデバイス対応が要求される中、日本語WebフォントはWed Design表現力の重要な選択肢の一つになりました。

「日本語Webフォントは重いからなぁ~」という声をよく耳にします。そんなことないんです! こちらの速度比較動画をご覧ください。昨年までのFONTPLUSが左側iPad、現在のFONTPLUSが右側iPadです。
FONTPLUS新旧速度比較動画(約5MB)
Webフォントの表示速度が高速化された今年、コーポレートサイトやサービスサイトでの導入がどんどん増えています。

上手な購入方法


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


以下で技術情報やお役立ち情報を掲載します。Webフォント表示品質確認ツールは社内ツールですが、今回のセミナー参加者には共有します。

◆Webフォント表示品質確認ツール(社内ツール)◆

表示品質テストツール(1~50ピクセル一覧表示)
まず表示させたい文字列を入力します。font-familyも入力し、[更新]ボタンを押してください。なお、50書体font-familyリスト(xls形式)をご用意しましたのでダウンロードしてご活用ください。700書体の中から50書体を適当にチョイスしました…。なお全700書体のfont-familyリストをご希望の方は関口浩之(ソフトバンク・テクノロジー)までご連絡ください。
WebフォントはMac OS/iOSやAndoroid OS環境ではどのフォントでも比較的綺麗に表示されます。しかしながらWindowsマシンのブラウザで10~20ピクセルの表示品質はメーカー/書体によって多少バラつきがあります。撥音や長音、緩やかな斜め線などで差がでやすいといえます。実際にWindowsマシンで下記サンプルモックでお確かめください。
(追記コメント)Windowsマシンでも最近、IGZO(WQHD :2560x1440)や4K(Ultra HD:3840×2160)の高精細ディスプレイのノートパソコンが発売されました。実際にWebフォント表示してみたら、Mac Retinaディスプレイ同様(もしくはそれ以上に)、綺麗に表示できます。高解像度ディスプレイが普及すれば、Windowsだからフォント表示が残念というわけではない時代になりますね。

◆FONTPLUSスクリプトタグ拡張パラメータ

拡張パラメータをいくつかご用意しました。[Webフォント表示パターン]設定、[文字詰め]機能などです。とりわけ、表示パターン設定の delay=1 または delay=2 は公開前にステージング環境で是非お試しください。delayパラメータという名称ですがページ全体の読み込み完了までの時間は変わりません。詳細は導入ガイドの9~10ページ、セミナー資料スライドの47~52ページをご参照ください。

◆スマートライセンスとバリューライセンス

FONTPLUSではスマートライセンス[ダイナミックサブセッティング方式]とバリューライセンス[Webサーバにあらかじめ必要なサブセットを配置する方式]の二つの方式があります。正直なところ、スマートライセンスが高速化された後は、二つの方式の表示速度がほぼ同じになりました。ですので最近では、導入がしやすいスマートライセンスを利用するケースが圧倒的に多いです。

◆主要フォントサンプルモック◆

ゴシック体20ピクセルの各社主要書体一覧
ゴシック体15ピクセルの各社主要書体一覧
明朝体20ピクセルの各社主要書体一覧
明朝体15ピクセルの各社主要書体一覧
デザイン書体30ピクセルの各社主要書体一覧

◆文字詰め機能適用サンプルモック◆

文字詰めなしのサンプル
文字詰めあり(&pm=1)のサンプル

◆活字と文字のミニ情報◆

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



セミナー参加者へのフォローアップページです。関口浩之の個人契約サーバーのサイトです。