大丈夫やで☆イラレでウェブデザイン【その2】ピクセルが合わなくなる原因 Top5

Author :

Adobe Illustratorでウェブサイトのレイアウトを組む

Adobe Illustratorでウェブデザインを組むコツをお届けするシリーズです。イラレこそがレイアウトに最適、とは知ったものの扱いがイマイチ……という方に届けば嬉しいです。きっと、効率良くなりますよ。

前の記事では、Illustratorでウェブサイトのレイアウトを組むときには常にピクセルの合った画像を作ることが大事ということで、ピクセルの合ったレイアウトを作るための設定のコツをまとめました。

でも、気をつけているつもりなのに、なんか合わない……、というときはここをチェックしてみてください。

「変形」パネルで見ると大きさが小数点以下-イラレでウェブデザイン

イラレでピクセルが合わなくなる原因 Top5

1: ミリ単位で作ってる

ウェブサイトのレイアウトをするときは、環境設定(コマンド+K)から「単位」を開き、すべての単位をピクセルに設定します。これをミリのままにしておくと、ピクセルが合いません。
Adobe Illustratorでウェブサイトのレイアウトを組む

2: 「ピクセルにスナップ」してない

Adobe Illustratorでウェブサイトのレイアウトを組む

メニューバーから「表示」→「ピクセルプレビュー」を選択します。こうすると同時に「ピクセルにスナップ」にもチェックが入ります。こうすると、矩形ツールなどを使ったとき自然にピクセルに合うようになります。

3: キー入力の設定が中途半端

環境設定(コマンド+K)を開いた一番目の画面で「キー入力」の項目をチェックしてください。値が整数、単位がpxになっていますか?
Adobe Illustratorの環境設定パネル

ミリ単位の設定から持ってくると、小数点以下の数字が入ることがあります。その設定のままオブジェクトを移動させると、キリのいいサイズで作ったはずなのに、いじっているうちにズレが……ということが起こります。

4: 線に気を配ってない

初期設定の線と揺りここまで挙げたことを守っていても、「初期設定の塗りと線」で矩形を描くと、ピクセルに合わずにじんだ線ができたりします。

線を内側に合わせる-イラレでウェブデザイン

これは、線の太さが1pxだから。オブジェクトの境界は線の中心にあるので、0.5pxはみだした格好になるのです。これを回避するには「線を内側に揃える」のオプションをチェックします。

5: アートボードの位置が悪い

以上のことを全部チェックしたのに、それでもどうしても合わない……という場合があります。そんなときは、アートボードの設定を疑いましょう。

アートボードの大きさが小数点以下-イラレでウェブデザイン

アートボードの位置が、いつのまにか小数点のついた数字になっていることがあります。アートボードをコピーしたときなどに起こりやすいのですが、こうなると中のオブジェクトもつられて変な位置になってしまうようです。整数の値に変更しましょう。

ピクセルが合う/ピクセルがにじむ

どうもピクセルが合わないときは、以上のことをチェックしてみてくださいね。