駆け出しデザイナーが覚えておきたいデザイン用語60選

デザイン 用語集
DESIGNER

モーダルウィンドウ、ヒーローエリア、アクセシビリティ……。

デザイナーの世界では、業界特有の言葉が数多く存在します。仕事を円滑に進めるためにも、ある程度の業界用語を知っておくことは大切です。

今回は、デザイナー業界でよく使われる用語を60個ご紹介します。これまで何となく使っていた用語や、聞いたことはあるけど意味をよく知らない用語を振り返るのにぜひご活用ください!

ア行

アクセシビリティ

アクセシビリティとは、「アクセスのしやすさ」を意味し、日本語では「近づきやすさ」「便利さ」などと訳されます。

>>「アクセシビリティ」について詳しくはこちら

Adobe Illustrator(アドビイラストレーター)

Adobe Illustrator(アドビイラストレーター)はアメリカのソフトウェア会社アドビが提供する、イラストやグラフィックを作成できるイメージ編集ソフトです。

>>「Adobe Illustrator」について詳しくはこちら

Adobe Photoshop(アドビフォトショップ)

Adobe Photoshop(アドビフォトショップ)は、アメリカのソフトウェア会社アドビが提供する、写真やイラストを編集・作成できる画像編集ソフトです。

>>「Adobe Photoshop」について詳しくはこちら

Adobe XD(アドビエックスディー)

Adobe XD(アドビエックスディー)は、アメリカのソフトウェア会社アドビが提供する、あらゆるデバイスや画面に最適化されたプロトタイプ作成が可能なデザインソフトです。

>>「Adobe XD」について詳しくはこちら

Adobe After Effects(アドビアフターエフェクツ)

Adobe After Effects(アドビアフターエフェクツ)は、アメリカのソフトウェア会社アドビが提供する映像の合成やモーショングラフィックス、タイトル制作などができる動画編集ソフトです。

>>「Adobe After Effects」について詳しくはこちら

アトミックデザイン

アトミックデザインとは、アメリカのWebデザイナーであるブラッド・フロスト氏が考案した、UIデザインの手法のひとつです。

>>「アトミックデザイン」について詳しくはこちら

アプリデザイン

アプリデザインはその名の通り、アプリ内のデザインのこと。アプリデザインにおいては、お洒落さや見た目の美しさよりも、「いかにユーザーにとって使いやすいか」が重視されます。

>>「アプリデザイン」について詳しくはこちら

イラストレーター

イラストレーターとは、雑誌やポスターといった紙媒体のものから、ゲームのキャラクターまでさまざなな分野における、イラストを描くすべての人を指します。

>>「イラストレーター」について詳しくはこちら

インタラクションデザイン(interaction design)

インタラクションデザイン(interaction design/IxD)とは、ユーザーの操作にシステム/製品が反応をスムーズに返す、相互のコミュニケーションを実現させるためのデザインです。

>>「IxD/インタラクションデザイン」について詳しくはこちら

インフォグラフィックス

インフォグラフィックスは英語で表記すると「infographics」であり、情報(Information)をグラフ化(Graphics)することを示します。

>>「インフォグラフィックス」について詳しくはこちら

Webデザイナー

Webデザイナーとは、Webサイトのデザインを考案、作成する人を指します。

>>「Webデザイナー」について詳しくはこちら

Webデザイン

Webデザインとは、Web上のサイトやページのレイアウトやデザインを指します。

>>「Webデザイン」について詳しくはこちら

SVG

SVG(エスブイジー)は、Scalable Vector Graphicsの略称で、画像のデータ形式の一種です。

>>「SVG」について詳しくはこちら

カ行

カスタマージャーニー

カスタマージャーニーとは、簡単にいえば、顧客が購入に至るプロセスのこと。ブランドや商品の認知から購買や登録までの、ユーザーの思考と行動を時系列に並べ可視化したものです。

>>「カスタマージャーニー」について詳しくはこちら

画像圧縮

画像圧縮とは、ファイルのデータ量を最小化するために画像を圧縮させることです。

>>「画像圧縮」について詳しくはこちら

画像編集

画像編集とは、画像データやイラストデータを加工し、変化させることです。

>>「画像編集」について詳しくはこちら

カラーパレット

カラーパレットとは、配色を選ぶために定義された色のデータ、もしくはその組み合わせです。デザインソフトの色選択機能のことを指す場合もあります。

>>「カラーパレット」について詳しくはこちら

グラフィックデザイン

グラフィックデザインは、テキストや画像、色などを使って見た人に情報やメッセージを分かりやすく伝えることを目的としたデザインです。新聞や広告ポスター、商品パッケージなどに使われます。

>>「グラフィックデザイン」について詳しくはこちら

ゲーミフィケーション

ゲーミフィケーションとは、ゲームに使われている仕組みや構造をゲーム以外の分野に応用することを意味します。

>>「ゲーミフィケーション」について詳しくはこちら

サ行

色彩心理学

色彩心理学とは、色の見え方や感じ方など、色に対しての人間の行動や反応を研究する心理学です。

>>「色彩心理学」について詳しくはこちら

スクロール

スクロールとは、PCやスマートフォンなどのデバイス操作画面で、ディスプレイに映す範囲を上下または左右に移動させることを指します。

>>「スクロール」について詳しくはこちら

Sketch(スケッチ)

Sketch(スケッチ)は、デザインに特化したMac向けのグラフィックデザインソフトです。

>>「Sketch」について詳しくはこちら

スプラッシュスクリーン

スプラッシュスクリーンとは、ユーザーがアプリやソフトを起動するときに表示される画面のことです。

>>「スプラッシュスクリーン」について詳しくはこちら

タ行

ダークモード

iPhoneなどのデバイス画面では通常、白色の背景に黒色で文字が表示されます。これを逆転させ、黒色の背景に白文字が使用されるものがダークモードです。

>>「ダークモード」について詳しくはこちら

タイポグラフィ

タイポグラフィとは、文字の体裁(文字のフォント・サイズ・配列・行間など)を整えることを指します。また、文字をデザイン要素として扱う手法という意味でも使われます。

>>「タイポグラフィ」について詳しくはこちら

テクスチャ

テクスチャとは、三次元コンピュータグラフィクス(3DCG)において立体物の質感を表現するために使われる画像のことを指します。

>>「テクスチャ」について詳しくはこちら

デザインガイドライン

デザインガイドラインとは、デザインで守るべきルールを定めた指針です。

>>「デザインガイドライン」について詳しくはこちら

デザインシステム

デザインシステムとは、デザインの原則やスタイルガイド、コンポーネントなどデザインに関するあらゆるルールをまとめたシステムです。

>>「デザインシステム」について詳しくはこちら

デザイン思考

デザイン思考とは、デザインに必要な思考方法や手法を問題解決に応用した考え方です。

>>「デザイン思考」について詳しくはこちら

動画編集

動画編集とは、動画を切り貼りし素材を完成させることで、映像制作とは、動画素材を編集し、ひとつの作品を完成させるための工程を指します。

>>「動画編集」について詳しくはこちら

トンマナ

トンマナとは、「トーン&マナー(tone&manner)」の略で、広告や文章表現に置いてデザインやトーンを統一させるためのルールを指します。

>>「トンマナ」について詳しくはこちら

ナ行

ナビゲーションメニュー

ナビゲーションメニューとは、サイトの上部やサイドバーに並んでいるリンクです。また、どのページを開いても定位置に表示されるものを「グローバルナビゲーション」とも呼びます。

>>「ナビゲーションメニュー」について詳しくはこちら

入力フィールド

入力フィールドとは、Webサイト上でユーザーが情報を入力するための入力欄のことを指します。

>>「入力フィールド」について詳しくはこちら

人間中心設計

人間中心設計とは、Webサイト/アプリなどを開発するときに人間=ユーザーの使いやすさに焦点をおいて設計する手法です。

>>「人間中心設計」について詳しくはこちら

ハ行

ヒーローエリア

ヒーローエリアとは、Webサイトにおいてユーザーが一番に目にする部分のことです。ヒーローエリアに表示される画像は「ヒーローイメージ」と呼ばれます。

>>「ヒーローエリア」について詳しくはこちら

ビジュアルデザイン

ビジュアルデザインとは、映像やイラスト、写真、ロゴなどを用いて視覚的に分かりやすく情報を伝達することを目的としたデザインのことを指します。

>>「ビジュアルデザイン」について詳しくはこちら

Behance(ビーハンス)

Behance(ビーハンス)は、アメリカのソフトウェア会社アドビが運営するクリエイター向けのソーシャルメディアプラットフォームです。

>>「Behance」について詳しくはこちら

PSD(ピー・エス・ディー)

PSD(ピー・エス・ディー)とは「Photoshop Data」を略したもので、「Adobe Photoshop」と呼ばれる画像編集ソフトで主に利用されるファイル形式のことです。

>>「PSD」について詳しくはこちら

フォント

フォントは、一定のルールに沿って規定された文字スタイルです。近年は「書体」と同じ意味で使われます。

>>「フォント」について詳しくはこちら

フッター

フッターとは、ホームページの最下部に表示されるパーツです。ユーザーがホームページを閲覧する際、スクロールをし切って最後に辿るつくのがフッターです。

>>「フッター」について詳しくはこちら

フラットデザイン

フラットデザインは、余計な装飾を排し、要素の立体感を消した平面のシンプルなデザインです。

>>「フラットデザイン」について詳しくはこちら

フレームワーク

フレームワークとは、UIデザインをするときに使われる設計基準やテンプレート、UIコンポーネントの総称です。

>>「フレームワーク」について詳しくはこちら

プロダクトデザイン

プロダクトデザインとは、生産品のデザインです。近年、Webサービスやアプリもプロダクトと呼ばれることも多いですが、ここでは物理的なモノのデザインを指します。

>>「プロダクトデザイン」について詳しくはこちら

ヘッダー

ヘッダーとは、ホームページの上部に表示されるパーツです。ユーザーがホームページを開いたとき、トップビジュアルとともに最初に目にする重要なパーツです。

>>「ヘッダー」について詳しくはこちら

ホバーアニメーション

ホバーアニメーションとは、webサイト上において、ボタンやリンク、画像などにマウスのカーソルを合わせたときに、クリックする前に自動的に始まるアニメーションのことです。

>>「ホバーアニメーション」について詳しくはこちら

ホワイトスペース

ホワイトスペースは、デザインとデザインの間にある空白のスペースのことです。サイトの画面上などにおいて、情報を見やすくするため、目立たせるために用いられます。

>>「ホワイトスペース」について詳しくはこちら

マ行

マイクロインタラクション

マイクロインタラクションとは、ユーザーのアクションが正しく実行されたことを表示、処理完了をユーザーに伝えるための細かなデザインのことです。

>>「マイクロインタラクション」について詳しくはこちら

マテリアルデザイン

マテリアルデザインとは、2014年にGoogleが提唱したデザインです。明確なガイドラインが定められたデザインであり、「見やすく、直感的に操作できるWebページ・サービス」を作ることを目的としています。

>>「マテリアルデザイン」について詳しくはこちら

モーショングラフィックス

モーショングラフィックスとは、イラストやロゴ、図形、画像などに動きや音を加えて動画にしたものを指します。

>>「モーショングラフィックス」について詳しくはこちら

モーダルウィンドウ

モーダルウィンドウとは、ウィンドウ内で指定された操作を完了するかキャンセルするまで、ほかのウィンドウを開くことができないウィンドウのことです。

>>「モーダルウィンドウ」について詳しくはこちら

モックアップ

モックアップとは、英語で「模型」を意味し、Webサイトやソフトウェアなどの試作品を指します。

>>「モックアップ」について詳しくはこちら

ヤ行

ユーザビリティ

ユーザビリティとは、一般的に「使いやすさ」を意味し、UIデザインの指標のひとつです。

>>「ユーザビリティ」について詳しくはこちら

UI/UX(ユーアイ/ユーエックス)

UI/UX(ユーアイ/ユーエックス)とは、UI(User Interface)とUX(User Experience)を組み合わせた言葉です。

>>「UI/UX」について詳しくはこちら

UX(ユーエックス)デザイナー

UX(ユーエックス)デザイナーとは、「User Experience」と呼ばれる「ユーザーが商品やサービスに触れたときに得られる体験」の質を追求したデザインを作る人を指します。

>>「UXデザイナー」について詳しくはこちら

ラ行

レイアウト

レイアウトとは、情報を視覚化する作業です。Webサイトなどに掲載するテキストや画像、動画などのサイトを構成する様々な構成要素に視覚的な表現を取り入れることを意味します。

>>「レイアウト」について詳しくはこちら

レスポンシブデザイン

レスポンシブデザインとは、閲覧ユーザーの画面サイズに合わせてページレイアウトを最適化するデザインのことを指します。

>>「レスポンシブデザイン」について詳しくはこちら

ロゴ

ロゴは「ロゴマーク」の略称。会社や商品、サービスを象徴するもので、デザインされたアイコンや文字です。対象の思想や特徴を伝達するコミュニケーションツールとして機能します。

>>「ロゴ」について詳しくはこちら

ワ行

ワイヤーフレーム

ワイヤーフレームとはwebサイトのレイアウトを定める設計図です。どのようなコンテンツを画面上のどこに、どのように配置するかを決めるものであり、Webサイトの制作やアプリ開発に欠かせません。

>>「ワイヤーフレーム」について詳しくはこちら

(執筆&編集:Workship MAGAZINE編集部)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship