ワンパクの阿部さんと稲葉さんに、コミュニケーション改善のためのWebデザインの秘訣を聞いた【Webフォント見本帳付き】

企業の顧客コミュニケーションにおけるデザインの重要性は、時代が変わっても変わらない。コミュニケーションの意図に合った良いデザインを突き詰めることで、受け手の感じる印象が大きく変わり、ブランド向上にも寄与する。

ただし、それをどのコミュニケーションチャネルでどこまで突き詰められるかは、時代とともに変わっている。

スマートフォン全盛時代、そしてオウンドメディアのようなコンテンツを企業が重視する時代のWebサイトにおけるデザインにおいて、重要度を増しているものとして、Webフォントがある。

もともとHTMLは情報を構造化するための言語であって、デザインするための言語ではありませんでしたが、CSSが出てきて、HTML5になっていくなかで、Webデザインでもグラフィックデザインに近いデザインができるようになってきた。

ただし、しっかりとしたデザインを行うためには、色や写真などを選ぶのと同じように、フォントを選ぶというプロセスが必要だ

優れたWebサイトを数多く手がけているワンパクの阿部氏は、CSSやHTML5で表現の自由度が増してきたなかで、Webフォントの必要性が高まってきていると話す。しかし、Webフォントの存在は知っていても、実際にはWebフォントを使っている企業やデザイン会社はまだまだ少ないのが現状だ。

以前は、表示も遅く、価格がわかりづらかったWebフォントだが、ハードウェアやソフトウェアの進化からスムーズな表示が可能となり、価格プランも明確化されて、導入しやすくなってきている。そこで環境が整ってきたなかで、Webフォントを使うことでどのようなメリットがあるのかについて考えていこう。また、実際に20書体のWebフォントを適用したサンプルを見て、Webフォントのメリットを実感しよう。

どのデバイスでも統一したデザインで読みやすくする

これまでのWebデザインでは、デバイスが持つデフォルトフォントを使って文字を表示させるため、見出しなどの目立たせたい部分は画像を使って表現することも多かった。しかし、Webフォントを使うことによって、デフォルトフォントの制限を受けずにデザインすることが可能となるだけでなく、テキストデータを使うため、検索エンジンに内容を伝えることができる。

レスポンシブWebデザインが主流となって、Webフォントのメリットは大きくなってきていると思います

ワンパクの稲葉氏は、デザインが自由できることだけでなく、PCやスマートフォン、タブレットなどのさまざまなデバイスで、統一したデザインにできることがWebフォントのメリットだと話す。Webフォントを使うことで、異なるデバイスでも行間や字送りを同じようにデザインすることができ、文字組みが崩れたりしなくなり、文字のジャンプ率（大小比）の計算もしやすくなるという。

株式会社ワンパク 代表取締役CEO 阿部 淳也氏（左）と
株式会社ワンパク アートディレクター 稲葉 政文氏（右）

阿部氏によれば、Webフォントは企業サイトや、文章を読ませるメディア系のサイトに向いているという。Webフォントを使ったほうが圧倒的に読みやすく、多くの企業がWebサイトに求めるコミュニケーションの改善に貢献できるからだ。たとえば、オウンドメディアは文章が多いので、読みやすさを意識してデザインしたりWebフォントをうまく使ったりすると、より効果出ると考えられる。

モバイルユーザーが増える中で、モバイルファーストで読みやすく、ユーザービリティの高いサイトを作るためにも、Webフォントは有効となる。

また、稲葉氏も、コーポレートサイトでブランディングを考える際には、コーポレートカラーや画像だけでなく、コーポレートフォントも意識し、Webでもビジュアルを統一して表現することが重要だと話している。

費用対効果（ROI）をどのように考えるか

一方で、なぜ文字やフォントにお金を使わなければならないか、費用対効果は出るのかと考える人も出てくることも考えられる。しかし、阿部氏は、次のような考え方が重要だと話す。

見た目をよくするためだけにWebフォントを使うのではなく、その先のお客様にメリットがあるから使うのです。

コミュニケーション改善や顧客満足度の改善は、定量的に金額に換算するものではなく、質の問題です。

Webフォントを使った場合と、使っていない場合のデザインを見せて、比較すれば、一目瞭然だと思います

Webフォント導入ということ単体でROIを考えるのではなく、Webサイトを通じたコミュニケーション、さらにはオフラインも含めたコミュニケーションのブランディングをいかに実現するかという視点に切り替えることが重要だとも話す。それをより良く実現する手段の1つとしてWebフォントがあるからだ。

Webフォントを使っていない場合

ブラウザーなどで拡大した場合、画像よりもWebフォントの方がキレイに見える

また、画像を作成する工数を減らし、内容の修正なども簡単に行えるというメリットもある。Webフォントを利用することで、画像を作成したり、作り直す手間が省けるため、作業の効率化とコスト削減のメリットが生まれる。また、定量的にコンバージョン率などの効果を計ることは難しいが、画像をテキストにすることによるSEO向上の効果も見込まれる。

Webフォントは従量課金でコストが見積もりにくい？

一方で、稲葉氏は次のように説明する。

WebフォントはPVごとの従量課金制で提供されるため、キャンペーンやプロモーションサイトなどの流入数が読みづらいサイトには向いていない

では、テレビなどの他メディアで紹介されるなど、コーポレートサイトや読み物サイトに突発的にPVが集中された場合も、余分なコストの支払いが発生してしまうのだろうか。

Webフォント「TypeSquare」を提供するモリサワによれば、恒常的な契約とは異なる高いPVが突発的に発生しても、すぐに課金が増えてしまうことはないとのことだ。たとえば、1年契約の場合は、再契約の際にPVを見直し、イレギュラーなトラフィックが発生した場合は柔軟に対応し、調整してくれるという。

また、デザイナーの多くが使っているフォント製品「MORISAWA PASSPORT」を持っているのであれば、1,000万PVまでは追加料金なくTypeSquareを使えるプランも用意されている。これを利用できれば、テスト環境などで試すこともでき、導入前にデザインにどのような効果が出るのかを見てから導入することも可能となる。

まずはWebフォントでデザインがどう変わるかを試してみる

TypeSquareのサイトでは、URLを指定することによって、自分のサイトにWebフォントを使った場合にどのように変化するかをシミュレーションできる「TypeSquare Web Font Tryout」が提供されている。さまざまなフォントを切り替えて試すことができるので、Webフォントの効果を試し、導入の参考にするとよいだろう。

デバイスごとのデザインを統一して、ユーザビリティ向上とコミュニケーション改善を図り、グラフィックデザインと同じ感覚で、印刷物などの他の制作物とWebのブランディングを揃えるためにもWebフォントは有効だ。しかし、一方でまだまだ導入が進んでいないなかでは、決定者やクライアントにWebフォントの必要性や効果を理解してもらう必要もある。最後に、実際に20書体のWebフォントを適用したサンプルを紹介するので、参考にしてほしい。

［特製PDFダウンロード］
Webフォント見本帳　―　モリサワTypeSquare

記事で紹介した、モリサワ TypeSquare 20書体のWebフォントを適用したサンプルPDF「Webフォント見本帳　―　モリサワTypeSqure」を下記のページでダウンロードできます。

• Webフォント見本帳　―　モリサワTypeSquare PDF

ユーザーコミュニケーション改善には、文字は不可欠