はじめに

こんにちは、NNCの平林です。
今回はデザインにおける「文字」についてお話しします。
文字はデザインの「情報を伝える」という役割を果たすための重要な要素となります。

写真や配色の調整と比べ、あまり文字の調整は意識ができていない、どうするのが正解か分からない、という方も多いのではないでしょうか？

文字にも気を配ったデザインは洗練された印象になりますので、“脱デザイン初心者”を目指す方は、是非最後まで見ていただければと思います！

文字組み

文字の行や間隔を調整し、文章を読みやすく美しく見せる作業を「文字組み」といいます。
例えば文庫本などは、文字がたくさん並んでいても読み辛いと感じません。
それは長い文章でも読みやすいように文字がデザインされているためです。

言葉だけでは分かりづらいと思いますので、「読みやすい文」と「読みにくい文」の例をご用意しました。

比べてみると、かなり違いがありますね。
読みにくい文章の方は、行間や字間、揃えの選定も適切ではありません。
また、禁則処理も守れていません。

同じ「文字」という情報でも、こういった視点を持っているかいないかでデザインの質が大きく変わってきます。

ではここからは、実際に「読みやすい文章」や「洗練された文字のデザイン」を作るために知っておくべき考え方・用語について解説していきます。

行長

1行あたりの文字数、長さ。
1行が長すぎると目が迷子になりやすく、短過ぎると忙しない印象になります。
一般的には40〜50字が最長、13〜15字程度が最短とされています。

大きいサイズのポスターやwebサイトで、左右いっぱいに文章を書くと非常に見辛くなってしまうため、レイアウトを工夫する必要があります。
他の要素があれば横に並べてみたり、webサイトの場合はwidthを調整して読みやすい長さになるようにしましょう。

行間

行と行の間隔。
広くするとゆったり穏やかな印象、狭くするとギュッとまとまり感が出ます。
文字サイズや行長によって適切な間隔は変りますが、文字サイズを100%とした時の50〜75%程度を基準に考えると良いです。
webサイトの場合はline-heightを使って調整します。

また、箇条書きの場合「1文の行間 ＜ 1項目の行間」になるようにすると、グループ感が出てより見やすくなります。

揃え

文の各行を揃える位置。
「左揃え」「両端揃え」「中央揃え」「右揃え」の4種類があります。
同じデザイン内での「揃え」は種類を絞った方が見やすいデザインになります。
webサイトではtext-alignでどの揃えにするかを設定します。

左揃え

文頭を一致させる揃え方。
一番基本となる揃え。
人の視線は「左上→右下」の順に動くので、文頭が左に揃っている「左揃え」はストレスなく読める揃え方です。
揃えに迷ったら全て左揃えにしてしまうのも1つの手です。

両端揃え

文頭と文末の両方を一致させる揃え方。
各行の両サイドがきれいに揃うので、長文の揃えに向いています。
ただ、欧文に両端揃えを使用すると、単語の切れ目によって字間が間延びしてしまうことがあります。
ですので、欧文を揃える場合は、左揃えを原則と考えましょう。

【用途の例】
・ 長文

中央揃え

行の中心を一致させる揃え方。
文章が左右対称になり、安定感のある印象的な見え方になります。
行の中心が揃う一方で、両サイドの位置が不揃いになるため、文章が読みにくくなることもあります。
ですので、内容のまとまり・テンポの良さを考慮して、改行位置を調整する一手間を加える必要があります。

【用途の例】
・ タイトル
・ 見出し
・ 印象づけたいメッセージ

右揃え

文末を一致させる揃え方。
やや変則的な揃え方で、文頭が揃わないため行の始まりを見失いやすいので、長文に使わない方が無難です。
「金額・数字」の比較には最適で、並べた際に「桁の違い」が一目でわかるようになります。

また、デザインのバランス調整や、外側の余白のラインを出す手段として使用することができます。

【用途の例】
・ 金額
・ 数字
・ バランス調整

字間

文字と文字の間隔。
広くすると書体の持つ印象が引き立ち、狭くすると安定感が出ます。
一般的には、文字サイズを100%とした時の5%程度の間隔が読みやすいとされています。

文字をそのまま入力した際、何も調整をしていない状態ですと、字間がバラバラに空いてしまいます。
タイトルや見出しなどの文字は、デザインの良し悪しを決める重要な要素となるのでデザイナーが1文字ずつ調整する必要があります。
特に記号（括弧や句読点）の前後は、大きく字間が空いているため必ず確認しましょう。
調整の方法は、以下の2つがあります。

カーニング

字間が等しく見えるように、個別に調整すること。
デザインソフトの機能として、「メトリクス」「オプティカル」という自動で調整してくれるものと、「数値入力」で自分で調整できるものがあります。

トラッキング

文字全体の字間をまとめて調整すること。

「カーニング（自動調整→気になる部分を手動で「数値入力」して調整）→トラッキング」の順で作業すると手早く調整できます。
カーニングについては初めは慣れないかと思いますが、デザインを遠くから俯瞰で見たり、目を細めて見ることで違和感をみつけやすくなります。

また、練習ができるサイトを利用して慣れるのも手です。
下記のサイトは自分が調整した文字を採点してくれるので、気をつけるべきポイントがわかりとても勉強になります。
https://type.method.ac

【webデザインでのカーニング・トラッキング】
cssでは残念ながら手動でのカーニングができないので、webサイトでは画像に書き出して使用するタイトルなどの文字にこだわってみてください。
自動カーニングとトラッキングはcssでも調整できるので、覚えておくと役に立つかもしれません。
———
⚫︎ 自動カーニング
font-feature-settings: “palt”;
⚫︎ トラッキング
letter-spacing: 字間サイズ;
———

禁則処理

文字の並べ方の禁止事項 。
文章を読みやすくするために、行頭や行末に特定の文字が配置されないように、文字の並べ方を調整することを「禁則処理」といいます。
禁則の具体的なルールは3つあります。

行頭禁則

行の最初に置いてはいけない文字。

⚫︎ 区切りを表す記号　→　「。」「、」
⚫︎ 閉じ括弧類　→　 」】》
⚫︎ 拗促音　→　「っ」「ぁ」「ゃ」

行末禁則

行の最後に置いてはいけない文字。

⚫︎ 起こし括弧類　→　「【《

分離禁則

改行によって分割してはいけない文字。

⚫︎ 繰り返し文字　→　「代々木」の「々」など
⚫︎ 英単語
⚫︎ 2つ連続して並べて使う文字　→
代表格が「…（三点リーダー）」
使う場合は必ず2つ続けて「……」のように使います。
この時、1つ目の「…」と2つ目の「…」が分離されないように気をつけましょう。

サイズ

文字の大きさ。
適したサイズや使われる単位は、デザイン物が紙媒体かwebかでも変わるので注意が必要です。

	単位	基本サイズ（本文）	最小サイズ
紙媒体	Q（級）、pt（ポイント）など	8〜10pt ※デザイン物のサイズによって変わる	5pt ※ルビ（ふりがな）以外ではほとんど使わない
web	px（ピクセル）など	14〜16px ※Google推奨→16px	10px

サイズに困ったら上記の表を参考にしてみてください。

特に最小サイズについては、紙媒体の場合は印刷によるインクの滲み、webの場合はピクセルでテキストを表現するため、小さすぎる文字が潰れてしまいますので、必ず確認するようにしましょう。

また、適切な文字サイズを設定するには、デザイン物を実際の大きさで確認することが重要です。
紙媒体では印刷して、webではパソコンやスマートフォンで100%表示して、文字サイズが最適か確認してください。

ウエイト

文字の太さ。
同じ書体で太さの違う集まりを「ファミリー」と呼びます。
ファミリー数が豊富な書体は、文章の役割や文字サイズに応じてウエイトを使い分けることができます。
書体の種類は絞った方がデザインに統一感を出せるので、メインで使用する書体にはファミリー数が多いものを使うことをおすすめします。

小さい文字は太すぎても細すぎても読み辛くなるので、注意してください。
大きい文字は素直に太くしても、あえて細くしても映えるデザインになります。
デザインの狙いに合わせて設定してみてください。

書体・フォント

共通したデザインの文字の集まり。
書体は大きく、和文書体と欧文書体の2つに分けることができます。
それぞれ、これだけは知っておきたい書体の種類について、いくつかご紹介します。
特に和文書体の「明朝体」「ゴシック体」、欧文書体の「セリフ体」「サンセリフ体」の4つは必ず覚えましょう！

【書体とフォントの関係性】
書体と同じような意味合いで「フォント」という言葉が用いられることがあります。
元々「フォント」は、同じサイズ、同じデザインのひと揃いの欧文活字を表す言葉でしたが、現在ではデジタル化した書体のことを指します。

厳密に言うと、書体の中にフォントが存在しているような関係性です。
つまり、明朝体、ゴシック体などの字形の種類を『書体』と呼び、「リュウミン」「ヒラギノ角ゴシック」などの書体の種類を『フォント』と呼びます。

和文書体

明朝体

「うろこ」や「はらい」などがある書体。
文字の要所がうろこによって強調されているため、細い文字でもハッキリと読むことができます。
縦線が太く、横線が細いという特徴もあり、縦方向の視線の流れが作りやすく、縦組みの文章を読みやすく仕上げることができます。
そのため、新聞、教科書といった印刷物の本文に使用されることが多い書体です。

【与えるイメージ】
・ 落ち着いた
・ 信頼感のある
・ 日本的な
・ しなやかな

ゴシック体

直線的な形状を持ち、線の太さが均一な書体。
明朝体のような装飾がないため、遠くから見ても読みやすいことが特徴です。
パソコンなどのディスプレイ上では、小さい文字の装飾部分が潰れてしまうことが多いため、基本的にシンプルなゴシック体が使用されてます。

【与えるイメージ】
・ 力強い
・ はっきりした
・ モダンな・無骨な

丸ゴシック体

ゴシック体の角を丸めた書体。
ゴシック体をベースにしているので、ゴシック体と同様に視認性の高い書体です。
端や角が丸くなることで、ゴシック体の持つかたい印象が和らぎ、かわいらしさなどを演出するのに向いています。

【与えるイメージ】
・ かわいい
・ やさしい
・ 子供っぽい
・ 柔らかい

装飾書体（デザインフォント）

見出しやロゴでの使用を想定された装飾の強い書体。
手書き風、カリグラフィー風など様々なデザインがあります。
装飾書体は書体自体がわかりやすくデザインされているので、つい使いたくなってしまいますが、可読性が低いものも多いので多用しない方が無難です。

欧文書体

セリフ体

「セリフ（serif）」で装飾された書体。
「セリフ」は和文書体で言うところの「うろこ」に近いもので、明朝体と似た印象を与えます。

【与えるイメージ】
・ 伝統的な
・ 信頼感のある
・ 品格のある

サンセリフ体

「セリフ（serif）」のない書体。
フランス語で「ない」という意味の「サン（sans）」が語源になっています。
和文書体で言うゴシック体と同じく、装飾がないため視認性に優れています。

【与えるイメージ】
・ 力強い
・ 幾何学的な
・ 現代的な

スクリプト体

手書きの流れを残した、筆記体の書体。
日本のデザインでは読むための文字としてではなく、装飾として使用されることが多い書体です。

【与えるイメージ】
・ 高級感のある
・ フォーマルな

書体・フォントの選び方

「明朝体」「ゴシック体」など、書体の種類についてお話しましたが、その中でどんなフォントを使うか迷ってしまいますよね。
以下で、個人的に気をつけている書体・フォントを選ぶときのポイントについてご紹介します。

書体の選び方

⚫︎ デザインのイメージに合っている
⚫︎ 「タイトル」「本文」などの要素の役割に合っている

デザインのイメージに合っているかは、書体のイメージを参考にしながら選んでみてください。
（例：和菓子のwebサイト　→　“日本的な”明朝体）
要素の役割については、タイトルはあえて目立つ「装飾体」、本文はシンプルで読みやすい「ゴシック体」を使うといった考え方です。

フォントの選び方

⚫︎ 読みやすい
⚫︎ ファミリーが豊富
⚫︎ 対応していない文字が少ない
⚫︎ どの端末でも表示される（webの場合）

フォントを選ぶ上で、最も重視すべきことは「読みやすい」かどうかです。
どんなにきれいなデザインでも、読みにくい文字ばかりが使われていたら見る気を無くしてしまいます。
また、ファミリーの数や、対応していない文字の有無は最初に確認してください！
デザインを進めてから、必要なウエイトや文字がないことに気がつくと作り直しが大変です…
気に入ったフォントであっても、上記のポイントは必ず確認しましょう。

おすすめのwebフォント

最後に、フォント選びのポイントを押さえた、定番のwebフォントを2つご紹介します。

⚫︎ ゴシック体、サンセリフ体　→　Noto Sans JP
⚫︎ 明朝体、セリフ体　→　Noto Serif JP

Notoフォントは、GoogleとAdobeが協力して制作したフォントです。
Notoの名前の由来は「No more tofu（ノーモア豆腐）」。
文字化けで表示される「□」が豆腐に似ていることから、俗称として「Tohu（トーフ）」と呼ばれています。
つまり、対応していない文字がないwebフォントということです。
ひらがな、カタカナ、漢字、英数字全てに対応しており、和文書体、欧文書体の両方を兼ねて使用できます。
また、Noto Sans JPは9個、Noto Serif JPは7個のウエイトがあり、使い勝手もバッチリです。
どちらも、幅広いデザインに合うシンプルなフォントですので、ダウンロードしておくことをおすすめします。

Noto Sans JP ダウンロード

Noto Serif JP ダウンロード

まとめ

今回は、文字のデザインに関する考え方や用語を解説しました。
「文字」という漠然としたイメージが、各要素を知ることで具体的なものになれば幸いです。
最初は、要素が多くて難しいと感じるかもしれませんが、まずは基本である「読みやすさ」を念頭に置いてデザインをしてみてください。

この記事を通じて、文字に対する苦手意識がなくなり、興味を持ってもらえると嬉しいです！