ホーム›学習コラム›プロダクトデザイン英語
英語学習コラム

プロダクトデザイン英語｜UX / UI / Wireframe / User research の語彙

執筆: IchiShio — native-real 編集長

最終更新: 2026-05-24

目次

  1. UX / UI の基本語彙：違いと使い分け
  2. Wireframe / Prototype / Mockup の違い
  3. User Research の英語：手法と語彙
  4. デザインフィードバックの英語：肯定と改善提案
  5. デザインシステムの英語：Tokens / Components / Variants
  6. Figma の英語インターフェース：頻出メニュー名
  7. デザイン英語での落とし穴
  8. プロダクトデザイン英語の習得プラン

本記事はアフィリエイト広告を含みます。

「Let's run a quick usability test on this wireframe.」「Can you push this to the design system?」── 外資系のデザインチームで日常的に飛び交うプロダクトデザインの英語を、UX / UI 用語、Wireframe / Prototype / Mockup の使い分け、User research、デザインフィードバック、デザインシステム、Figma 操作の 6 場面に整理します。

UX / UI の基本語彙：違いと使い分け

"UX" と "UI" は混同されがちですが、外資系チームでは明確に区別されます。最初に押さえるべき基礎語彙です。

UX (User Experience) 周辺

  • User experience (UX) — ユーザーが製品を通して得る体験全体
  • User flow — ユーザーが目的達成までに通る画面・行動の流れ
  • User journey — ユーザーの製品利用開始から離脱までの長い旅程
  • Pain point — ユーザーの痛み・困りごと
  • Jobs to be done (JTBD) — ユーザーが製品を雇って達成したい仕事
  • Information architecture (IA) — 情報の構造・階層設計
  • Accessibility (a11y) — 障害のあるユーザーも使える設計
  • Usability — 使いやすさ

UI (User Interface) 周辺

  • User interface (UI) — 画面の見た目・触り心地
  • Visual design — 色・タイポグラフィ・余白などのビジュアル
  • Interaction design (IxD) — タップ・スワイプなどの動き・反応の設計
  • Motion design — アニメーション設計
  • Component — ボタン・カードなど再利用可能な UI 単位
  • Layout — 画面構成・配置
  • Typography — フォント・サイズ・行間など
  • Affordance — 「ボタンに見える」など、機能を直感させる視覚的合図

会話例

  • The UX is solid but the UI needs polish.（UX は良いが UI に磨きが必要）
  • This button doesn't have enough affordance.（このボタンは押せそうに見えない）
  • We need to improve the accessibility for screen readers.（スクリーンリーダー対応を改善する必要）

Wireframe / Prototype / Mockup の違い

初学者が混同しがちな 3 つの成果物の違いです。デザイン会議で「これは wireframe なのか mockup なのか」を明確に伝えると、レビューが噛み合います。

3 つの成果物の定義

  • Wireframe — 低忠実度の骨格。グレースケール中心、ボタンの位置・要素配置のみ
  • Mockup — 高忠実度の静止画。色・タイポ・実画像など最終ビジュアルに近い
  • Prototype — 操作可能な試作。タップ・遷移・アニメーションを再現

関連語彙

  • Low-fidelity / Low-fi — 低忠実度
  • High-fidelity / Hi-fi — 高忠実度
  • Sketch — 手描きラフ
  • Clickable prototype — クリック可能な試作
  • Interactive prototype — 操作可能な試作
  • Storyboard — シナリオを絵で表現した連続コマ

使い分けの目安

  • 初期アイデア段階 → Sketch / Low-fi wireframe
  • 構造の合意 → Wireframe
  • ビジュアル合意 → Mockup
  • ユーザーテスト・実装前確認 → Interactive prototype

会話例

  • Let's start with low-fi wireframes before jumping into visual design.（ビジュアル前に低忠実度のワイヤーから）
  • The mockup looks great. Can we make it interactive next?（モックアップは良い感じ。次に interactive にできる？）
  • I'll share a clickable prototype by end of day.（終業までに clickable prototype を共有します）

User Research の英語：手法と語彙

ユーザー調査 (user research) の語彙は、デザイナーだけでなく PM も使います。手法の名前と、結果の語り方を押さえます。

主要な調査手法

  • User interview — ユーザーインタビュー
  • Usability test / Usability testing — 使いやすさのテスト
  • Moderated test — モデレーター付きテスト
  • Unmoderated test — モデレーターなしテスト
  • A/B test — 2 案の比較
  • Card sorting — IA 設計のためのカード分類
  • Tree test — IA の正確性検証
  • Heatmap — クリック・スクロールの密度可視化
  • Survey / Questionnaire — アンケート
  • Diary study — 期間を置いた日記式調査
  • Ethnographic research — 行動観察型調査

結果分析の語彙

  • Insight — 調査から得た洞察
  • Finding — 観察された事実
  • Hypothesis — 仮説
  • Validate / Invalidate — 仮説の検証 / 棄却
  • Affinity diagram / Affinity mapping — 観察結果のグルーピング
  • Persona — 想定ユーザー像
  • Journey map — ユーザー旅程図

会話例

  • We ran usability tests with five participants last week.（先週 5 名で usability test を実施）
  • One key insight is that users don't understand the icon.（重要な洞察はアイコンが理解されていないこと）
  • We need more data to validate this hypothesis.（この仮説の検証には追加データが必要）

デザインフィードバックの英語：肯定と改善提案

デザインレビューで 建設的にフィードバックを返す ための英語表現です。日本語のように曖昧に濁すと意図が伝わらず、逆に直接すぎると角が立ちます。

肯定を伝える表現

  • The overall direction looks great.（全体の方向性は良い）
  • I love what you've done with the hero section.（ヒーロー部分の処理が素晴らしい）
  • The hierarchy is much clearer now.（階層構造が以前よりずっと明確）

改善提案を伝える表現

  • One thing I'd consider is ...（一つ考えてみたいのは〜）
  • Have you thought about ...?（〜は検討した？）
  • Could we explore an alternative for the CTA?（CTA の別案を探れる？）
  • I'm a bit concerned about [specific issue]. What do you think?（〜が少し気になる、どう思う？）

質問形式でやわらげる

  • What's the reasoning behind [choice]?（〜の意図は？）
  • How does this work on mobile?（モバイルではどう動く？）
  • What happens if the text is much longer?（テキストがもっと長い場合は？）

避けたい表現

  • This is wrong.（これは間違い）→ 角が立つ。"This might cause an issue because ..." に
  • I don't like it.（好きじゃない）→ 主観すぎる。"I'm not sure this conveys X" に
  • Just do X.（X やって）→ 命令調。"Could we try X?" に

建設的フィードバックを学ぶには、英語の提案フレーズ集と英語で No を丁寧に伝える表現も併せて参照すると応用が効きます。

デザインシステムの英語：Tokens / Components / Variants

大規模プロダクトには デザインシステム が不可欠です。共通の語彙を持つことで、デザイナーとエンジニアの会話が噛み合います。

デザインシステムの構成要素

  • Design tokens — 色・余白・タイポグラフィなどの最小単位
  • Foundations — Color / Typography / Spacing / Grid などの基礎層
  • Components — ボタン・カードなど再利用可能な部品
  • Variants — 同一コンポーネントのバリエーション（例: Primary / Secondary / Disabled）
  • Patterns — フォームやモーダルなど、複数コンポーネントを組み合わせた標準パターン
  • Guidelines — 利用ルール

トークンの典型カテゴリ

  • Color tokens — Primary / Secondary / Surface / Error など
  • Spacing tokens — 4px / 8px / 16px のような刻み
  • Typography tokens — Heading / Body / Caption など
  • Elevation / Shadow tokens — 影のレベル
  • Radius tokens — 角丸の量
  • Motion tokens — Duration / Easing

運用関連の語彙

  • Adoption — システムの導入率
  • Contribution model — 新コンポーネントの追加ルール
  • Deprecation — 古いコンポーネントの段階的廃止
  • Versioning — バージョン管理
  • Single source of truth — 唯一の正本

会話例

  • Is there a token for this color, or should I use a custom value?（この色のトークンはある？それともカスタム？）
  • Let's promote this to the design system.（これをデザインシステムに昇格させよう）
  • This component is deprecated. Use the new one.（このコンポーネントは廃止予定。新しいのを使って）

Figma の英語インターフェース：頻出メニュー名

Figma / FigJam / Sketch などのデザインツールは英語インターフェースが基本です。よく使うメニュー名と操作名を覚えておくと、海外メンバーとの操作指示が楽になります。

Figma の基本メニュー

  • Frame — 画面・領域の単位
  • Auto Layout — 自動レイアウト
  • Constraints — リサイズ時の挙動
  • Component / Main component — コンポーネント / 元コンポーネント
  • Instance — コンポーネントのインスタンス
  • Variant — バリアント
  • Property — プロパティ
  • Boolean property — true / false の切替プロパティ
  • Style — Color style / Text style / Effect style
  • Variable — 値を共有する変数
  • Mode — Light / Dark などのモード切替

操作系の頻出語

  • Detach instance — インスタンスを切り離し
  • Reset overrides — オーバーライドをリセット
  • Swap instance — インスタンスを差し替え
  • Publish library — ライブラリを公開
  • Update available — 更新あり
  • Branch / Merge — ブランチ作成 / マージ
  • Comment / Resolve — コメント / 解決済みに

会話例

  • Can you detach this instance and adjust it manually?（このインスタンスを切り離して手動調整できる？）
  • I just published the library — please update.（ライブラリを公開した、更新してね）
  • Let's resolve all the open comments before handoff.（実装引き渡し前に未解決コメントを片付けよう）

デザイン英語での落とし穴

1. UX と UI を混同しない

"The UX is beautiful." と言うと、海外チームには違和感を与えます。「綺麗」と言いたいなら "The UI is beautiful." または "The visuals are stunning." が正解です。UX は体験全体の話で、見た目だけを指しません。

2. Mockup を Wireframe と呼ばない

カラーの入った詳細デザインを "wireframe" と呼ぶと、海外メンバーは「色なしの骨格」を想像します。混乱を避けるため、低忠実度なら "wireframe"、色付きなら "mockup" と区別します。

3. Feedback は質問形式でやわらげる

「これは違う」と直接言わず、"Have you thought about ...?" "What's the reasoning behind ...?" と質問形にすると、デザイナーの自尊心を傷つけずに改善議論に持ち込めます。

4. Designer / Engineer 間の用語ギャップ

同じ "component" でもデザイナー側 (Figma のコンポーネント) とエンジニア側 (React コンポーネントなど) で意味が微妙にずれます。会議では "Figma component" "React component" のように明示するとミスマッチを防げます。

プロダクトデザイン英語の習得プラン

ステップ1：6 場面の語彙を分けて暗記

UX/UI 基礎 → Wireframe/Prototype/Mockup → User research → Feedback → Design system → Figma の順で 6 場面に分けて語彙を覚えます。VocabUpのスワイプ学習で語彙の対応を反復し、咄嗟に意味が浮かぶ状態を作ります。

ステップ2：Speaking Instant でフィードバック表現を反射化

"What's the reasoning behind this?" "Have you thought about ...?" "One thing I'd consider is ..." のような型を、考えずに出る状態にするのが鍵です。Speaking Instantの business カテゴリで反復し、Figma レビューで即応できるようにします。

ステップ3：ListenUp でネイティブの会議スピードに耳を慣らす

デザインレビューは早口で、抽象語が多用されます。ListenUpで英語の速度・音変化・省略に耳を慣らしておくと、レビューで取りこぼしが減ります。

ステップ4：オンライン英会話でロールプレイ

講師に「Let's roleplay a design review. You're the PM, I'm presenting wireframes」と頼むと実戦的です。受け放題プランや 5〜10 分の短時間レッスンに対応したサービスなら、レビュー前のウォームアップに使えます。

プロダクトデザイン英語を毎日のレッスンで磨く

デザイン英語は、語彙を覚えても本物のレビューで即座にフィードバックを返せるかは別問題です。受け放題プランで毎日 5〜10 分、講師相手に「デザインレビュー説明」「ユーザーテスト結果共有」をロールプレイすると、本物のレビューで自然に発話できるようになります。

まずは 7 日間の無料体験で、デザイン業務に近いロールプレイレッスンを試してみるのがおすすめです。

ネイティブキャンプ 7日間無料体験を試す

本記事はアフィリエイト広告を含みます。

関連記事

※本記事はアフィリエイト広告を含みます。料金・サービス内容は変更される場合があります。最新情報は各公式サイトでご確認ください。