IllustratorでWebデザインデータを作る際の準備と注意点
みなさんこんにちは、nests運営です。
前回の記事に続き、今回は実際にIllustratorでWebデザインデータを作る際の準備と注意点をまとめていきたいと思います。
前回散々イラレのWebデザインデータは嫌われちゃうとお話しした後なので、だったらイラレでは作りたくないと思ってしまう方もいるかと思いますが、事前にきちんと準備をして、作り方もちょっと工夫すればコーダーさんを悩ませることなくコーディングを進めて頂けるようなデザインデータを作ることもできますのでぜひ覚えてくださいね。
実はイラレにはイラレでWebデザインを作る上で便利な部分も色々あるんです。例えばSVGデータ（ウェブ上で拡大縮小しても綺麗なベクターデータ）が書き出しやすかったり、スタイル・スウォッチ・スタイルなどの機能がCSSに近い扱いでサイトデザインが作れたり、CSSプロパティでCSSを読み込めたり、Photoshopより画像を劣化させずに自由にレイアウトできたりなどなど・・・。そんなお話はまた別の機会にと言うことで。
それではさっくそ。
●Illustratorの環境をWeb用に設定する
まずはメニューバーの「Illustrator」から「環境設定」を開いて、各項目をWebを作るのに最適な設定に変更していきます。
まずはここが重要なのですが、その理由は前回お話ししたようにカラーモードをRGBにするだけでなく、単位や解像度やキー操作の単位などもWeb用に設定しておくことで、出来上がっていくデザインデータがWeb用のデータとして成り立つための手伝いをイラレがしてくれるからなんです。
では具体的に。
●新規ファイル作成時に設定する部分
１）メニューバーの「ファイル」から「新規」で新規ドキュメントダイアログを表示し、ダイアログ右下の詳細オプションから
「カラーモード」を「RGBカラー」
「ラスタライズ効果」を「スクリーン（72ppi）」
「プレビューモード」を「ピクセル」
に設定。
●環境設定の設定
１）グリッドとガイドを設定
メニューバーの「Illustrator」から「環境設定」を選択し環境設定ダイアログを表示させます。Webの場合、基本的には描画するオブジェクトは小数点が混ざらないよう整数で制作したいので、環境設定ダイアログから「ガイド・グリッド」を選択し、「グリッド」を1pxに、「分割数」を10に設定します。
２）単位の設定
環境設定ダイアログの「単位」を選択し各単位をピクセルに変更 「一般」「線」「文字」「東アジア言語のオプション」のすべての単位をピクセルに変更します。
３）「キー入力」と「プレビューの境界を使用」の設定
環境設定ダイアログの「一般」を選択し「キー入力」の最小単位を1pxに設定。さらに「プレビューの境界を使用」にチェックを入れます。
「キー入力」は矢印カーソルでオブジェクトなどを移動させる際の移動距離の設定値になります。必ず1pxごとの移動に設定しておいてください。
「プレビューの境界を使用」にチェックを入れると、整列などの操作の際にオブジェクト同士が望まない位置で整ってしまったりするのを回避してくれます。
※それでもオブジェクト同士がピッタリ揃わずにズレてしまうようなことが起こった際は、オブジェクトのサイズに小数点が混ざっていないか確認し、小数点があった場合は整数に変更してください。
整数にしたのにまだずれてしまうと言う時は「ピクセルグリッドに整合」を使って修正します。（「ピクセルグリッドに整合」はイラレの上部にあるコントロールパネル右端に四角が４つ組み合わさったマーク部分になります）
●線の設定
「線」パネルを開いて、「線の位置」を内側か外側に設定してください。
位置が中央になっていたり線の太さが奇数だと、線自体がぼやけることがありますので気をつけてください。
ちなみに私は線の太さでオブジェクトのサイズが思っていたサイズよりちょっと大きくなってしまったというミスがないように、基本的には内側にせってしています。もちろん描画上必要であれば外側に設定してもらっても問題ありません。
●プレビューモードの変更
続いて「表示」から「ピクセルプレビュー」を選択しアクティブにします。
※アクティブになると「ピクセルプレビュー」のテキスト左に✔️マークが表示されます。
●ピクセルにスナップ
同じく「表示」から「ピクセルにスナップ」にチェックを入れておくと、確実にピクセル単位での移動が可能になりますのでチェックを入れておいてください。
※ただし、メインビジュアル部分などグラフィック要素を同時にイラレで作ったりする際は、ピクセルにスナップが有効になっていると思い通りの場所にグラフィックを描くための要素が配置できずにイライラすることもありますので、そう言う時は解除してグラフィック制作を進めてください。
●定規とガイドの設定
ウェブコンテンツを作る場合はコンテンツ幅を最初に決めます。コンテンツ幅は後で変えようとすると大変なことになりますので、初めによく検討して幅を決めてください。
幅を決めたらその幅内にコンテンツが収まるように「表示」から「定規」を表示し、さらに定規からガイドを利用してコンテンツ幅に合わせてガイドを配置して、コンテンツがその中で収まるよう作業を進めてください。
●アートボードの配置位置に注意
新規でファイルを開くとアートボードが一つ配置れていますのでLPなどを作る場合はそのアートボードだけあればよいのですが、通常のウェブサイトでは複数のページが存在しますので、その場合はアートボードをページ数分増やして利用します。
この時気をつけて欲しいのがアートボードの配置位置です。
アートボードはコピペできたりするのですが、その際にアートボードが配置される位置が定規で示すところの小数点部分に起点がきてしまっていたりすると、画像書き出しの際にページ全体がぼやけてしまうことがあります。
アートボードをコピペする際は起点（通常はアートボードの左上の角）がX軸Y軸とのも整数位置に合っているかを確認してください。
●パーツのシンボル化
サイトデザインを進めていくと、ヘッダーやフッターなど複数ページに存在する共通パーツが必要になってきます。
その場合はパーツをシンボル化して使いやすく管理しましょう。
例えばヘッダー部分には通常サイトのロゴマークとグローバルナビのテキストボタン、SNS系のアイコンなどが配置されていると思いますが、そういった共通パーツをまとめて選択し「シンボル」パネルを開いてそこにドロップします。
ドロップするとシンボル詳細を設定するパネルが開きますがそれは一旦スルーして頂くと、シンボルパネル内に追加したヘッダーの一式が小さなサムネイルになって追加されているのが見えると思います。
これでシンボルの登録は完了なので、各ページのヘッダー部分にはこのシンボルパネルに追加したヘッダーのサムネイルをアートボード内にドロップして、ヘッダーを追加してください。
ヘッダーの要素を編集する際はシンボルパネルのヘッダーのサムネイルをダブルクリックすると編集画面に移動しますので必要な箇所だけ修正します。
編集が終わったら画面上の好きな場所をダブルクリックすると元の作業画面に戻ります。修正した部分が全てのシンボルに反映していることを確認してください。
●テキストについて
最後にテキストについて。
ウェブの場合はテキストは基本的にプレビューするユーザー側のPC環境に依存して表示されます。これをデバイスフォントと言います。
デバイスフォントはユーザーの環境によってインストールされたフォントも違いますので、一般的にどの環境でも問題なく表示されるフォントを利用するのですが、現在はGoogleフォントや各フォントメーカーがウェブ用に利用可能なフォントサービスを展開しているので比較的自由に選べるようにはなりました。
とは言え今でもコーポレイトサイトやポータルサイトなど、不特定多数の様々な環境からサイトを訪れるユーザーが多いサイトではポピュラーなフォントを利用したりしていますので、制作するサイトの特性に合わせてフォントは選ぶようにしてください。
ちなみにタイトルや見出しなど装飾性が求められるような部分には特殊フォントを使うこともありますが、その場合はアウトラインを取って画像として処理することになります。
実際にサイトデザインを作っていると、アウトラインとして処理したいテキスト部分と、デバイスフォントで処理して欲しいテキスト部分が入り混じってきいますので、コーダーさんにデザインデータを渡す際は、例えばアウトライン処理をしたテキスト部分には色付き半透明のレイヤーを重ねて「ここはアウトラインフォントです」と言った感じで注記し、コーダーさんが容易に判別できるような処理をしておいてください。そうしないとコーダーさんはどれがアウトラインフォントでどれがデバイスフォントなのか見分けがつきにくくなってしまいます。
以上になります。
他にもスライスの書き出しやアセットの書き出しに合わせていくつか設定できる部分などもありますが、まずはここまでの設定事項をしっかり守ってデザインデータを作って頂ければ、コーダーさんを大きく悩ませるトラブルはかなり回避できると思います。
とは言えコーダーさんによっては「Photoshopでのコーディングに一番慣れている！」、「XDでもらえるのが一番やりやすい！」と言った感じでそれぞれの好みもありますので、当然イラレは嫌と言う方もいらっしゃいます。
その場合はお互いにデータを確認し、コーダーさんの要望に合わせてデザイナー側で調整できる部分は調整するなど対応し、お互いが気持ち良く作業が進められるようなコミニュケーションはお忘れなきように。
ではでは本日はこの辺で。
次回もよろしくお願いいたします。