実際にWebフォントを導入しているWebサイトを見てみよう(前編)

第4回は「Webフォントを導入してみよう!」というテーマで、簡単なサンプルを使ってWebフォントの導入方法を学びました。日本語Webフォントサービスを活用することで、初心者でもHTMLとCSSの基礎知識さえあれば、誰もが簡単にWebフォントを実装できることが理解できたのではないでしょうか。

第5回～第7回では、日本語Webフォントを導入しているWebサイトを一緒に眺めながら、書体選定のコツやWebフォントのメリット/デメリットについて学びましょう。前編では、2つのブログサイトをご紹介します。

坂道には丸明朝体が似合う…

世の中には、いろんな坂がありますよね。乃木坂や襷坂はアイドルとして有名な坂ですが、ここでご紹介する坂は「金沢の坂道」です。

「金澤には坂道もたんとあるがや。」というキャッチコピーではじまる「金沢の坂道」は、石川県金沢市にあるさまざまな坂道の名前の由来や歴史を、地図と写真を交えながら紹介しているコラムサイトです。

まずは、キャッチコピーと記事タイトルの書体をじっくり見てみましょう。スマホでご覧の方は、文字を拡大して観察してください。どんな気付きがあるでしょうか?

• 明朝体のような気がするけど、いつも目にしている明朝体とは雰囲気が違う

• 明朝体の特徴として、普通は横線の右端に三角形の「ウロコ」がつくものの、この書体は丸い

• 拡大して見ると、丸いのは「ウロコ」だけじゃなく「右ハライ」も丸い要素の組み合わせ

金沢の坂道で使われているWebフォントは「丸明オールド」という書体です。ゴシック体に「丸ゴシック体」があるように、明朝体にも「丸明朝体」が存在します。温かみと懐かしさを感じつつも、モダンな書体だと思いませんか。この丸明オールドは、街中のポスターやパッケージデザインで非常によく利用されている書体です。

コラムの本文はシステムフォント(パソコンに標準搭載されているフォント)なので、WindowsではMS Pゴシック、Macならヒラギノ角ゴで表示されているはずです。キャッチコピーや見出しには、風情を感じる丸明オールドを使用しているので、金沢の歴史観や情緒が伝わってくるような感覚になります。金沢の坂道がもつ佇まいにあわせて、この書体を選択したのは絶妙だなと感じました。

そこで、「丸明オールド」と「筑紫明朝」「筑紫アンティーク明朝」「秀英初号明朝」を並べて比較してみましょう。

情緒あふれる金澤の坂道探索マップ

情緒あふれる金澤の坂道探索マップ

情緒あふれる金澤の坂道探索マップ

情緒あふれる金澤の坂道探索マップ

明朝体をいくつか並べてみましたが、比較して観察すると、楽しいですね。どの書体が一番いいか悪いかではなく、すべての書体に個性があります。サイトの特性やコンテンツの内容にあった書体選びは「これだけ学べば大丈夫」という法則があるわけではありません。まずは、それぞれの個性を持ったさまざまな書体があることを理解することからはじめましょう。

例えばフォントには複数の「ウエイト(太さ)」があり、それをうまく活用すればメリハリの利いた読みやすい文章になります。ほかに、かな書体が漢字と比較して小さめに作られたフォントや、漢字のふところ(文字の画によってできる空間)が広いフォント、ふところをキュッと絞ったフォントなどさまざまな種類が存在します。

書体それぞれの特徴を学ぶことで「このWebプロモーションではこのフォントを使おう」というアイデアが膨らむはずです。

明るく元気で、素敵な女性らしさを感じる書体とは…

上の画像にあるキャッチフレーズ「あなたに会いたい!」の書体名がわかりますか? これは「ロックンロール」といいます。

「えっ、それが書体の名前?」

と驚かれるかもしれませんが、はい、そうなんです。点の部分がまんまるで可愛らしく、楽しく元気に「あなたに会いたいです」という感情が伝わってきますよね。

一方で見出し部分には「ロダンマリア」という書体を使っています。このかな書体はシンプルながらも軽快で楽しさがあり、やや太めのウエイト使うことで安定感のある見出しになっていますが、この2つの書体は決して喧嘩していません。

ロックンロールは「ロダン」という書体をベースに制作されたデザイン書体であり、ロダンマリアの漢字は「ロダン」です。つまり、この2つの書体は親戚関係にあたります。また、氏名やプロフィール紹介の部分は「クレー」という書体が使われています。この書体は楷書体や硬筆体と異なり、鉛筆やペンによる手書きの雰囲気を内包しているため、優しさがあります。

Webサイトに限らず、ビジネス文書などでも書体は1～2書体、複数ウエイトで重み付けをする、というのが一般的だと言われています。このサイトでは、欧文書体を含めると5つの書体が同一ページに使われていますが、うるさくありません。親和性のある書体同士を組み合わせたり、アクセントとして異なる種類の書体を利用したりするアプローチは、とりわけ、Webデザインにおいては効果的かもしれませんね。

次回はもう1例のWebサイトと、Webサイトに学ぶ「Webフォントサービスを利用するメリット/デメリット」について解説します。