Illustrator入門 | Webデザイン編 第1回 デザイン前に行う環境設定と覚えておきたい基礎知識
IllustratorでWebデザインをはじめよう！
この連載では、Illustratorの初心者を対象とし、Webページをデザインする方法を解説していきます。初回は、Illustratorの環境をWebデザインの基本となる単位「ピクセル」に設定する方法、そして、Illustratorの基礎知識について解説します。
Webデザインに使えるIllustrator
Illustratorは、ベクター画像の描画を基本としたドローイングソフトです。イラストの作成や、雑誌などの紙媒体のデザイン（DTP）に利用されることでよく知られていますが、最近ではWebデザイン用のツールとしても注目されています。
Webサイトを作成する上で最低限覚えておきたいポイントとして、以下のようなことが挙げられます。
- 基本単位が整数値の「ピクセル」である。
- カラーモデルは「RGB」である。
- Webサイトで使用できる画像フォーマットには、「JPEG」「GIF」「PNG」「SVG」などがある。
Webサイト向けにデザインしたり、パーツ画像を作成するツールは、これらの条件に適うデータを作成できなければなりません。Illustratorは、もちろんこれらの条件のすべてに対応できます。また、Illustratorには効率よくデザインしたりパーツを管理する機能やTipsも数多くありますし、最新のバージョン（Illustrator CC）ではWebデザインに特化した機能もさらに充実しています。
これらを踏まえて、第1回では、IllustratorでWebデザインする上で設定しておきたいことと、前提として覚えておきたいIllustratorの基礎知識を解説します。
※Illustratorは最新版を使用してください（執筆時のバージョンはCC 17.1.0）。記事ではMac OS Xでの操作を基本に解説します。ショートカットは「command（Ctrl）」のように、Windowsの場合の操作を括弧内で並記しています。
基本の単位を「ピクセル」にする（環境設定）
Webデザインでは、要所要所で基本単位になる「ピクセル（pixel, px）」に整合させる（整数値でぴったり合わせる）ことがとても大切です。
ただ、Illustratorの初期設定では、基本単位が「ミリメートル（mm）」などになっています。そこで、まずはこれらをすべて「ピクセル」基準の設定に変更します。
［Illustrator］メニュー→［環境設定］→［一般…］を選択して［環境設定］ダイアログボックスを開き、以下の設定を行います。［環境設定］ダイアログボックスは、command（Ctrl）+Kでも開きます。
［一般］メニューにある［キー入力］を「1px」に変更します。
左側で［単位］メニューを選択し、設定できる4項目すべてを「ピクセル」に変更します。
［ガイド・グリッド］メニューを選択し、［グリッド］を「10px」、［分割数］を「2」に変更します。
これで、入力する数値やカーソル移動する時の基本単位が「ピクセル」になります。
ワークスペースをWebデザイン向けにする
「ワークスペース」とは、パネル、バー、ウィンドウなど、Illustratorの操作に使うインターフェイスのセットのことです。Illustrator CCでは、あらかじめWebデザイン向けのワークスペース設定が用意されているので、これを利用しましょう。
［ウィンドウ］メニュー→［ワークスペース］→［Web］を選択します。
選択すると、［変形］［アピアランス］［CSSプロパティ］［アートボード］など、Webデザインに便利なパネルのセットが表示されます。
個々のパネルは、［ウィンドウ］メニューから表示／非表示を切り替えることができます。作業に慣れてきたら、よく使う機能に合わせて使いやすいようにカスタマイズしてください。
これで、Webデザイン作業を進める上での基本設定が整いました。他にも、定規の単位やプレビューの設定を「ピクセル」に合わせておきたい箇所がありますが、それらは第2回以降で実際にデザインのドキュメントを作成していく際にあらためて解説します。
覚えておきたいIllustratorの基礎知識
次回からWebデザイン作成を解説するにあたって、皆さんにあらかじめ覚えておいてほしいポイントを紹介します。
アートボード
Illustratorでは、ドキュメントの中で黒い枠で囲まれている白いエリアを「アートボード」、アートボードの外側にあたる全体のエリアを「ペーストボード」と呼びます。
※実際に見てみたい方は ［ファイル］メニュー→［新規…］を選択して［新規ドキュメント］ダイアログボックスを開き、［プロファイル］で「Web」を選択後に［OK］ をクリックして、新しいドキュメントを作ってみてください。［新規ドキュメント］ダイアログボックスは、command（Ctrl）+Nでも開きます。
作業はどちらのエリアでも行えます。なお、アートボードではその範囲での書き出しが行えたり、アートボードを基準とした定規を表示できるようになります。
また、ペーストボード上に複数のアートボードを作ることが可能です。例えば、下図のように3つのアートボードを設置し、同じサイト内の別ページのデザインを1つのドキュメントで作成・管理できます。
この他にも、バナーを同時に作成する場合や、レスポンシブWebデザイン用に複数の画面解像度向けのデザインパターンを同時に作成する場合にも便利です。また、パーツ画像の書き出しの際にもアートボード機能を活用できます（書き出し機能については、第5回で解説します）。
Illustratorで扱える要素（オブジェクト）
Illustratorで扱える単体の要素（オブジェクト）は、おおまかにベクター画像、ラスター画像、文字の3つに分けられます。Webデザインを行う際も、基本的にこれらを組み上げていきます。
【ベクター画像】
Illustratorで扱うオブジェクトの中で一番メインになるものです。［長方形ツール］などの矩形ツールや、［ペンツール］で描く方法などがあります。
下図は、長方形を描画した例です。描画した画像を選択して表示される輪郭線（下図の例では赤色の線）を「パス」と呼びます。このパスには、最低でも一対の「塗り」と「線」が伴います（下図の例では塗りを水色、線を黄緑色にしています）。これらの設定状況は［カラー］パネルや［アピアランス］パネルで確認できます。
ベクター画像は、パスの数値情報によって描画されるため、拡大／縮小しても劣化が起こらないのも特徴です。
【ラスター画像（ビットマップ画像）】
写真の画像や、Photoshopなどのペイント系ソフトで作成した画像を、Illustratorに配置して扱えます（配置方法などについては、第3回で解説します）。また、この連載では触れませんが、配置したラスター画像をもとにトレースしてベクター画像を作成することも可能です。
※Illustratorは画像補正などの機能があまり充実していないため、補正やリサイズなどはペイント系ソフトで別途行うことをお勧めします。
【文字】
文字ツールを使って、文字のデータも扱うことができます。文字も塗りや線を持ち、拡大／縮小しても劣化が起こらないなど、特徴的にはベクター画像に近いですが、テキストやフォントの情報を保持していることもあり、若干取り扱いが違う部分があります。アウトライン化することで、ベクター画像に変換することも可能です（アウトライン化した場合はテキストやフォントの情報は消失します）。
デザインする際は、これらのオブジェクトをレイアウトしていきます。そして、それらに様々な装飾を適用することで、多彩な表現を作り上げることができます。
［レイヤー］パネル
［レイヤー］パネルは、ドキュメント内のオブジェクトの構造を理解するのに役立ちます。このパネルでは、ドキュメント内で作成したすべてのオブジェクトが、上下の階層状（レイヤー状）に表示されています。グループ化してまとめたものなども、その構造が表示されます。
「レイヤー1」などの名前がついているものがレイヤーで、オブジェクトをまとめて入れておくための透明な箱のようなものと考えてください。ドキュメントには、最低でも1つのレイヤーが存在し、その数を増やすことが可能です。
［レイヤー］パネル上でのレイヤーやオブジェクトの上下の重なりは、ドキュメント上でのオブジェクトの重なり順と一致します。［レイヤー］パネル上でレイヤーやオブジェクトをドラッグで移動して、上下関係を入れ替えることも可能です。
［アピアランス］パネル
［アピアランス］パネルは、選択しているオブジェクトなどの見た目の状態を把握したり、操作するためのパネルです。前述した塗りや線の状態、その他にも［効果］による装飾の状態なども、このパネルで確認できます。
Illustratorでは、レイヤー、グループ、オブジェクト、さらにオブジェクトの塗りや線、それぞれ個別に装飾を施すことが可能なため、様々な応用が効くのが特徴です。
一方で、その細やかな機能のために、ある装飾がどこに対して適用されているのか判別がつかなくなることもあります。［アピアランス］パネルは、このような混乱を避けて、装飾の状態を理解するのにとても役立ちます。
また、［アピアランス］パネルからの装飾の設定も可能です（第4回で解説します）。
今回は、IllustratorでWebデザインを行うための基本設定と、覚えておきたい基礎知識を解説しました。次回から、実際にWebデザインを作成する流れを解説していきます。