※この記事は2023年9月11日に更新されたものです。内容が古い可能性があります。
デザイン制作の現場では、様々な専門用語が使われますが、その意味を解説します。
知っているようで意味を知らない用語も中にはあると思いますので、ぜひご確認してください。
基本的な用語を勉強することから、デザイン制作を始めていきましょう。
制作物に関するデザイン用語
まずは、制作物に関するデザイン用語を紹介します。
メインヴィジュアル
メインヴィジュアルとは、ユーザーがWebサイトを見たときに最初に目にとまる大きいイメージ画像のことです。
メインヴィジュアルを見れば、どんなサイトでどんなコンテンツが含まれるのか一目で分かるようになっています。
メインヴィジュアルはユーザーをコンテンツに導き、コンバージョン率アップにつなげるとても大切な部分です。
ファーストビュー
ファーストビューはユーザーがWebページを見たときに最初に目に入るエリアです。
メインヴィジュアルとも重なる部分もありますが、ファーストビューの場合は、イメージ画像だけでなく、スクロールせずに映るすべての部分を指します。
LP（ランディングページ）
LPは、ユーザーが検索や広告を介して最初にアクセスするページのことです。
LPを見たユーザーは次のアクション、資料請求やお問い合わせ、商品購入へと移ることになります。
それだけに良質なLPが作成できれば、売上増にもつながりやすくなります。
バナー
バナーとは旗やのぼりのことですが、Webデザイン業界では特集やキャンペーンを告知するための画像、コンテンツ訴求画像、広告画像などを意味します。
バナーの制作では、内容とともに配置も重要になってきます。
カンプ・デザインカンプ
カンプとは、デザインやレイアウトの仕上がり完成見本のことです。
カンプはクライアントにデザインを提案する際やチーム内でデザインを共有する場合に大切な役割を果たします。
具体的なカンプを作ることで、クライアントやチームメンバーとの認識が共通になり、制作するデザインが定まります。
モックアップ
モックアップは実物大の完成模型のことです。
カンプと混同されやすい用語ですが、カンプがデザイン案であるのに対して、モックアップは模型です。
しかし、実際には同じ意味で使うことも多く、無理に識別する必要はありません。
ダミーテキスト
ダミーテキストとは、印刷物やWebサイトのレイアウトを決める際に文字を書き込む部分に無意味な文章を入れることです。
印刷物やWebサイトのデザインを決めるときに、実際の文字や画像が入っていないと感触がつかみにくいので、ダミー画像やダミーテキストを入れます。
OGP・アイキャッチ画像・サムネイル
OGPとは、SNSでWebページがシェアされた際にタイトル・画像・URL・説明文が表示される仕組みのことです。
OGPの設定により、ページの内容がユーザーに正しく伝わるようになります。
アイキャッチ画像はユーザーの目を惹きつけるための画像で、サムネイルは動画やファイルの内容が一目で確認できる縮小画像のことです。
デザインの方向性に関する用語
続いて、デザインの方向性に関する用語の意味を紹介します。
トンマナ（トーン&マナー）
トンマナとは、Webサイトなどのデザインやスタイル、文言に一貫性を持たせることです。
トーンは調子や色という意味、マナーは様式ということで、これらの要素にブレをなくすのはトンマナです。
ブランドアイデンティティ (Brand Identity)
ブランドアイデンティティとは、ブランドの特徴や個性を提示し、ユーザーに働きかけることです。
具体的には、ブランドカラー、ブランドロゴ、クレドなどがあります。
レイアウトに関するデザイン用語
今度は、レイアウトに関するデザイン用語を説明しましょう。
黄金比率
黄金比率とは、古来より人間がもっとも美しいと感じる比率のこと。数値で言うと、「1:1.6（近似値）」です。
種類としては、黄金長方形や黄金螺旋があります。
黄金比率は歴史的建造物や美術品、私たちの身の回りの品でも良く採用されています。
三分割法 (Rule of Thirds)
三分割法とは、画面を縦横3等分に分けて、分けた線が交わる4つの点のどこかに対象物を持ってくるデザイン方法です。
バランス良く安定した構図ができる方法になっています。
ヒエラルキー (Hierarchy)
ヒエラルキーとは階層のことで、デザイン用語では各パーツの重要度の区別を意味します。
ホームページの見栄えを良くするために、階層ごとに重要な情報を整理していくのです。
タイポグラフィー (Typography)
タイポグラフィーとは、文字を読みやすく形作リ、美しく配置することです。
文字の大きさ・フォント・行間・文字間・活字の紙面上での配置など様々な要素が含まれます。
また、文字をデザインと考え、独特な表現をすることもタイポグラフィーと呼ばれます。
余白 (Whitespace)
余白とは、画像や文章などのコンテンツが配置されていないエリアのことです。
実は余白は大きな意味を持ち、単なる空きスペースではなく、ユーザーに息継ぎを与える場所になっています。
余白の使い方で、ユーザーが感じる印象は大きく変わるので、よく考えて作成する必要があります。
マージン (Margin) / パディング (Padding)
マージンもパディングも余白の一種ですが、マージンは要素と要素の間の空間、パディングは要素内の余白を意味します。
グリッド (Grid)
グリッドは格子や方眼という意味の言葉ですが、デザイン用語ではテキストや画像を格子状に配置することを意味します。
等間隔に引いた水平線と垂直線が交わる部分にデザイン要素を配置します。
色に関するデザイン用語
色に関するデザイン用語の意味を確認してみましょう。
CMYK / RGB
CMYKは紙などの印刷物に使用される色の表現方法です。RGBはパソコンやタブレット、テレビなどで使われる色の表現方法です。
それぞれ構成色が違い、CMYKはシアン、マゼンタ、イエロー、RGBはレッド、グリーン、ブルーの光の三原色です。
色相・明度・彩度
色相は青、赤、黄、緑などの色味のことです。
明度は色の明るさで、明るくなると白に近づき、暗くなると黒に近づきます。
彩度は色の強さや鮮やかさのことです。
彩度が高いと鮮やかになり、彩度が低いとくすんで見えます。
トーン(tone)
トーンとは色の明度と彩度の組み合わせのことです。
選ぶ色のトーンによってイメージが変わってきます。
コントラスト (Contrast)
コントラストとは対比のことですが、デザイン分野ではフォントや色を使って情報にメリハリをつけることを意味します。
コントラストが強いと、くっきりとしたシャープな表現になります。
コントラストの具合により写真のイメージも大きく変わります。
暖色(Warm Color) / 寒色 (Cool Color)
暖色は赤や黄色、オレンジなど気分を盛り上げて、元気にしてくれる色です。
寒色は青や緑、紫など落ち着いた気分にしてくれる色です。
補完色 (Complementary)
補完色とは、色相環で正反対に位置する色のことです。
色相環は色相を環状に配置した図です。補完色の組み合わせによって、お互いの色を引き立てることもできれば、逆に目がチカチカすることがあります
グラデーション (Gradient) / デュオトーン (Duotone)
グラデーションとは、色の濃淡、明暗、色彩などが緩やかに変化することです。
デュオトーンは2つの色を組み合わせて、表現すること。コントラストをきかせたい場合に使うデザイン方法になっています。
オパシティ (Opacity)
オパシティとは不透明度のことです。オパシティが高くなれば不透明度が増し、低くなれば透明に近くなります。
テクスチャー (Texture)
テクスチャーは手触りや質感を意味する言葉ですが、デザイン分野では「ざらざら」「ふんわり」「つるつる」などと表現されます。
ドロップシャドウ／インナーシャドウ
ドロップシャドウもインナーシャドウもテキストや画像に影をつけることです。影をつけることで、立体感が生まれます。
ドロップシャドウは外側に影をつける手法、インナーシャドウは内側に影をつける手法です。
ゴーストボタン
ゴーストボタンは透明、又は半透明のボタンで背景が透けて見えます。ゴーストボタンを使うと、デザインの邪魔にならず、イメージを壊さないで済みます。
ベクター素材
ベクター素材は拡大しても縮小しても画像が粗くならない表現素材です。どんなサイズにも対応できるので、看板、ポスター、デジタルサイネージ、Webサイトなど様々な場所で活用されています。
文字・フォントに関するデザイン用語
最後に、文字・フォントに関するデザイン用語の意味を解説しましょう。
ジャンプ率
ジャンプ率は文字や画像サイズの比率のことですが、本文と見出しとの対比で使われることが多いです。ジャンプ率が高ければ、見出しは大きくなります。大きな見出しはユーザーの目を惹きやすいです。
アウトライン化
アウトライン化とは、文字を図形化すること。正確には点と点を結んだ直線や曲線で図形情報として表すことです。
文字情報は利用する環境によってデザインが変化したり、文字化けを起こしたりすることがありますが、そのような事態を防ぐためにアウトライン化が行われます。
アラインメント (Alignment)
アラインメントとは整列されることですが、デザインの世界では文字揃えを意味します。左揃え、中央揃え、右揃え、両端揃えなどのことですね。
アラインメントを正しく設定すれば、デザインも美しくなり、画面を見やすくなります。
カーニング (Kerning)
カーニングは隣り合う文字の間の空白を調整することです。文字間を広くしたり狭くしたりして、読みやすくします。
レジビリティ (legibility)
レジビリティは可読性などと訳されることもありますが、文字が読みやすいかどうかということです。レジビリティが低い文字、例えば手書きのフォントなどは文字が読みにくく、長い文章を表示させるのに向いていません。
セリフ (Serif) / サンセリフ (San-serif)
セリフとはセリフと呼ばれる小さなハネの装飾がついた欧文書体のことです。日本語のフォントで言うと、明朝体に似ています。
サンセリフのサンは「ない」ということですから、セリフ、ハネがない欧文書体になります。こちらはゴシック体のようです。
x-height
x-heightとはアルファベットの「x」文字の高さのことですが、他のアルファベット全体の高さの基準になっています。「x」と同じような「a」「c」「e」などはx-heightと同じ高さになります。
Ascender/Descender
Ascender/Descenderは日本語で、「アセンダ」「ディセンダ」といい、アセンダはx-heightのアルファベットより上に突き出る部分、ディセンダは下に突き出る部分のことです。
例えば、「b」や「d」はx-heightよりも上に突き出る部分があるので、ここをアセンダと呼び、「g」や「j」はx-heightよりも下に突き出るので、突き出る部分をディセンダと言います。
Orphan/Widow
Orphanは孤児、Widowは未亡人という意味ですが、デザインの分野ではOrphanとは段落組をしたときに最後の文章がはみ出てしまうことです。Widowとははみ出た1行だけ改ページ（改段）になり、最後だけが分割されてしまうことです。
ともにテキストが読みづらくなるので、極力避けるべきだと言われています。
まとめ
いかがでしたか。
今回はデザイン制作で使う用語について解説しました。
多くの専門用語が使用されていますが、しっかり把握することでデザイン制作がスムーズになると思いますので、ぜひ記事を参考にしてみてください。
無料E-Bookダウンロード
アカウント無料診断
お問い合わせ