有名サイトのWeb担当者6人が明かした成果・運用の舞台裏――2016年度Webグランプリフォーラム 第4部 イベント報告
- 掲載日：2017年4月11日（火）
- 委員会・ワーキンググループ：Webグランプリプロジェクト
企業BtoBサイト賞 グランプリ受賞――モリサワ
Webフォント＋レスポンシブWebデザインでフルリニューアル
株式会社モリサワ コーポレートサイト
http://www.morisawa.co.jp/
さまざまなフォント製品で知られるモリサワは、2015年10月、8年ぶりとなる4回目のコーポレートサイトのリニューアルを実施した。
リニューアルのきっかけは、8年の間に取り扱い書体やソフトウェアが急増し、当時想定していたフローのままでは情報提供が難しくなったことだ。また、PCサイトだけでなく、スマートフォンやタブレット向けの情報発信も急務とされた。モリサワの阪本氏は、リニューアル目的およびサイト強化として、次の3点を挙げる。 
株式会社モリサワ
阪本 圭太郎 氏
・あらゆる閲覧環境での情報発信
・フォントや書体だけでなく、自社開発商品の訴求力強化
・国内外へのブランド浸透
リニューアルされたモリサワ コーポレートサイトは、同社の提供する「Webフォント（TypeSquare）」が使われていることが大きな特徴だ。「Webの閲覧体験には、言うまでもなく文字が非常に重要」だと阪本氏は話す。
具体的には、PCやスマートフォンなどの異なる閲覧環境でも同じフォントを利用できるように、「UD新ゴNT」を基本書体に定め全面的に採用している。
UD新ゴNTは、可読性にこだわったユニバーサルデザインの書体であり、従来は画像にしていたメニューや見出しをWebフォントで表示したことで、デザイン性と読みやすさを両立。よりインパクトを与えたいコンテンツには、基本書体以外のWebフォントをCSSで指定することで対応した。
各デバイスへの対応は、レスポンシブWebデザインを採用。画面の横幅が狭まると、フォントも文字幅の狭いものに変更されるこだわりようで、画面内での情報量を維持するように工夫されている。
WebフォントとレスポンシブWebデザインを採用してリニューアル
統一したブランドイメージで世界に情報発信
Webフォントは、現場の運用効率を上げるため、CMSなどの編集システムと連携させた。あらかじめデザインにあわせたCSSを設定しておくことで、コンテンツ作成者が利用するWebフォントを意識せず効率的に運用できるようにしたのだ。
また、従来は画像として作っていた見出しなどの編集効率が向上しただけでなく、書体を適切に変えることで、読み物コンテンツとしての質も向上できると阪本氏は説明する。
Webフォントが随所に活用されている
課題の1つだった国内外のブランド浸透については、日本語以外にも、英語、中国語（簡体字・繁体字）、韓国語のWebフォントを利用して情報提供している。共通のサイトデザインのなかで文章をローカライズし、統一したブランドイメージで世界に情報を発信する。
モリサワ コーポレートサイトでは、Webフォントを好きな文章で試すことができる書体見本サービスを提供している。リニューアル後は、カタログ的な見本だけでなく、書体専用のデータベースと連携し、入力した文字を任意の書体で表示できる。一方、サイト全体では文字だけでなく画像や動画も活用して、利用シーンを想起させることにもこだわったという。
Webサイトの表現力と作業効率アップを両立
Webフォントを使うことによって、担当者が本来行うべき情報発信に集中できると話す阪本氏。リニューアルの成果として、「滞在時間10秒延長」「直帰率11％改善」「コンバージョン1.9倍」「総ページ数従来比60％」を挙げ、訪問者がしっかりとコンテンツを消費し、サイトの回遊性が高まってきていると説明した。
「Webフォントを使うことで、サイトの見た目だけでなく、検索性の向上にもつながる。見出しやデバイスごとの画像を用意する手間が減るだけでも、サイトの運用効率が上がり、情報発信に集中できる」（阪本氏）