「WEBデザインはIllustratorを利用して行うべき？」
「IllustratorでWEBデザイン制作を行う際の各種設定が知りたい」
という方向けに、この記事ではIllustratorがWEBデザイン制作に優れている点や、制作する流れ、利用する際の注意点を解説します。
WEBデザイン制作に利用するツールとしては、Illustratorの他にもPhotoshopやXDなどが一般的です。
Illustratorはロゴやイラスト制作に特化しているツールですが、アートボード機能や文字スタイルの保存機能によって、WEBデザイン制作としても活用できます。
Illustratorを利用したWEBデザイン制作を行いたい方必見の内容なので、ぜひこの記事を参考に設定を行なってみてください。
Photoshopとの違いはこちらの記事をご覧ください。
IllustratorがWEBデザインに優れている点
IllustratorがWEBデザインに優れている点は以下の通りです。
- アートボードの設定
- 文字スタイルの保存や適用
アートボードの設定
Illustratorではアートボードを使用でき、複数のアートボードをひとつのファイルとして管理することができます。
アートボードは出力可能な範囲のことをいい、異なるファイルを行き来する手間がなくなります。
例えば、レスポンシブ対応されたデザインの場合は、ブレークポイントごとに複数のデザインを制作することがあります。
Illustratorを利用して制作している場合は、各デバイスのデザインをまとめて編集して、円滑にデザイン制作を行うことができます。
複数デザインを制作する場合は、Photoshopにはないアートボード機能を利用できるので、非常に優れています。
文字スタイルの保存や適用
デザインに統一感を出すために、事前にテキストに指定したい属性を改め設定しておき、短時間で文字スタイルを適用させることができます。
テキストを選択した状態で文字スタイルパネルの新規作成アイコンをクリックすると、新しい文字スタイルとして保存しておけます。
設定がめんどくさい場合は、スポイトツールを使用して抽出することも可能なので、試してみてください。
WEBデザインをIllustratorで作成する方法：設定
IllustratorでWEBデザインを作成する際の各種設定を解説します。
- 環境設定
- ワークスペース設定
- 新規ドキュメント作成時の設定
- 校正設定
- 作業用スペースの設定
- 表示の設定
環境設定
まずはWEBデザイン制作作業を行いやすいように、各種環境設定を行います。
Illustratorを起動したら、画面上部から「Illustrator」を選択し「環境設定」から「単位」をクリックします。
そして単位の4項目を全て「ピクセル」に設定します。
次に同じく「環境設定」から「一般」をクリックして、キー入力を「1px」で設定します。
次も同じく「環境設定」から「ガイド・グリッドメニュー」をクリックして、グリッド数と分割数をそれぞれグリッド数＝10px、分割数＝2で設定してください。
ワークスペース設定
環境設定ができたら、ワークスペースをWEBデザイン用に切り替えます。
画面上部から「ウィンドウ」を選択し「ワークスペース」を「Web」で設定します。
新規ドキュメント作成時の設定
新規ドキュメント作成時の設定では、プレビューモードを「ピクセル」に変更します。
校正設定
画面上部のメニューから「表示」を選択し「校正設定」から「インターネット標準RGB(sRGB)」をクリックします。
作業用スペースの設定
次に、画面上部のメニューから「編集」を選択し「カラー設定」をクリックします。
するとカラー設定ダイアログが立ち上がるので、設定を「Web・インターネット用・日本」に変更します。
表示の設定
表示の設定では、画面上部のメニューから「表示」を選択して「ピクセルプレビュー」と「ピクセルスナップ」を有効にします。
次に、同じく「表示」から「定規」を選択して「定規を表示」をクリックします。
次も同様に「表示」から「グリッドを表示」を選択します。
これでWEBデザイン制作を行いやすいように、ピクセルと定規、グリッド線を表示させることができます。
IllustratorでWEBデザインを作成する方法
IllustratorでWEBデザインを作成する方法は以下の手順で行います。
- ラフ画を描く
- ガイドの作成
- ヘッダーの作成
- イメージ画像の作成
- メインコンテンツの作成
- フッターの作成
- スマホ用レイアウトの作成
- 素材の書き出し
①ラフ画を描く
まずは実際にIllustratorを起動してデザイン作成に入る前に、ラフ画を描く作業から始めます。
Illustratorを使用してラフ画を描くこともできますが、ある程度のレイアウトをイメージするためにも、軽く手書きでレイアウトのラフを描いておきましょう。
②ガイドの作成
ラフ画を作成したら、Illustratorを使用してレイアウトのガイド線を作成します。
ガイドを作成しておくことで、ヘッダー・メインコンテンツ・フッター部分を明確にした状態でズレることなくデザイン作成を行えます。
基本的にはヘッダー・メインコンテンツ・フッターの3領域のガイド線を作成しておきましょう。
ガイド線は要素ごとの長方形ボックスを作成して配置し、画面上部の「表示」から「ガイド」→「ガイド作成」で作れます。
③ヘッダーの作成
まずはヘッダーを作成していきます。
ヘッダーにはサイトタイトルやロゴ、お問い合わせやカテゴリーなどのグローバルメニューを配置します。
基本的にヘッダーは全てのページで共通して使用するデザインになり、レスポンシブ対応させるデザインではグローバルメニューをハンバーガーメニューに変えて作成します。
④イメージ画像の作成
ヘッダーが完成したら、ファーストインパクトを与える大切な要素であるイメージ画像を作成します。
イメージ画像はレスポンシブ対応させた場合に表示させる領域を小さくするか、サイズを等幅で対応させるかによって見え方が異なるので、画像上に文字を入れる場合は表示領域に注意してください。
⑤メインコンテンツの作成
次にイメージ画像の下に配置するメインコンテンツを作成します。
メインコンテンツに配置する要素は、作りたいサイトによって異なりますが、2カラムや3カラムなどレイアウトの大まかな構成を作成しましょう。
⑥フッターの作成
最後にロゴやお問い合わせ先、各カテゴリーを配置したフッターを作成します。
フッターもヘッダーと同様に各ページに共通して使用する項目になります。
⑦スマホ用レイアウトの作成
各デバイスに合わせてデザインを変更できるレスポンシブ対応させる場合は、新しいアートボードを作成して、デザインをコピーして部分的に変更させていきます。
Illustratorはアートボードを作成することで、レスポンシブデザインを手軽に作成できます。
⑧素材の書き出し
スマホ・タブレット・パソコン全てのデザインカンプが作成できたら、最後に作成した素材を書き出します。
書き出しはアートボードごとに行うこともできますし、各要素ごとにアートボードを新たに作成して素材別に書き出すことも可能です。
IllustratorのWEBデザインで注意すべきこと
最後にIllustratorのWEBデザインで注意すべきことは以下の3点です。
- ピクセルのズレ
- カラー設定
- 画像が重い
ピクセルのズレ
ピクセルが正確に合っていないと、書き出し時に角がぼやけたり、はっきりしない場合があります。
パッと見ただけでは分かりにくいですが、角をピクセルプレビューで拡大して見るとピクセルがズレており、線が何重にも重なっている状態が分かります。
この問題を防ぐには「作成および変形時にアートをピクセルグリッドに整合します」をクリックしておくことです。
カラー設定
Illustratorのカラー設定では減法混色のCMYKカラーと加法混色のRGBカラーの2種類があります。
一般的には光でモニターに投影しているWEBデザインではCMYKカラーではなく、RGBカラーを選択するようにしましょう。
画像が重い
Illustratorで制作したデザイン画像は容量が重くなってしまう可能性があるので、WEBデザインの場合は解像度を多少落として、jpegやpngで書き出すようにしましょう。
具体的には解像度72px、データ容量500kb以下まで落とすと表示速度を落とさず最適な大きさにできます。
まとめ
今回はIllustratorを使用してWEBデザイン制作を行うメリットと各種設定方法を解説しました。
Illustratorを利用すれば、アートボードを使用してレスポンシブデザインでも手間なく作成することができます。
Adobeクリエイティブクラウドを利用すればPhotoshopとIllustratorをどちらも使用することができるので、この記事を参考にIllustratorでWEBデザイン制作を行なってみてください。
