はじめに 🎨
デザイナーとして海外クライアントと仕事をしたり、英語でデザインについて話し合ったりする機会が増えていますよね。 今回は、デザインの専門用語や、デザインミーティングで使える英語表現をご紹介します！
デザイン基本用語集 📚
レイアウトとコンポジション
- レイアウト → layout
- 配置 → placement / arrangement
- グリッド → grid
- アライメント → alignment
- 余白 → margin / padding
- ホワイトスペース → white space
- バランス → balance
- コントラスト → contrast
- 画面解像度 → screen resolution
カラーと色彩
- 色相 → hue
- 彩度 → saturation
- 明度 → brightness / value
- トーン → tone
- カラーパレット → color palette
- グラデーション → gradient
- 補色 → complementary color
- 単色 → monochrome
- カラースキーム → color scheme
タイポグラフィ
- フォント → font
- 書体 → typeface
- フォントウェイト → font weight
- カーニング → kerning
- レタースペーシング → letter spacing
- 行間 → line spacing / leading
- フォントサイズ → font size
- セリフ体 → serif
- サンセリフ体 → sans-serif
デザインツール
- レイヤー → layer
- アートボード → artboard
- マスク → mask
- ブレンドモード → blend mode
- スマートオブジェクト → smart object
- ベクター → vector
- ラスター → raster
- クリッピングマスク → clipping mask
- パス → path
よく使うフレーズ・例文集 💡
デザインの方向性を説明する時
例文1： We’re going for a minimalist design with plenty of white space. （余白を多く取ったミニマリストなデザインを目指しています）
The overall layout should be clean and intuitive. （全体的なレイアウトはすっきりと直感的なものにすべきです）
フィードバックを求める時
例文2： What do you think about the color scheme? （このカラースキームについてどう思いますか？）
Should we adjust the spacing between elements? （要素間の間隔を調整した方がいいでしょうか？）
修正点を伝える時
例文3： The contrast needs to be stronger. （コントラストをもっと強くする必要があります）
Let’s increase the font size for better readability. （読みやすさを考えてフォントサイズを大きくしましょう）
デザインミーティングでの会話例 🗣️
クライアントとの打ち合わせ
A: Could you walk me through the design concept? （デザインコンセプトについて説明していただけますか？）
B: Of course. We’ve used a monochromatic color scheme to create a sophisticated look. （はい。洗練された印象を作るために、単色のカラースキームを使用しています）
A: I see. And what about the typography choices? （なるほど。タイポグラフィの選択についてはいかがですか？）
B: We selected a sans-serif font for better legibility on screens. （画面での読みやすさを考慮して、サンセリフ体を選びました）
デザインチーム内での会話
A: The hierarchy isn’t quite working in this section. （このセクションの視覚的階層がうまくいっていませんね）
B: You’re right. Maybe we should adjust the heading sizes. （そうですね。見出しのサイズを調整した方がいいかもしれません）
A: Good idea. And let’s increase the contrast between text and background. （いいアイデアですね。そして、テキストと背景のコントラストも強くしましょう）
B: I’ll create a new version with these changes. （これらの変更を加えた新しいバージョンを作成します）
文法のポイント 📝
デザイン要素を説明する時の前置詞
-
in + デザイン要素 例：The logo appears in the header. （ロゴはヘッダーに表示されます）
-
on + 場所・位置 例：The navigation menu is on the left side. （ナビゲーションメニューは左側にあります）
-
with + 特徴 例：Design with high contrast colors. （コントラストの強い色でデザインする）
よくある間違い❌
間違い：The image is under the text. 正しい：The image is below the text.
間違い：Make the font to bigger. 正しい：Make the font bigger.
シチュエーション別フレーズ集 🎯
デザインレビューで使える表現
-
The visual hierarchy needs work. （視覚的階層構造に改善が必要です）
-
The alignment is slightly off. （アライメントが少しずれています）
-
This element feels out of place. （この要素が場違いな感じがします）
デザイン提案時の表現
-
I’d recommend using a different typeface. （別の書体を使うことをお勧めします）
-
What if we tried a warmer color palette? （より暖かみのあるカラーパレットを試してみてはどうでしょうか？）
-
We could experiment with different layouts. （異なるレイアウトを試してみることもできます）
アクセシビリティに関する表現 ♿
重要な用語
- コントラスト比 → contrast ratio
- スクリーンリーダー → screen reader
- 代替テキスト → alt text
- キーボードナビゲーション → keyboard navigation
- フォーカス状態 → focus state
- カラーユニバーサルデザイン → color universal design
アクセシビリティについて話す時の表現
-
This passes WCAG guidelines. （これはWCAGガイドラインに適合しています）
-
We need to improve the contrast ratio. （コントラスト比を改善する必要があります）
-
Don’t forget to add alt text to all images. （すべての画像に代替テキストを追加することを忘れないでください）
レスポンシブデザインの表現 📱
基本用語
- ブレイクポイント → breakpoint
- フレックスボックス → flexbox
- メディアクエリ → media query
- ビューポート → viewport
- フルード画像 → fluid image
- モバイルファースト → mobile first
レスポンシブデザインについて話す時の表現
-
How does it look on mobile? （モバイルではどのように表示されますか？）
-
The layout breaks at this breakpoint. （このブレイクポイントでレイアウトが崩れます）
-
Let’s test it across different devices. （異なるデバイスでテストしましょう）
まとめ 🎨
デザインの英語表現は、国際的なプロジェクトやチームで働く際に必須のスキルです。 この記事で紹介した表現を使って、自信を持ってデザインについて英語で話せるようになりましょう！
最後におさらい
- デザインの基本用語を確実に覚えましょう
- 状況に応じた適切な表現を使い分けましょう
- アクセシビリティや技術的な用語も押さえておきましょう
プロのデザイナーとして、英語でのコミュニケーション力を磨いていきましょう！