ブランドとタイポグラフィとは?書体の一貫性で世界観を伝えるルールの作り方

ブランドとタイポグラフィの基本

まずは、ブランドとタイポグラフィの関係と、書体の一貫性がなぜ大切なのかを押さえましょう。

ブランドとタイポグラフィとは何か

ブランドとタイポグラフィとは、ブランドの世界観に合わせて書体を選び、Webサイト・SNS・広告・印刷物など複数の媒体で一貫した文字表現を作る考え方のことです。

ブランドとは、企業や商品・サービスについて、人々が思い浮かべるイメージや「らしさ」のことです。

タイポグラフィとは、書体・文字の大きさ・太さ・間隔・配置などを整えて、文字を読みやすく、伝わりやすく見せる技術のことです。フォントを選ぶことはその一部で、選んだ文字をどう並べて見せるかまでを含みます(タイポグラフィとは?)。

色・言葉づかい・写真の雰囲気などをそろえてブランドらしさを保つ考え方を「トーン&マナー」と呼び(トーン&マナーとは?)、ブランドとタイポグラフィは、それを文字の面から実践するものといえます。

書体の一貫性がブランドを記憶させる理由

書体をそろえると、ロゴや名前を見なくても「あのブランドだ」と気づいてもらいやすくなります。

人は、同じ見た目に何度も触れることで、その見た目とブランドを結びつけて覚えていくからです。

実際に、同じカフェのWebサイト・SNS・チラシの見出しを、書体がばらばらな場合とそろえた場合で比べてみましょう。

※書体はお使いの端末に入っているものが表示されます。

左の見本では、媒体ごとに書体が変わるため、同じお店の発信だと気づきにくくなっています。

右の見本では、和文の見出しは明朝体、英字は同じく線に強弱のあるセリフ体にそろえているので、どの媒体でも落ち着いた同じ「声」で話しているように感じられます。

明朝体には線の端に「うろこ」と呼ばれる三角の飾りがあり、セリフ体にも線の端に「セリフ」と呼ばれる小さな飾りがあります。どちらも飾りと線の強弱を持つ似た性格の書体なので、組み合わせると雰囲気がそろいます。反対に、ゴシック体には飾りのないサンセリフ体を合わせるのが基本です(形の違いは書体による印象の違いで見本付きで解説しています)。

企業や組織も書体のルールを決めている

多くの企業や組織は、使う書体をルールとして決め、公開や共有をしています。

たとえばAppleは、自社の製品の画面で使う書体として「SF Pro」というサンセリフ体を用意し、Apple Developerのフォントページ(英語)で「Appleプラットフォームのシステムフォント」として紹介しています。

日本の例では、デジタル庁が行政サービスのデザインをそろえるために公開しているデジタル庁デザインシステムのタイポグラフィで、書体にNoto Sans JPを使うことや、文字サイズを基本的に16px以上にすること、太さを2段階にすることなどを定めています。

どちらも、「誰が作っても同じ文字表現になる」ようにルールを文書にしている点が共通しています。

ブランドの書体ルールの作り方

ここからは、小さなお店や個人のサービスでも実践できる、ブランドの書体ルールの作り方を4つのステップで紹介します。

ステップ1:ブランドの性格を言葉にして書体を決める

最初に、ブランドの性格を「誠実」「温かい」「先進的」などの2〜3個の言葉にし、それに合う書体を選びます。

言葉がないまま書体を選ぶと、担当者の好みで決まってしまい、あとから「なぜこの書体なのか」を説明できなくなるからです。

たとえば「落ち着き・上質・こだわり」というカフェなら明朝体とセリフ体、「親しみ・元気・手軽さ」というカフェなら丸ゴシック体とサンセリフ体、というように方向性を決めます。

ブランドの性格だけでなく、届けたいお客さんの年齢層や業種のイメージも合わせて考えると、書体を絞り込みやすくなります(ターゲットに合わせた書体選び)。

ステップ2:役割ごとに書体を割り当てる

次に、見出し用・本文用・アクセント用など、役割ごとに使う書体を決めます。

種類は最大でも3つ程度に絞るのが基本で、書体が増えるほど一貫性が崩れやすくなります(フォントの選び方全体は見やすいフォントの選び方で解説しています)。

役割	使う場所の例	割り当ての例(上質なカフェの場合)
見出し用	Webの見出し、チラシのタイトル、SNS画像の大きな文字	明朝体(太め)
本文用	Webの本文、商品説明、メニューの説明文	ゴシック体(普通の太さ)
アクセント用	英字のロゴ・店名、価格や数字	セリフ体の欧文書体

本文に読みやすいゴシック体を選んでいるのは、ブランドの印象づけは見出しとアクセントで行い、長い文章は読みやすさを優先するためです。

ステップ3:サイズと太さの段階を決める

書体だけでなく、文字の大きさと太さも、使う段階をあらかじめ決めておきます。

書体が同じでも、媒体ごとに見出しの大きさや太さがまちまちだと、統一感が出ないからです。

段階	使う場所	太さ
特大	トップページのキャッチコピー、チラシのタイトル	太字
大	ページや記事の見出し	太字
中	小見出し、ボタンの文字	太字
標準	本文	普通
小	注釈、日付、キャプション	普通

具体的な大きさは媒体によって変わってかまいませんが、「見出しは本文の何倍くらいか」という比率をそろえると、どの媒体でも同じリズムに見えます。

本文に対する見出しの大きさの比率を「ジャンプ率」、文字の太さを「ウェイト」(普通の太さのRegular、太字のBoldなど)といいます(詳しくはジャンプ率、ウェイトによるメリハリで解説しています)。

ステップ4:ガイドラインにまとめて共有する

決めたルールは、「ガイドライン」と呼ばれる文書にまとめて、制作に関わる人全員と共有します。

ルールを決めても文書にしておかないと、担当者が変わったり時間がたったりするうちに、少しずつ解釈がずれていくからです。

ガイドラインには、次のような項目を入れておくと迷いが減ります。

• 役割ごとの書体名と太さ(見出し・本文・アクセント)
• サイズの段階と、見出しと本文の大きさの比率
• その書体が使えない環境で代わりに使う書体(代替フォント)
• フォントの利用条件(使ってよい媒体・範囲)
• やってはいけない使い方の例(書体を変形させる、指定外の書体を足す など)

「やってはいけない例」を画像つきで載せておくと、デザインに詳しくない人でもルールを守りやすくなります。

Webでは書体の指定を1か所にまとめる

Webサイトでは、ガイドラインで決めた書体を、CSSの1か所にまとめて指定しておくと一貫性を保ちやすくなります。

ページごとにばらばらに書体を指定すると、修正するときに漏れが出て、いつの間にか違う書体が混ざってしまうからです。

次のコードは、CSSカスタムプロパティ(CSSの中で使える変数)に、見出し用と本文用の書体をまとめて登録する例です。--font-headingのような名前を付けた入れ物に書体の候補を入れておき、見出しや本文からvar()で呼び出すイメージです。

:root {
  --font-heading: "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Hiragino Sans", "Yu Gothic", sans-serif;
}
h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-body); }

:rootはページ全体を指す書き方で、ここに登録した入れ物はサイトのどこからでも呼び出せます。このようにしておけば、書体を変えたくなったときも:rootの2行を書き換えるだけで、サイト全体の書体がそろって切り替わります。

書体の候補は左から順に試され、閲覧者の端末に入っているものが使われます。そのため候補には、MacやiPhoneならヒラギノ(Hiragino)、Windowsなら游明朝・游ゴシック(Yu Mincho・Yu Gothic)のように、主な端末に最初から入っている書体を並べておくのが基本です。これがガイドラインの「代替フォント」にあたります。

それでも候補がどれも見つからない場合に備えて、最後にserif(明朝体・セリフ体の系統)やsans-serif(ゴシック体・サンセリフ体の系統)のような予備の指定(総称ファミリー)を必ず入れておきましょう。端末に入っている同じ系統の書体で代わりに表示してもらうための保険です(MDN:font-family)。

コードを書かない人は、「書体の指定を1か所にまとめておく」という考え方だけ知っておけば十分です。

実践のポイント

ブランドの書体ルールを運用していくうえで、つまずきやすいポイントとよくある疑問をまとめます。

注意点・よくある間違い

• ルールを決めても文書にして共有しないため、担当者が変わるたびに解釈がずれ、少しずつ書体の使い方が崩れていくことがあります。
  小さなチームでも、1枚のシートで構わないのでガイドラインを作っておきましょう。
• キャンペーンや季節ごとに新しい書体を足していき、種類が増えすぎて一貫性が失われることがあります。
  新しい書体を足す前に、既存の書体の太さやサイズで表現できないか考えましょう。
• 媒体の特性に合わせることを優先しすぎて、根本の書体ルールまで変えてしまうことがあります。
  スマートフォンでは文字を大きくするなどサイズや改行は調整しても、書体そのものは変えないようにしましょう。
• 印刷物で使っている書体が、Webでは使えない(ライセンスや表示環境の都合)ことに後から気づくことがあります。
  フォントには、どこでどう使ってよいかを定めた利用条件(ライセンス)があり、パソコンに入れてチラシや画像に使うのはよくても、Webフォントとしてサイトに組み込むには別の契約が必要なものもあります。
  書体を決める段階で、Webでも使えるかと、使えない場合の代替フォントを確認しておきましょう(ライセンスで確かめたい点はフォントと書体の違いでも紹介しています)。

よくある質問

• Q. 個人のブログや小さなお店でも、書体のルールは必要ですか?
  A. 規模が小さくても、Webサイト・SNS・チラシなど複数の媒体で発信するなら、ルールがあると便利です。
  「見出しはこの書体、本文はこの書体」の2行を決めるだけでも、発信物の統一感は大きく変わります。
• Q. ロゴと同じ書体を、見出しや本文にも使うべきですか?
  A. 必ずしも同じにする必要はありません。
  ロゴは個性を出すために特別にデザインされていることが多く、本文には向かない場合があるからです。
  ロゴと雰囲気の近い書体を見出しに使い、本文は読みやすい書体にするのが一般的です。
• Q. 決めた書体を、あとから変えてもいいですか?
  A. ブランドの方向性が変わったときなどは、見直してかまいません。
  その場合は、ガイドラインを更新したうえで、Web・SNS・印刷物をまとめて切り替え、新旧の書体が混在する期間をできるだけ短くしましょう。

まとめ

ブランドとタイポグラフィとは、ブランドの世界観に合う書体を選び、どの媒体でも一貫した文字表現を作る考え方です。

ブランドの性格を言葉にして書体を決め、役割ごとの書体・サイズと太さの段階をルールにし、ガイドラインとして共有することで、誰が作っても「そのブランドらしい」文字表現を保てます。

まずは自分のWebサイト・SNS・印刷物を並べて、見出しと本文で使っている書体を書き出し、ばらばらになっていないか確認してみてください。