--- title: "IllustratorでWebデザイン制作する時の設定と気をつけていること" canonical_url: "https://olein-design.com/blog/illustrator-setting-and-mind-for-making-webdesign" language: "ja" date_published: "2014-11-05T09:04:01+09:00" date_modified: "2014-11-05T09:04:01+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "デザイン" --- # IllustratorでWebデザイン制作する時の設定と気をつけていること 僕はもともとDTPあがりなので、PhotoshopかIllustratorのどちらが操作慣れしているかと聞かれると、もれなく**Illustratorです**と答えてしまいます。 最近では以前に比べてもIllustratorでWebデザイン制作をするということも違和感がなくなってきました。それはデバイスサイズや高解像度化の流れなどからベクターデータの有用性が高くなってきたという要因もあるかと思います。また、ソフトとしてのIllustrator自体の発展も見逃すことはできません。 今回は、**僕がIllustratorでWebデザイン制作をする時の設定と気をつけていること**を紹介します。 ## 知っておくこと まずはIllustratorでWebデザイン制作を行う際に、事前に知っておいたほうがいいことがあります。こちらをご覧の方はみなさんご存知かもしれませんが、たまぁ〜に（特にDTP系出身の方：自分もそうでした）ご存知ない方もみえますので書くことにしました。 ### 基本単位は整数値のピクセルで DTP系だと基本単位は場合によってたくさんあるかと思います。ミリメートルやポイント、級などをよく使うかと思います。 Webデザイン制作全般に言えることですが、**基本単位は整数値のピクセル**です。ピクセルということはご存知かもしれませんが、**整数値**ということもしっかりと覚えておきましょう。 ### カラーモードはRGBで DTP系だとカラーモードは基本的にCMYKで作業すると思います。印刷に使う画像などを扱う場合はRGBで補正等することもあるかと思いますので、馴染みがないわけではないかと思います。RGBとCMYKでは表現できる色が違います。ですので**「あとで切り替えればいいじゃん」**とかはできません（忠実に再現して変換はほぼほぼ不可能です）。 ですが、うっかりとCMYKで制作を開始していたなんてことも多々あります（経験談）。ですので、意識的に確認するようにしています。 ## Illustratorの設定 では、実際Illustratorの設定をどのように変更したら良いのかを紹介していきます。 ### キー入力を整数値ピクセル単位に設定 上でも書いたように**基本単位をピクセルに変更**します。まずは、キー入力の単位を１ピクセルごとになるよう設定します。 【Illustrator】→【環境設定】→【一般】をクリックします。 ![Illustrator環境設定：一般](https://olein-design.com/wp-content/uploads/2014/11/6925116fe3849df6ae049bf3af40207b.png) そして、**「キー入力」**の数値を**「１px」**に変更します。 ![Illustrator環境設定：キー入力](https://olein-design.com/wp-content/uploads/2014/11/12e4320c940bfa246cfeef38cd58ff92-1.png) ### 単位をピクセルに設定 アプリケーション内で使う単位を全てピクセルに変更・設定します。 上で開いた環境設定の左側メニュー部分【単位】をクリックして切り替えます。 そして、「一般」「線」「文字」「東アジア言語のオプション」すべての項目を**「ピクセル」**に変更します。 ![Illustrator環境設定：単位](https://olein-design.com/wp-content/uploads/2014/11/bfcc138fd148bc40066307255c07b72f.png) ### グリッド単位と分割数を設定 デザイン要素を配置していくにあたって、目安となるガイド機能とともにグリッド機能を使う場合もあります。そちらの単位設定も行っておきます。 環境設定画面の左側メニューを【ガイド・グリッド】に切り替えます。そして、「グリッド」「分割数」の数値を任意の数値に切り替えます。（参照画像では、グリッド：10、分割数：2となっています） ![Illustrator環境設定：グリッド](https://olein-design.com/wp-content/uploads/2014/11/623872641dabf798d9f10480483e005c.png) ### ワークスペースを「Web」に設定する Illustratorには初期設定として**ワークスペース**という機能があります。これは、あらかじめ想定されるような作業（Web、トレース、レイアウトなど）をするにあたり操作しやすいようにパネル等の並びを切り替えてくれる機能です。 そして、Webデザイン制作をする際には、まず**ワークスペースを「Web」に**切り替えて作業を進めてみましょう。 ![Illustrator：ワークスペース](https://olein-design.com/wp-content/uploads/2014/11/ed75ffba91f0e4e7f0ab1b747d02a16a.png) こちらのワークスペースから作業を開始し、自分が使いやすいパネル配置になるように変更していってみましょう。そして、自分の設定を新しくワークスペースとして保存しておくこともできます。とても便利な機能ですね。 ### 制作を開始する際にチェックする設定 制作を開始する際に、まずは新しくドキュメントを作成するのですが、その際に確認しておきたい点があります。 **カラーモード**：RGBになっているか **ラスタライズ効果**：スクリーン（72ppi）になっているか **プレビューモード**：ピクセルになっているか それぞれ確認しておきましょう。 ![Illustrator：新規ドキュメント作成](https://olein-design.com/wp-content/uploads/2014/11/8c547fc4981580200bb97630b89fedca-1.png) **新規オブジェクトをピクセルグリッドに整合**という選択項目がありますが、僕の場合は**パスとオブジェクトの描写がずれることがあるので選択していません。** ## アートボード機能を上手に使おう Illustratorには**アートボード**という便利な機能があります。 これは簡単にいうと、一つのAiファイル（イラストレイター形式ファイル）の中に複数のドキュメントボードを持てるようになり、また管理しやすくなるというようなものです。 実用的な例で説明すると、一つのAiファイルでデスクトップ、タブレット、スマートフォンなどといったようなサイズの異なる場合でも、それぞれアートボードでサイズ設定しておくことにより同一ファイル上で制作を進めることができます。そのため、共通で使うオブジェクトやテキストなどを共有しやすくなりますし、デザイン制作ファイル自体を１つにまとめることができるので管理が非常に楽になります。 ### 新しくアートボードを作ってみる 先ほど新規で作成したドキュメント内にアートボードを追加していってみましょう。 まずは、**作りたいアートボードのサイズと同じサイズのオブジェクトを作成**します。 ![Illustrator：アートボードを追加：長方形ツール](https://olein-design.com/wp-content/uploads/2014/11/dde590a61b4a2875c8657f72a1f8889e-1.png) 今回の場合は**トップページのコンテンツエリアを想定**しているので、幅：1000px・縦：3000pxのオブジェクトを作成しました。そして、上部中央を中心に位置を直します。塗りや線に色をつけていても問題ありません。 オブジェクトをアートボードに変換する方法は２つあります。 １つ目は、変換したいオブジェクトを選択して【オブジェクト】→【アートボード】→【アートボードに変換】を選びます。 ![Illustrator：アートボード作成１](https://olein-design.com/wp-content/uploads/2014/11/1d4b918e050560cbcf5293603991b139-1.png) ２つ目は、同様に変換したいオブジェクトを選択して【アートボードパネルの右上クリック】→【アートボードに変換】を選びます。 ![Illustrator：アートボード作成２](https://olein-design.com/wp-content/uploads/2014/11/5e9529453ab2574b0393d76c6b2d311f-1.png) このようにアートボードを新しく追加していくことができます。この調子で、各デバイスサイズ用のデザイン制作に使えるアートボードを一つにファイル内に作ることができます。 ![Illustrator：アートボード作成３](https://olein-design.com/wp-content/uploads/2014/11/226851dd3d6cc410022153a235dde784-1.png) 上はサンプル用に作成してみましたが、それぞれのデバイスに対してファーストビュー用に１つ、そしてすべてのコンテンツを包括するアートボードを１つ用意して管理することによって、デザインチェック用に画像を書き出したりする用途に便利に対応することができます。 ## レイヤーを上手に管理しよう これは個人制作を始め**チームでの開発**をする場合にはとても重要なことだと思います。 僕もデザインだけ納品することもあります。ということは、コーディングする人が別にいるということです。その方が自分のデータを見て「作業しにくっ…‥…」と思われるのも悪いので、できるだけ誰が見てもわかりやすいようなデータ作りを心がけています。 その際に気をつけることとして大切にしているのが**レイヤーの整理**です。名前もつけられず、乱雑に配置してあるオブジェクトほど作りを理解するのに時間を要しますし、画像の書き出しの際にも面倒なことが起こりかねません。 ですので、必要に応じてしっかりとレイヤー分けをし、適切な名前をレイヤーにつけることが、次の作業をされる方や後ほどコーディングする自分、後のデザイン変更作業などの作業効率に影響してきます。**誰が見てもわかりやすいようにデータを作りましょう！** ![レイヤ整理整頓１](https://olein-design.com/wp-content/uploads/2014/11/Illustrator_layer.png) ## まとめ 長くなりましたが、僕がIllustratorでWebデザイン（ホームページデザイン）を制作する際に気をつけている設定などをご紹介しました。 制作の方法や設定の内容については個人の好みの色が強く出る部分でもあるかと思います。ですので、**これからIllustratorでWebデザイン作ってみる！**という方には、参考にしていただきながらも**自分の一番使いやすい設定・方法を追求する**ということを心の片隅に置きながら制作されると良いかと思います。 また、僕自身も半年後はまったく別の設定や方法で制作しているかもしれません。それくらい変化の激しい分野だと思っています。ですので、その時のベストを常に出していける環境を作り、維持し、壊しながら進んでいこうと思います。