Slide 1
Slide 1 text
欧文 Web Typography
初級編
基礎知識の学びと実践
Slide 2
Slide 2 text
自己紹介
村上雄太郎（ムラカミユウタロウ）
株式会社ゆめみ インタラクションデザイナー
2017年にミャンマーで事業を展開するスタートアップに入社。現地
人向けメディアやサービスの開発・立ち上げに従事。
2019年に帰
国し株式会社ゆめみにインタラクションデザイナーとして入社。ソフ
トウェアのコンセプト策定や情報設計などを中心に携わる。
西川楓（ニシカワカエデ）
株式会社ゆめみ UX/UIデザイナー
大学卒業後、独学でデザインを学び
2020年に新卒で株式会社ゆ
めみに入社。UX/UIデザイナーとしてソフトウェアのコンセプト策定
やUIデザインなどを中心に携わる。
Slide 3
Slide 3 text
本イベントで取り扱う範囲
● 欧文Webタイポグラフィ
● 読み手の体験を高める基本の要素
● 記事やLPなど、読ませることがメインの Webデザイン
に役立つ
取り扱わない範囲
● 日本語タイポグラフィ
● フォントの詳細なデザイン
● グラフィックデザイン
「ウェブタイポグラフィ ─美しく効果的でレスポンシブな欧文タイポグラフィの設計」
リチャード・ラター , 鈴木丈, Bスプラウト 編著
※本スライド内で上記の書物を出典として表記する際は書物名、著者名を省略しページ数のみを記載する。
Slide 4
Slide 4 text
● チェックイン
● なぜウェブタイポグラフィが重要なのか
● 文字サイズ（階層とスケール）
● フォントの選択
● 行間、行の長さ
● ディテール（イタリック、数字、リンクなど）
● Figmaを使った実践問題
目次
Slide 5
Slide 5 text
チェックイン
Slide 6
Slide 6 text
なぜウェブタイポグラフィが重要なのか
Slide 7
Slide 7 text
タイポグラフィの役割
● タイポグラフィは、没入して読んだり、情報を求め
て流し読みしたりするための理想的な状態を作り
出す
● 判別性と可読性を保証しながら、トーンと
メッセージを尊重し、構造やほかの要素との
関係性を明確にする
なぜウェブタイポグラフィが重要なのか
Emil Ruder
“タイポグラフィには文字によって情報を伝達する
という明白な義務がある。読むことができない印刷物は、目的を
失った制作物である ”
（出典：p.12）
Slide 8
Slide 8 text
● ウェブデザインの95%はタイポグラフィ
○ カスタマーレビュー、ソーシャルネットワー
クの最新情報、産業レポート、
ブログの投稿、電子メール等
○ どれも読めなければ意味がない
● 感情と身体に作用する
○ 体感上の読む速度がアップ
○ 皺眉筋の活動低下（目を細めない）
○ 良い気分を誘発
なぜウェブタイポグラフィが重要なのか
Oliver Reichenstein
“ウェブデザインの 95%はタイポグラフィだ ”
（出典：p.11）
読み手の体験を高める 1
Slide 9
Slide 9 text
● 読み手はウェブのテキストに様々な方法で
アプローチする
○ セクション間を移動しながら、特定の
情報を探す拾い読み
○ 興味のある一節をじっくりと読み内容に没頭
● この没入状態の「フロー」こそが、読み手が
到達する究極の状態
● サッカードの大きさは、書体や字間、単語間、
行間なども大きく影響する
読み手の体験を高める 2
文章を読めるのは眼球がサッカードと呼ばれる素早い動きで
テキストの行を飛び飛びで移動するため
なぜウェブタイポグラフィが重要なのか
（出典：p.19）
Slide 10
Slide 10 text
● 可読性（readability）
○ 活字の資料を読む際の理解しやすさと
視覚的な快適さ
● 判別性（legibility）
○ 個々の文字の明確さと解読のしやすさ
○ 関係するのは書体デザイナーが多い
可読性と判別性
なぜウェブタイポグラフィが重要なのか
（出典：p.20） 「アルファベット論考」 , ダミアヌス・モイリス
Slide 11
Slide 11 text
● 可読性（readability）
○ 活字の資料を読む際の理解しやすさと
視覚的な快適さ
● 可読性は文字サイズ、行間、カラム幅の 3つの要
素からできている
今回の対象
なぜウェブタイポグラフィが重要なのか
（出典：p.28）
Slide 12
Slide 12 text
文字サイズ（階層とスケール）
Slide 13
Slide 13 text
まずは階層と構成を理解する
● コンテンツの特徴は？
● 何段階の見出しが必要？
● 注釈やキャプションはある？
● 但し書きはある？
階層とスケール
（出典：p..92）
Slide 14
Slide 14 text
● 全体を通じて一貫するサイズを使用
● タイプスケール
● 16世紀、活字サイズのセットを標準化
● 現代ではプリセット
文字サイズはスケールを使って決める
Material Design Type scale generator
(https://material.io/design/typography/the-type-system.html#type-scale)
階層とスケール
（出典：p.93）
Slide 15
Slide 15 text
1. レファレンス（小）
○ 但し書き
○ 参考文献、辞書、データ表示 など
2. リーディング（中）
○ 見出しも含まれる（本文と違うサイズに
設定する必要がある）
3. ディスプレイ（大）
○ 感情に訴え雰囲気を決める
Q.どの文字サイズを先に決めるべき？
階層とスケール
Slide 16
Slide 16 text
1. レファレンス（小）
○ 但し書き
○ 参考文献、辞書、データ表示 など
2. リーディング（中）
○ 見出しも含まれる（本文と違うサイズに
設定する必要がある）
3. ディスプレイ（大）
○ 感情に訴え雰囲気を決める
正解
階層とスケール
Slide 17
Slide 17 text
最も小さいサイズを先に決める
1. レファレンス（小）
2. リーディング（中）
3. ディスプレイ（大）
最小の文字サイズを最後に決めてしまうと小さすぎて
読めなくなった場合、スケールを始めからもう一度決
め直さなければいけなくなる。
7 Conversational Habits That Reveal Someone’s True Character
(https://medium.com/curious/7-conversational-habits-that-reveal-s
omeones-true-character-de4af566e296)
階層とスケール
（出典：p.95）
Slide 18
Slide 18 text
オンラインツールを使用する
Material DesignのType scale generator
● 10段階のスケール
● 選択したGoogleフォントに合うスケールを
計算してくれる
● 例) Noto Sans JP の場合レファレンスの
サイズは12px、本文のサイズは16px
Material Design Type scale generator
(https://material.io/design/typography/the-type-system.html#type-
scale)
階層とスケール
Slide 19
Slide 19 text
● 下付き文字（subscript）と上付き文字
（superscript）は下、また上に配置される
小さい数字
● 化学式や数学の計算式などにも特殊な状況で
利用される
レファレンス（注釈）の書き方
階層とスケール
（出典：p.127）
Slide 20
Slide 20 text
1. 脚注、後注 2. 傍注 3. ポップアップ
注釈の書き方
階層とスケール
（出典：pp.131-132）
Slide 21
Slide 21 text
● 通常の英文を書くように最初の単語と固有名詞の
最初の文字のみを大文字
● ただしピリオドは付けない
● カジュアルな場面で使用されることが多い
● 文頭以外大文字が使われていないため、読み手
は途切れることなくスムーズに読むことができる
階層とスケール
リーディング（見出し）：センテンスケース
Common Title Capitalization Rules
(https://grammar.yourdictionary.com/capitalization/rules-for-capitalization-in-titl
es.html)
Slide 22
Slide 22 text
● 文頭と固有名詞以外の単語の初めの
アルファベットを大文字にする
● and や in などの等位接続詞や前置詞などは
全て小文字
● 全体のバランスがとれる
● フォーマルな場面で使われることが多い
階層とスケール
Headline Capitalization for UX: Title Case vs. Sentence Case
(https://www.herosmyth.com/article/headline-capitalization-ux-title-case-vs-sent
ence-case)
リーディング（見出し）：タイトルケース
Slide 23
Slide 23 text
フォントの選択
Slide 24
Slide 24 text
1. フォントの雰囲気がサイトに適している
2. 必要な文字や約物が揃っている
3. 無料で使用できるフォントである
Q.フォントを決める際に最初に考慮すべきことは？
階層とスケール
Slide 25
Slide 25 text
1. フォントの雰囲気がサイトに適している
2. 必要な文字や約物が揃っている
3. 無料で使用できるフォントである
Q.フォントを決める際に最初に考慮すべきことは？
階層とスケール
Slide 26
Slide 26 text
● 感覚的に合うフォントをすぐに選択する前に、
読み手のニーズを考慮する
● 目的と要件を理解する
フォントの選択
kontrapunktcom
(https://www.instagram.com/kontrapunktcom/?hl=ja)
客観的なニーズから考慮
（出典：pp.210-211）
Slide 27
Slide 27 text
● 必要な文字、アクセント、約物などを調べる
● フォントファミリーで必要なスタイルが揃っている
かを確認
● 特殊効果を備えているか確認
● 一部が別の書体でレンダリングされてしまった例
（右図）
悪い例）カタルーニャ語の àが別の書体でレンダリング
フォントの選択
必要な文字が揃っているかを考慮
（出典：p.211）
Slide 28
Slide 28 text
● 膨大な時間をかけてデザインされた書体は
有料のものが多い
● 十分な文字セットと機能を備えた無料の
フォントもいくつかある
○ Source Serif, Open Sans, Lato, Clear Sans,
Merriweather など
○ 多くの制限があるため不足している
スタイルを把握する
フォントの選択
無料のフォントには用心
（出典：p.214）
Slide 29
Slide 29 text
● コンテンツの階層や意味がより明確に伝わる
● 理由のある書体の組み合わせ
● 多くても2つか3つの種類
● 軸にする書体を一つ選ぶ（ディスプレイ用でも、
リーディング用でも構わない）
フォントの選択
書体を組み合わせる
（出典：p.269）
Slide 30
Slide 30 text
● グリフ
○ フォントの個々の字形
○ 骨格に添えられた各々のパーツ
● コントラスト
○ グリフ内の太いストロークと
細いストロークの違いの度合い
○ ストロークの太さに大きな違いがあればコン
トラストは高くなる
フォントの選択
軸にする書体のディテールを観察
（出典：pp..217-219）
Slide 31
Slide 31 text
フォントの選択
書体の特徴
Typography – #3 Classification Features
（http://www.bcreativebranding.co.uk/typography-3-classification-features/）
ダイナミックフォーム ラショナルフォーム ジオメトリックフォーム
● 幅広のペンで一定の角度
● 滑らかなストローク
● 斜めのストレス
● 先の尖ったペン
● 縦の線のみ太い
● フォーマルな印象
● ボールペンのような線
● 一定した数学的形状
● コントラストは低い
Slide 32
Slide 32 text
● 共通点の多い書体を組み合わせて見た目の
一貫性を維持する
● マトリックスを利用する
○ 同じ縦の列に収まる書体は調和する
○ 同じ行の書体の組み合わせには注意
○ 斜めの組み合わせも効果的
○ 類は友を呼ぶが正反対のものも惹かれ合う
フォントの選択
構造と形状が似ている書体を組み合わせる
（出典：pp.270-271）
Slide 33
Slide 33 text
行間、行の長さ
Slide 34
Slide 34 text
レディングの紹介
● 活版印刷の時代に、行を分けるために使用
された細長い鉛（lead）の板から生まれた言葉
● 鉛のサイズではなく、各行のベースラインからベー
スラインまでの距離を測ったもの
Urban Cottage Industries
(https://www.urbancottageindustries.com/blog/gift-vouchers/)
行間、行の長さ
（出典：pp42-43）
Slide 35
Slide 35 text
行間が狭すぎると...
● 正確かつ快適に次の行に移れない
● 一度に2行が目に入ってきてしまう
● 集中力が低下、読む速度が遅くなる
行間、行の長さ
文字サイズ： 36pt 行間：100%
（出典：p.41）
Slide 36
Slide 36 text
行間が広すぎると...
● 画面スペースを有効活用できない
● 目を疲れさせる
● 正しい行を追えなくなる
● 読む速度が遅くなる
行間、行の長さ
文字サイズ： 36pt 行間：220%
（出典：p.42）
Slide 37
Slide 37 text
● 行間が正確に読める程度に空いていると、
読み手は効率的に読めるようになる
● 画面上では、行間（line-height）を1.4に
設定することを推奨している
読みやすさを配慮した行間設定
行間、行の長さ
文字サイズ： 36pt 行間：150%
（出典：p.42, 46）
Slide 38
Slide 38 text
● 快適な行間を設定した例からは、「カラー」の均一
さを確認できる
● フォントのウェイトや種類によって、
目で確認し心地よい黒みの量を目指す
● カラーに影響する4要素
○ 書体のデザイン
○ 文字間のスペーシング
○ 単語間のスペーシング
○ 行間のスペーシング
フォントによるカラーへの影響
Baskerville（左）とAdelle（右）
書体に合わせて行間を変える
カラーは縞模様（上）ではなく、均一（下）にする
行間、行の長さ
（出典：pp46,-47）
Slide 39
Slide 39 text
1. 30~45文字
2. 45~75文字
3. 75~80文字
Q.理想的な行の長さ（文字数）はどれくらいか？
行間、行の長さ
Slide 40
Slide 40 text
1. 30~45文字
2. 45~75文字
3. 75~80文字
正解
行間、行の長さ
Slide 41
Slide 41 text
● カラム幅（テキストの行の長さ）の設定は
短すぎず、長すぎず
● 活版印刷機が発明されて以来、理想的な
行の長さは66文字で、一般的には 45~75文字の
範囲が好ましい
● スマートフォンのような小さい画面では、
約40文字程度が適切
ジェフリー・ダウディング
Finter Points in the Spacing and Arrangement of Type
行の長さの検討
“初期の印刷工は、何世紀にもわたって写字生が
受け入れてきた慣習を受け継いだ。
現代の最高の印刷工がこれを順守しているのは、
その忠実さが最も読みやすく職人的な作品を生み出す
という、著しく実用的な理由からである。
”
行間、行の長さ
（出典：p.29）
Slide 42
Slide 42 text
ディテール
Slide 43
Slide 43 text
● ハイフン（-）の4つの用途
a. 複数の単語を繋ぎ1つの意味を持たせる
b. 同じ単語が続く場合、繰り返しを省く
c. 口ごもる様子を表す
d. 行をまたぐ単語の分割
● 引用の先頭と末尾をはっきりと伝えるため、
正しい引用符を使う（ ‘ ’ と “ ”）
● イタリックのバーレン（）やブラケット [ ]は
使用しない
適切な約物を使用する
ディテール
（出典：pp.75-78）
Slide 44
Slide 44 text
1. ライニング数字
2. オールドスタイル数字
Q.本文で使用される数字はどちらを使用すべきか？
ディテール
Slide 45
Slide 45 text
正解
ディテール
1. ライニング数字
2. オールドスタイル数字
Slide 46
Slide 46 text
● 見出しでは大文字との組み合わせを考え、
ライニング数字を使用する。
● 本文では小文字との組み合わせを考え、
オールドスタイル数字を使用する。
○ ライニング数字は形態の特徴（大きさ）か
ら、過度な注意を惹きつけてしまう
ことがある
Medium本文の例
スマホアプリ（上）、スマホブラウザ（中）、 PCブラウザ（下）
数字のスタイル
ライニング数字（左）とオールドスタイル数字（右）
ディテール
（出典：pp.124-126）
Slide 47
Slide 47 text
● テキストは左揃え、数字は右揃え、見出しはデー
タに揃える
● 小数点に揃える
● 数字で構成されたテーブルには、
等幅ライニング数字を使用する（財務状況や
時刻表等）
テーブル上の数字
テーブルの例
ディテール
（出典：pp.134-137）
Slide 48
Slide 48 text
● インラインリンク（本文内のリンク）では、
「読み手がスムーズに読み進められること」と
「リンクの存在を示すことの妥協点」を探す
必要がある
● アンダーラインはWebでは慣習的に使用されてお
り、色覚異常を持つ方も識別できるため
第一候補に検討すべきだが、読み手を妨げない
ように扱う必要がある
リンクテキストのスタイル 1
BBC
Medium
Dropbox Paper
Notion
ディテール
（出典：pp.120- 121）
Slide 49
Slide 49 text
● アンダーライン使用の際の 6つの注意点
a. 線の太さを調整する
b. テキストからの距離を調整する
c. 色を変える
d. ディセンダーを避ける
e. ホバー、フォーカス、訪問済みのリンクでス
タイルを分ける
f. アンダーラインもテキストとともに改行する
e. デフォルト（左）、ホバー（真ん中）、フォーカス（右）
Appleストアより
d. ディセンダーを避ける
e. 訪問済みのリンク
BBCより
リンクテキストのスタイル 2
ディテール
（出典：p122）
Slide 50
Slide 50 text
実践問題：英語のポートフォリオを作ろう
ディテール
海外転職や海外のプロジェクトに参加することを想定してFigmaでテンプレート素材を
使用し英語のポートフォリオを作ってみましょう！