低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

Illustratorで制作される方へ

Illustratorは印刷用デザインの制作ソフトです。
そのため、Webデザインに利用する際には、いくつかの留意点があります。

制作のまえに設定を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】テキストで表示させる箇所を指定する
制作上のミスを防ぐために、デザイン上に指示用レイヤーを作成し、赤枠などでテキスト箇所の明示をお願いいたします。