【保存版】デザイン用語 英語-日本語対応表50選

デザインツールが英語で困っていませんか？

「Figmaのメニューが英語でわからない」 「英語のチュートリアルが読めない」

デザインツールは英語がベースのものが多く、英語の用語を知らないと操作に困ることがあります。

この記事では、デザインで頻出する英語-日本語対応表を50語まとめました。ブックマークして、いつでも参照できるようにしておきましょう。

:::point この記事でわかること：

• レイアウト・配置の英語用語
• 色・配色の英語用語
• フォント・文字の英語用語
• ツール操作の英語用語 :::

---

【レイアウト・配置】15の英語用語

英語	日本語	意味
Layout	レイアウト	要素の配置・構成
Alignment	整列/揃え	要素を揃えること
Margin	マージン	外側の余白
Padding	パディング	内側の余白
White Space	余白	何もない空間
Grid	グリッド	格子状のガイド
Frame	フレーム	枠組み
Canvas	キャンバス	作業領域
Artboard	アートボード	作品の領域
Layer	レイヤー	層/重なり
Group	グループ	まとめる
Constraint	制約	サイズ変更時の動作設定
Responsive	レスポンシブ	画面サイズに対応
Viewport	ビューポート	表示領域
Breakpoint	ブレイクポイント	レイアウト切り替え点

:::info 覚え方のコツ Margin（外側）とPadding（内側）は、ボックスモデルの基本。「Marginは外、Paddingは内」で覚えましょう。 :::

---

【色・配色】12の英語用語

英語	日本語	意味
Color	色/カラー	色全般
Hue	色相	色の種類（赤、青など）
Saturation	彩度	色の鮮やかさ
Brightness/Value	明度	色の明るさ
Tone	トーン	彩度と明度の組み合わせ
Gradient	グラデーション	色の変化
Opacity	不透明度/オパシティ	透け具合
Contrast	コントラスト	明暗の差
Complementary	補色	反対色
Analogous	類似色	近い色
Palette	パレット	色の組み合わせ
Swatch	スウォッチ	色見本

---

【フォント・文字】12の英語用語

英語	日本語	意味
Font	フォント	書体
Typography	タイポグラフィ	文字のデザイン
Typeface	タイプフェイス	書体のデザイン
Serif	セリフ	線端の飾り（明朝体）
Sans-serif	サンセリフ	飾りなし（ゴシック体）
Weight	ウェイト	文字の太さ
Kerning	カーニング	文字間の調整
Tracking	トラッキング	全体の文字間隔
Leading	行送り/リーディング	行間
Baseline	ベースライン	文字の基準線
Line Height	行間/行高	行の高さ
Text Alignment	文字揃え	左/中央/右揃え

:::spec フォント用語の使い分け

• Font: 具体的な書体ファイル（例：Noto Sans Bold）
• Typeface: 書体のデザイン全体（例：Noto Sans）
• Typography: 文字を使ったデザイン全般 :::

---

【ツール操作】11の英語用語

英語	日本語	意味
Selection	選択	要素を選ぶ
Move	移動	位置を変える
Scale	拡大縮小	サイズを変える
Rotate	回転	角度を変える
Crop	トリミング	切り抜き
Duplicate	複製	コピーを作る
Delete	削除	消す
Undo	元に戻す	操作を取り消す
Redo	やり直す	取り消しを取り消す
Export	書き出し	ファイル出力
Import	読み込み	ファイル取り込み

---

【効果・加工】発展用語

英語	日本語	意味
Drop Shadow	ドロップシャドウ	影
Blur	ぼかし	ぼやかす効果
Stroke	線/ストローク	輪郭線
Fill	塗り	内側の色
Mask	マスク	隠す/切り抜く
Blend Mode	描画モード	重なり方の設定
Filter	フィルター	画像効果
Effect	エフェクト	視覚効果

---

:::merit 英語用語を覚えるメリット

• デザインツールの操作がスムーズになる
• 英語のチュートリアルが理解できる
• 海外のデザインリソースが使える
• グローバルな環境でも通用する :::

---

よく使うショートカットの英語表記

操作	Mac	Windows
Copy（コピー）	Cmd + C	Ctrl + C
Paste（貼り付け）	Cmd + V	Ctrl + V
Cut（切り取り）	Cmd + X	Ctrl + X
Undo（元に戻す）	Cmd + Z	Ctrl + Z
Redo（やり直し）	Cmd + Shift + Z	Ctrl + Shift + Z
Save（保存）	Cmd + S	Ctrl + S
Export（書き出し）	Cmd + Shift + E	Ctrl + Shift + E
Group（グループ化）	Cmd + G	Ctrl + G
Duplicate（複製）	Cmd + D	Ctrl + D

---

:::demerit 英語用語を知らないと困ること

• ツールのメニューが理解できない
• 英語チュートリアルが読めない
• 海外のテンプレートが使えない
• 外国人デザイナーとコミュニケーションできない :::

---

英語用語を効率的に覚える3つの方法

1. ツールの言語設定を英語にする

日常的に英語に触れることで、自然と用語が身につきます。最初は大変ですが、慣れると日本語より早く操作できるようになります。

2. 用語アプリで日英両方を学習

デザイン単語帳では、日本語と英語の両方で用語を学べます。スキマ時間を活用して効率的に覚えましょう。

3. 英語チュートリアルに挑戦する

YouTubeには英語のデザインチュートリアルが豊富にあります。用語を知っていれば、内容を理解できるようになります。

---

よくある質問

:::qa Q. 全部の用語を覚える必要がありますか？

A. まずは頻出する20〜30語から始めましょう。レイアウト関連（Margin、Padding、Alignment）と色関連（Hue、Saturation、Contrast）を優先的に覚えると、多くの場面で役立ちます。 :::

:::qa Q. 発音も覚えるべきですか？

A. 文字で認識できれば十分です。デザイン用語は読み書きで使うことが多いため、発音はあまり重要ではありません。ただし、英語での打ち合わせがある場合は発音も確認しておきましょう。 :::

:::qa Q. 日本語訳と英語、どちらを先に覚えるべき？

A. 日本語で概念を理解してから英語を覚えるのがおすすめです。概念を理解していれば、英語は「ラベル」として覚えるだけなので簡単です。 :::

---

まとめ

:::summary デザイン英語用語のポイント

1. レイアウト用語（Margin、Padding、Alignment）はツール操作で必須
2. 色用語（Hue、Saturation、Contrast）は配色設定で頻出
3. フォント用語（Weight、Kerning、Leading）はテキスト調整で使用
4. 操作用語（Undo、Export、Duplicate）は毎日使う

英語用語を覚えれば、海外のリソースも活用でき、学習の幅が大きく広がります。 :::

:::cta 日本語・英語両方で学べるデザイン用語アプリ デザ単：デザイン単語帳 App :::

---

関連記事

• Figma用語集｜初心者が最初に覚えるべき30のデザイン用語
• Photoshop初心者用語｜これだけ覚えれば操作が楽になる25の基本用語
• Illustrator初心者用語｜ベクターデザインの基本25用語を完全解説
• デザイン用語30選｜初心者が最初に覚えるべき基礎単語

---

※ 画像出典：Unsplash（Green Chameleon）