事例紹介

Case Studies

株式会社博報堂 様

スマートライセンス

2015/01/22

 
 

動きに注目!“気になる”仕掛けページにWebフォントを活用

博報堂生活総研「生活定点」特設サイト    http://seikatsusoken.jp/teiten2014/

制作協力:チームラボ株式会社

<株式会社博報堂様からのコメント>

サイト紹介

博報堂生活総研が、22年分1500項目の生活者観測データ「生活定点」を無償で一般公開しているサイトです。

「生活定点」のデータを広く様々な人々に使っていただくことを通じて、よりよい社会づくりに貢献することを目的としており、データが身近でない方にも、楽しみながら発想のヒントを得ていただけるように、様々な工夫をしています。

フォントプラス導入理由

このサイトは、テキストとグラフで構成されており、通常目を引く要素である写真やイラストをほとんど使用していません。そのため、テキストとグラフが最もよく目立つデザインにするには文字が重要と考え、日本語Webフォントを検討していたところ、使用したいフォントがあったのでフォントプラスを導入いたしました。

“気になる”仕掛けページにフォントプラスを活用

サイト内で目立たせたい箇所はすべてWebフォントを使って大きな文字で記し、見出しだけを読んでもだいたいの内容が伝わるように心がけています。

書体はデータを見慣れていないユーザーにも抵抗なく読んでいただけるよう、親しみやすさを基準に探しました。中でも「筑紫A丸ゴシック Std E」 は、大きく表示したときにぱっと目を引き、文字も視認しやすいため選定しました。

下記の様な統計結果の数値は、動きをつけることで、結果そのものが “気になる” 仕掛けになっています。この仕掛けはテキストで構成されており、細かく動く数字もすべてWebフォントで表示しています。

※実際の動きは下記画像をクリックしてご確認ください。

博報堂生活総研「生活定点」の画像2

また、サイト全体にレスポンシブ対応を施しているため、スマートフォンで見てもPCと同じデザイン・動きが楽しめます。デバイスに関わらず同じ書体で同じ動きを再現できるという点において、フォントプラスは大いに貢献しています。

推奨環境

【OS】Win7以降、Mac OS10.8以降、iOS7以降、Android4以降

【ブラウザ】IE9以降、各最新FireFox/Chrome/Safari

 
 

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