BtoBサイトデザインを決める、というタイミングで、重要になる要素の一つに「フォント」があります。

言わずと知れたフォントですが一応確認しておきますと、フォントとは文字の形のことです。印刷や画面の表示に使用される、デザインに統一のある一そろいの文字となります。

このフォントですか、BtoBのサイトデザインとしてはどのように採用すべきなのでしょうか。実はフォントには二つの側面があり、それらをそれぞれ吟味して決定しなければなりません。

その、フォントの持つ二側面とは何でしょうか。それは、以下の通りです。

・デザイン的側面
・システム的側面

それぞれどういった基準で選ぶべきなのでしょうか。一つ一つ説明していきます。

デザイン的側面からのフォントの選定方法  

デザイン的側面から見たフォントは、デザイナーからは『声色』だと表現されます。

これはつまり、フォント次第でその文字列の声色のイメージが左右される、という事です。

例えばインパクトが欲しかったり、親しみやすい声色イメージにしたいのであれば、ゴシック体のフォントを使用すべきでしょう。逆に高級感や静かさを出したい、という場合は、一般的に明朝体のフォントが使用される傾向にあります。

基本的にはこの覚え方がオーソドックスな枠組みになります。

・ゴシック体はカジュアルでインパクト
・明朝体は高級で静か

ただ、用途によってそれぞれが二分されて使用されている、かと言うと、実際は少し違うのが現状です。昨今の流れは親しみやすさとインパクトのゴシックが主に使われる傾向にあります。これはご時世を反映している、と見ることも出来ます。全体として、高級志向の時代ではないのですね。

とはいえ、明朝体のBtoBサイトが存在しない、というのではもちろんありません。明朝体は他にも可読性に優れると言った特徴があり、長文を掲載するサイトでは、使用されることもあります。

こういったフォントは、ブランディングに密接につながる要素でもあります。

前述の通り、フォントのデザイン的イメージは「声色」です。大衆向けのブランディングを行う場合に、優雅でしっとりした声色の人を呼び込みに采配はしないでしょう。一方高級志向のブランディングを行う場合に、声が大きくてはっきりした声色の人を案内人に再拝することもしないのが普通です。

このようにブランディングを前提として考えると、適切な声色がどんなものになるのか、といったニュアンスはイメージできるのではないかと思います。

BtoBサイトの場合ですと、高級志向、というステータス的な付加価値は、あまり必要ないのでしょう。とはいえ、BtoCの大安売り、というイメージでブランディングを行うのも何かズレているような気がします。

そのような判断の元、太さの細めなゴシック体、というフォントが、BtoBのサイトで流行しているのでしょう。特別な意図がない限りは、フォントはゴシック体をお勧めします。

システム的側面からのフォントの選定方法  

システム的な側面からフォントを考えるときに、重要なのがBtoBで誰でも、つまりどんなブラウザからでも同じフォントが表示されている必要がある、というのが、真っ先に考えつく注意点です。

というのは、普通のフォントでは、デザイン的に凝ったフォントを選んでも、閲覧者のデバイスによってフォントが変化してしまう、という事が起こるためです。

デザインやブランディングまで考えて決めたフォントが、人によって違うように見えるのでは困ってしまいます。意図したデザインになっていない、という事態は、そのBtoBサイトの成果にも影響を及ぼしかねません。

何故こういうことが起こりうるのかと言うと、サーバーが該当のフォントを有している必要があるためです。

サーバーが該当フォントを有している場合は、指定のフォントで表示することができます。しかしサーバーが有していない場合は、他のフォントで代用されるか、場合によっては文字そのものが表示されないという惨事すら起こりうるのです。

そういった事故を避けるにはどうすべきか、という点で選ばれるのが、Webフォントです。

Webフォントとは、最初からサーバーに用意したフォントを呼び出し、表示することが出来るフォント技術のことを言います。

このWebフォントを使用することで、閲覧者はWebページの情報読み込みの時点で街頭フォントをダウンロードすることが出来ます。そうすることでデザイナーが意図したフォントが、どんなデバイスにも同じように表示される、という訳なのです。

では、実際にはどんなWebフォントが採用されているのでしょうか。

多くの場合は以下のフォントが採用されています。

・Google Fonts
・Adobe Fonts

まずGoogle Fontsについて解説します。

Google Fontsは言わずと知れたGoogleによって開発されたフォントで、無料で導入のしやすい、初心者向けのWebフォントです。

商用利用も自由で、ほどほどに多くのフォントを使用できます。日本語だけでも10近い種類のフォントを使用することが出来ます。

次にAdobe Fontsについて説明します。

Adobe Fontsは個人利用は自由ですが、それ以外で使用する、という場合はAdobe Creative Cloudのライセンスを有している必要があります。

例えば他社からWebページ制作の依頼を受けた場合にAdobe Fontsを使用したい場合は、Adobe Creative Cloudのライセンスを取得する必要があります。

ただし、この両者のフォントを差し置いて、デザイナー人気No.1のフォントが存在します。

それがNoto Sansです。

Noto Sansとは、今しがた取り上げたばかりの二社、GoogleとAdobeが開発したWebフォントになります。

特徴は無償で使用可能。再配布や改変が出来るため、他社の依頼での使用も可能です。ウェイト、つまり太さが7種類もあって表現の幅が広く、商業デザインに問題なく使用できるクオリティの高さ、美しさが指摘されます。

また、日本語にもかなり大幅に対応していて、感じが豊富に含まれる、旧字体や中国語字体にも対応している、スマートフォンやタブレットのモバイルデバイスで読みやすいようにデザインされている、など、様々な点で優位性があります。

特にスマートフォンやタブレットで読みやすいデザインになっている、というのはデザイナーにとって非常にありがたい点であると言えます。デザイナーの立場からすれば、Noto Sansを使用しておけば間違いない、というのが共通認識です。

補足  

フォントについての基礎知識、ということで、いくつか補足したいと思います。

まず、画像と組み合わせるときのテクニックについて。

上記までで、何度かウェイト(太さ)という言葉を使用しました。これはその通り、フォントの太さのことをウェイトと呼ぶ、という事なのですが、太いウェイトはどのように使うのか、というテクニックです。

単刀直入に言うと、ウェイトというのは画像と組み合わせるときに太いものを使用するのがおススメです。理由は、画像は単体で多くの情報を有するため、太いものを使用しなければ画像になじんでしまい、目立たなくなってしまうからです。

また、フォントにまつわる別のテクニックとして、サイトページ一つにあたって、フォント数はだいたい3種類に抑えるのがいい、というものがあります。これは統一性の問題で、あまりフォント数を用意して豪華にしても、種類が多すぎてバラバラな印象になってしまう、というものです。

以上が、補足としてのフォントテクニックになります。豆知識程度に覚えておくのが良いでしょう。

まとめ  

今回は、フォントの基本について、デザイン面、システム面を中心に見ていきました。

デザイン面では、主軸となるのがゴシック体、明朝体です。ゴシック体はカジュアルでインパクトのあるイメージを。明朝体は高級感があり静かなイメージを有すると説明しました。

こう言ったイメージをどのように扱うかは、サイトのブランディングによって左右されます。フォントはデザイン的に「声色」に近い存在ですので、ブランディングが民衆よりならゴシック体、より高級にするなら明朝体、という風に使い分けることが出来ます。

BtoBサイトデザインの昨今の流行を汲むのであれば、ゴシック体がおススメです。

システム面から見たフォントは、Webフォントを使用すべき、という説明をしました。Webフォントでないと、閲覧するデバイスによってフォントが異なった表示になってしまうためです。そうなると、デザイン的に統一性が失われてしまいます。

おススメのWebフォントは、Google FontsやAdobe Fontsなどが挙げられますが、やはり一番はNoto Sansです。

以上が、BtoBサイトで利用できるフォントの基本知識になります。是非ご活用いただければ幸いです。