実際にWebフォントを導入しているWebサイトを見てみよう（後編）

第5回と第6回では、日本語Webフォントを活用しているブログサイトを3つご紹介しました。どのサイトも書体の個性を活かして、サイトの表現の幅を広げていました。第7回では、自治体サイトと企業サイトでの日本語Webフォント導入事例を一緒に見てみましょう。

多言語翻訳に対応し、アクセシビリティに配慮した自治体サイト

まずは、神奈川県小田原市公式ホームページをご紹介します。小田原市といえば、平成の大改修を終えた美しい天守閣が魅力の小田原城が有名で、海外から多くの観光客が訪れています。そのため、小田原市のWebサイトは観光情報が充実しています。

小田原市公式ホームページ
http://www.city.odawara.kanagawa.jp/

また、市民にとって重要な、暮らしや子育てに関する情報、そして行政サービスや災害情報など、生活に密接した情報が掲載されています。公共機関のWebサイトは掲載される情報が多岐にわたっていますので、探しやすくて分かりやすいことが重要です。

小田原市のホームページは、2013年にリニューアルされ、アクセシビリティへの配慮を重視し、画像データによるテキスト表現を限りなく使用しないWebサイトになっています。

画像で作成した文字を限りなく使用しないことで、Google翻訳を活用した、100ヶ国語以上の多言語翻訳に対応しています。もし、トップページの丸いアイコンメニューの文字や、各ページの見出し文字を画像データで表現していたら、各言語に対応した画像の用意が必要となり、多言語翻訳させるのは難しかったはずです。

このような多言語翻訳機能が市のホームページにあると、インフォメーションセンターで大活躍することでしょう。例えば、アラビア語圏の国から来た観光客には、パコソンやスマホで「アラビア語」を選択してあげれば、アラビア語の通訳担当がいなくても観光案内ができるというわけです。

また、文字と背景の色のコントラスト比を高めることでテキストを読みやすくする「文字色変更」機能ボタンを設置しています。もし、画像データで作られた文字だった場合は、複数の色で作成した画像データを用意して、出し分けをする必要があります。

今回、Webフォントを採用したことで、CSS(Cascading Style Sheets)を修正するだけで、テキストの文字色を簡単に切り替えることができるようになったのです。

このサイトでは「ハミング」という書体が、グローバルナビゲーション、アイコン文字、見出しや本文で利用されています。市民にとって身近な存在でありたいという想いから、優しさと品位を感じられる、この書体を採用したのではないでしょうか。

このハミングという書体は、 前回の「ふにろぐ」のプログでも採用されています。明朝体だと少し堅苦しく感じられるけど、ポップ書体では少しくだけた感じになる…。そんなとき、この書体はマッチします。伝えたい内容に適した書体を選ぶことで、市民と自治体の距離感を近づけ、サイトブランディングに貢献している良い例だと思います。

和のテイストには、縦書きの明朝体がよく似合う

次に、今年で創業70年を迎えた呉服専門店「鈴乃屋」のスペシャルサイト「衣のいのち」をご紹介します。鈴乃屋はきもの文化の継承と発展のために貢献する活動にも積極的に取り組んでおり、映画や大河ドラマの衣裳考証でも有名です。

鈴乃屋　衣のいのち
http://www.suzunoya.com/kinu/

そして、このサイトは、2017年2月に開催されたCSSの新たな組版規格を使用し次世代のWebタイポグラフィに挑戦したデザインや取り組みを表彰するためのアワード「たてよこWebアワード」の最優秀賞を受賞しました。

このサイトは、スマートフォンの閲覧に適した縦長のシングルページの作りになっています。スマホファーストのお手本といえます。

でも、今までのWebサイトとは、明らかに何かが違いますよね!

そうです。テキストが縦書きなのです。日本語は本来、縦書きの文化ですし、日本の伝統文化である着物には縦書きの明朝体が良く似合います。

でも、Webサイトは基本的に横書きじゃなかったっけ……?　今まで、どうして縦書きのサイトが少なかったのでしょうか?

ここ数年で、主要ブラウザの最新バージョンが縦書き表示に対応しました。少し専門的なお話になりますが、縦書き、横書きの方向を指定できるCSSプロパティ writing-mode を使うことで、今まで表現が難しかったWeb上での縦書き表現がしやすくなったということなのです。

このWebページを、縦にスクロールしてみてください。さまざまな着物の解説が表示されます。ある程度、スクロールすると、三本線の「ハンバーガーメニュー」が画面の上のほうに現れます。それをクリックすると「ナビゲーションメニュー」が展開されます。

そして、閲覧したい着物名をクリックすると、その商品詳細が表示されます。今までのWebサイトでは、10個の商品があったら10ページがあるというのがスタンダードでした。このサイトの基本構成は縦長のシングルページですが、商品カタログの機能をしっかり提供しています。

「衣のいのち」のサイトをスマホで初めてみたとき、「Webデザインの新しいスタイルがやって来た!」という感覚を覚えました。同時に、「このサイトをパソコンでみたときにどうなっているのだろうか」と気になりました。

パソコンでみると、通常のPCサイトでは見慣れている「グローバルナビゲーション」（Webページ上部等に固定表示される案内メニュー）が、このサイトにはありません。しかし、操作で迷うことはなく、直観的でわかりやすい作りになっています。

縦書きで日本語を表現したいというニーズは以前からありましたが、書籍や雑誌と異なり、Webで縦書きを表現するためには、レイアウトやナビゲーション等に工夫が必要なので、縦書きのWebサイトはまだ多くありません。そんな中、「衣のいのち」は、演出方法を含めて、縦書き表現のたくさんのヒントが含まれている良い事例だと思います

第5回から第7回で、Webフォントを採用した事例を5つ、ご紹介しました。

ここ数年で、たくさんの企業サイトでWebフォントが当たり前のように使われるようになりました。リニューアルの際には、必ずといっていいほど、日本語Webフォントの導入を検討する時代になりました。

そして、日本語Webフォントの選択肢も増えました。オープンソースの無料Webフォントも登場しましたし、日本語に対応したWebフォントサービスが新たに数社で開始されました。日本語Webフォント百花繚乱の年といえるでしょう。