デザイナー未経験者の為のQ(級)とピクセルの基本
「Q(級)」と「ピクセル(px)」は、デザインのお仕事で「文字」を取扱う時に使用されている単位となります。デザイナーが、グラフィックデザインの仕事では文字を組む時は「Q(級)」という単位で行う事が主流です。Webデザインの仕事で文字を組んだりコーディング時の文字サイズの指定は「ピクセル(pixel)」で行っています。「ポイント(pt)」という単位もありますが、歴史的には活版印刷の頃からDTP黎明期頃まで使用されていましたが、現在は使用される機会がほとんど無くなりました。グラフィックデザイナー・Webデザイナーでは文字を取扱う時の単位が異なる事が基本ですので業界未経験者の方は是非覚えておいて下さい。
単位のポイント!
- グラフィックデザインとWebデザインでの文字の単位は異なる
- グラフィックデザインの文字の単位は「Q(級)」
- Webデザインの文字の単位は「ピクセル(px)」
- 現在「ポイント(pt)」はほとんど使用されていない
Q(級)とは?
Q(級)とは日本独自のフォンとのサイズの単位でプロの現場ではデザインするにあたって、使用頻度の高い単位です。単位の語源の由来は英語の「Quarter」の頭文字からきています。意味は「四分の一」で。1Qが0.25mm(1/4mm)を意味します。日本人が生活の中で慣れしたんでいる「mm」という単位の影響から、グラフィックデザイナーは「Q(級)」という単位を「Adobe Illustrator・InDesign」等のアプリケーションソフトで使用するようになりました。グラフィックデザインの際は、紙のサイズの指定も「mm」という単位で指定しますので、親和性の高い文字のサイズの単位となっています。
プロの仕事の現場での「Q(級)」の使われ方
- 「ここの見出しの文字のサイズは18Q(級)で組んで下さい。」(組版の指示の際)
- 「この書体の級数はいくつですか?」(文字のサイズを聞く時)
上記の様に、グラフィックデザインの仕事の現場では、アートディレクターや先輩グラフィックデザイナーから「級数」の指示を頂く機会が多いので、転職活動前に必ず理解しておいて下さい。
ピクセル(pixel)とは?
ピクセル(pixel)とは、モニターの画面は点の集合体で表現されています。モニターをルーペで除くと分かりますが、その小さな点のサイズの単位を「ドット」と名付けられました。ピクセルはパソコンで画像を扱うときの、色情報を持つ最小単位で「pixel」と呼ばれています。基本的には「ドット」と「ピクセル(pixel)」は1対1で対応しています。モニターのサイズの基本的な単位は2種類存在します。
WebデザイナーはWebデザインの仕事の際、アプリケーションソフト「Adobe Photoshop・Fireworks」等で文字を組む時や、コーダーが、コーディングの際には、文字サイズの指定は基本的には「ピクセル(px)」で行っています。コーディング時、文字のサイズを「ピクセル(px)」でなくて、「%」や「em」という単位で指定する際にもデザイナーが指定した「ピクセル(px)」を基準値として文字サイズを指定していきます。
級数とピクセルの背景
これまでの流れを考えると、グラフィックデザインは「紙のサイズ」が「mm」という単位だから、文字のサイズは計算しやすい「Q(級)」。Webデザインは「モニターのサイズ」が「ピクセル(px)」という単位だから、文字のサイズも計算しやすい「ピクセル(px)」となっています。単位の指定にも背景がある事を理解すると理解し易いですね。ご存知無かった方は是非、覚えてデザイナー職への転職活動を行って下さい。
Illustratorでポイントから「Q(級)」へ単位へ設定する方法
Adobe Illustratorをインストールした際、文字の単位の設定は「ポイント」になっています。文字を組んだりレイアウトする前に、ここでは「Q(級)」へ単位へ変更する方法をご紹介します。
1. 最初に環境設定パネルを開く

最初にIllustratorの環境設定パネルを開いて下さい。デフォルトでは「一般」という項目が表示されますので、プルダウンメニューの中で「単位」という項目を探します。
ショートカットがポイント!
プロのデザイナーは仕事中、Illustratorの環境設定パネルの設定を細かく変更し仕事の効率を上げています。環境設定のウィンドウは使用頻度が高いので、Illustratorでのショートカットを覚えておきましょう!
Illustrator「環境設定」パネルへのショートカット
Mac:command+k
Windows:Ctrl+k
2. 一般から単位を選択する

環境設定パネルで「一般」から「単位」へ変更して、選択して下さい。文字や行送り、線等の単位の設定画面に遷移します。この単位の画面で設定を変更していきます。
3. 単位の設定を変更する

「書式」の項目のプルダウンメニューの単位を「ポイント」から「級」へ変更して下さい。( ※Illustratorでは「級」と表示されます。)最後に「OK」を押して設定完了です。
日本語オプションと表示されている所は「行送り」の単位になりますので、こちらも併せて「歯(H)」に変更しておきましょう。「一般」「線」の項目は「mm」に設定するとデザインが行い易いので「ポイント(pt)」になっている場合は「mm」に変更して下さい。
4. 変更された事を確認する

最後に書式ウィンドウの設定で単位が変更されているのを確認して設定作業は終了です。ここでは書体「游ゴシック体」、級数「13Q」、行送り「19H」となっています。「Q」と「H」が表示されていれば設定作業は終了です。
グラフィックデザイン・Webデザイン兼業の求人広告も増えつつあります
グラフィックデザイン・Webデザイン両方の業務を一人のデザイナーに求める企業の求人広告が増えています。デザインの基本の中で、文字の取り扱い(組版・書体の選定)は重要なスキルとなっています。業界未経験者だけでなくこれからWebデザインを学ぶグラフィックデザイナーの方も、又、グラフィックデザインを学ぶWebデザイナーの方も、単位について理解しておくと実際働く際は戸惑うことなく勤務できます。
最終更新日:
併せて読みたい! コラムのトピック
- デザイナーさん必見!おすすめ印刷屋さん
- 「Webデザイン」「Web制作」のジャンルとしては2019年で最も売れた書籍とは?
- vol.1 まずは簡単なサンプルを作ろう!|three.js 入門|基本から解説!
- IoTデバイスの普及と課題
- Webデザイナーに求められるラテラルシンキングとは?
- 印刷における解像度の基本と設定方法は?
- フォント・組版の基礎的な知識
- デザイン要素と原則
- 今さら聞けない旬のデザイン「マテリアルデザイン」
- コンテンツ制作の際に気をつけたい広告規制
- アプリ開発時に気をつけたい「利用規約」
- デザイナー、クリエイターが知っておくべき「秘密保持契約」
- クリエイターに求められる英語力
- デザイナー・クリエイターなら押さえておきたい「著作権」