こんにちはディーメイクでWebデザイナーをしている鈴木です。
今回はさらっと説明する【デザインに関する基礎知識シリーズ】です。
あれ?なんか見たようなタイトル。。。と思ったかもしれません
今回は【Webサイト〜】ではなく【デザイン〜】です。
こちらも基本的な知識などをさらっと書いています。
Webとか紙とかデザインしてくる時に出てくる言葉を
色々と集めてみました。

目次
1.全般
・レイアウトWebDTP
文字・写真・図などをどう配置するかの設計、割り付けのこと。
見る人に目線を考えたり、情報が伝わるように整理するなどで
情報の伝わりやすさを大きく左右します。
・mm・級・px・%・vwWebDTP
これらは全て「レイアウト単位」のこと。
DTPではmm・級など実寸ベース、Webではpx・%・vwなど画面サイズに応じた単位を使います。
同じデザインでも、紙とWebでは考え方が大きく変わるポイントです。
・ビジュアルWebDTP
見た目、視覚的に目に入る要素全般。写真・イラスト・図など。
文章だけでは伝わりにくい内容を、直感的に理解させる役割を持ちます。
・ホワイトスペースWebDTP
余白のこと。何も置かない空間。
情報を「区切る」「目立たせる」ためのスペース。
余白の多い少ないが、読みやすさや、雰囲気に大きく影響します。
・版下DTP
印刷用の最終完成データ。
この状態になったら基本的に内容変更はできず、「これで刷る」という確定データを指します。
・トリムマーク(トンボ)DTP
印刷時の裁断位置を示す目印。
仕上がりサイズを正確にカットするため、データの四隅などに付ける角につける角トンボと
天地左右の中央につける十字トンボがあります。
ちなみにトンボの由来になったのは十字トンボの方です。
・塗り足しDTP
裁断ズレ防止のため、仕上がりサイズより外側に伸ばす部分(通常3mm程度)。
背景色や写真が端まであるデザインでは必須です。
・入稿データDTP
印刷会社に渡す最終データ。
PDF形式やカラーモード、塗り足しの有無など、印刷会社ごとのルールを守る必要があります。
・校正WebDTP
DTPでは赤字を入れた紙校正、Webでは画面やブラウザ上での確認します。
「誤字脱字」「色」「レイアウト」「表記揺れ」など文章をチェックする重要な工程です。
・ツメWebDTP
文字や要素同士の間隔を詰めること。
間延び感をなくしたり、まとまりをわかりやすくします。
・トルツメWebDTP
文字や要素をとって(削除して)間隔を詰めること。
主に修正の時に使われます。
2.文字・フォントまわりの用語
・フォント(書体)WebDTP
文字そのもののデザイン。ゴシック体、明朝体など。
フォントによって「堅い」「やわらかい」「高級感がある」など印象が大きく変わります。
・ウエイトWebDTP
文字の太さ。Light / Regular / Bold など。
同じフォントでも、太くすることでインパクトを出したり、
逆に細くして高級感を出したり印象を変えることができます。
・ジャンプ率WebDTP
文字サイズの差。
見出しを大きく、本文を小さくするなどして、読みやすくしたり意味がわかりやすくしたりします。
サイズ差が大きいことを「ジャンプ率が高い」と言い
サイズ差が小さいことを「ジャンプ率が低い」と言います。
・行間・line-height(ラインハイト)WebDTP
文章の行と行の間隔。
行間が詰まりすぎても開きすぎても読みづらくなる。
・字間調整・カーニングWebDTP
文字と文字の間隔。
ロゴや見出しなど目立つ箇所で綺麗に見えるように調整します。
cssのletter-spacingとは違い、文や単語全体ではなく各文字間で行います。
・ハコ組みDTP
文字を四角いエリアにきっちり収める組み方。
書籍や新聞など、情報量が多い紙面でよく使われます。
・アウトライン化DTP
文字データを図形データに変換すること。
印刷環境にフォントがなくても、文字崩れを防ぐため入稿前に行う。
アウトラインをかけてしまうと文字修正ができなくなるので、基本は複製してから行います。
・泣く(文字が泣く)DTP
文字組みが汚く、読みにくい状態。
文字が小さすぎたり、詰めすぎて潰れてしまった時などに使う現場用語
文の変な位置での改行、通称「泣き別れ」の時に使われることもあります。
3.色に関する用語
・配色WebDTP
色の組み合わせ。メインカラー・サブカラー・アクセントカラーなど。
配色が多いとにぎやかな印象に。少ないとすっきりした印象になる。
組み合わせる色によっても印象が変わります。
・コントラストWebDTP
色の明暗や色相の差。
背景と文字のコントラストが弱いと、上品だが読みにくくなってい
強すぎると目が痛くなったり、品がなくなってしまいます。
・カラーコード(色指定)Web
デジタルで色を指定するために数値で指定する方法。
RGB方式に基づいて16進数で指定します。
DTPでは色の指定方法が違うため使いません。
・RGBWeb
RGBは、R(Red:赤)、G(Green:緑)、B(Blue:青)
RGBを光の三原色といい、3色全て混ぜると白になります。
・CMYKDTP
CMYKは C(Cyan:シアン)、M(Magenta:マゼンタ)、Y(Yellow:イエロー)、K(Key plate:ブラック)
DTPでは色の指定はCMYKを用いて指定します。
ちなみに色の三原色とはCMYのことです。CMY全て混ぜると黒になります。
なぜDTPではK(Key plate:ブラック)を加えたCMYKになっているかというと、
印刷ではCMYを混ぜて作った黒が綺麗な黒にならず、黒インクだけ別で加えたということらしいです。
・キンアカDTP
DTPでC:0%、M:100%、Y:100%、K:0%の赤のこと。
明るく鮮やかな赤で、DTPでは目立たせたい箇所に使ったりします。
Webデザインでは使うことは少ないですが
使うとしたら明るくて濃い赤に対して使われることが多いです。
・ベタWebDTP
ムラのない単色塗り。
「黒ベタ背景」「ベタ塗り」などのように使います。
・アミ(網)DTP
色を薄くするときに使用する表現。アミノ状の細かい点の密度で色の濃淡が決まります。
たとえば黒30%のアミは、グレーのような見た目になります。
4.装飾に関する用語
・ふくろ文字WebDTP
文字の周りを縁取りした装飾文字。
写真の上に文字を載せるときや、言葉を目立たせたい時などによく使われます。
・シャドウ(影)WebDTP
文字や図形に影をつける装飾。
要素を浮き上がらせたり、背景から分離させたいときに使います。
影を強くしすぎると古くさく見えてしまいます。
・罫線(けいせん)WebDTP
区切りや装飾として使う線。
情報のグループ分けや視線誘導に使われ、細さや色で印象が変わります。
・あしらいWebDTP
装飾的に添える図形や線、模様。
主役ではないが、デザイン全体の雰囲気づくりに効果的です。
・囲みWebDTP
文字や情報を枠で囲う装飾。
注意を引きたい情報や補足説明などによく使われます。
・ノセWebDTP
写真や背景の上に文字や図形を載せること。
コントラストやふくろ文字を使って視認性が悪くならないよう注意が必要です。
・装飾過多WebDTP
装飾を盛りすぎて、逆に見づらくなっている状態やデザイン的にあまり良くない時に使われる。
「引き算した方が良い」サインとしてよく使われる言葉。
5.まとめ
最近はあまり聞かない、少し古い言葉もあえて入れてみました。
ここにあげた用語はどれも、デザインの現場で使われてきた“共通言語”です。
意味が分かると、デザインの指示や修正がスムーズになり、
用語を知っているだけでも「なんとなく作る」から「意図して作る」へと変わっていくと思います。
DTPとWebでは考え方も文化も違いますが
それでも、紙と画面の両方を知ることで、デザインの引き出しは確実に増えていきます。
「デザインをちゃんと理解して作れるようになりたい」
「DTPもWebも両方できるデザイナーを目指したい」
そんな方は、ぜひディーメイクで一緒に働きましょう。
こちらの記事もチェック!
アクセス解析やディレクションに興味も持ったらこちら

Webサイトの種類についてはこちら

