この書き出し、どれが正解？画像の特徴に合わせた書き出しを学ぼう

3問目の答え：A

以上がわたしなりの解答です。

ではここからは、各クイズの問題について解説していきます。
それぞれの書き出し設定の違いや、画像の特徴に合わせた最適な書き出し設定についてもご紹介していきます。

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へ変換する際に、元の鮮やかな色がくすんで見えるなど色味が変わることがあります。

そのため、カラーモード変更後は、手動で色味の微調整を行うようにしましょう。

「ラスター形式」と「ベクター形式」とは？

ラスター形式 （JPEG、 PNG）は、色の付いた点（ピクセル）が集まって画像を描画する形式です。

ラスター形式の画像は、ファイルに含まれるピクセルが多い（画像解像度が高い）ほど鮮明な表現ができますが、それに応じてファイルサイズが大きくなります。

写真のような複雑で繊細な色の表現が得意ですが、拡大・縮小すると画像が荒れてしまう弱点があります。

ベクター形式 （SVG）は、 点と線の数値情報（数式）を元に色や形を描画する形式です。

ベクター形式の画像は、デザインの高さや幅といった大きさではなく、 図形の緻密さ（点と線の数値情報）によってファイルサイズが大きくなります。

ロゴやアイコンなど、様々なサイズで利用されるものや、地図のような緻密な図形にも適しています。

拡大・縮小しても再計算して描画されますので、画質がまったく劣化しないのが最大の特徴です。

この違いを踏まえて、作例の3つのデザインに最適なファイル形式と、その特徴を見ていきましょう。

最適なファイル形式は状況によって変わる

今回ご紹介した3つの事例は、あくまで一例で、最初から書き出しファイルの指定がある場合や、ファイルサイズよりも画質を優先する、といった場合には最適解も異なってきます。

デザインの内容や使用目的に合わせて、各ファイル形式の特徴を活かして適切な形式を選びましょう。

原因はアートボードの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ディスプレイなどの環境では、ピクセルプレビューと書き出しファイルに差が出ることもあります。そのため、ピクセルプレビューはあくまで参考程度にし、実際に書き出されたファイルでもしっかりと確認してくださいね。

小数点以下が入るのを防ぐための対策

意図せず小数点が入るのを防ぐには、以下の設定や習慣づけが効果的です。

1. 「ピクセルにスナップ」を使う
2. アートボードを作成時、書き出し前にしっかり確認する

「ピクセルにスナップ」とは、オブジェクトを移動する際に、ピクセルグリッドの整数座標に正確に合わせる機能です。

「表示」＞「ピクセルにスナップ」をオンにすると、オブジェクトやアートボードの移動・作成がピクセル単位に制限され、小数点が発生しなくなります。

ただし、デザイン作成時は細かい移動や調整が難しくなるため、状況に合わせて、オンオフしながら使うのがオススメです。

また、アートボードの作成時はもちろん、書き出し前に「プロパティ」パネルの「アートボードを編集」から、X、Y、W、Hの各数値に小数点がないかの確認を習慣化しましょう。

1．利用シーンに合わせてカラーモードを正しく選択しよう

• ウェブで利用する画像はRGB、印刷物で利用する画像はCMYKを選ぶ

2．デザインに合わせて最適なファイル形式を選ぼう

• JPEG、PNG、SVGなどのファイル形式の特徴を知り、デザインに含まれる要素や条件で選ぶ
• 画質とファイルサイズのどちらを優先すべきか、利用シーンも考慮する

3．アートボードのXY座標の小数点に注意しよう

• アートボードに小数点が入っていないか確認する
• Illustratorで作成したデザインをラスター形式で書き出す場合は「ピクセルプレビュー」で確認する

お相手はウェブデザイナーのすぴかあやかでした。


本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。


※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。