Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yutaro Murakami
January 14, 2021

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

Yutaro Murakami

January 14, 2021
Tweet

More Decks by Yutaro Murakami

Other Decks in Design

Transcript

  1. 本イベントで取り扱う範囲 • 欧文Webタイポグラフィ • 読み手の体験を高める基本の要素 • 記事やLPなど、読ませることがメインの Webデザイン に役立つ 取り扱わない範囲

    • 日本語タイポグラフィ • フォントの詳細なデザイン • グラフィックデザイン 「ウェブタイポグラフィ ─美しく効果的でレスポンシブな欧文タイポグラフィの設計」 リチャード・ラター , 鈴木丈, Bスプラウト 編著 ※本スライド内で上記の書物を出典として表記する際は書物名、著者名を省略しページ数のみを記載する。
  2. • ウェブデザインの95%はタイポグラフィ ◦ カスタマーレビュー、ソーシャルネットワー クの最新情報、産業レポート、 ブログの投稿、電子メール等 ◦ どれも読めなければ意味がない • 感情と身体に作用する

    ◦ 体感上の読む速度がアップ ◦ 皺眉筋の活動低下(目を細めない) ◦ 良い気分を誘発 なぜウェブタイポグラフィが重要なのか Oliver Reichenstein “ウェブデザインの 95%はタイポグラフィだ ” (出典:p.11) 読み手の体験を高める 1
  3. • 読み手はウェブのテキストに様々な方法で アプローチする ◦ セクション間を移動しながら、特定の 情報を探す拾い読み ◦ 興味のある一節をじっくりと読み内容に没頭 • この没入状態の「フロー」こそが、読み手が

    到達する究極の状態 • サッカードの大きさは、書体や字間、単語間、 行間なども大きく影響する 読み手の体験を高める 2 文章を読めるのは眼球がサッカードと呼ばれる素早い動きで テキストの行を飛び飛びで移動するため なぜウェブタイポグラフィが重要なのか (出典:p.19)
  4. • 可読性(readability) ◦ 活字の資料を読む際の理解しやすさと 視覚的な快適さ • 判別性(legibility) ◦ 個々の文字の明確さと解読のしやすさ ◦

    関係するのは書体デザイナーが多い 可読性と判別性 なぜウェブタイポグラフィが重要なのか (出典:p.20) 「アルファベット論考」 , ダミアヌス・モイリス
  5. 1. レファレンス(小) ◦ 但し書き ◦ 参考文献、辞書、データ表示 など 2. リーディング(中) ◦

    見出しも含まれる(本文と違うサイズに 設定する必要がある) 3. ディスプレイ(大) ◦ 感情に訴え雰囲気を決める Q.どの文字サイズを先に決めるべき? 階層とスケール
  6. 1. レファレンス(小) ◦ 但し書き ◦ 参考文献、辞書、データ表示 など 2. リーディング(中) ◦

    見出しも含まれる(本文と違うサイズに 設定する必要がある) 3. ディスプレイ(大) ◦ 感情に訴え雰囲気を決める 正解 階層とスケール
  7. オンラインツールを使用する 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) 階層とスケール
  8. • 文頭と固有名詞以外の単語の初めの アルファベットを大文字にする • 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) リーディング(見出し):タイトルケース
  9. • 膨大な時間をかけてデザインされた書体は 有料のものが多い • 十分な文字セットと機能を備えた無料の フォントもいくつかある ◦ Source Serif, Open

    Sans, Lato, Clear Sans, Merriweather など ◦ 多くの制限があるため不足している スタイルを把握する フォントの選択 無料のフォントには用心 (出典:p.214)
  10. • グリフ ◦ フォントの個々の字形 ◦ 骨格に添えられた各々のパーツ • コントラスト ◦ グリフ内の太いストロークと

    細いストロークの違いの度合い ◦ ストロークの太さに大きな違いがあればコン トラストは高くなる フォントの選択 軸にする書体のディテールを観察 (出典:pp..217-219)
  11. フォントの選択 書体の特徴 Typography – #3 Classification Features (http://www.bcreativebranding.co.uk/typography-3-classification-features/) ダイナミックフォーム ラショナルフォーム

    ジオメトリックフォーム • 幅広のペンで一定の角度 • 滑らかなストローク • 斜めのストレス • 先の尖ったペン • 縦の線のみ太い • フォーマルな印象 • ボールペンのような線 • 一定した数学的形状 • コントラストは低い
  12. • 共通点の多い書体を組み合わせて見た目の 一貫性を維持する • マトリックスを利用する ◦ 同じ縦の列に収まる書体は調和する ◦ 同じ行の書体の組み合わせには注意 ◦

    斜めの組み合わせも効果的 ◦ 類は友を呼ぶが正反対のものも惹かれ合う フォントの選択 構造と形状が似ている書体を組み合わせる (出典:pp.270-271)
  13. • 快適な行間を設定した例からは、「カラー」の均一 さを確認できる • フォントのウェイトや種類によって、 目で確認し心地よい黒みの量を目指す • カラーに影響する4要素 ◦ 書体のデザイン

    ◦ 文字間のスペーシング ◦ 単語間のスペーシング ◦ 行間のスペーシング フォントによるカラーへの影響 Baskerville(左)とAdelle(右) 書体に合わせて行間を変える カラーは縞模様(上)ではなく、均一(下)にする 行間、行の長さ (出典:pp46,-47)
  14. • カラム幅(テキストの行の長さ)の設定は 短すぎず、長すぎず • 活版印刷機が発明されて以来、理想的な 行の長さは66文字で、一般的には 45~75文字の 範囲が好ましい • スマートフォンのような小さい画面では、

    約40文字程度が適切 ジェフリー・ダウディング Finter Points in the Spacing and Arrangement of Type 行の長さの検討 “初期の印刷工は、何世紀にもわたって写字生が 受け入れてきた慣習を受け継いだ。 現代の最高の印刷工がこれを順守しているのは、 その忠実さが最も読みやすく職人的な作品を生み出す という、著しく実用的な理由からである。 ” 行間、行の長さ (出典:p.29)
  15. • ハイフン(-)の4つの用途 a. 複数の単語を繋ぎ1つの意味を持たせる b. 同じ単語が続く場合、繰り返しを省く c. 口ごもる様子を表す d. 行をまたぐ単語の分割

    • 引用の先頭と末尾をはっきりと伝えるため、 正しい引用符を使う( ‘ ’ と “ ”) • イタリックのバーレン()やブラケット [ ]は 使用しない 適切な約物を使用する ディテール (出典:pp.75-78)
  16. • 見出しでは大文字との組み合わせを考え、 ライニング数字を使用する。 • 本文では小文字との組み合わせを考え、 オールドスタイル数字を使用する。 ◦ ライニング数字は形態の特徴(大きさ)か ら、過度な注意を惹きつけてしまう ことがある

    Medium本文の例 スマホアプリ(上)、スマホブラウザ(中)、 PCブラウザ(下) 数字のスタイル ライニング数字(左)とオールドスタイル数字(右) ディテール (出典:pp.124-126)
  17. • アンダーライン使用の際の 6つの注意点 a. 線の太さを調整する b. テキストからの距離を調整する c. 色を変える d.

    ディセンダーを避ける e. ホバー、フォーカス、訪問済みのリンクでス タイルを分ける f. アンダーラインもテキストとともに改行する e. デフォルト(左)、ホバー(真ん中)、フォーカス(右) Appleストアより d. ディセンダーを避ける e. 訪問済みのリンク BBCより リンクテキストのスタイル 2 ディテール (出典:p122)