PR: この記事にはアフィリエイトリンクが含まれています。購入により当サイトに手数料が支払われることがあります。
【保存版】デザイン用語がわからない！初心者が最初に覚えるべき30個の基本用語を解説
「デザインの本を読んでも専門用語が多すぎてわからない...」「デザイナーと話していても用語が理解できない」「カーニング？トンマナ？何それ？」
そんな悩みを抱えていませんか？
デザインの世界には独特の専門用語がたくさんあり、これを知らないと本を読んでも、動画を見ても、スクールの授業を受けても、なかなか理解が進みません。
この記事では、デザイン初心者が最初に覚えるべき30個の基本用語をカテゴリ別にわかりやすく解説します。
文字・タイポグラフィの基本用語（10個）
デザインにおいて「文字」は非常に重要な要素です。まずは文字に関する用語を覚えましょう。
1. カーニング（Kerning）
文字と文字の間隔を個別に調整すること。
特定の文字の組み合わせ（AVやWAなど）で隙間が空いて見えるとき、個別に調整します。
2. トラッキング（Tracking）
文字列全体の間隔を均一に調整すること。
カーニングが「個別調整」なのに対し、トラッキングは「全体調整」です。
| カーニング | 特定の文字間を個別に調整 |
|---|---|
| トラッキング | 文字列全体の間隔を均一に調整 |
3. レディング / 行間（Leading）
行と行の間隔のこと。
行間が狭すぎると読みにくく、広すぎると間延びします。一般的に文字サイズの1.5〜2倍程度が読みやすいとされています。
4. フォント（Font）
文字の書体のこと。
ゴシック体、明朝体、セリフ体、サンセリフ体など、さまざまな種類があります。
5. セリフ / サンセリフ（Serif / Sans-serif）
- セリフ：文字の端にある飾り（ウロコ）がある書体
- サンセリフ：飾りがないシンプルな書体
| セリフ体 | 明朝体のような飾り付き（伝統的・格式） |
|---|---|
| サンセリフ体 | ゴシック体のようなシンプル（現代的・読みやすい） |
6. ウェイト（Weight）
フォントの太さのこと。
Light、Regular、Medium、Bold、Blackなど、同じフォントでも太さが異なるバリエーションがあります。
7. 可読性（Readability）
文章が読みやすいかどうかの度合い。
フォントの選択、文字サイズ、行間、コントラストなどが可読性に影響します。
8. 視認性（Visibility）
文字やデザインが見やすいかどうかの度合い。
遠くからでも認識できるか、背景との区別がつくか、などを指します。
9. ジャンプ率
本文と見出しのサイズ差のこと。
ジャンプ率が高い（差が大きい）とメリハリのある印象に、低いと落ち着いた印象になります。
10. カラム（Column）
文章を配置する縦の列のこと。
1カラム、2カラム、3カラムなど、レイアウトの基本になります。
色彩・カラーの基本用語（8個）
色はデザインの印象を大きく左右します。色に関する基本用語を覚えましょう。
11. RGB
光の三原色（Red, Green, Blue）のこと。
画面表示（モニター、スマホ、Web）で使用される色の表現方法です。
| 用途 | 画面表示（Web、アプリ、動画など） |
|---|---|
| 特徴 | 光を混ぜるほど明るくなる（加法混色） |
| 値の範囲 | 各色 0〜255 |
12. CMYK
印刷の四原色（Cyan, Magenta, Yellow, Key=Black）のこと。
紙への印刷で使用される色の表現方法です。
13. 色相・彩度・明度（HSB / HSV）
- 色相（Hue）：色の種類（赤、青、黄など）
- 彩度（Saturation）：色の鮮やかさ
- 明度（Brightness/Value）：色の明るさ
14. コントラスト（Contrast）
明暗や色の差のこと。
コントラストが高いとメリハリがあり、低いと柔らかい印象になります。
15. 補色（Complementary Color）
色相環で反対側に位置する色のこと。
赤と緑、青とオレンジなど。補色同士を組み合わせると、お互いを引き立て合います。
16. トーン（Tone）
色の調子・雰囲気のこと。
ビビッド、パステル、ダーク、ライトなど、彩度と明度の組み合わせで決まります。
17. カラーパレット
デザインで使用する色の組み合わせのこと。
通常、メインカラー、サブカラー、アクセントカラーなどで構成されます。
18. グラデーション（Gradation）
色が徐々に変化していくこと。
2色以上の色を滑らかにつなげる表現方法です。
レイアウト・構成の基本用語（7個）
要素の配置に関する用語です。美しいデザインには整理されたレイアウトが欠かせません。
19. グリッド（Grid）
要素を整列させるための基準線のこと。
グリッドに沿って配置することで、整った印象のデザインになります。
20. 余白 / ホワイトスペース（White Space）
要素と要素の間の空間のこと。
余白は「何もない空間」ではなく、デザインを整理し、見やすくするための重要な要素です。
21. マージン / パディング
- マージン（Margin）：要素の外側の余白
- パディング（Padding）：要素の内側の余白
22. 整列（Alignment）
要素を揃えること。
左揃え、中央揃え、右揃え、両端揃えなどがあります。
23. 視線誘導
見る人の視線を意図した順番で動かすこと。
Z型、F型、N型など、視線の動きを意識したレイアウトがあります。
24. ヒエラルキー（Hierarchy）
情報の優先順位のこと。
重要な情報を大きく、目立つ位置に配置し、視覚的な優先順位をつけます。
25. トンマナ（Tone & Manner）
デザインの雰囲気や方向性を統一すること。
Web・UIデザインの基本用語（5個）
Webやアプリのデザインでよく使われる用語です。
26. UI（User Interface）
ユーザーが操作する画面・インターフェースのこと。
ボタン、メニュー、フォームなど、ユーザーが触れる部分すべてを指します。
27. UX（User Experience）
ユーザーが得る体験全体のこと。
使いやすさ、わかりやすさ、満足感など、サービスを通じた体験を指します。
| UI | ユーザーが「見る・触る」部分 |
|---|---|
| UX | ユーザーが「感じる」体験全体 |
28. レスポンシブデザイン
画面サイズに応じてレイアウトが変わるデザインのこと。
PC、タブレット、スマートフォンなど、どのデバイスでも見やすく表示されます。
29. ワイヤーフレーム
ページの設計図・骨組みのこと。
色や装飾を省き、要素の配置だけを示したシンプルな図です。
30. モックアップ
完成イメージに近い試作品のこと。
ワイヤーフレームより詳細で、実際のデザインに近い見た目になります。
用語を効率的に覚える方法
30個の用語を一度に覚えるのは大変です。効率的に覚える方法をご紹介します。
方法1：カテゴリごとに覚える
この記事のように、カテゴリごとに分けて覚えると整理しやすくなります。
- まず文字系の用語を覚える
- 次に色彩系の用語を覚える
- レイアウト系、Web系と進める
方法2：実際のデザインで確認する
用語を覚えたら、実際のデザイン（Webサイト、ポスター、広告など）で探してみましょう。
「このサイトはサンセリフ体を使っているな」「コントラストが高いデザインだな」と意識することで、記憶に定着します。
方法3：アプリで繰り返し学習する
単語帳アプリを使って、繰り返し学習するのが効果的です。
デザイン用語を効率的に学べるアプリ「デザイン単語帳」なら、知らない単語だけを抽出して集中学習できます。
全単語に例文が収録されているので、実際の使い方も一緒に覚えられます。
よくある質問
まとめ
まとめ
この記事のポイント- デザイン用語は4カテゴリ30個から始めよう
- 文字系：カーニング、トラッキング、フォント、可読性など
- 色彩系：RGB、CMYK、コントラスト、トーンなど
- レイアウト系：グリッド、余白、視線誘導、トンマナなど
- Web系：UI/UX、レスポンシブ、ワイヤーフレームなど
- 効率的に覚えるにはアプリの活用がおすすめ
デザイン用語を知っていると、本や動画での学習効率が格段にアップします。
まずはこの30個の基本用語を覚えて、デザイン学習の土台を作りましょう。
関連記事
画像クレジット
本記事で使用している画像の一部は Unsplash より提供されています。
- タイポグラフィイメージ: Photo by Clark Van Der Beken on Unsplash
- カラーパレット: Photo by Dulcey Lima on Unsplash
- レイアウトイメージ: Photo by Brice Cooper on Unsplash
関連トピック完全ガイド
詳細解説記事
このトピックに関する5件の記事で、 包括的な情報を提供しています。
