はじめに
デザイナーと話しているとき「この人、何言っているんだろう？」とこっそりググってしまうことはありませんか？
デザイナーが使いがちな用語80単語を、４つの分野に分けて独断と偏見でピックアップしました。
気になる用語があれば、ぜひ調べてみてください。
目次
- UXデザイン編
- UIデザイン編
- グラフィック編
- 印刷物編
- 補足・参考文献
1. UXデザイン編
| 用語 | 概略 |
|---|---|
| 画面遷移図 | どんな画面があるか・画面同士のつながりを示した図 |
| インタラクション | ユーザの行為に対してリアクションが返ってくる双方向作用 |
| コンテキスト | 文脈やストーリー、背景 |
| ワイヤーフレーム | どの画面に何があるのか伝えるための、かんたんな線画によるプロトタイプ |
| モックアップ | ワイヤーフレームを元に、より立体的にデザイン検討するための試作品 |
| プロトタイプ | モックアップを元に、開発中にプロダクトの問題点を見つけるための試作品 |
| A/Bテスト | 複数パターンのうち、どちらがより目的を高く達成できるか確認するための検証 |
| ランディングページ | サービス等を販売・お問い合わせを増やすためのウェブページ |
| CVP(こんばーじょんぽいんと) | プロダクトが定義する、ユーザにとってもらいたい行動 |
| ユニバーサルデザイン | 年齢・性別、障害などの差異に関わらず、多くの人が使いやすいよう配慮した設計 |
| ユーザーヒアリング | 直接あるいはビデオなどを用いた、ニーズ・問題点についての意見の聴取 |
| アナリティクス | 複雑なことを小さく要素や成分に分け、その構成などを明らかにする方法 |
| フィードバック | 特定のインプットに対して返ってくる反応 |
| ペルソナ | 特定のプロダクトを利用する典型的なユーザ象 |
| ジャーニーマップ | ユーザのプロダクト接点を分析するために、行動・心理を時系列にまとめた図 |
| カスタマーサクセス | 「ユーザの満足」と「収益」を両立させるための能動的な改善 |
| ストーリーボード | ユーザ視点を検討するために、特定機能の利用シーンを描いたユーザが主人公の漫画 |
| インフォグラフィック | わかりやすく伝えるために、情報・知識などを視覚的に表現した図 |
| アフォーダンス | 物とユーザとの物理的な関係性 |
| ユーザーストーリー | プロダクトの特定の機能を利用する流れ |
2. UIデザイン編
| 用語 | 概略 |
|---|---|
| マージン | 複数のオブジェクトをまとめたグループ同士の余白 |
| ハイパーリンク | 特定のテキストをクリックすると、任意のリンク先へ遷移するリンク |
| モーダル | ユーザが特定の機能の利用できるよう、制限された状態 |
| ドロワー | クリックすると選択肢が引き出しのように表示されるメニュー |
| ハンバーガー | 三本線「≡」をクリックするとドロワーで表示されるメニュー |
| ダークモード | カラーコントラストを確保しつつ、液晶からの発光量を削減する機能 |
| レスポンシブ | PC・スマートフォンなど、異なる画面サイズを柔軟に考慮した設計 |
| スプラッシュ | システム起動あるいは画面遷移したときに、トップページの前に表示される画面 |
| パンくずリスト | ホームを起点とした階層表現を用いたテキストによるナビゲーション |
| プルダウン | クリックすると選択肢がリスト形式で表示されるメニュー |
| グローバルメニュー | 主要コンテンツへのリンクが集約されているメニュー |
| スプリングボード | 主要コンテンツへのリンクがアイコン一覧表示されているUI |
| アコーディオン | クリックすると選択肢が蛇腹のように展開表示されるメニュー |
| プレースフォルダー | 入力フォームなど記入例を記載するスペース |
| プログレスバー | ユーザのタスク進捗を棒状に視覚化した表現 |
| パララックス | スクロールにより複数オブジェクトを異なるスピードで動かし奥行きを演出する視差効果 |
| フラットデザイン | 立体感や質感などを抽象化した平面的な表現 |
| リキッドレイアウト | PC・スマートフォンなど、異なる画面サイズでも従来のレイアウトを維持できるようにする設計 |
| ベゼル | PC・スマートフォンなどデバイスの液晶画面の枠 |
| GUI（じーゆーあい） | マウスなどでグラフィカルに「直接操作」することができるUI |
3. グラフィック編
| 用語 | 概略 |
|---|---|
| トンマナ | 表現の一貫性を保つためのデザインや文章のルール |
| 明度 | 空間や色の明るさの値 |
| 彩度 | 空間や色の鮮やかさの値 |
| 粗密 | 密度の高いところと低いところのコントラストが効いた表現 |
| スウォッチ | カラーや色合い、グラデーション、パターンに名前を付けたもの |
| ディレクション | デザインの方向性を決定し監督すること |
| テクスチャ | オブジェクトの質感や手触り |
| アドビ | コンピュータによるクリエイティブ系ソフトウェア企業 |
| カラーパレット | カラーの組み合わせを定義したパレット |
| CMYK | 印刷物などに利用される色の表現方法 |
| RGB | 液晶などに利用される色の表現方法 |
| 暖色 | 赤や黄など、見る人に暖かい印象を与える色 |
| 寒色 | 青や緑など、見る人に寒い印象を与える色 |
| 解像度 | 画素の密度を示す数値 |
| コントラスト | オブジェクトやカラーなどの対照の比率 |
| グリッドデザイン | 格子状に分割した直線をガイドとした設計 |
| ロゴタイプ | ロゴを構成する、社名や商品名などを表す文字のデザイン |
| ロゴマーク | ロゴを構成する、ブランドを識別するためのシンボル |
| サムネイル | コンテンツを縮小した見本画像 |
| ラフ | レイアウトやデザインイメージを共有するための下書き |
4. 印刷物編
| 用語 | 概略 |
|---|---|
| フォント | 特定の書体を表現するための、ひと揃いの活字 |
| 書体 | 特定のデザイン方針で作られた文字の集まり |
| ポイント数 | 文字の大きさを表す値 |
| トリムマーク | 印刷物を裁断するときの目印 |
| 入稿 | 印刷データを印刷会社に渡すこと |
| 戻し | 制作中、第三者にデザインを確認をしてもらった際に発生する修正 |
| カーニング | 隣り合う文字のスペースの調整 |
| ウェイト | 文字の太さ、大きいほど太い |
| トラッキング | 複数の文字全体のスペースの調整 |
| レジビリティ・可読性 | 読みやすさの度合い、または性質 |
| リード | 導入部に表示される、本文の一部を抜粋または概略した文章 |
| DTP (でぃーてぃーぴー) | コンピュータを用いた印刷物の作成・印刷 |
| タイポグラフィ | 文字を用いた視覚表現 |
| サンセリフ | 線の端につけられた線・飾り(セリフ)がない文字 |
| オフセット印刷 | 版を使用した印刷方法、大部数の印刷ならコストダウンできる |
| オンデマンド印刷 | 版を使用しない印刷方法、小部数の印刷ならコストダウンできる |
| ノンブル | ページ数を表す表記 |
| 責了 | 制作者の自己責任で修正作業を終えること |
| トルツメ | 余計な文字や記号を削除修正したときに、前後を詰めること |
| トルママ | 余計な文字や記号を削除修正したときに、空白を残しておくこと |
6. 補足・参考文献
補足
- 本記事は「デザイナーが使用する場合」に想定される概略を記載しています。
同じ単語でも、使用するシーンや人によって意味が異なる場合があります。(2020/12/26)
参考文献
-
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
https://wa3.i-3-i.info/index.html -
ソシオメディア 用語集
https://www.sociomedia.co.jp/category/glossary -
What Is The Difference Between Wireframe, Mockup and Prototype?
https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/ -
Adobe イラストレーターガイド
https://helpx.adobe.com/jp/illustrator/user-guide.html