Webフォント実践ガイド   Google Fontsではじめる 美しく機能的なタイポグラフィ

「Webフォント実践ガイド   Google Fontsではじめる 美しく機能的なタイポグラフィ」のカバー画像
著者
飯塚修平いいつかしゅうへい 著
定価
2,750円(本体2,500円+税10%)
発売日
2025.8.8
判型
特殊判型
頁数
264ページ
ISBN
978-4-297-15056-3 978-4-297-15057-0

概要

フォントの可能性を最大限に引き出すための実践的なガイドブック。

「フォント選びに自信がない」「ウェブサイトやアプリの表示が遅い」あるいは「最新のタイポグラフィ技術に追いつけていない」と感じていませんか?

ウェブサイトやアプリにおいてフォントの選択と最適化は、ユーザー体験の向上や表示速度の改善に直結するため、ウェブデザイナー、フロントエンドエンジニア、ビジュアルデザイナー、マーケター、アプリ制作者など、デジタルコンテンツ制作に携わるすべての人にとって避けて通れない重要な課題です。

本書は文字とフォントの基礎から、書体選び、そして美しく読みやすい文字組みとテキストレイアウトの具体的な手法までを解説します。さらに、Google Fontsを例に最先端のフォントテクノロジー、そしてコミュニケーションを深める絵文字の奥深い世界と、その最適化に至るまで、単なる知識に留まらず、現場で即座に活かせる実践的なノウハウと、一歩先を行く応用テクニックを網羅しています。

日本語のタイポグラフィとウェブフォントの知識を体系的に整理し、プロジェクトで正しく、そして最大限に効果を発揮できるようになることを目指します。

「文字の深い知識を習得したい」「クリエイティブに対し論理的な根拠に基づいた的確なフィードバックをしたい」「最新のウェブタイポグラフィ技術を効率的に学びたい」といった方に最適!

こんな方にオススメ

  • デジタルコンテンツ制作に携わる人(ウェブデザイナー、フロントエンドエンジニア、ビジュアルデザイナー、マーケター、アプリ制作者など)
  • フォントの基礎から現代のテクノロジーまで知りたい人

目次

  • はじめに
  • 本書の構成

PART1 文字とフォントの基礎知識

  • 1.1 コンピューターにおける文字の表現
  • 1.2 書体の分類
    • セリフ体とサンセリフ体/セリフ体の分類/サンセリフ体の分類/その他の分類
  • 1.3 日本語の特徴的な書体
    • 明朝体と楷書/教科書体/UDフォント
  • 1.4 文字のスタイリング
    • ボールド/ウェイト/イタリック

PART2 Google Fontsクイックツアー

  • 2.1 フォントライブラリ(Fonts)
    • Specimen/Type tester/Glyphs/AboutとLicense/Selection
  • 2.2 Notoプロジェクト(Noto)
    • COLUMN 変体仮名のためのフォント
  • 2.3 アイコン(Icons)
  • 2.4 知識コンテンツ(Knowledge)
  • 2.5 Google Fonts API
  • 2.6 アイコンフォント
    • COLUMN Noto CJKの配布形式

PART3 文字組みとテキストレイアウト

  • 3.1 文字のつくり
  • 3.2 フォントサイズ
  • 3.3 行間
    • バーティカルリズム
  • 3.4 行長
  • 3.5 トラッキングとカーニング
    • 和文の文字詰め
    • COLUMN font-feature-settingsの注意点
  • 3.6 行揃え
  • 3.7 扱いに注意が必要な文字たち
    • ハイフンとその仲間たち/クォーテーションマーク

PART4 フォントテクノロジー

  • 4.1 OpenTypeが提供するリッチな表現
    • 合字/スワッシュ/東アジア言語字形/数字/スモールキャップス
  • 4.2 バリアブルフォント
    • バリエーション軸
    • COLUMN オプティカルサイズの歴史

PART5 フォントの使い方とベストプラクティス

  • 5.1 フォントフォールバック
    • 言語設定とフォールバック/フォントファミリーの順序と和欧混植
  • 5.2 和欧混植
    • 欧文と和文の字面の大きさのジャンプ/欧文と和文の間のスペース/欧文と和文のベースラインの違い
  • 5.3 異体字
    • Unicodeコードポイントの違いに見る異体字/CJK互換漢字/JIS規格の変遷に見る異体字/手書き体フォントによる字形の違い
  • 5.4 改行制御
    • 接着する文字/改行機会による制御/読みやすさを考慮した改行制御
  • 5.5 フォントとウェブパフォーマンス
    • FOUTとFOIT/レイアウトシフト/キャッシュ/preconnect/フォントファイルの最適化

PART6 絵文字とその技術

  • 6.1 絵文字の発祥
  • 6.2 代表的な絵文字フォント
  • 6.3 絵文字のデザインとミスコミュニケーション
  • 6.4 絵文字としてのディンバット、異体字セレクタ
  • 6.5 絵文字シーケンス
    • キーキャップシーケンス/モディファイヤーシーケンス/旗シーケンス/ZWJシーケンス/絵文字と性別
  • 6.6 カラーフォントとしての絵文字、文字としての絵文字

付録 BudouX:タイポグラフィと機械学習

    • BudouXのコンセプト/問題の定式化/機械学習システムの概観/訓練データ/特徴量エンジニアリング/AdaBoostアルゴリズム/推論プログラム/さまざまなプログラミング言語、自然言語のサポート
    • COLUMN BudouXの訓練高速化のための工夫

参考資料

    • 参考文献/本文中で言及したGoogle Fonts収録フォント一覧/Google Fonts knowledge
  • 索引
  • おわりに
  • 謝辞
  • Google Fonts Catalog

プロフィール

飯塚修平いいつかしゅうへい

UXエンジニア、クリエイティブ テクノロジスト、工学博士。2017年東京大学大学院工学系研究科技術経営戦略学専攻博士課程修了。国際化を考慮したウェブ フロントエンド開発から機械学習システム構築まで、幅広く能力を発揮するエンジニアとして活動している。著書に『ウェブ最適化ではじめる機械学習』(オライリー・ジャパン)がある。

https://x.com/tushuhei