事例紹介

Case Studies

日本情報産業株式会社 様

スマートライセンス

2015/06/03

 
 

紙面のような文字詰めをWebサイトで実現!〜 プロポーショナルメトリクス機能 〜

NIIコーポレートサイト     http://www.nii.co.jp/

NIIの画像1

文字詰め機能で紙面のように文字が整えられたサイト(左:PCサイズ 右:スマートフォンサイズ)

<日本情報産業株式会社 様のコメント>

サイト紹介

システム開発やネットワークインフラ構築からコンサルティングまで幅広く事業を手がける、日本情報産業株式会社(NII)の公式サイトです。

NIIのシゴトと身近なモノ(自動車や音楽など)とのつながりを視覚的に訴え、また文章で具体的に伝えることで、ITという目に見えない世界に親しみが感じられるWebサイトになっています。

フォントプラス導入までの経緯

今回、ブランディングを一新し、NIIとして発信するもの(例:Webサイトや紙媒体の広告など)全てにおいて統一感を持った表現をすることで、企業としての魅力や信頼性を訴求しようと考えていました。

そこで、Webサイトにおいて、どのブラウザでも同じフォントを表示でき、調整しやすい、Webフォントの導入を検討しました。

Webフォントサービスはいくつかありますが、中でも、フォントプラスには、紙媒体でフォントを使用する際と同じようにプロポーショナルメトリクス情報(注1)を使って文字詰めができる機能があったため、採用を決めました。

注1…書体デザイナーが設定した、文字ごとの最適な余白幅の情報。フォントデータに組み込まれている。※プロポーショナルメトリクス情報が組み込まれていないフォントデータもある。

プロポーショナルメトリクス情報を使った文字詰め機能

Webサイトで文字を表示した際、紙媒体と比べて文字間が不揃いで視覚的に美しくないため、フォントプラスTIPSの記事を参考にしてプロポーショナルメトリクス機能を実装しました。

【プロポーショナルメトリクス機能の解説】

スマートライセンスでhtmlにスクリプトタグを記述する際、パラメーターに「&pm=1」を追加すると、自動的にプロポーショナルメトリクスの余白を設定。

記述例:

▼適用前

<script type=”text/javascript” src=”http://webfont.fontplus.jp/accessor/script/fontplus.js?xxxxx&aa=1” charset=”utf-8”></script>

▼適用後(スクリプトタグに「&pm=1」を追加)

<script type=”text/javascript”src=”http://webfont.fontplus.jp/accessor/script/fontplus.js?xxxxx&aa=1&pm=1” charset=”utf-8”></script>

表示例:

▼適用前

NIIの画像2

▼適用後(スクリプトタグに「&pm=1」を追加)

NIIの画像3

※プロポーショナルメトリクス機能の注意事項※

1.利用できるサービスはスマートライセンスのみ

2.利用できる書体はフォントデータの中に、プロポーショナルメトリクスのデータが入っている書体のみ

書体リスト

3.IE8以前のブラウザでは反映されない

使用書体

Webフォントは、サイト内の本文と一部の見出しで使用し、全て「ヒラギノ角ゴ ProN W3」を指定しています。クセのないスタンダードな書体であり、Webサイト上で読みやすい点が採用した理由です。

フォントプラス導入後の感想

Webフォントを使って、サイト全体のビジュアルや仕組みを一新したことでわかりやすく読みやすいサイトとなり、ユーザーからも好評です。フォントプラスが大きな役割を担ったといえます。

今後は、更新をより簡単かつスピーディにするために、CMSを導入する予定ですので、引き続きスマートライセンスを活用していきたいと思います。(注2)

注2…CMS(コンテンツマネジメントシステム)とは、Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイト構築や編集を行うソフトウェアのこと。 スマートライセンスは、スクリプトタグを記述できる環境であれば、CMSと連携可能。Webフォントなら文字を修正するだけで簡単に更新できるため、CMSと連携することで更なる効率化が期待される。 ※バリューライセンスは、CMSとの連携が難しい。→よくある質問「ブログやCMSなどの動的ページで利用できますか?」参照

 
 

※本サイトで記載されている会社名および商品・サービス名は各社の登録商標または商標です。

Special Contents