この書き出し、どれが正解？画像の特徴に合わせた書き出しを学ぼう
現場で使えるデザインセンスをクイズで身に付ける「デザインクイズチャレンジ」。
ウェブデザイナーのすぴかあやかです。
今回、わたしはデザインの「書き出し設定」に関するクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例で、どの「書き出し設定」が最適かを考えてみましょう。
1問目「正しいカラーモードはどっち？」（難易度★）
A（ウェブ）とB（紙媒体）、それぞれのシーンに適した正しいカラーモードを選択してください。
2問目「適しているファイル形式はどれ？」（難易度★★）
ウェブサイトで使うデザイン画像について、それぞれに適したファイル形式を選んで線で結んでください。
3問目「きれいな書き出しはどっち？」（難易度★★★）
シャープできれいに見える書き出しができている画像を選んでください。
いかがでしたか？
わたしが考える答えは……
1問目の答え：A→RGB、B→CMYK
2問目の答え：A→SVG、B→JPEG、C→PNG
3問目の答え：A
以上がわたしなりの解答です。
ではここからは、各クイズの問題について解説していきます。
それぞれの書き出し設定の違いや、画像の特徴に合わせた最適な書き出し設定についてもご紹介していきます。
1．利用シーンに合わせてカラーモードを正しく選択しよう
1問目は、色を表現するための基本となる「カラーモード」に関する問題でした。
デザインの基礎知識として、既にご存知だった方も多いのではないでしょうか。
作例Aのようなバナーやウェブデザインには「RGB」を、Bのようなチラシやポスターには「CMYK」を使うのが正解です。
この2つのカラーモードは、色を使う媒体が「画面」なのか「印刷物」なのかによって使い分けられます。
デジタルデバイスと紙媒体で求められる色の表現方法について、詳しく見ていきましょう。
RGBとCMYKの違い
RGBは、スマートフォンやPCなど、画面で色を表現するためのカラーモードです。
Red（赤）、Green（緑）、Blue（青）の頭文字をとったもので、「光の三原色」とも呼ばれます。
この三色の光を組み合わせることで色を作り出し、色を混ぜるほど明るくなって白に近づくのが特徴です（加法混色）。
PCやスマートフォンの画面、テレビなど、光を発するディスプレイで表示されるものは、このRGBのカラーモードを使用します。
一方、CMYKは、印刷物などインクで色を表現するためのカラーモードです。
C（Cyan：シアン）、M（Magenta：マゼンタ）、Y（Yellow：イエロー）、K（Black：黒・スミ）の、4色のインクを組み合わせて多彩な色を表現します。
RGBとは反対に、色を混ぜるほど暗くなって黒に近づきます（減法混色）。
チラシやポスター、名刺などの紙に印刷するものは、このCMYKのカラーモードを使用します。
このように、RGBとCMYKは、表現できる色の範囲や、色が作られる仕組みが根本的に異なります。
そのため、「ウェブ、紙媒体、どちらのデザインを作るのか」を考慮して、制作を始める段階で正しいカラーモードを選ぶことが重要です。
Illustratorでカラーモードを設定する方法
Illustratorでデザインを作成する際は、基本的にアートボードの作成から始めます。
Illustratorを起動し、「新規ファイル」ボタンをクリックすると、アートボードのサイズやカラーモードを設定できるウィンドウが開きます。
このとき、「Web」タブを選ぶと自動で「RGB」に、「印刷」タブを選ぶと「CMYK」に設定されるので、まずは制作物の利用シーンに合わせてタブを選択しましょう。
なお、ウェブ用に作成したデザインを、あとから紙媒体で使いたい場合もあるでしょう。
そんなときは、「ファイル」＞「ドキュメントのカラーモード」＞「CMYKカラー」をクリックします。
変更後にファイルを保存（元のカラーモードのデータも残す場合は、別名で保存）します。
ただし、RGBはCMYKよりも表現できる色域が広いため、RGBからCMYKへ変換する際に、元の鮮やかな色がくすんで見えるなど色味が変わることがあります。
そのため、カラーモード変更後は、手動で色味の微調整を行うようにしましょう。
2．デザインに合わせて最適なファイル形式を選ぼう
2問目は、デザインの用途や内容に合わせたファイル形式に関する問題でした。
ロゴ、写真の入ったバナー、色数の少ないイラスト、それぞれの特徴から最適なファイル形式を見付けられたでしょうか。
最適なファイル形式を選ぶには、まず「ベクター形式」と「ラスター形式」という2つの大きな違いを理解することがポイントです。
「ラスター形式」と「ベクター形式」とは？
ラスター形式 （JPEG、 PNG）は、色の付いた点（ピクセル）が集まって画像を描画する形式です。
ラスター形式の画像は、ファイルに含まれるピクセルが多い（画像解像度が高い）ほど鮮明な表現ができますが、それに応じてファイルサイズが大きくなります。
写真のような複雑で繊細な色の表現が得意ですが、拡大・縮小すると画像が荒れてしまう弱点があります。
ベクター形式 （SVG）は、 点と線の数値情報（数式）を元に色や形を描画する形式です。
ベクター形式の画像は、デザインの高さや幅といった大きさではなく、 図形の緻密さ（点と線の数値情報）によってファイルサイズが大きくなります。
ロゴやアイコンなど、様々なサイズで利用されるものや、地図のような緻密な図形にも適しています。
拡大・縮小しても再計算して描画されますので、画質がまったく劣化しないのが最大の特徴です。
この違いを踏まえて、作例の3つのデザインに最適なファイル形式と、その特徴を見ていきましょう。
【ロゴ】SVGで拡大縮小や色変更に備える
ロゴはウェブサイトやバナー、印刷物、動画など、様々なサイズで使用します。
そのため、拡大・縮小しても劣化しないベクター形式で書き出すのがベターです。
今回の3つの選択肢の中で「ベクター形式はSVGだけ」なので、これが最適解ということになります。
SVG形式のメリットとデメリットをまとめたので、あわせて覚えておいてくださいね。
SVGのメリット
- 拡大・縮小しても画質が劣化しない
- コードで管理されているため、色や形の変更が容易
SVGのデメリット
- SNSや一部のwebサイト管理システムなど、未対応のサービスがある
- ラスター画像を含むとファイルサイズが非常に大きくなる
【写真の入ったバナー】JPEGで圧縮してファイルサイズを調整
写真はラスター画像なので、JPEGかPNGのいずれかを選ぶことになります。
JPEGの最大の特徴は、元データから一部の情報を削除することで画像を圧縮（非可逆圧縮と言います）してファイルサイズを小さくできる点です。
画質は多少劣化しますが、ウェブサイトの表示速度に影響するバナー広告といった、ファイル容量に制限がある場合に適しています。
そのため、ファイルの容量制限が想定されるバナーデザインの書き出しには、JPEGが最適解となります。
JPEG形式のメリットとデメリットをまとめたので、あわせて覚えておいてくださいね。
JPEGのメリット
- 圧縮率を調整してファイルサイズを軽くできる
JPEGのデメリット
- 圧縮すると画質が落ちる（文字の輪郭などがぼやけやすい）
- 透過できない
【色数が少ないイラスト】ファイルサイズが小さいPNGが有利
色数が少ないイラストの場合、PNGが有利です。
PNGは画質を劣化させずに圧縮（可逆圧縮と言います）でき、特に同じ色が続く部分の圧縮率が高いという特徴があります。
そのため、今回の作例のようなイラストでは、PNG形式を選ぶと高画質を保ちつつファイルサイズを小さくできます。
また、背景を透明にしたい（透過させたい）場合も、PNG形式を利用するのがよいでしょう。
PNG形式のメリットとデメリットをまとめたので、あわせて覚えておいてくださいね。
PNGのメリット
- 画質が劣化しない
- 背景を透過した状態で書き出せる
PNGのデメリット
- 写真や色数が多い画像ではファイルサイズが大きくなる
最適なファイル形式は状況によって変わる
今回ご紹介した3つの事例は、あくまで一例で、最初から書き出しファイルの指定がある場合や、ファイルサイズよりも画質を優先する、といった場合には最適解も異なってきます。
デザインの内容や使用目的に合わせて、各ファイル形式の特徴を活かして適切な形式を選びましょう。
3．アートボードのXY座標の小数点に注意しよう
3問目は、一見すると違いがわかりにくい、書き出し画像の品質に関する問題でした。
作例のA・Bよく見ていただくと、Bの画像はフチがぼやけているのがわかるでしょうか？
この微妙な差は、実はデザイン作業中の「あるある」なミスが原因で起こります。
原因はアートボードのXY座標の「小数点」
Illustratorでデザインを作成する際、「アートボード」という作業領域を使います。
このアートボードには、大きさを示す幅（W）と高さ（H）だけでなく、アートボード自体の位置を示す「XY座標」という数値も設定されています。
「XY座標」は、Illustratorの画面内で、そのアートボードがどの場所に置かれているかを示しています。
アートボードのXY座標は、「プロパティ」パネルで「アートボードを編集」をクリックすると確認できます。
例えば、「X：50px」「Y：50px」となっていた場合、原点から縦に50px、横に50px行ったところにアートボードがある、ということです。
今回の作例Bのようにフチがぼやけてしまう原因は、XY座標の数値に「.5」のような小数点以下の数値が入っていることです。
Illustratorの画面上では「ベクター表示」で閲覧するため、拡大してもシャープできれいに見ることができます。
しかし、JPEGやPNGといった「ラスター形式」で書き出すと、この小数点以下の数値が原因でピクセルの境界線が曖昧になってしまいます。
その結果、画像のフチがぼやけてしまうのです。
アートボードを増やすときも注意が必要！
アートボードを移動したり、複製して増やしたりするときは特に注意が必要です。
アートボードは、縦に横に自由に増やせるので、デザインのバリエーションを作ったりサイズ違いを作るのにとても便利です。
しかし、なんとなくドラッグして増やしてしまうと、XY座標の数字に小数点が入ってしまうことがあるので、必ずXY座標の数字を確認しましょう。
書き出し前の最終チェックは「ピクセルプレビュー」で確認する
先ほどもお伝えしたように、Illustratorの画面上ではきれいに見えるため、画像のフチがぼやけてしまうことに気づきにくいものです。
そこで、活用していただきたいのが「ピクセルプレビュー」機能です。
「表示」＞「ピクセルプレビュー」をオンにすると、ラスター形式で書き出した際のピクセル表示をシミュレートできます。
また、Illustratorはベクターツールのため、画面上では小さな文字もシャープできれいに見えますが、書き出しファイルはピクセルで描画されるため、つぶれて見えなくなることもあります。
しかし、ピクセルプレビューにすれば、実際の書き出しファイルに近い表示でデザインを確認できます。
事前にピクセルプレビューを使用して、ぼやけや文字潰れが発生していないか確認しましょう。
ただし、常にピクセルプレビューの状態でデザイン作業をすると動作が重くなるため、書き出し前の最終チェックとして確認するのがオススメです。
※Retinaや4Kディスプレイなどの環境では、ピクセルプレビューと書き出しファイルに差が出ることもあります。そのため、ピクセルプレビューはあくまで参考程度にし、実際に書き出されたファイルでもしっかりと確認してくださいね。
小数点以下が入るのを防ぐための対策
意図せず小数点が入るのを防ぐには、以下の設定や習慣づけが効果的です。
- 「ピクセルにスナップ」を使う
- アートボードを作成時、書き出し前にしっかり確認する
「ピクセルにスナップ」とは、オブジェクトを移動する際に、ピクセルグリッドの整数座標に正確に合わせる機能です。
「表示」＞「ピクセルにスナップ」をオンにすると、オブジェクトやアートボードの移動・作成がピクセル単位に制限され、小数点が発生しなくなります。
ただし、デザイン作成時は細かい移動や調整が難しくなるため、状況に合わせて、オンオフしながら使うのがオススメです。
また、アートボードの作成時はもちろん、書き出し前に「プロパティ」パネルの「アートボードを編集」から、X、Y、W、Hの各数値に小数点がないかの確認を習慣化しましょう。
まとめ：画像の特徴に合わせた書き出し設定のポイント
今回は、デザインの品質を保つための書き出し設定について取り上げました。
最後に今回のノウハウのまとめです。
1．利用シーンに合わせてカラーモードを正しく選択しよう
- ウェブで利用する画像はRGB、印刷物で利用する画像はCMYKを選ぶ
2．デザインに合わせて最適なファイル形式を選ぼう
- JPEG、PNG、SVGなどのファイル形式の特徴を知り、デザインに含まれる要素や条件で選ぶ
- 画質とファイルサイズのどちらを優先すべきか、利用シーンも考慮する
3．アートボードのXY座標の小数点に注意しよう
- アートボードに小数点が入っていないか確認する
- Illustratorで作成したデザインをラスター形式で書き出す場合は「ピクセルプレビュー」で確認する
お相手はウェブデザイナーのすぴかあやかでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：すぴかあやか
株式会社キテレツ デザイナー・イラストレーター
1981年大阪生まれ。ウェブデザイナーとして制作会社でのアルバイトや社員を経て、2006年からフリーランスとして活動、2017年から株式会社キテレツに加入。イラストを取り入れたデザイン・ロゴやLPデザインなどを得意としている。
noteやXなどで、デザインの考えや日々の気づきを発信している。