Webフォントデザインアワード 2013

日本語WebフォントによるWebサイト表現と技術、
アイデアのためのコンペティション。

ケーススタディ

クオリティをさらに高める「文字詰め」

FONTPLUSやTypeSquareといった本格的なサービスの登場により、日本語のWebフォントは急速に普及し、この1 年ほどで導入事例も増えてきた。日本語Webフォントの実際の導入事例をもとに活用のポイントやアイデアを学ぶ本連載の第2回目は、文章を美しく見せる文字詰めについてみていくことにしよう。

Text:山田晃輔

「Dramatic Yotsukaido」

(Karappo Inc.)
http://www.dramaticyotsukaido.com/

Sample
2013年11月に選出された、日本語Webフォントによる表現と技術のためのコンペティション「Webフォントデザインアワード2013」において一般部門準グランプリを受賞。優しい書体でゆるい印象を与えながらも、細かく動的な字間調整が行われている。

千葉県四街道市の魅力を優しく語りかける

 千葉県の北部に位置し、赤ちゃんからお年寄りまで約9万の人々が暮らす四街道市。そんな四街道市の日常から溢れ出す色とりどりの魅力を、実際に住む四街道の人々と共に発信する市のプロモーションサイトが「ドラマチック四街道プロジェクト」だ。公益財団法人 四街道市地域振興財団と四街道市が主となって運営しており、本サイト以外にもTwitterやFacebookといったソーシャルネットワークを用いて展開している。
 ドラマチック四街道プロジェクトでは、現在4つのプロジェクトが公開されている。実際に四街道市で暮らす市民の顔や、何気ない生活の様子が身近に見ることができる映像集「ムービー」、四街道に対する想いをスケッチブックに書き、日めくりカレンダーとして公開する「みんなでカレンダープロジェクト」、小中学生を対象に夏休みの思い出の作文を募集した「夏休みドラマ作文&フォト」、そして四街道から生まれたオリジナルのキャラクター「よつぼくん」もプロジェクトの一つだ。
 そんな四街道市について、もっと知りたいと考える外部の人々だけではなく、さまざまな年齢層の市民までもが閲覧する市のプロモーションを担う重要なサイトとなっている。
 Webフォントを導入したことで、サイト全体の雰囲気づくりと更新のしやすさの両立ができたと制作者は語る。今回は、サイト全体で使われている書体「筑紫丸ゴシック」と、オリジナルのJavaScriptで実現した「カーニング」の2つを中心に、Webフォント活用のポイントを解説していこう。

Sample
レイアウトは最大でも2カラム。非常にシンプルなグリッド設計となっている

Sample
Webフォントのみならず、円の部分はborder-radius を用いるなどCSS3を最大限に活用し、画像をできるだけ使わない工夫をしている

使用書体を限定した、サイトの雰囲気

 ソフトバンク・テクノロジー社のWebフォントサービス「FONTPLUS」を導入し、使われているWebフォントはフォントワークスのフラッグシップである筑紫書体シリーズの丸ゴシック体「筑紫A 丸ゴシック」ファミリーのみ。朗らかで優しい印象を与え、サイトで使われている写真にぴったりのイメージだ。

Sample
ナビゲーション部分にも画像は使わずに、Webフォントが使われている

Sample
筑紫シリーズは人気書体の一つ。「筑紫丸Aゴシック」にはオールドスタイルタイプの「筑紫丸Bゴシック」も存在する

独自で開発したJSで字間を調整

 見出し部分には、CSSのmarginを用いた独自の字間調整のJavaScriptが使われている。特にひらがなやカタカナなど、文字と文字の間に空間が多い文字を詰めることができるため、文字列の見栄えが非常に良くなる。
 シンプルなデザインのサイトは、字詰めのような細かい部分を徹底的にこだわることで、より完成度の高いサイトになるだろう。
 なお、このJavaScriptはGitHubで公開されており、今後も更新される予定だ。

Sample
デフォルトの状態(上)と、字間が調整された状態(下)の比較

Sample
外部のjsonファイルで左右のマージン値を管理している

Webフォントで文字詰めができる! FONTPLUSが「文字詰め機能」を提供

 ソフトバンク・テクノロジー社のWebフォントサービス「FONTPLUS」は1月中旬、配信側で文字と文字の間の空間を一括で取り除くことのできる「文字詰め機能」を公開した。これにより印刷物では当たり前に行われてきた“文字詰め”がWebデザインでも簡単に実現できるようになった。文字間を一括で調整できるという非常に便利な機能だ。

Sample
文字詰めの機能は「詳細設定」の「文字間の余白削除」から簡単に設定することができる

Sample
文字詰めについては同社が運営するFONTPLUS TIPS内でも詳しく解説されている

Web Designing2014年3月号より転載)

LINEで送る

事例1はこちら »
事例3はこちら »