欧文WebTypography初級編：基礎知識の学びと実践

Transcript

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