Adobe IllustratorでWEBサイトデザイン。
機能的メリットは？

Webデザイナーになって長らくPhotoshopを作業の中心に置いていましたが、最近ではIllustratorで作業することが多くなってきました。近頃の流行でフラットデザインが多くなり、以前ほど一つ一つのパーツを「立体的」に作り込むような表現自体が必要なくなってきました。古いブラウザを意識したコーディングの時代が終わり、もっと自由に、紙面のようなデザインが可能になったせいもあるでしょう。
一方でスマホサイトへの対応は必須であり、スマホに最適な画面づくりも求められます。

以上のようなWebデザイントレンドを踏まえるとIllustratorの使い勝手が今でこそ有用と考えられます。今回はあくまで「Webデザイナーの視点」からIllustratorを導入する際の機能的メリットをご紹介します。

IllustratorでWEBデザインを始める前に

• 新規ドキュメント作成の際には単位は「ピクセル」
• カラーモード「RGB」
• ラスタライズ効果「スクリーン72ppi」
• プレビューモード「ピクセル」
• 「ピクセルグリッドに整合」チェックを外す

をお忘れなく。

メリット1「段組設定の機能」

「オブジェクト＞パス＞段組設定」 段組機能はPhotoshopにはない強力な機能です。
例えばナビゲーションバーなど、オブジェクトを列で何分割するか、マージンをどのくらい入れるか、数値を入力するだけで下地は完成します。いちいち幅を計算したり、ガイドを引く手間もありません。分割を決定したあとでも、全選択して、再度段組設定で分割数を変更できるのも嬉しいですね。
ナビゲーション項目が増えたり、減ったりは珍しくないですからね。

ページ全体のレイアウトを考える際に、ひとまず表示幅いっぱいにオブジェクトを設置して、分割、マージンを入れつつ、最適な配置を探るにも便利です。大枠として基本となるグリッドを予め設置するにも役立ちます。

メリット2「スポイト機能」

Photoshopでは主にカラーを取得する際に使用しますが、Illustratorではそのオブジェクトのスタイルも含めて 取得できるので制作の際には最も重宝する機能です。
例えば、テキストならば、カラーだけでなく、その書体とサイズを含めて取得できるので別々に設定する必要もありません。カラーだけ取得したい場合には＜shift＞キーを押しながらスポイトすればOKです。複数オブジェクトのスタイルを統一したいときにスポイトで一度に変更できて、これだけでかなり作業スピードがあがります。

メリット3「Photoshopと異なるレイヤー解釈」

Photoshopでは膨大なレイヤーが時に作業を煩雑にしたりしますが、Illustratorでは制作中にレイヤー構造を意識することはほとんどありません。
とはいえ、完成後に整理する目的で「ヘッダー」「ナビゲーション」など大まかにわけた方が良いですが、その際にも必要な部分を選択してドラッグ&ドロップすれば完了です。作業中はデザインに集中できます。

メリット4「エリア内文字オプション」

テキストエリアに指定したオブジェクトに対して段組を変更したり、テキスト量に合わせてエリアの高さをフィットさせることが可能です。

メリット5「アートボードの編集」

コントロールバーにある「ドキュメント設定>アートボードを編集」でメインのアートボードとは別に新規でアートボードを追加できます。メインのアートボードでPCサイトのデザインを終えたあと、その隣にスマホのサイズでアートボードを追加すれば、ドキュメントを横断することなく、デバイスに応じたカンプ制作ができるわけです。PSDに変換する際はアートボードごとに書き出しができます。

Webデザインする上での注意

• Illustratorから直接「Web用に書き出し」でカンプを出力する場合、「アートに最適」を選んだ方が良い。
• Illustrator上でスライス機能を使うには少し注意が必要です。Photoshopと違いスライスはどのレイヤーにも設置することが出来てしまうため、レイヤーをまたいでスライスが存在する場合、お互いが干渉し（重なり）、思い通りの出力結果が得られない場合があります。それを防ぐためにスライスは別レイヤーでまとめて管理する方がいいでしょう。
• スライス機能があるとはいえ、Webサイト用の画像の書き出しはやはり、Photoshopの方が優秀です。デザイン完了後はaiデータをpsdに変換し書き出しを行いましょう。

まとめ

以上、私がwebデザインをする上でIllustratorを活用するメリットを挙げさせていただきました。
作業しやすい、しづらい、感じ方はそれぞれかもしれませんし、最初は使い勝手も慣れないかもしれませんが、上記のいくつかの機能でもIllustratorを導入する理由として充分ではないかと思います。皆さんもご検討ください。

WEBデザイナー ／ S.K