- 更新日: 2021年6月30日
- 公開日: 2021年5月21日
Web制作・印刷物デザインで最低限知っておきたい単位の基礎知識まとめ
Web制作現場において、デザインやコーディングの中で様々な単位が使われています。
印刷物のデザインも含めるとさらに多くの単位が使われており、デザインを学ぶなら最低限知っておきたい知識です。
この記事では、デザイン・コーディングで使われる代表的な単位の特徴や、PhotoshopやIllustratorでの単位設定方法をご紹介します。
ぜひ最後までお読みください。
目次
- デザインにまつわる7つの単位
- 1.px（ピクセル）
- 2.cm（センチメートル）/mm（ミリメートル）
- 3.inch（インチ）
- 4.dpi（ドット・パー・インチ）
- 5.pt（ポイント）
- 6.Q（級）
- 7.H（歯）
- コーディングにまつわる代表的な5つの単位
- その前に押さえておきたい絶対単位と相対単位
- 1.em(エム)
- 2.rem（レム）
- 3.%（パーセント）
- 4.Vw（Viewport Width）
- 5.Vh（Viewport Height）
- Photoshop/Illustratorでの単位設定方法
- 1.Photoshopで単位を設定する
- 2.Illustratorで単位を設定する
- 目的や環境に合わせて最適な単位を利用しましょう
デザインにまつわる7つの単位
デザイン制作において利用する代表的な単位を7つご紹介します。
1.px（ピクセル）
ピクセルとは、デジタルデータを表示する際の小さな正方形のことを指しており、ドットとも呼ばれます。
パソコンで画像や文字を限界まで拡大表示してみると、小さな正方形の並びが確認できるでしょう。
この正方形一つひとつがピクセルであり、その大きさはデバイスによって異なります。
Webデザインを作成する際は、迷わずpxを利用しましょう。
そしてWebのデザインでは小数点を使わず、常に数値が整数になるようにしてください。
印刷物のデザインでは小数点を利用することも多くありますが、Webではpxが最小単位のため小数点以下の数値は存在しません。
小数点以下の数値が含まれるサイズは適切に処理できないため、画像がぼやけたり意図しない余白や余分な線が発生したりする可能性があります。
2.cm（センチメートル）/mm（ミリメートル）
cmやmmは、メートル法によって定められた定規やメジャーで計る際に使う単位と同じものです。印刷物のデザインにおいて、主にmmが利用されています。
1m＝100cm=1000mmです。
コーディングの際に使えない単位ですので、Webのデザインの場合は使わないようにしましょう。
3.inch（インチ）
インチとはヤード・ポンド法で定められた単位であり、1inchは25.4mmとなります。
テレビのサイズで「32型」といった表記を見たことがありませんか？これは「テレビ画面の対角線が32インチ」ということです。
実際のサイズは32＊25.4mmル=812.8mm、つまり約81cnとなります。
inchをそのままデザインに利用する機会はあまりありませんが、この後に紹介する解析度を表すdpiを理解するために必要な単位です。
4.dpi（ドット・パー・インチ）
dpiとはデジタル画面の解像度を表す単位であり、1インチの中に含まれるピクセル（ドット）の数を示しています。
1インチの中に多くピクセルが含まれるほど鮮明な画像になり、ピクセルが少ないほど荒くガタガタとした画像として表示されます。
- Webデザイン：72dpi
- 印刷物デザイン：350dpi
- ポスターのような遠くから見る印刷物デザイン：200dpi
このように、デザインの用途に合わせて最適な解像度が異なります。
解像度の詳しい解説は以下の記事をご覧ください。 ＜ここに解像度の記事へのリンクを入れる>
5.pt（ポイント）
ポイントとは印刷物の文字サイズで利用される単位のことで、インチに基づいて定められています。
1pt=1/72inchで計算され、mmに換算すると日本では1inchチ=0.3514mmになります。
6.Q（級）
級とは、日本語の組版において利用されており、現在でも印刷物の文字サイズで利用されている日本独自の単位です。
1級＝0.25mmであり、文字を撮影して専用の用紙に出力する「写植」のためにつくられました。Illustratorでは文字サイズにおいて級を設定できます。
長く印刷物のデザインをされている方の中には、いまでも級を利用している方もいるようです。
7.H（歯）
歯とは、級と同様に写植時代から利用されている単位です。歯は文字サイズではなく、行間や文字と文字の間隔を表しています。
Illustratorで文字サイズ以外の単位において設定できますので、文字サイズの単位である級と合わせて利用されています。
コーディングにまつわる代表的な5つの単位
続いてコーディングで利用される主な単位を6つ紹介します。
デザインにおいても利用されるピクセルも、コーディングにおいて重要な単位です。ピクセルに関しては全章の「デザインにまつわる7つの単位」でご確認ください。
その前に押さえておきたい絶対単位と相対単位
コーディングする際、cssにおいてサイズ指定をする場面が数多くあります。Webにおいて、サイズを表す単位はその特性から絶対単位と相対単位の2つに分けられます。
- 絶対単位：絶対的なルールで規定された単位。環境によって変化しない
- 相対単位：環境によって大きさが変わる変動的な単位
制作においてコーディングで使用する単位のルールを設定している場合があります。環境や制作物の利用シーン、目的に合わせて使い分けていきましょう。
1.em(エム)
emとは文字の高さを基準として変わる、文字サイズの相対単位です。
例えば文字サイズが14pxの場合1em＝14pxになり、文字サイズが40pxの場合は1em=40pxになります。
親要素に指定されたサイズが子要素に継承されるのが、emの特徴です。
<body>
<div class=“box”>
<p>テキスト</p>
</div>
</body>
例えばこのようなHTMLの中の要素において、以下のemを設定した場合です。
body{
font-size:20px;
}
.box{
font-size:0.8em;
}
.box p{
font-size:0.5em;
}
このような場合boxの中にあるpは「親要素であるboxのフォントサイズ×0.5em」になるため、フォントサイズは以下のようになります。
- box要素のフォントサイズは20px × 0.8em = 16px
- p要素は16px（box要素のフォントサイズ）× 0.5em=8px
個別の要素に対してフォントサイズを指定する場合は、親要素にどのような指定があるのかチェックしましょう。
2.rem（レム）
remとはHTMLのルート要素（body）のフォントサイズを基準にした相対値です。
親要素のサイズ指定が子要素に継承されないのが特徴で、個別の要素に対して設定しやすい単位です。
<body>
<div class=“box”>
<p>テキスト</p>
</div>
</body>
例えばこのようなHTMLの中の要素において、以下のremを設定します。
body{
font-size:20px;
}
.box{
font-size:0.8rem;
}
.box p{
font-size:0.5rem;
}
この場合、p要素はboxに指定されているフォントサイズ指定は影響しません。body要素に指定された「font-size:20px」を基準として計算されます。
- box要素は20px × 0.8rem=16px
- p要素は20px × 0.5rem=10px
3.%（パーセント）
パーセントは主に大きさや広さの割合を表し、基本となるものに対する割合を指定する相対単位です。
例えばtableにおいて横幅の指定をする場合、tableの横幅を100%とし、それに対してthのwidthを30%と指定できます。
現在はスマホ対応として、色々なディスプレイサイズで表示されることを想定してレスポンシブで構築することでしょう。
例えば画像の横幅を500pxと指定してしまうと、デバイスのサイズによっては横幅がはみ出してしまいます。
このとき横幅100%と指定しておけばディスプレイサイズに対しての割合で設定できますので、レスポンシブコーディングと相性のいい単位ともいえます。
4.Vw（Viewport Width）
Vwとは、ビューポートの幅に対する割合を表す相対単位です。
ビューポートとは、パソコンやスマホといったデバイスにおいてWebを表示しているエリアのサイズのことをいいます。
ブラウザが全画面モードではない場合、開いているウィンドウの大きさがビューポートとなります。
パソコンのブラウザではウィンドウズサイズを変更するだけでビューポートは変化するものです。
Vwはそのビューポートに対して横幅1Vw=1%として設定します。
<body>
<div class=“box”>
<img src=“△△△△△△.jpg”>
</div>
</body>
例えばこのようなHTMLの中の要素において、vwで横幅を指定します。
.box{
width: 50vw ;
}
.box img{
width: 50vw ;
}
このときビューポートの横幅が1200pxであれば以下のようになります。
- boxの横幅はビューポートの50vw→600px
- imgの横幅はビューポートの50vw→600px
%で指定した場合、親要素を基準に割合を計算してしまうため注意が必要です。
5.Vh（Viewport Height）
Vhとは、ビューポートの高さに対する割合を表す相対単位です。
<body>
<div class=“box”>
<img src=“△△△△△△.jpg”>
</div>
</body>
例えばこのようなHTMLの中の要素において、vhで高さを指定してみます。
.box{
width: 50vh ;
}
.box img{
width: 50vh ;
}
このときビューポートの高さが800pxであれば以下のようになります。
- boxの高さはビューポートの50vh→400px
- imgの高さはビューポートの50vh→400px
ファーストビューにおいて、あらゆるデバイスで高さいっぱいの画像を表示したいといった際に利用したい単位です。
Photoshop/Illustratorでの単位設定方法
デザイン制作に使われるPhotoshopやIllustratorにおける、単位の初期設定方法についてご紹介します。よく使う単位を設定しておきましょう。
単位はデザイン制作中に要素ごとに変更することも可能です。
1.Photoshopで単位を設定する
Photoshopを起動し、Photoshop＞環境設定＞単位・定規をクリックします。
環境設定の画面が開きますので、右側に並ぶ単位のエリアにある定規・文字の単位を利用したいものに変更してOKボタンをクリックしてください。
最後にPhotoshopを終了して再起動すれば単位の初期設定が完了です。
2.Illustratorで単位を設定する
Illustratorを起動し、Illustrator＞環境設定＞単位をクリックします。
環境設定の画面が開きますので、右側に並ぶ単位のエリアにある単位を変更してOKボタンをクリックしましょう。
IllustratorはPhotoshopよりも細かく分類されています。
- 線
- 文字
- それ以外の要素すべてである一般
- 東アジア言語のものオプション
このように4つの要素で単位を設定できますので、ご自身の制作現場に合わせて初期設定をしてください。
最後にIllustratorを終了し、再起動すれば単位の初期設定が完了です。
＼一流デザイナーのスキルが身に付く／
目的や環境に合わせて最適な単位を利用しましょう
デザインにまつわる単位は数多くあり、それぞれに特徴や利用シーンによって向き不向きがあります。
Webに関する技術は日々進歩しており、変化していくものです。
今後新たな技術や単位が生まれて主流になる可能性もありますので、常にアンテナを張って情報を集めてください。
そしてデザインやコーディングにおいて、制作現場の環境や目的によって最適な単位を選んで利用しましょう。
- この記事を書いた人
- 今村真理子
