イラレでウェブデザインをする場合、ピクセル整合が必要です。世の中高精細ディスプレイが広まって、SVGとかCSSとかが普及して、もうそんな面倒臭いピクセルという単位からは逃れられたかと思いきや、現場ではまだまだしぶとく生き残ってます。バナーなんかは未だに横サイズが200pxだったりしますしね。

そんなわけで、IllustratorCC2017におけるピクセル整合の最新事情をご紹介します。

ピクセル整合はCSの頃から改良を繰り返しており、バージョンごとに仕様が違います。新バージョンについては色々な問題を孕んでいるAdobeのアプリケーションですが、ことピクセル整合に関しては新しいバージョンが正義です。CC2015より17の方が断然便利!なのでCC導入済みでウェブの人はぜひ最新を使いましょう。

CC2015までのピクセル整合


・新規ドキュメント作成の時に「新規オブジェクトをピクセルに整合」にチェックを入れる。
・変形パネルにある「ピクセル整合」のチェックを使う。
上記二つの機能でピクセル整合をコントロールしていました。
新規のオブジェクトと、変形でピクセルの整数を維持するものですネ。

CC2017のピクセル整合

上記の機能はなくなり、代わりに二つのボタンが追加されました。


コントロールパネル右上にある[作成および変形時にアートをピクセルグリッドに整合します]と[選択したアートをピクセルグリッドに整合 ]です。
Adobeはボタンの名前をちゃんとつけてください。あとアートってなんやねん。オブジェクトちゃうんかい。記事書く方の身にもなれ。

ピクセルに整合ボタン

左側のボタン[選択したアートをピクセルグリッドに整合 ]はオブジェクトをピクセルグリッドに整合させるツール、右側の[作成および変形時にアートをピクセルグリッドに整合します]はオン/オフで使う環境設定です。これはまったく機能が違うので使い分けが大事。



左側の[選択したアートをピクセルグリッドに整合 ]をクリックするとピクセル整合していないオブジェクトをピクセル整合させます。つまり小数点以下の数字をバッサリ四捨五入し、直線のセグメントをピクセルの境目に移動します。



ここで注意が必要なのはオブジェクトの形を保たない、ということです。ロゴやアウトライン化したフォント、細かく書き込んだイラストなどは軒並みガッタガタに崩れます。ロゴやアイコン、アウトライン化した文字などの細かいデータは迂闊にピクセル整合ボタンを押さない様にしましょう。

ピクセル整合スイッチ


右側の[作成および変形時にアートをピクセルグリッドに整合します]は、オン/オフで切り替えます。
新規にオビジェクトを描画する際と変形や移動する際、オンの時にはピクセルにスナップし、オフの時にはしません。
ピクセルグリッドに整合します、と書いてあるんですが、左側のピクセルに整合ボタンのような強制的な処理はしません。すでにピクセルに整合しているオブジェクトを移動変形する時に位置あわせするのと、新規に描画する時にピクセルにスナップする機能です。



オンの時にピクセル整合する内容はオプションダイアログで設定できます。
上から「新規オブジェクト作成時」「移動時」「拡大縮小時」です。それぞれ動画の説明付き。

まとめ


Webページのデザインを作り込む時は、通常はピクセル整合スイッチをオンにして作業。変形などをかけた場合、必要に応じてピクセルに整合ボタンをクリックして強制的に整合するか、ロゴやアイコン、文字などアンチエイリアスかかったままにしておくか、使い分けます。

CC 2017ちょー便利!

新規ドキュメントの時にしか新規オブジェクトのピクセル整合を決められず、変形の時にかオンオフできなかったCC2015までに比べて、ものすごく使いやすくなりました。