読者です 読者をやめる 読者になる 読者になる

アラタナエンジニアブログ

aratana Engineer's Blog

Illustratorでweb制作を行う際の基本設定と「にじみ」対策 -1pxとの戦い-

デザイン Tools Illustrator

どうも、皆様、こんにちは。
春ですね。春といえば、もちろん、あれですよね。
そうです。ブラックバスのスポーニングの時期です。魚の活性ととも、テンションも上がりつつあるアラタナのwebデザイナー松崎です。

さて、みなさんは、web制作を行う際、どんなツールを使用されているでしょうか。
きっと、Photoshopを使用されている方がほとんどではないかと思います。もちろん、私も普段はPhotoshopを使用しています。
しかし、私は以前web制作でIllustratorを使用していた時期がありました。

その頃に私が戦っていたもの、それはIllustrator独特の「にじみ」「1pxのズレ」です。

今後、脱ビットマップなwebデザインを行う上で便利なIllustratorを使用する為に、
そんな戦いの中で得てきた、Illustratorでweb制作を行う際の基本設定と「にじみ」「1pxのズレ」対策を今回はご紹介したいと思います。


Illustratorでweb用保存した画像に出る「にじみ」や「1pxのズレ」の原因

f:id:matsuzaki_kyosuke:20150324195437p:plain
「Adobe Illustrator」 より

そもそも、なぜIllustratorでweb用保存すると、「にじみ」や「1pxのズレ」が出てしまうのでしょうか。

その大きな原因は、適当に長方形(線無し)などを作り、Illustratorの上部メニュー>表示>「ピクセルプレビュー」にチェックを入れ、角を拡大していただけると、おわかりになるかと思います。全然ピクセルグリッドに選択部分が合っていないんです。(以下画像参照)
これにより、どっちのグリッドに沿えば良いのかIllustratorは迷ってしまい、「にじみ」や「1pxのズレ」が起きてしまいます。
「300px」で書き出したいのに、「301px」になってしまったり、画像の端がボヤッとします(泣)

f:id:matsuzaki_kyosuke:20150324200558j:plain
「Adobe Illustrator」 より

まずは、上のような基本的なズレを解決する方法をご紹介します。
それは、オブジェクトを選択して出てくる変形パネルのピクセルグリッドに整合」にチェックを入れることです。

f:id:matsuzaki_kyosuke:20150324201115j:plain
「Adobe Illustrator」 より

そうすると、先ほどの長方形の角は、下の画像のようになります。ちゃんとグリッドに沿ってくれていますね。

f:id:matsuzaki_kyosuke:20150324201412j:plain
「Adobe Illustrator」 より

以上をまとめると、
Illustratorの表示メニューで「ピクセルプレビュー」にチェックを入れる。
②オブジェクトを選択して、 変形パネルの「ピクセルグリッドに整合」にチェックを入れる。
これで、基本的な対策はできるはずです。

ですが、これだけでは、色んな状況に対応できる対策にはなりません。
なので、web制作用の初期設定と、更なる「にじみ」「1pxのズレ」対策を以下にご紹介します。



Illustratorでweb制作を行う際の初期設定について

それでは、Illustratorでweb制作を行うにあたっての、基本的な初期設定を見ていきましょう。
①単位は【ピクセル」にすること
②カラーモードは【RGB】
③ラスタライズ効果は【スクリーン(72ppi)】
④【新規オブジェクトをピクセルグリッドに整合】のチェックは外す。

※④については、ピクセルグリッドに整合にすると望まない変形をしてしまうオブジェクトがある為、とりあえずチェックは外します。
その為、ピクセルグリッドに整合が必要なオブジェクトごとに、チェックを入れる必要が出てきます。

f:id:matsuzaki_kyosuke:20150324203032j:plain
「Adobe Illustrator」 より

「線の位置」の設定について

次に「線の位置」です。これは絶対に「内側」に設定してください。
線の位置が「外側」や「中心」になっていると、選択部分とオブジェクトが合わず、web用保存する際に、正確な数値で書き出すことが出来ません。

f:id:matsuzaki_kyosuke:20150324203938j:plain
「Adobe Illustrator」 より



「小数点以下の数値を無くす」設定について

最後に、「オブジェクトのサイズ」、「オブジェクトの座標」、「アートボードの座標」の数値が、「小数点以下を出さない」ように設定してください。
「300.638...」とかではなく、「300」にする、ということですね。

表示の「ピクセルプレビュー」にチェックを入れずに、長方形ツールで、これくらいのサイズかなと適当な場所に長方形を作ってしまった時は、要注意です!小数点以下有りの数値になっていると、正確なサイズで書き出してくれません。
特に注意なのは、「オブジェクトの座標」と「アートボードの座標」です。オブジェクトのサイズは正確なのに、この2つに小数点があるだけで、1px誤差が出たりします。

f:id:matsuzaki_kyosuke:20150325105950j:plain
「Adobe Illustrator」 より



まとめ

今回ご紹介したIllustratorでweb制作を行う上での基本設定と「にじみ」「1pxのズレ」対策をまとめると以下のようになります。

「初期設定」
● 単位は「ピクセル」にすること
● カラーモードは「RGB」
● ラスタライズ効果は「スクリーン(72ppi)」
● 「新規オブジェクトをピクセルグリッドに整合」のチェックは外す。

「にじみ」「1pxのズレ」対策
Illustratorの表示メニューで「ピクセルプレビュー」にチェックを入れて制作する。
● オブジェクトを選択して、 変形パネルの「ピクセルグリッドに整合」にチェックを入れる。
 ※画像データなどサイズを正確(小数点以下無し)にできないものに関しては、ピクセルグリッドに整合にチェックを入れると、変形する可能性があるので、注意してください。

● 線の位置は必ず「内側」にすること。
● 「オブジェクトのサイズ」、「オブジェクトの座標」、「アートボードの座標」の数値を小数点以下無しにする。
 「300.638...」とかではなく「300」 にする。


Illustratorには、Photoshopには無い便利な機能が多々あります。
今後SVG形式の画像を使用するなど、脱ビットマップなweb制作を行っていくにあたり、
非常に便利なツールですので、今回ご紹介した設定と対策を行って頂いて、Illustratorをweb制作ツールとして、一度
使用されてみてはいかがでしょうか。ではでは。