タイポグラフィ
書体、文字組み、見出しの印象を指定する言葉をまとめます。
TYPOGRAPHY
文字は、書体と組み方を分けて指定します。
同じ内容でも、書体と文字の組み方で印象と読みやすさが大きく変わります。書体の種類、強弱のつけ方、文字の並べ方を、それぞれ言葉で指定します。
書体を選ぶ
書体は印象をいちばん大きく左右します。日本語の書体と欧文の書体は分けて考えます。
ゴシック体
Gothic / Sans-serif線の太さがほぼ均一な書体です。画面で読みやすく、どんな用途にも使えます。
- 均一な線
- 画面で読みやすい
- 万能
AIへの指示例
本文と見出しはゴシック体（Noto Sans JPなど）にしてください。本文は400、見出しは700の太さにします。明朝体
Mincho / Serif縦線が太く横線が細い、筆の名残がある書体です。上品で落ち着いた印象になり、長文を読ませる場面に向きます。
- 上品
- 長文向き
- 細い横線
AIへの指示例
見出しは明朝体（Noto Serif JPなど）にし、落ち着いた上品な印象にしてください。小さな文字や細い線で読みにくくならないよう、本文はゴシック体にします。丸ゴシック体
Rounded gothic線の端が丸いゴシック体です。やわらかく親しみやすい印象になります。
- 丸い端
- 親しみ
- やわらかさ
AIへの指示例
見出しは丸ゴシック体（Zen Maru Gothicなど）にして、やわらかく親しみやすい印象にしてください。セリフ体
Serif文字の端に小さな飾り（セリフ）がある欧文書体です。伝統や格式を感じさせます。
- 欧文
- 端の飾り
- 格式
AIへの指示例
英語の見出しとロゴはセリフ体（Playfair Displayなど）、日本語は明朝体に合わせてください。等幅書体
Monospaceすべての文字が同じ幅の書体です。数字や記号の桁がそろうので、コードや表で使います。
- 同じ幅
- 桁がそろう
- コード
AIへの指示例
コードと数値の表は等幅書体（JetBrains Monoなど）で表示し、桁をそろえてください。強弱をつける
大きさ・太さ・字間の差で、どこから読むかを示します。
ジャンプ率
Size contrast見出しと本文の大きさの差です。差が大きいと力強く、小さいと落ち着いた印象になります。
- 大きさの差
- 力強さ
- 落ち着き
AIへの指示例
見出しは本文の2.5倍ほどの大きさにして、ジャンプ率を高くしてください。力強い印象にします。ウェイト
Font weight文字の太さです。細い・標準・太い、の3段階ほどで使い分けると、情報の階層が伝わります。
- 細い
- 標準
- 太い
AIへの指示例
文字の太さは3段階だけにしてください。見出しは700、本文は400、補足は300です。字間
Letter spacing文字と文字の間隔です。見出しは少し詰め、英字の小見出しは広げると整って見えます。
- 詰める
- 広げる
- 見出しで調整
AIへの指示例
大きな見出しの字間は少し詰め（-0.02em）、英字の小見出しは広げて（0.1em）大文字にしてください。この指示を使うレシピ：商品資料から営業スライドを作る
文字を組む
文字の並べ方は、読みやすさに直結します。特に長文では、ここを指定しないと読みにくくなります。
行間
Line height行と行の間隔です。日本語の本文は、文字の大きさの1.7〜1.9倍ほどにすると読みやすくなります。
- 行の間隔
- 1.7〜1.9倍
- 長文で重要
AIへの指示例
本文の行間は文字サイズの1.8倍にしてください。見出しは1.4倍に詰めます。1行の長さ
Line length1行に入る文字数です。長すぎると次の行を探しにくくなります。日本語では1行35〜45字ほどが目安です。
- 1行の文字数
- 35〜45字
- 横幅を絞る
AIへの指示例
本文の1行は40字前後に収まるよう、本文の横幅を制限してください。画面が広くても広げすぎないでください。文字揃え
Alignment文章の揃え方です。長い文章は左揃えにします。中央揃えは、短い見出しやキャッチコピーだけに使います。
- 左揃え
- 中央揃えは短文だけ
- 読みやすさ
AIへの指示例
本文はすべて左揃えにしてください。中央揃えは、2行以内の見出しとキャッチコピーだけにします。