1. タイポグラフィとは
タイポグラフィとは「読みやすいフォントで、適切な位置に文字をレイアウトしていくこと」です。
「ウェブデザインの95%はタイポグラフィである」という名言があるほど重要とされています。
ウェブ上の情報のほとんどは文字によって構成されています。そのためプロのWEBデザイナーになるにはしっかりとしたタイポグラフィの訓練を受けている必要があります。
タイポグラフィは以下のような様々な要素から構成されています。
==
- サイズ
- 行間
- カラー
- フォント
- ウェイト
- ジャンプ率
==
などです。
それぞれの要素をどうするかによってユーザーに与えられる印象が大きく変わります。
2. 読みやすい文字を意識する
左は行間が詰まりすぎており読みづらいですが、右側は行間が適切で読みやすいですね。
行間だけでもこれだけ印象が変わります。
少しの差で大きく印象を変えられるのがタイポグラフィのすごさです。
3. ジャンプ率を利用し効果的なデザインを作ろう
例えば見出しが48pxで本文が24pxだと、ジャンプ率は2倍といったイメージです。
ジャンプ率を変えることで見やすさをコントロールすることができます。
ジャンプ率が大きいと「センセーショナル」「派手」「若々しさ」「広告っぽい」などのイメージを与えることができます。
一方でジャンプ率が小さいと「落ち着き」「高級感」「専門的」といったイメージになります。
見出しと本文のフォントサイズの比率が大きいほどジャンプ率が大きいもしくはジャンプ率が高いなどと表現されます。
a. ジャンプ率が高いデザインの効果とユースケース
訴求力が強く、瞬時に一番伝えたい内容を相手に伝えることが可能になります。
ユースケースとしては以下のように広告、チラシ、DMなどで向いています。
広告はユーザーの気を一瞬しか引くことができません。最初の1秒で伝えたいことだけを強調して伝えないと続きを読んでくれません。
右図のようにジャンプ率を大きくすることで強調することができます。
b. ジャンプ率が低いデザインの効果とユースケース
ジャンプ率が小さいものとしては、文芸誌や教科書などがあります。
ここからイメージできる通り、ジャンプ率を小さくするのは、本文をしっかり読ませることが目的の場合です。
インパクトは小さくなりますが、落ち着いて読んでもらうにはジャンプ率が低い方が適しています。
c. WEBデザインではジャンプ率は高めにして、しっかり強弱をつけよう
WEBデザインではジャンプ率は基本的に高く設定されます。
近年インターネット上の情報量が飛躍的に拡大し、情報に埋もれすぎた結果、人間の注意力はどんどん低下しています。
そのためWEBページはアクセスされてもじっくり読まれることはほとんどありません。
実際のWEBページの読まれ方としては、見出しなど強調されている部分だけを見ながら興味が出たら細かい本文も読むというユーザー行動がとられるケースが多いです。
ジャンプ率を高くすることで本当に伝えたいことを強調し、ユーザーの興味を引けるデザインにする必要があります。
4. フォントを選ぶ手順
以下のような3ステップに沿ってフォントを選ぶのが一般的な手順となります。
- サイトのイメージを言語化する 「躍動感」↔「落ち着き」 「男性向け」↔「女性向け」 「安さ」↔「高級感」 などサイトイメージのキーワードを出していきます。
- フォントの系統を選ぶ イメージに合わせて系統を選びます。
- フォントを選ぶ イメージに合わせてフォント選定ツールなどを使いフォントを選びます。
- ウェイト・字間など細かい調整をする 細かい調整をして完了です。
ですが慣れてくるとフォントの系統をまず考えて…などは飛ばしてフォントを直接選ぶこともあります。
5. フォントの系統とは
a. フォントの基本分類
フォントの基本系統
フォントには和文フォントと欧文フォントが存在します。 和文フォントは以下の2つに大きく分類できます。
- 明朝体
- ゴシック体
欧文フォントは以下の2つに大きく分類できます。
- セリフ体
- サンセリフ体
※他にも使用頻度は低いですが、欧文・和文ともに筆記体・手書き文字・デザイン書体などが存在します。例えば手書き文字を使用するとより柔らかく遊び心のあるデザインが可能になります。
＜明朝体とゴシック体の違い＞
明朝体は以下のような特徴を持ちます。
- 横線に比べ縦線が太い
- 止め、はね、はらい、曲がり角などでウロコ(オレンジの丸でマークをつけた箇所。山のようなものです。)を持ちます。
一方でゴシック体はすべての線の太さが同じでウロコが存在しません。
＜セリフ体とサンセリフ体の違い＞
セリフ体は和文フォントの明朝体に相当し、ウロコを持ちますが、サンセリフ体はウロコを持ちません。
系統別の与える印象の違い
セリフ体や明朝体が与える印象
- 格調高い
- 信頼できる
- 伝統的
- 落ち着き
- 高級感
サンセリフ体やゴシック体が与える印象
- 親しみやすい
- 大衆的
- シンプルで読みやすい
などです。
サイトでユーザーに与えたい印象に沿って、どの系統を選択するかまずは考えるとよいと思います。
6. おすすめフォント紹介
大きくデバイスフォントとWEBフォントの2種類について説明していきます。
WEBフォントに関してはGoogle Fontに収録されており、Figmaでも簡単に無料で使用できるものを紹介していきます。
フォントについては実際に文字を見ながら感覚を掴んでいくのが一番だと思います。
a. デバイスフォントとWEBフォントの違いとは
デバイスフォントのメリットはすでにユーザーのPCにインストールされているフォントを表示させるため、サイトの表示速度が速くなるという点です。一方でデメリットとしてはOSに標準搭載されているフォントになるので種類が限られる点と、ユーザーが使うデバイスによってサイトの表示されるフォントが変化してしまう点です。
一方でWEBフォントのメリットとしては大量の種類の中から選べる点、WEBサーバー経由であるためユーザーの閲覧環境に依存せず思い通りのフォントを指定できる点などです。
デメリットはサイトの表示スピードがデバイスフォントに比べて遅くなる点です。
近年は容量が削減されデメリットであるサイト表示スピードは気にならなくなっています。
そのため選択肢が広がるWEBフォントを活用するケースも増えています。
b. おすすめデバイスフォントの紹介
▼ 游ゴシック
▼ ヒラギノ角ゴシック
▼ 游明朝
▼ メイリオ
以降はWEBフォントの紹介になります。
c. 日本語-明朝体
▼ さわらび明朝
▼ しっぽり明朝
▼ BIZ UDP 明朝
▼ ひな明朝
▼ Noto Serif JP
▼ Zen Old Mincho
d. 日本語-ゴシック体
▼ Noto Sans JP
▼ さわらびゴシック
▼ Kosugi
▼ Zen Maru Gothic
e. 日本語-デザインフォント
通常の明朝体・ゴシック体に比べ癖が強くデザイン性が高いものを紹介します。
▼ Yusei Magic
▼ Yuji Mai
▼ RocknRoll One
▼ yuji Syuku
▼ DotGothic16
▼ Train One
f. セリフ体
(日本語でも使えるものもあります)
▼ Playfair Display
▼ Noto Serif
▼ Libre Baskerville
▼ Cormorant Garamond
▼ Sorts Mill Goudy
▼ Neuton
g. サンセリフ体
(日本語でも使えるものもあります)
▼ Roboto
▼ Open Sans
▼ Lato
▼ Raleway
▼ Noto Sans
▼ Work Sans
h. 欧文-デザインフォント
▼ Caveat
▼ Dancing Script
7. フォントウェイトの調整
1つのフォントファミリーの中に様々な太さのフォントが格納されています。
Noto Sans JPだと以下のような種類があります。
- Thin 100
- Light 300
- Regular 400
- Medium 500
- Bold 700
- Black 900
フォントウェイトの種類はそのフォントファミリーによって変わります。
- 見出しや強調したい文章 → BoldやBlackなど重めを使用
- 通常の本文 → Regular, Mediumなどを使用
- 重要度が低いもの → Thin, Lightなど軽めを使用
のように使い分けることが多いです。
8. 行間の調整
a. 行間の定義
②が文字自体の高さ、① + ③ + ②を行間と呼ぶことが多いです。
すなわち行間を文字の大きさの2倍にする、200%にするなどと呼ぶときは
① + ② + ③ = ② * 2という風に設定されることが一般的です。
Getting to the bottom of line height in Figma | Figma Blog
b. 行間は1.5〜2に設定しよう
行間が広すぎると間伸びして読みづらく、詰まりすぎていると窮屈で読みづらいです。
行間は想定ターゲット、読まれるシーンに合わせて適切に設定するのがおすすめです。
一般的にWEBサイトにおいては、1.5~2くらいが読みやすいとされています。
ここでいう1.5というのは文字の高さの1.5倍に行間が設定されるという意味です。
左の画像を見るとline-heightによっていかに印象が変わるかわかると思います。
行間を設定したらそれを同一WEBサイトでは守ることが重要です。
同じWEBサイト内で行間が1.5になったり1.8になったりと統一されていなかったらデザインとして不自然になってしまうからです。
c. Figmaでの行間の指定方法
%指定もできますしpx指定もできます。
9. 字間(トラッキング・カーニング・文字詰め)の調整
a. 字間の定義と理想的な値
字間を10%で設定すると言ったら、②の幅を①の10%に設定するという意味になります。
b. 理想的な字間
左図の通り、字間0%より字間5%や10%の方が見やすいのではないでしょうか。
c. Figmaでの字間の調整方法
%の場合は文字のサイズに対する%を指定することでそのサイズが字間となります。
基本的には%指定がおすすめです。
d. 理想的な行長
フォントサイズ・字間・改行を駆使することで行長を調整することができます。
WEBサイトでは1行当たり25-40字が読みやすいのではないかと思います。
Figmaにおいてはテキストボックスをドラッグして長さを調整することで行長を簡単にコントロールできます。
e. カーニングで文字間隔をさらに微調整する
1文字ごとに文字幅が微妙に異なったりします。
特に1行の中でフォントサイズやフォントファミリーが異なる文字が混在したりする場合に文字間隔がバラバラで乱れた印象になることがあります。
そういった場合に1文字ずつ文字間隔を微調整することで美しいデザインを作ることができます。
Figmaでは図のように1文字を選択して右側の字間の調整のところから%やpx単位で指定ができます。
10. フォント選びに便利なツール
世の中には非常に多くのフォントが存在します。
そんな大量のフォントの中から効率的に良いフォントを探すツールがあるので紹介します。
またツールなどは読んだだけでは使い方も身に付かず記憶に残らないケースが多いので、ぜひアクセスしてみてください。
a. Google Fonts
まずはGoogle Fontsへアクセス
アカウント登録などは一切不要です。
またFigmaではGoogle Fontsにあるフォントは全てインストール不要で使用できます。
Google Fontsで見つかったフォントはFigmaでもすぐに使えるので、まずはGoogle Fontsで理想のフォントが見つからないか探すのがおすすめです！
Google Fontsの機能説明
② 「Sentence Type something」というところには何か好きな文字を入れるとそれが下の画面に表示されるので、好きな文章でフォントを比べてどれにするか決めることができます。
③フォントサイズをコントロールできます。
④について
- CategoriesではSans Serif, Serifなどフォントの系統を選択できます。
- Languageでは言語を絞ることができます。日本語フォントだけを見たいときはJapaneseを選びましょう。
- Font Propertiesはフォントの特徴から絞り込むことができます。
⑤ではTrending, Most Popular, New, Nameなどに沿って並び替えをすることもできます。
実際に触ってみるのが一番早いと思うのでアクセスして触ってみてください！
Google Fontsのフォントを使いたいとき
その上で右上にある①の赤い箇所にある「Download family」を押してローカルにフォントをインストールする方法と、
②の赤い箇所にある+ボタンを押した上で右側のlinkからHTMLファイル・CSSファイルにそのまま貼り付け可能な形でフォントを取得できます。
これらの方法でGoogle Fontsのフォントを自由に使うことができます。
Figmaに関してはデフォルトでGoogle Fonts上のフォントは原則利用できるのでこれらの設定を行う必要はありません。
b. Wordmark.it - PC内のフォントを比較可能
すぐに利用可能なフォントを一覧で表示できるためとても便利です。
できれば新しくインストールしたり購入せずにすでにインストールしているフォントから活用したいと思います。
まずはwordmarkで良いフォントが眠っていないか確認するとよいでしょう。
c. イメージから探したい時はこれ -モジザイ-
①書体から検索と②イメージワードから検索の2つを駆使して色んなフォントに出会うことができます。
書体から検索では、「明朝体」「ゴシック体」「毛筆書体」「デザイン書体」から選ぶことができます。
イメージワードから検索では「男性的」「女性的」「子どもっぽい」「渋い」「レトロ」「クール」「ポップ」など20以上のキーワードからイメージに合ったフォントを教えてくれます！
d. 有料フォントで差をつけたい方へ
学習中に有料フォントを買う必要はありませんし、基本的に無料フォントもかなり充実しているので無料だけでも表現の幅はかなり広いです。
ただ有料フォントで差をつけたい、もっとこだわりたいという方は有料フォントを活用するとよいでしょう。
designpocket
「designpocket」は30,000以上のフォントを取り扱っているフォント専門サイトです。
- ブランド
- キーワード
- フォント形式
- タイプ
- 文字種類
- 太さ・ウェイト
- 価格帯
などからフォントを検索して購入することができます。
11. 気になるフォントの特定に便利なツール
WEBサイトや画像上で気になるフォントを見つける時があると思います。
その際はぜひ以下のツールを使ってフォントの名前を特定し自身のWEBデザインに活かすようにしていきましょう。
またWEBデザインにおいては必ずベンチマークとなるようなサイトデザインを集める工程が発生します。
その際に以下のツールを使ってサクサク使われているフォントの種類やカラーなどを特定すると作業が捗ります。
a. HP上のフォントを特定 - Fonts Ninja
Fonts Ninjaを活用するとカーソルに当てるだけでフォントファミリー、フォントサイズ、行間、字間、文字カラーが瞬時に分かります。
それに加えて右側のバーからすぐに無料フォントのインストールや有料フォントのトライアルを開始することができます。
フォント特定においてはWhatFontに並び活用必須のツールです！
b. HP上のフォントを特定 - WhatFont
機能はFonts Ninjaの方が多いですが、What Fontの方がシンプルに活用できます。
ここは好みの問題なので好きな方を使うようにすればOKです。
c. 画像上のフォントを特定 - WhatTheFont
なぜならそれらはHTML・CSSのソースコードから読み取って識別を行っているからです。
そのため画像上のフォントは読み取れません。
画像のフォントを特定したいときは、WhatTheFontがおすすめです。
PNG,GIF,JPEGなど様々なファイル形式に対応しており、50文字までの解析が可能です。
気になる画像上のフォントを見つけたらスクリーンショットを撮ってアップロードしましょう。
解析が終了すると推測されるフォントが複数種類表示されるので近いものを探すと良いでしょう。
d. 【上級者向け】形状から条件を指定して特定したい方は -identifont-
細かなフォントの特徴から指定していきたい場合などにとても便利です。
Fonts By Appearanceではフォントの外見的特徴からフォントを特定できます。
- セリフかどうか？
- アルファベットは下で揃っているか？
- $はどのような特徴か？
など大量の選択式の質問に答えることでフォントの名前を特定してくれます。
イメージでいうとアキネイターに似ていると思います。
(アキネイターはいくつかの質問に答えることによって、頭の中に思い浮かべた有名人を当ててくれるアプリです。)