マーケティングの世界に足を踏み入れ、小規模なチームで仕事を進めていると、多種多様な仕事内容をこなすよう指示されます。ブログやソーシャルメディアに関することなら、ビギナーでも大抵すぐに対応できます。ですが間もなくデザインに関連したプロジェクトへの参加を求められるようになります。
ある時はインフォグラフィックのモックアップ、また別の日には、ダウンロードコンテンツのデザインに携わることを求められるでしょう。ビギナーであれば誰でも、この上なく自分の準備不足を感じます。デザイン用語を前にして、頭を抱えることでしょう。まるで外国語にしか見えないからです。
このような経験に覚えがありませんか？
誰もがこれを経験しています。そしてある時必ず、デザイン用語を身に付けなければならないタイミングが来るのです。それを踏まえて、私たち全員が一歩前進できるように、一般的にシェアされているものよりも掲載用語の多いこの用語集を、ここで紹介することにしました。
もちろんこれらの用語がすべてではありません。他にも追加したいと思う用語があれば、ぜひコメント欄を使って追加してください。まずはアルファベット順に、基本的な用語を掲載しました。
無料で使える！デザイン作成ツールCanvaの使い方基礎
非デザイナーでも無料で楽にデザインを作成できる！ デザインツール「Canva」を使いこなす方法を画像入りで解説します
- 無料で使えるCanvaの始め方
- テンプレートの選び方
- 外部リンクの設置方法
- デザインの共有方法
今すぐダウンロードする
全てのフィールドが必須です。
基本的なウェブデザイン用語集
A / B / C / D / E / F / G / H / J / K / L / M / N / O / P / R / S / T / V / W / X / ZA
1）整列（Alignment）
デザイン内の各要素（例：テキスト、画像など）の位置決め。ページや他の要素の位置を基準にした要素の整列を行うことができます。例えば、この段落の文章は左側余白に整列しており、下の画像内の列は右側余白に整列しています。
2）類似色（Analogous Colors）
色相環上で、隣り合わせで表示されている色。
3）アセンダー（Ascender）
文字の一部で、ミーンラインより上に伸びている部分。ベースライン、キャップハイト、ディセンダー、エクステンダーも参照してください。
B
4）ベースライン（Baseline）
目に見えない直線で、タイプフェイスのすべての文字の最下部に接触するライン。アセンダー、キャップハイト、ディセンダー、エクステンダー、ミーンラインも参照してください。
C
5）キャップハイト（Cap Hight）
ベースラインと大文字の最上部との間の高さ。アセンダー、ディセンダー、エクステンダー、ミーンラインも参照してください。
6）CMYKカラーモデル（CMYK Color Model）
シアン、マゼンタ、イエロー、ブラックを表します。紙への印刷時にインクによる光の吸収が発生することから、デザインを印刷時にはCMYKが使用されます。
7）色相環（Color Wheel）
原色、二次色、三次色の関係を表す色の円。
8）色彩設計（Color Schemes）
色相環からの2色以上の色の組み合わせ。色彩調和も参照してください。
9）補色（Complementary Colors）
色相環で真反対の位置に表示されている色。
10）圧縮（Compression）
余分なデータを削除することでファイルサイズを小さくする方法。サイズの大きいデータのメール送信や保存時に特に役立ちます。不可逆圧縮および可逆圧縮も参照してください。
11）コントラスト（Contrast）
色、形状、間隔、その他のデザイン要素において、違いを強調すること。
12）クロップ（Crop）
画像の外枠に近い部分を切り取り、素材を再構成すること、または画像のアスペクト比を変更すること。
13）カスケーディング スタイル シート（CSS）
ウェブページの実際のコンテンツとは関係なく、ウェブサイトの見た目や印象を指定するために使用するコード。
D
14）ディセンダー（Descender）
文字のエクステンダーで、ベースラインより下に伸びている部分。アセンダー、キャップハイト、ミーンラインも参照してください。
15）ディーピーアイ（DPI）
ウェブにおけるピクセルと似ていますが、ドットはデジタル画像を印刷する際の最小測定単位。DPI数は、印刷したデジタルオブジェクトの解像度を示します。DPIが大きいほど、解像度が高くなります。
16）ドロップシャドウ（Drop Shadow）
視覚効果で、グラフィックの後ろに影を表示します。
E
17）イーピーエス（EPS）
テキストおよびグラフィックの両方を含むベクタ画像に使用するファイル形式。
18）エクステンダー（Extender）
文字の一部でXハイトより上またはベースラインより下に伸びた部分。アセンダー、キャップハイト、ディセンダー、ミッドラインも参照してください。
F
19）フェザリング（Feathering）
デザイン技術のひとつで、輪郭を滑らかにする際に使用します。
20）フォント（Font）
特定のスタイルとサイズを持つ書体。一例としてはタイムズ ニュー ローマン、セミボールド、14ptなどがあります。
G
21）GIF
画像ファイル形式で、少ない数の色やデザインを持つサイズの小さなファイルや動画への使用に最も適しています。以下はGIF形式の動画の一例です。
22）グラデーション（Gradient）
デザイン技術のひとつで、ある色または画像の一部分が表示されてからある一方に向かってだんだんと消えていく様子。
23）グリッド（Grid）
垂直および水平線の仮想マップで、文書上で画像やテキストを整列させる際に利用します。
H
24）HEXコード（HEX Code）
HTMLやCSSで特定の色を指定する際に使用するコードで、大抵シャープ記号（＃）の後ろに表示されます。以下はHEXカラーコードの表です。
25）HTML
コンピューター言語で、テキスト、画像、リンクなどをウェブ上で表示する際に使用します。
26）色相（Hue）
一般的に「色」と認識されているもの、例えば赤、橙色、黄色など。
J
27）JPEG
不可逆または可逆圧縮を利用した画像ファイルタイプで、わずかに品質の低下が感じられるもの。JPEGは、写真や絵画などの、ある色から別の色への自然な移り変わりを含む画像に適しています。
K
28）カーニング（Kerning）
文字間の間隔。
L
29）レディング（Leading）
活字の行間の間隔。
30）不可逆（Lossy）
データ圧縮の形式で、ファイルサイズが小さくなるにつれて詳細部分が削除されていくもの。一般的な不可逆圧縮方法としてはJPEGがある。
31）可逆（Lossless）
不可逆圧縮の逆で、画像の詳細部分を復元させることができる形式。
M
32）ミーンライン（Midine）
ベースラインからほとんどの小文字の文字の最も高い位置までの高さで、「e」、「ｇ」、および「ｈ」のカーブ部分に当たるライン。下記にあるように、「中線」とも呼ばれています。アセンダー、キャップハイト、ディセンダーも参照してください。
N
33）ネガティブスペース（Negative Space）
ウェブページや単一の画像などで、デザインの周りを囲む空のスペース。余白も参照してください。
O
34）オープンタイプフォント（Open Type Fonts）
現在標準のフォント形式。1つのファイルにスクリーン版とプリンター版両方が含まれ、WindowsおよびMacの両方に適応しています。ファイルの拡張子は.otfです。
35）オーファン（Orphan）
段落の最後の行で、ページ下部で孤立しているもの。また、段落の最後の1行として単一の言葉や非常に短い行が残された場合にもオーファンとする。
P
36）パントーン（Pantone）
Pantone社が開発したカラーマッチングシステム。印刷デザインで幅広く使用されており、デザインのデジタル化の最中に、印刷物の色と画面上の色を一致させるために使用します。
37）PDF
文書やプレゼンテーション資料への使用に最も適したファイル形式。
38）ピクセル（Pixel）
コンピュータ上の画像の最小要素。
39）ピーピーアイ（PPI）
画像解像度を表す別の方法で、画像のある一部分にどのくらいの量のピクセルが含まれているかを表します。
40）PNG
画像ファイル形式で、（JPEGと違い）画像の大部分が単一色である場合や、背景が透明である場合の使用に最も適しています。
R
41）レクタンギュラー（またはテトラディック）カラーズ（Rectangular or Tetradic Colors）
二対の補色からなる4つの色。
42）解像度（Resolution）
画像のシャープネスや詳細のレベルを測定する方法。通常、解像度が高いとファイルサイズがより大きくなります。画像内のデータ量は、ピクセルやドットなどで表します。
43）RGBカラーモデル（RGB Color Model）
RGBは、赤、緑、青色を表す頭字語。モニターはRGB色の光を利用して様々な色を表現するため、RGBカラーモデルはウェブデザインに使用されます。
S
44）サチュレーション（Saturation）
色の明るさや強さを表します。
45）セリフ（Serif）
一部のフォントでストロークの端部に付いている小さなライン。「サンセリフ」はこのラインが付いていないフォントを表します。
46）シェード（Shade）
色相にどのくらい黒が混ざっているかを表します。
47）スプリット コンプレメンタリー カラーズ（Split-Complementary Colors）
原色とその補色の両隣に位置する2色を含む色。
48）スクエアカラーズ（Square Colors）
色相環で、それぞれ等距離の位置にある4つの色。
49）ステム（Stem）
文字を構成する主要な縦のストローク。例えば「B」や、「V」の斜めのストロークを指します。
50）ストローク（Strokes）
書体で文字を構成している線。
T
51）テール（Tail）
右下がりのストロークで、装飾的な文字に多く見られます。例えば「Q」の右下がりのストロークなど。
52）ターミナル（Terminal）
53）ティント（Tint）
色相にどのくらい白が混ざっているかを表します。
54）トライアディックカラーズ（Triadic Colors）
色相環で、互いに120度を保った3色を組み合わせた色彩設計。最適な色の組み合わせと考えられることが多い。
55）タイプフェイス（Typeface）
文字のデザインコレクションで、文字、数字、句読点が含まれます。例としては、タイムズ ニュー ローマン、ヘルベチカ、アリアルなどがあります。
V
56）ベクタ画像（Vector Image）
画像の表示にピクセルではなく線と輪郭を使います。ピクセルに頼らないため、ベクタ画像は拡大してもその明瞭さや品質が保たれます。
57）視覚的な階層（Visual Hierarchy）
デザインの原則で、色、サイズ、レイアウトを使用することでコンテンツ内のメッセージの異なる部分を視覚的に順序付けて強調します。
W
58）ウォーターマーク（Watermark）
ウェブページや印刷物の写真に重ねて表示する透かしの入ったマーカー。画像の所有者を特定し、視覚コンテンツの盗用を防止します。
59）ウェイト（Weight）
タイプフェイスにおいて、ストローク幅の厚み。例としては、デミボールド、ライト、ボールドなどがあります。
60）余白 （White Space）
オブジェクトデザインを取り囲む何も描かれていない部分。ネガティブスペースも参照してください。
61）ウィドウ（Widow）
段落の最後の部分のテキストで、最後の行に収まりきらず、次の段組やページにはみ出てしまっている部分。
X
62）Xハイト（X-height）
文字において、ミーンラインとベースラインの間の高さ。アセンダー、キャップハイト、ディセンダー、エクステンダーも参照してください。
Z
63）ZIPファイル
ファイル形式で、複数のファイルを圧縮してひとつのフォルダー内に収めたもの。圧縮ファイルはサイズを縮小させる際に一切のデータを失わないものとし、解凍も容易に行うことができます。
他にもリストに加えるデザイン用語はありますか？ぜひコメント欄に記載して教えてください。
編集メモ：この記事は、2017年1月に投稿した内容に加筆・訂正したものです。Amanda Zantal-Wienerによる元の記事はこちらからご覧いただけます。
