ノンデザイナーこそ知っておきたい【デザイン用語40】

更新日: 2023年07月11日

カーニング、CMYK、彩度、カンプデータ…Webデザイナーやグラフィックデザイナーの方と一緒に仕事をしていると、こうしたデザイン用語が会話の中に登場することがあります。

デザイナーと制作依頼者がコミュニケーションを取るときに、デザイナーとのコミュニケーションがしっかりと取れないと、デザイナーに主導権を握られたりデザイナー任せになってしまったりすることがあります。
そうすると、デザインが出来上がったときに、制作依頼者が意図していなかったデザインになってしまうことも珍しくありません。

今回は、ノンデザイナーこそ知っておきたいデザイン用語を集めてみました。
こうしたデザイン用語を知っておくことで、デザイナーとのコミュニケーションが取りやすくなるだけでなく、デザイナーに自分が表現したいデザインをより的確に伝えることができるようになります。
ある程度デザインの世界を知っている方は、自分がどれくらい知っているか確認するためのチェックリストとして使ってみてください。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

資料をダウンロード

制作物に関するデザイン用語

まずは、制作物の種類などを指す一般的な用語の説明です。

1.メインヴィジュアル

Webサイト上部の真っ先に目に入ってくる部分です。
一瞬で何のサイトかが判り、ユーザーの興味を惹きつける役割があり、主にキャッチコピー・画像・CTAボタンで構成されることが多いです。
サイトの成果に大きく影響する重要な部分なので、キャッチコピーとセットでしっかりと検討したいですね。
他に「ヒーローイメージ」という呼び方をすることもあります。

2.ファーストビュー

メインヴィジュアルを含むことが多いので、同義で使われるケースもありますが、正確には画面でスクロールせずに最初に見える範囲を指します。

メインビジュアルとファーストビュー.png

3. カンプ・デザインカンプ

デザイン案のことです。
最近はCMSやサイト制作ツールが進化し、わざわざデザインカンプを作らなくて良いケースも増えてきましたが、新規のWebサイトやWebページを作る場合、大幅な変更をする場合などは、依頼側と開発側のイメージの齟齬がないように、デザインカンプを作成することをおすすめします。

Webデザインのカンプ制作によく使われるツールとしては、figma（フィグマ）やCanva（キャンンバ）、Adobeの XD（エックスディー）、Photoshopなどがあります。

4. モックアップ

カンプとモックアップ.png

実物大の模型のことです。デザインカンプとの違いは、デザインカンプが「デザイン案」であることに対し、モックアップは「実物大の模型」と言うことですが、Webサイトデザインの場面においてはほとんど同じ意味で使われることが多いです。

但し、動作を伴うツールやアプリなどのデザインでは動きをイメージしやすいように、ページ遷移などで簡易的な動作を付けたデザイン案を提案することが多いので、モックアップと呼ぶことが多い傾向にあります。

画像参照元：Webデザインのカンプとは？作り方やおすすめ作成ツールをご紹介｜One Tip

5. Lorem Ipsum（ダミーテキスト）

スライド25.png

Lorem Ipsumとは、モックアップで作ったデザインカンプのコンテンツ部分に流し込むダミーテキストのことで、現場でのやり取りでは普通に「ダミーテキスト」と言うことがほとんどです。

Lorem Ipsumはラテン語表記をイメージしていますが、実際には全く意味のない文字の羅列になっています。
ちなみに日本では宮沢賢治の「ポラーノの広場」がモックアップとしてよく使われています。

デザインをする上でダミーテキストを使う目的は、単純に「テキストテキスト...」と打ったり、「□□□□□□...」などで見せるよりも、実際の文章を仮置きすることでが仕上がりに近いイメージでデザインを判断できるからです。

ダミーテキスト.png

6. LP（ランディングページ）

LP（ランディングページ）とは.png

ランディングページ（以下LP）とは、検索や広告などからユーザーが最初に流入するページのことを指します。
あらゆる集客施策の受け皿となるページで、商品を購入したり、お問い合わせ・資料請求など「ユーザーのアクション」を促す役割で、Webサイトの成果をあげるために最も重要なページとなります。

本来の意味では、1枚構成の縦長のページも、サービスサイトのTOPページや記事コンテンツもランディングページになり得ますが、実際のやり取りでは制作物の種類として1枚で完結する縦長のページを指していうことが多いです。

▼ LPデザインに関する資料はこちら

成果の出るLPデザインのポイント【チェックリスト付き】クリエイティブ例も紹介

7. バナー

バナーとは.png

広告で使われる画像や、サイト内でコンテンツを訴求するなどの目的で使われる画像のことです。クリックすると目的のページに遷移します。

デザイン制作においては、サイズとコピーさえ指定すればOKと考えがちですが、よりクリックされやすいバナーにするにはバナー画像単体で確認するのではなく、ユーザーがクリックしたくなるか？実際配信された時に相対的に目立つかどうかなどの視点で考えるてみる必要があります。

最近はCanvaなどノンデザイナーでもバナー制作しやすいツールやサービスがたくさんありますので、チェックしてみましょう。

参考：誰でも簡単にデザインができる無料ツール「Canva」とは？

8. OGP・アイキャッチ画像・サムネイル

OGP・アイキャッチ・サムネイル.png

OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、instagramなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。

デザイナーにはアイキャッチ画像（サムネイル）部分を依頼することが多いですね。
こちらもバナー同様、SNSのタイムラインに流れて来た時にユーザーにどう見えるか？という視点も必要です。
バナーやOPG制作の際に意識すべきことなどは下記資料でも解説しています。

マーケ思考のデザイナーは強い！提案型デザイナーのススメ

デザインの方向性に関する用語

9. ブランドアイデンティティ (Brand Identity)

ブランドアイデンティティ.png

ブランドアイデンティティとは、自社のブランドを顧客にどう思ってほしいかを明確にしたもので、企業として顧客に何を思い出してほしいのかを明確化したものです。
ブランドアイデンティティの中には、ブランドカラーやブランドロゴ、クレドなどが含まれます。

10.トンマナ（トーン&マナー）

トンマナ.png

トンマナとは、「トーン＆マナー」の略で、制作物におけるデザインの一貫性を持たせるルールを指します。基本となるフォント、カラー（メインカラーや配色）、ビジュアル（メインになるイメージ写真やカラー）などをルールとして設定します。

出典元：デザインを統一するトーン&マナーのつくり方｜JAGAT

レイアウトに関するデザイン用語

11. タイポグラフィー (Typography)

タイポグラフィー.png

タイポグラフィーとは、印刷物や表示物における文字組みや文字装飾の総称です。
もともとは「活字印刷術」のことを指して言いますが、現在では活字の「配置」や「構成」だけでなく、文字の大きさ・行間・文字間・活字の紙面上での配置など、さまざまなことをひっくるめて「タイポグラフィー」と呼びます。

サイトのファーストビューにしても、バナーやOGPにしても、ユーザーを惹きつけるには、このタイポグラフィーが重要です。特にバナー広告や、コンテンツ記事、資料の表紙などは内容が一瞬で伝わることが重要なため、まずこの文字組みをしっかり決めた上で、背景に使う画像やイラストを選ぶと良いでしょう。

文字やフォントに関する用語については、それぞれ詳しく後述します。

12. 余白 (Whitespace)

余白.png

余白はホワイトスペースやネガティブスペースとも呼ばれ、コンテンツが配置されていない領域のことを言います。

デザイン学では、余白は単なる「空間」以上の意味があるとされ、デザインを鑑賞する人に「息継ぎ」を与える重要な役割を担います。

参考：Appleも実践！シンプルだけど魅力的なデザインを実現しているホームページ6つの心得

「素人っぽさ」と「プロっぽさ」の違いの要因で一番多いのが、余白の使い方です。
こちらはパワーポイントデザインの資料になりますが、パワーポイントに限らず、Webサイトなど全ての制作物に共通して言えるポイントがまとめてありますので、興味のある方はぜひご覧ください。

13. マージン (Margin) / パディング (Padding)

マージンとパディング.png

● マージン：要素と要素の間の空間のこと
● パディング：要素内の余白。

こちらも余白(ホワイトスペース)に関する用語ですが、Web制作ではhtmlやCSSを実装するデザイナーやコーダーには理解しやすい言い方なので、覚えておくと良いでしょう。

14. グリッド (Grid)

グリッド.png

グリッドとは、縦横にレイアウトを作成するために区切った線や区切りそのものを指して言います。
とくにWebデザインにおいては水平・垂直に区切ってデザインすることが多いので、グリッドを使ってどのようにデザインするかが重要となります。

15.黄金比率

黄金比率.png

デザインの黄金比率というと、デザイン学的には縦と横の比率が「1：1.618」の黄金比となっている黄金長方形や、黄金螺旋などの記事が出てきますが、現実的に使うシーンはあまりないので、ざっくり「3分割」して要素を2:1でレイアウトするとまとまりやすい、ということを覚えておくと良いのではないでしょうか？

メインビジュアルやアイキャッチ画像で言うなら、画面サイズの3分の2のスペースにテキストを配置するなどです。

画像出典元：黄金比ってなに？デザインを思考する上で欠かせない概念を徹底解説！MarkeTRUNK

16. 三分割法 (Rule of Thirds)

スライド18.png

三分割法とは、画面を上下2本ずつの線で区切って、3分の1ずつに分け、4つの交点を作る図法のことです。
写真を撮影するときに、この交点に合わせることで美しく撮影することができます。

参考：初心者もプロ並み！知っているだけで写真が上手くなる”写真の基本構図”5選

17. ヒエラルキー (Hierarchy)

ヒエラルキー.png

ヒエラルキーとは「階層」や「階級制度」のことを言いますが、デザインにおいてはそれぞれのパーツの重要度の区別について言うことが多いです。
エディトリアルデザインやWebデザインでは、ヘッダー(タイトル)、サブヘッダー(サブタイトル)、ボディー(本文)を区別するために文字の大きさや色を変えるなどして、ヒエラルキーを構築することが大切です。

会話の中で実際に「ヒエラルキー」と言うケースはあまり多くないかもしれませんが、「ユーザーがコンテンツの階層や主従関係を理解しやすくする」と言う概念は、押さえておきたいデザインルールです。

参考：エンゲージメント率を高める！デザインの視覚的階層ルール「ビジュアルヒエラルキー」3つのコツ

色に関するデザイン用語

18. CMYK / RGB

スライド12.png

制作物のカラーモードのことです。
一般的にWeb上で閲覧する制作物には「RGB」、印刷する場合には「CMYK」を利用します。

・Web関連の制作：RGB
・紙などの印刷物：CMYK

画面上や紙面上で色を表現するときには、色の三原色を使います。
三原色には、光の三原色(RGB)と色料の三原色(CMY)との2種類があります。

RGBとはRed(赤)、Green(緑)、Blue(青)の頭文字を取ったものです。
RGBは混ぜれば混ぜるほど色が明るくなり、白色に近づいていきます。

一方、CMYKとは、Cyan(シアン：水色)、Magenta(マゼンタ：ピンク色)、Yellow(イエロー：黄色)、Key(キー・プレート：黒)の頭文字を取ったカラーモードのことです。
CMYはそれぞれ混ぜれば混ぜるほど色が暗くなり、理論上は黒に近づいていくのですが、実際にはどんどん濁った灰色になり、一般的にイメージする黒色にはなりません。
そのため、印刷する場合には、黒の部分を引き締めるために、キー・カラーとして黒のインキを加えたCMYKの4色を使います。

19. 色相・明度・彩度

色相・明度・彩度.png

色と言えば「赤」とか「青」といった「色相」だけで捉えがちですが、色を構成する要素は色相の他に「明度・彩度」を含めた３つの要素があります。
プロのデザイナーが作る資料が見やすいのは、この明度・彩度のバランスが良いからです。
それぞれについて詳しく説明します。

● 色相 (Hue)

青、赤、黄、緑など色味を指します。
色相環というもので表現されています。

● 明度（brightness）

色の明るさを指します。
明度を高くすると明るくなってやがて白に、反対に低くしていくと黒になります。

● 彩度 (Saturation)

色の鮮やかさの尺度のことを言います。
彩度を落とすと、落ち着いた印象になり全体的なトーンがまとめやすくなります。逆に彩度を上げると、画面上で目立つようになります。

明度と彩度.png

この例のように色相を変えるのではなく、明度と彩度をバランス良く調整することで、仕上がりのクオリティを上げることができます。

参考：FacebookのUIの配色から考える！ブランドカラーを活かすためのHSB配色講座

20. トーン(tone)

トーン.png

トーンとは、明度と彩度を組み合わせたものです。色のトーンを揃えると、イメージを作り出しやすくなります。
例えば、「かわいらしい感じ」にしたい時は、この図で13番の「very pale tone」か9番の「pale tone」のようなトーン、「派手」にしたい時は1番の「bright tone」か2番の「vivid tone」のトーンを選ぶと良いでしょう。

出典：色カラー

21. コントラスト (Contrast)

コントラスト.png

コントラストとは一般に「対比」と訳されますが、デザイン用語としては画面や画像表示における明暗の差のことを言います。
明暗の差が大きいほどコントラストが強いといい、シャープでくっきりとした表現になります。

デザインに写真を使う際、この写真のコントラストや明度で印象が随分と変わります。
特に人物写真はコントラストや明度が高い方が垢抜けた印象になる傾向があります。

メインや背景に写真を使ったデザインで「デザインがちょっと垢抜けないな...」と思った時には、彩度・明度・トーン・コントラストが適切かどうかと言う視点でもチェックしてみましょう。

22. カラーパレット

カラーパレット.png

ここから「色相」関連の用語の説明に戻ります。
カラーパレットはデザインで使う色をピックアップしたものです。
配色については、気分によってその場で選ぶのではなく、あらかじめ意図を持ってあらかじめ選択しておくのがよいでしょう。

参考：
配色選びで悩みたくない！誰でも簡単に絶妙な配色が選べるツール15選

23. 暖色(Warm Color) / 寒色 (Cool Color)

暖色・寒色.png

暖色/ 寒色はファッションやコスメの話題でもよく出てくるので、知っている方も多いかもしれません。
暖色は暖かくて元気なイメージを与える赤や黄色、オレンジなどの色の総称です。
一方、寒色は温度でいうと低く、落ち着いたイメージを与える青や緑、紫などの色を指します。
色の組み合わせによって与える印象が随分と変わってきます。

24. 補完色 (Complementary)

補完色.png

補完色とは、色相環(色相を環状に配置したもの)である色に対して反対側にある色のことを言い、補色ともいいます。

補色同士の色の組み合わせはおたがいの色を引き立てあう相乗効果があり、これを「補色調和」と呼びます。
しかし、純色など明度が同じ補色を組み合わせた場合は、ハレーションを引き起こし目がチカチカしてしまうことがあります。

25. 三和色 (Triadic)

三和色.png

三和色とは、色相環状でぴったり均等に3分割した位置に来る3色の色の組み合わせのことです。
補色と同じように、お互いの色を引き立てあう効果があります。

26. グラデーション (Gradient) / デュオトーン (Duotone)

スライド15.png

グラデーションは「gradual」(だんだんと・ゆるやかに)という言葉に由来し、色のトーンが別の色にゆるやかに変わっていくものを指します。ここ数年はWebサイトの背景色にはもちろん、ボタンやテキストにグラデーションを使うトレンドが続いていますね。

一方、別々の2色を使っていてもゆるやかな変化なく2色を使用している場合は、デュオトーンと呼びます。

27. オパシティ (Opacity)

オパシティ.png

オパシティとは一般的に「不透明度」と訳されます。

オパシティが低ければより透明に近くなります。
オパシティが高くなれば不透明に、つまりはっきりと見えます。

「透明度」でなく「不透明度」なので、ややこしくて逆に覚えがちなので注意しましょう。

通常のやり取りでは日本語で日本語で「不透明度／透明度」とか「透過させる／させない」という言い方をすることの方が多く、「画像の上に背景色を透過させて敷きましょう」「CTAボタンをクリックした時の動作は、30％透過で」といったような言い方で伝わりますが、CSSで指定する時にはOpacityで値を設定するので、こちらも覚えておきましょう。

表現・素材に関するデザイン用語

28. テクスチャー (Texture)

テクスチャ.png

テクスチャーとは「質感」と訳され、「ざらざら」「ふんわり」などの手触りのイメージをグラフィック上で再現したものです。

「背景はシンプルにしたいけど、のっぺりしたくはない…」そんな時はテクスチャを上手く使うのも1つの手です。

29. ドロップシャドウ／インナーシャドウ

ドロップシャドウとインナーシャドウ.png

文字やオブジェクトに影を付ける表現です。ちょっと立体的感を出すことができます。
ドロップシャドウは外側に、インナーシャドウは内側に影をつける表現方法です。

・背景色や文字色を変えずに、タイトル文字を目立たせたい。
・このパーツを強調したいけど、色は増やしたくない

など、様々なシーンに使える便利な表現手法ですが、ここ数年のトレンドは薄くてフンワリしたさりげないシャドウです。極端なシャドウをつけると「古臭い」テイストになってしまうので気をつけましょう。

30. ゴーストボタン

ゴーストボタン.png

ゴースト（ghost）は「お化け」の意味で、背景色が透明なボタンのことをゴーストボタンと呼んでいます。
元々はファッションブランドのサイトなどで、おしゃれなデザインとして流行しましたが、ビジネスサイトなどではメインのCTAほど目立たせたくないボタンに使うケースが多く見られます。

お問い合わせや資料請求などの重要なボタンは目立つカラーで、ページ遷移させるリンクのボタンはゴーストボタンにするなど、メリハリを付ける使い分けをするのも良いでしょう。

31.ベクター素材

ベクター形式とラスタ形式の違い.png

ベクター素材とは、画像ではなくパスで描かれた素材のことで、主にイラストやアイコンなどの素材の話をするときに使われることが多い用語です。
画像の形式には大きく分けてベクター形式とラスタ（ビットマップ）形式の２種類があります。

	主な使い道	ファイル形式
ベクター形式	アイコン・イラスト・ロゴ	.ai .svg .eps .pdf .wmf など
ラスタ形式（ビットマップ形式）	写真素材	.jpeg .png .gif .webp .avif .bmp .tiff .xpm など

ベクター形式のメリットとしては、画像素材とは違い拡大しても解像度を気にしないくて良い点と、Illustratorなどのデザインツールを使える人にとっては色の変更や分解して再構築するなどの編集がしやすい点があります。

一方、デメリットとしては、そのままWeb媒体に掲載できず、ラスタ形式に変換しなければならないケースが多いことです。

クライアントからロゴデータを受け取る場合は、ベクター形式も貰っておくと便利です。
Web掲載のみならpngやjpegなど形式でも良いですが、パンフレットや展示会など紙媒体や大きな印刷物で使う場合にはベクターデータの方が扱いやすいためです。

どれを選んでも無料！高品質すぎるベクター素材60選

文字・フォントに関するデザイン用語

32_ジャンプ率

ジャンプ率.png

ジャンプ率とは本文の文字サイズに対する大きさの比率のことを指します。
本文のサイズに対して、見出しが大きければジャンプ率が高い、小さければジャンプ率が低い、となります。

ジャンプ率が高いとメリハリがつき、重要なポイントが頭に入りやすくなるので、資料やバナー、アイキャッチ画像などは、基本的にはジャンプ率を高くするとまとまりやすくなるケースが多いです。
この場合、強調する文字が多くなり過ぎないように、強調するポイントを絞ってバランス良く整えるようにしましょう。

逆に、上品なイメージに仕上げたい時に、敢えてジャンプ率を低くする場合もあります。目的に応じて調整しましょう。

33_アウトライン化

アウトライン化.png

テキストデータを、点と線で構成された図形データに変換することでです。
一般的には印刷物などで「フォントのアウトライン化をする」などという使い方をします。

文字情報を含んだデータを印刷業者などに入稿する際、ファイル上で使っているフォントに対応しない場合や、文字化けなどが起こるトラブルが起こる場合があります。
そのため、入稿用のデータはテキスト部分をアウトライン化しておいた方が確実です。

34. アラインメント (Alignment)

アラインメント (Alignment).png

アラインメントとは「文字揃え」のことで、基本的には「左揃え」「中央揃え」「右揃え」のことを言います。普段のやり取りでも日本語で「文字揃え」と言う場合が多いです。

一方、バーティカルアラインメント(Vertical Alignment)といって、「上揃え」「中央揃え」「下揃え」と垂直位置に関しての文字揃えに関して言う場合もあります。

中央揃え・左揃え.png

文字揃えは基本的には統一することを推奨します。左揃えなら左揃えで、中央揃えなら中央揃えなど。
人の視線は画面の左上から右下に向かって進むので、特に資料やWebサイトは左揃えを基本とするのが無難ではあります。

但し、バランスやインパクトを出すために敢えて部分的に中央揃えにしたいというケースもあると思うので、その際は文章の改行位置がバラつくことで読みづらくならないか、注意しましょう。

35. カーニング (Kerning)

カーニング.png

カーニングとは、2つの文字の間のスペース(カーン)の調整を行うことです。
例えばバナーのタイトルの文字間が広すぎると、間の抜けた印象になってしまうので、文字間を狭くカーニングしたり、逆に本文など長い文章の文字間が狭すぎると読みづらいので、広くカーニングするなど、テキストの目的や使う場所によって適切に調整します。

特にメインヴィジュアルや、バナーなどのアイキャッチ画像においては、繊細に調整をしてクオリティを上げたいところです。

36. レジビリティ (legibility)

レジビリティ.png

レジビリティとは日本語で「可読性」と訳されますが、よりデザインの専門用語として忠実に意味を解釈すると「ある文字と隣の文字との識別のしやすさ」について指す言葉です。
手書き文字のフォントはレジビリティが低い傾向にあるので、本文コンテンツなど長い文章を読ませる場合には向いていないと言われています。

こちらもやり取りで「レジビリティ」と言う単語で使うことはあまりないですが、Webデザインにおいて文字の可読性や視認性は重要であることは認識しておきましょう。

37.セリフ (Serif) / サンセリフ (San-serif)

セリフ／サンセリフ.png

書体の種類の用語です。セリフとサンセリフの違いは、日本語書体の明朝体／ゴシック体に置き換えてみるとイメージしやすいのではないでしょうか？

セリフとは、小さな「ハネ」がついたフォントです。日本語書体でいう明朝体のようなフォントです。
セリフフォントは伝統的、古風、専門的な印象を与えます。
代表的なセリフフォントにはTimes New Roman （タイムズ・ニュー・ローマン）やBodoni（ボドニー）などがあります。

一方、サンセリフは、「ハネ」のない直線的なフォントです。日本語書体でいうゴシック体のようなフォントです。
「san」とはフランス語で「〜がない」という前置詞のことです。
サンセリフフォントを使えば、モダンでスタイリッシュで洗練した印象を与えることができます。
代表的なサンセリフフォントにはHelvetica（ヘルベチカ）、Futura（フーツラ）などがあります。