新しいGoogle Fontsの使い方 — Google Fontsリニューアル [後編]

Source

ニューヨーク在住。
ブランディング、タイポグラフィー、デザイン史などについて執筆。

2016年6月、Google Fontsの新バージョンが公開された。今回のリニューアルについて、デザイン的な視点からはGoogleのデザインチームが直接記事を書いているので、そちらを参照すると良いだろう。例えば新しいカラーオプションだったり、グリッドレイアウトによる柔軟性の向上だったり、フォント選択時のUI変更などについて詳しく書かれている。

本記事ではGoogle Fontsを新旧比較し、もう少し違う視点で踏み込んでみたいと思う。Google Fontsを初めて使う人にも、また既に使い慣れた人にも、どちらにも新しいGoogle Fontsに素早く慣れる手助けとなれればと思う。

フォントをより選びやすく

google fonts collection

以前のGoogle Fontsには“Collection”と呼ばれる機能があり、気に入った書体を一旦入れておける箱みたいなものがあった。大きな青いAdd to Collectionボタンを押せばCollectionにフォントが追加され、後でじっくり検討できるというものだ。しかしあまり見慣れない“Collection”という言葉がユーザーを混乱させてしまう事にGoogleのデザイナーは気付いたらしく、今回その名称をやめたようだ。

新たなGoogle Fontsでは、これまでのCollectionボタンに変わって、シンプルに「+」アイコンに変わった。それをクリックすると、“1 Family Selected”(1書体選択中)と書かれた、最小化されたウインドウが画面下部に現れるようになっている。

今回のリニューアルでの素晴らしい点の1つとして「+」ボタンがある。そこに書体がある限り、近くには必ずそれをキープしておける「+」ボタンがあるのだ。そのため、偶然見つけた「いいな」と思った機会を逃すことなく、本当に簡単に追加することができる。追加した後は+の代わりに「−」アイコンに変わっているので、後になって削除したくなったら、そのアイコンをクリックすればよい。

これが以前のGoogle Fontsでは、書体の追加はトップページのフォント一覧画面からしか行えなかった。そのため、例えばポップアウト表示されるウィンドウの中にある“Common Pairings”(他のフォントとの組み合わせ)を見て気になるフォントがあったとしても、まずその書体の名前を覚えておいて、トップページに戻り、さらにその書体名で新たに検索をかけなければならなかった。さらに言えばポップアウト表示自体も非常にうるさく感じるUXであるため、今回不採用となっている。

フィルターは良くなったが

filter google fonts

以前は左側にあった検索フィルターは、今回は右側に移っている。さらに「>」アイコンを押すと小さく折りたためる様になっていて、例えば全画面でフォント一覧を表示したい時にとても便利だ。再度検索フィルターを使いたい時には「虫眼鏡」アイコンを押せば簡単に元に戻すことができる。

以前のフィルタメニューに慣れていると、ドロップダウンメニューが少なくなっていると感じるだろう。その代わり、フォントカテゴリー(セリフ体、サンセリフ体、その他)はチェックボックスになっているし、フォントスタイルの数 (Number of styles)、文字の太さ (Thickness)、文字の傾き度 (Slant)、文字幅 (Width)などは、スライダーで絞り込めるようになっている。

しかし、このような高機能なスライダーでは、Google Fontsの書体数では物足りなくなってしまう。例えば、書体を太字やイタリック体がある書体に絞り、さらにThickness、Slant、Widthのスライダーを適当に動かし始めると、あっという間に「該当なし (“No fonts found!”) 」と表示されてしまうのだ。

Google Fontsの書体数が少ない理由は[前編]をチェック。

よりインタラクティブに

google fonts features

カラーオプション
最もインパクトのある新機能は、カラーオプションだ。Webサイトの背景色を白以外に、黄、青、黒に変更することができる。これは背景色によって微妙に書体のイメージが変わる時に、感覚的な印象を確認できる便利な機能で、画面右上のアイコンから切り替えられる。

サンプルテキスト
もう1つ便利な機能がある。フォント一覧で表示される各書体には、サンプルのテキストが表示されているが、ユーザーは直接ここを自分が確認したい文章に打ち変えることができる。ただし何故か書体詳細ページにはこの機能は無いようだ。ちなみに書体詳細ページへは、“SEE SPECIMEN”(見本を見る)ボタンから行くことが可能だ。

Popular Pairings
書体詳細ページ内にある”Popular Pairings”(よくあるフォントの組み合わせ)機能では、今見ている書体とよく一緒に使われている書体が一覧で表示されていて、さらにその組み合わせを確認できるものだ。組み合わせを確認する際に、以前のサイトではシンプルに2つの書体サンプルが上下に並べられているだけだったが、新しいサイトでは、一方を見出しとして、もう一方を本文として表示する形になっている。これによって、より実際に近い形で確認、比較ができるようになっている。

無くなってしまった機能
なお、字形を比較する機能はどうやらなくなってしまったらしい。以前のGoogle Fontsでは、Collection内の2つのフォントをオーバーレイ表示することができ、文字の字形の違いを細かく把握する事ができたのだが、無くなってしまった。便利そうではあったのだが、おそらく使われる機会がほとんどなかったのだろう。

情報が分かりやすく

google fonts

関連情報
フォントの関連情報が、書体詳細ページに含まれるようになった。以前のサイトでは、デザイナーの名前に付いたリンクから見ることはできたのだが、残念ながらそのリンク先はデザイナーのGoogle+ページで、正直誰もGoogle+を開きたいとは思っていなかったと思う。新しいサイトではグリッドベースとなった書体詳細ページの右側にデザイナーの略歴に加え、フォントに関する説明もあり、比較にならないほど良くなっている。

書体の利用分布
もう1つ、以前のサイトが提供していた、というか提供しようとしていた情報として、書体の利用分布があった。これは世界でそのフォントがどの程度利用されているかを世界地図上でグラデーションで表示していた。しかしグラデーションが何を意味するのか注釈がなかったり小さい国が見え辛かったりしたため、基本的にあまり意味がなかった。新しいサイトでは、この利用分布が美しい円グラフに変わり、一目瞭然で非常に分かりやすくなっている。

読み込み速度
Googleが提供する最も重要な統計情報は、おそらくページの読み込み速度だろう。これはフォントのfamilyやstyle(太字、斜体、長体など)を選んだ数に応じて上がる(念のためアドバイスすると、familyを選ぶ際に、”一応”という気持ちで全てのstyleを選んではいけない。使うつもりのスタイルだけを選ぶようにしよう)。以前のサイトではスピードメーターで表現されていて、さらに表示される数字はミリ秒単位となっており、あまりイメージし辛かった。新しいサイトでは非常にシンプルに、Slow(遅い)、Moderate(普通)、Fast(速い)の3段階となって、誰でも遅いのか早いのかが分かる。

FEATUREDページをチェックしよう

featured google fonts

以前は無かったFEATUREDというページが、メニューの1つに追加されている。ここでは書体メーカー、Google、個人ユーザーなどがキュレーターとなって、テーマに合わせたオススメのフォントをまとめて紹介してくれている。例えば“タイトルに使えるセリフ体10選”だったり“インパクトのあるグラフィックフォント10選”といったものがある。インスピレーションを求めて、とりあえず眺めてみるのにオススメの場所だ。素晴らしいのは、ここでも、その場でサンプルテキストを入力できて、そのままお気に入りに加えることができるのだ。

[前編] GoogleがWebフォントを無料で提供し続ける理由もチェックしてほしい。