Google Fontsに特化した解説書は初めて！ 日本語のWebフォントの新しい視覚的表現をしっかり学べる解説書 -Webフォント実践ガイド
Post on:2025年8月8日
sponsorsr
※本ページは、アフィリエイト広告を利用しています。
Google Fontsは使うけど、最近のWebフォントの技術に追いつけていない、Webサイトやアプリで効果的に使うにはどうすればよいのか、そんな人にお勧めの解説書を紹介します。
基礎知識はもちろん、書体選び・文字組みなどデザイン的な面、新たなCSSの仕様、FOUTやFOITなどWebフォントのパフォーマンス的な面、絵文字の奥深い世界、機会学習によるタイポグラフィへの応用など、Webフォントとタイポグラフィについてしっかりした知識が身につきます。
本書は本日（8/8）に発売されたばかり！
Webフォント、Google Fontsに関する解説書は初めてだと思います。書体・文字組み・レイアウトといったデザイン的な面、OpenTypeやバリアブルといったフォントのテクノロジー、WebサイトやスマホアプリでWebフォントを使用する方法など、デザイナーやフロントエンジニアをはじめ、デジタルコンテンツの制作に携わるすべての人にお勧めです。特に日本語のWebフォントについての知識と技術が学べるのは、貴重ですね。
Kindle版も同時発売されます！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は6章構成で、Webフォントの基礎知識をはじめ、Webフォントによる見た目、Webフォントの使い方・パフォーマンスなど、技術的な面とデザイン的な面について幅広く学べます。
第1章は「文字とフォントの基礎知識」文字コードや書体・スタイルの種類など、デスクトップやスマホでWebフォントを扱うのに必要な知識を学びます。
本書の大きな特徴は、日本語のWebフォントについてもしっかり解説されていることです。Noto Sans JP、BIZ UDゴシック、UDデジタル教科書体ProN、M PLUS1p、しっぽりアンチックなど、お馴染みの日本語フォントが登場します。
第2章は「Google Fontsクイックツアー」デザイナーやデベロッパーがGoogle Fontsを活用するときに役立つ知識やテクニックが分かります。
Google FontsをWebサイトやスマホアプリで使うときは、Google Fontsからコードをコピペで使えますが、さまざまなパラメータが用意されており、それらについて詳しく解説されています。
また、Google FontsはWebフォントだけではありません。アイコンフォントもかなりの数が揃っています。アイコンはApache 2.0ライセンスなので、Webサイトやスマホアプリだけでなく、Figmaや印刷物などさまざまな媒体で利用できます。
第3章は「文字組みとテキストレイアウト」この章はデザイナーパートですね。Webフォントを使用して、美しく読みやすいテキストを組み上で必要な知識と考え方を学びます。実装するデベロッパーの人も必読です。
第4章は「フォントテクノロジー」デジタルフォントの最新の情報がまとめられています。デジタルフォントのスタンダードであるOpenTypeフォントで使えるさまざまな機能、可変するバリアブルフォントなど、クリエイティブな機能が網羅されています。
たとえば、OpenTypaの機能を使用すれば、葛の文字もJIS2004字形（左）とJIS90字形（右）を使い分けることもできます。
日本語のバリアブルフォントも最近では、かなり増えてきました。源ノ明朝、Noto Sans Japanese、M PLUS 1、牟礼町などがGoogle Fontsで利用できます。
第5章は「Webフォントの使い方とベストプラクティス」この章はデベロッパーのパートですね。
CSSでfont-familyにフォント名を記述するときは、最初に記述されたものから順に優先度が高くなります。このメカニズムを利用して、複数のフォント名を記述して欧文フォントと和文を組み合わせて、和欧混植にするのが一般的です。また混植にした際に和文と欧文のサイズが合っていない、位置がずれているといったこともCSSに手を加えるだけで解決します。
またWebフォントを使用する上で、FOUTやFOITというワードを聞いたことがあると思います。これはWebフォントを使う際に無視できないパフォーマンスに関するもので、できるだけ高速にWebフォントを読み込ませる必要があります。
以下の記事を参考にどうぞ。
最後の第6章は「絵文字とその技術」古くは記号を組み合わせた絵文字から、最近ではカラフルでかわいい絵文字がたくさんリリースされています。最近の絵文字には「絵文字シーケンス」という機能を使って、さまざまなバリエーションを表現できます。たとえば、人物の絵文字を男性・女性にしたり、肌の色を変えたり、数字をキーボード風にしたり、文字を国旗にしたりできます。
色を変えたり、方向を変えたり、組み合わせて新しい絵文字を作ったりとさまざまなシーケンスが用意されています。
巻末には付録として「タイポグラフィと機械学習」機械学習技術が美しいタイポグラフィにどのように活用されているのか裏側の仕組みまで詳しく解説されています。
Webフォント実践ガイドの目次
Webフォント実践ガイドの目次
Webフォント実践ガイドの目次
フォントについての基礎知識から、文字コード、OpenTypeのさまざまな機能、バリアブルフォント、Webフォントのパフォーマンス、さらには進化している絵文字の使い方など、知らなかったこともかなりあり、非常に勉強になる解説書でした。コードをコピペするだけで利用できるGoogle Fontsですが、こういった知識やテクニックが分かるとさらに活用できると思います。
献本の御礼
最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
