モリサワフォントをどの環境でも見られるWEBサイトを作りたい?:PAGE2013レポート

[browsershot url=”http://typesquare.com/” width=”600″]

編集長の高橋です。

先週、サンシャインシティコンベンションセンターTOKYOで行われた
PAGE2013に行ってきました。

その中で、いくつか気になるものがありましたので、
ブログを通して、みなさんに共有したいと思います。

今回、ご紹介するのは、前回のARを活用した販促手法に続き、
クラウドフォントを活用したWEB関連情報です。

モリサワフォントをCSSで表示できるクラウドフォント

デザイン・印刷・WEBの業界にとっては、馴染み深い
フォントメーカーの大手の1つであるモリサワが、
クラウドフォントサービスというものを始めています。

TypeSquareというサービスですが、
これを使用すると、文字をテキストのまま、画像化することなく、
誰が、どこから、どのディバイスで見ても、
モリサワフォントをCSSで指定し、画面に表示できるというサービスです。

では、このTypeSquareを導入することによって、
WEBサイトを公開する企業側と制作側にとって、どんなメリットがあるのか紹介します。

WEBサイトの修正がより簡単で効率的に

目立たせたいキービジュアルやバナー画像、
あるいは、各ページのタイトルや見出しなどで、
特定のフォントを使用して、それを画像化して、
ページ内に表示するということはよくあります。

場合によっては、ブランディングの観点から、
企業側で、使用するフォントを指定される場合もあるでしょう。

この「文字の画像化」を行った場合、ネックとなるのが、更新作業です。

状況が変わり、文字情報を変更しようとした場合、
通常は、制作会社に依頼して、元のPhotoshopやFireworksデータを開き、
更に場合によっては、デフォルト表示画像とマウスオーバー時の画像を作り、
最適な画質・容量になるように保存をして、サーバーにアップロードする
という作業が必要になり、企業側も費用を払わなければなりません。

TypeSquareを導入すると、文字をテキストとして保持できるため、
画像の元ファイルに戻る必要が無くなり、
HTML上の文字を修正すれば、それで作業が完了します。
場合によっては、制作会社に依頼しなくても、
企業側で修正が可能になり、更新頻度によっては費用も削減できます。

様々な面でアクセシビリティが向上

通常、文字を画像化した場合は、代替テキスト(altタグ)を設定しますが、
TypeSquareを導入することで、その必要が無くなります。

その結果、サイト内検索、自動翻訳機能、読み上げ機能など、
テキストをベースとする機能を、サイト内の全ての文字に対して、
適応することが可能になり、アクセシビリティを向上できます。

また、文字の拡大縮小機能をWEBサイト内に導入するケースがありますが、
TypeSquareを導入することで、文字の拡大縮小についても改善できます。

文字・画像の拡大による劣化

また、画像化した文字を拡大すると、劣化して読みにくくなりますが、
フォント指定したテキストの場合、拡大しても劣化せずにスムーズなままなので、
ユーザーが読み易い環境を提供することができます。

マルチディバイス対応でユーザービリティが向上

TypeSquareは、様々な環境で動作することになっています。

【Windows/Macintosh環境】
 Internet Explorer 8以降
 Safari 5.0以降
 Firefox 3.6以降
 Chrome 10.0以降

【スマートデバイス環境】
 iOS 4.2以降のSafari
 Android 2.2以降のAndroidブラウザ

これにより、様々なブラウザを想定したPC環境だけではなく、
スマートフォンやタブレット端末でも使用することができ、
リキッドレイアウト・レスポンシブデザインに最適と言えます。

スマートフォンやタブレット端末からの閲覧が多いけれど、
専用のサイトを構築をする費用が無い場合も、
TypeSquareを導入することにより、
ユーザービリティを維持したまま、簡単に、
スマートフォンやタブレット端末に最適な表示を実現することが可能です。

最後に

このサービスは、WEBサイトを読み込んで表示する際、
JavaScriptで、外部(モリサワ)のサーバーにアクセスを行うため、
表示する時間差が若干生じます。

展示会で、モリサワの担当者に確認したところ、
外部に公表する数値データは持っていないということでした。
現在、無料で使用できるキャンペーンを行ってますので、
クライアントに提案する前に、事前にチェックすることが可能です。

各WEBサイトごとに検証が必要ですが、
文字を画像化しないことで、表示速度が向上する場合もあるでしょう。
逆に、他のJavaScriptと衝突によって、
予期しない問題が発生しないかも、事前にチェックしたいところです。

企業のプロモーション担当・販促担当・マーケティング担当の方、
制作会社のディレクター・デザイナーの方にとって
少しでも参考になれば幸いです。