ノンデザイナーこそ知っておきたい、25個のデザイン用語

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

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

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

ノンデザイナーこそ知っておきたい25個のデザイン用語

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

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

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

セリフとは、小さな「ハネ」がついた フォント です。セリフ フォント は伝統的、古風、専門的な印象を与えます。

一方、サンセリフは、「ハネ」のない直線的な フォント です。「san」とはフランス語で「〜がない」という前置詞のことです。
サンセリフフォントを使えば、モダンでスタイリッシュで洗練した印象を与えることができます。

セリフ・サンセリフは欧米文字に関して言いますが、日本語 フォント でも「ハネ」がある、ないで「明朝」「ゴシック」書体の区別をします。

3. カーニング (Kerning)

カーニングとは、2つの文字の間のスペース(カーン)の調整を行うことです。
カーニングを行わずに印刷すると字間がばらばらに見えてしまうことがあるため、バランスをしっかりと確認することが重要です。

4. x-height

x-height(エックス・ハイトと読みます)とは欧米文字 フォント の小文字の平均的な高さのことを言います。
heightとは高さのことで、基本的にあらゆるフォントが「x」の文字の高さに合わせていることからこの名前がつきました。

5. Ascender / Descender

Ascenderとは「x」の文字よりも上の部分のことを指します。
一方、Descenderとは「x」の文字よりも下の部分を指します。
例えば「g」や「j」、「p」の文字にはDescenderがついています。

6. Orphan / Widow

OrphanやWidowとは、段落組みをしたときに現れる「はみ出し」部分のことを言います。
はみ出した部分が多くなると テキスト が非常に読みにくくなるので、極力避けるようにすることが推奨されています。

Orphanはもともと「孤児」を意味する英単語で、段落組みの際に最後に少しだけ「孤立」してしまう部分です。
日本語でもメールを長く打ったりする場合に「おねがいします」の「ます」だけがはみ出してしまうことがあります。

Widowの本来の意味は戦争などで夫を亡くした「未亡人」の意味で、2段以上段落組をする際に列をまたいで「孤立」してしまう部分です。
2カラム以上の レイアウト で段落組みをする際には極力避けるべきだと言われています。

7. レジビリティ (legibility)

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

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

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

9. カラーパレット

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

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

10. 補完色 (Complementary)

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

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

11. 三和色 (Triadic)

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

12. CMYK / RGB

画面上や紙面上で色を表現するときには、色の三原色を使います。
しかし、一口に三原色と言っても、色料の三原色(CMY)と光の三原色(RGB)があります。

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

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

一般的にモニターでは「RGB」、印刷する場合には「CMYK」を利用します。

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

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

14. オパシティ (Opacity)

オパシティとは一般的に「透明度」と訳されます。
オパシティが低ければより背景と同化して見えるようになります。
オパシティが高くなればはっきりと見えます。
しかし、オパシティの高低とその結果を逆に捉えている方もいるので、注意しましょう。

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

グラデーションは「gradual」(だんだんと・ゆるやかに)という言葉に由来し、色のトーンが別の色にゆるやかに変わっていくものを指します。
一方、別々の2色を使っていてもゆるやかな変化なく2色をしている場合は、デュオトーンと呼びます。

16. コントラスト (Contrast)

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

17. 彩度 (Saturation)

彩度とは、色の三属性(色相・明度・彩度)の一つで、色の鮮やかさの尺度のことを言います。

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

18. 三分割法 (Rule of Thirds)

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

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

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

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

20. グリッド (Grid)

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

21. テクスチャー (Texture)

テクスチャーとは「質感」と訳され、「ざらざら」「ふんわり」などの手触りのイメージをグラフィック上で再現したものです。
グラフィックデザインは平坦になりがちですが、テクスチャーを活かしたデザインをすることでリアリティを追求できるようになります。

22. 余白 (Whitespace)

余白はホワイトスペースやネガティブスペースとも呼ばれ、 コンテンツ が配置されていない領域のことを言います。
デザイン学では、余白は単なる「空間」以上の意味があるとされ、デザインを鑑賞する人に「息継ぎ」を与える重要な役割を担います。

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

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

マージンは、要素間の空間で、パディングは要素内の余白のことを言います。
Webデザインでは余白(ホワイトスペース)をどれだけ取るのかにこれらの値を参照していきます。

24. ヒエラルキー (Hierarchy)

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

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

25. Lorem Ipsum

Lorem Ipsumとは、モックアップで作ったデザインカンプの コンテンツ 部分に流し込むダミー テキスト のことです。
ラテン語表記をイメージしていますが、実際には全く意味のない文字の羅列になっています。
ちなみに日本では宮沢賢治の「ポラーノの広場」がモックアップとしてよく使われています。

まとめ

実際には他にもさまざまな用語がありますが、これだけ知っているだけでもデザイナーとのコミュニケーションが少しでも円滑になるのではないでしょうか。

さらにデザインについて学びたい場合は、次の記事も参考になるのでぜひ読み進めてみてください。

参考：
ノンデザイナーがクオリティの高いWebデザインを作成する時に気をつけたい4つのポイント