制作のまえに設定をWeb用に変更
IllustratorでWebデザインを行うと、オブジェクトの大きさがイメージと異なったり、線がにじんだりする場合があります。こうした事故を回避するため、環境設定をWebデザイン制作用に調整する必要があります。以下の5つの設定を変更し、最適な環境をお作りください。
IllustratorでWebデザインを行うための5つの設定
- 1.単位をpx（ピクセル）に変更する
- Illustratorの環境設定を開き、「単位・表示パフォーマンス」を選択してください。一般、線、文字、日本語オプションといったすべての項目をピクセルに設定します。これで制作時の基本単位はすべてピクセルとなります。
- 2.ガイドを1pxに設定して、にじみを防止する
- 環境設定から「ガイド・グリッド」を選択してください。その中にある「グリッド」を10pxに設定します。次に、その下にある「分割数」を10に設定してください。これでグリッドが1マス1px×1pxに設定されます。
加えて、「表示」の中の「グリッドにスナップ」にチェックを入れます。こうすることでオブジェクトの移動が1pxごとのグリッドに沿って行われるようになります。これによって線のにじみを大きく防ぐことができます。 - 3.カラーをRGBに設定
- 印刷用データの作成はCMYKが基本です。しかし、Web用データはモニタ上で表現されるため、RGBでのデータ制作が基本となります。カラーモードは必ずRGBに設定してから制作を行ってください。
- 4.ラスタライズ設定を行う
- ラスタライズとはオブジェクトをピクセル化（ドット化）することをいいます。
「効果」の中の「ラスタライズ」の設定を「スクリーン72dpi」に設定してください。 - 5.プレビューモードを「ピクセルプレビュー」に設定する
- 「表示」の中にある「ピクセルプレビュー」にチェックを入れます。このプレビューモードは、オブジェクトがラスタライズされた場合、どのように表示されるかを確認するためのものです。すべてをピクセルで制作するWeb用のデザインにおいて、必須といえるモードです。
デザイン制作上の留意点
紙のデザインとWebのデザインでは、配慮が必要な点やモラルが若干異なります。以下の点にご留意の上制作をおこなってください。
- 【注意点1】「線」は使用しない
- Illustratorで線を使うと、アンチエイリアス（線や文字の輪郭をぼかしてなじませる効果）が発生し、にじみの原因になってしまいます。線はできるだけ「塗り」で表現するか、パスのアウトライン化を行ってください。こうすることでアンチエイリアスを回避し、にじみの少ないデザインを作成することができます。
- 【注意点2】画像ファイルの埋め込みを行う
- 画像ファイルの埋め込みがされていないと、画像のリンク切れや素材の入稿漏れの原因になりがちです。ミスによって制作が停止してしまわないように、必ず画像を「埋め込み」にしてください。
- 【注意点3】保存時に「PDF互換ファイルを作成」のチェックを外す
- 「PDF互換ファイルを作成」にチェックが入っていると、データサイズが大きくなってしまいます。どうしても必要な場合を除いて、チェックを外してください。
- 【注意点4】アウトライン化されたデータを用意する
-
クロノドライブではコーディングを行う際に、通常のデザインデータとアウトライン化したデータの2つを用いて制作を行っております。そのため、すべてのページで両方のデータのご用意をお願いしております。また、アウトライン化する前と後のデータに区別をつけるために、アウトライン化されたファイル名の末尾に「_ol」を付けてください。
たとえば、通常のデザインデータのファイル名が「pagename.ai」の場合、アウトライン化されたデータのファイル名は「pagename_ol.ai」となります。
- 【注意点5】テキストで表示させる箇所を指定する
- 制作上のミスを防ぐために、デザイン上に指示用レイヤーを作成し、赤枠などでテキスト箇所の明示をお願いいたします。
