Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題）

2017年の追記（CC2017向け）

次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。
次セクション「2016年の追記」との違いだけを列挙する。

変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。
それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している（スクリプトでなんとかなりそうな気もするが調べていない。せっかくなのでこのバーのその他の項目も積極的に使っていこうかとも思うが、やはりパレットのほうが見やすい・・・）。

CC2016までの課題であった「新規オブジェクトをピクセルグリッドに整合」オプションが「ピクセルのスナップオプション」になって、ようやくまともに機能するようになった。うれしい。「線幅と効果を拡大・縮小」をONにしたまま作業をしないということと、非ピクセル整合オブジェクトを基準に「整列」しないという２点に留意しておけばおおむね大丈夫な感じ。この２点も別にバグとか不具合ではなく、当然そうなるべき動作なので作業者が注意すべきことだ。あとは「ピクセル整合していない『傾いてない四角形』のみを抽出表示する機能」とかあれば完璧（今でも「選択＞ピクセルグリッドに未整合」というのがあるが、これ整合してるオブジェクトも選択しちゃいませんか？？？）。

2016年の追記（CC以降からCC2016までならこのセクションだけ読めば大丈夫）

最近のイラレでは「表示＞GPUでプレビュー」機能がついたがこれはピクセル単位の作業するには向かない。特性上なのかピクセルが滲んで見える。表示上だけの問題なのでデータがしっかりピクセルクリーンになっていれば大きな問題はない。初期設定ではONなので気がついたら「表示＞CPUでプレビュー」に切り替えること。
最近の私は以下の設定でもうずっとやってる。CS4までとくらべてイラレのピクセルの扱いがだいぶまともになったので不都合は特にない。

CPUでプレビュー
環境設定＞一般＞キー入力＞0.5px（1pxにすると0.5pxずれたときに修正するのがめんどくさい）
アートボードの幅・高さ・X・Yをすべて整数ピクセルにする（新規作成のプロファイルで「Web」とか選べばそうなってる。なんかのはずみで少数点数になってると修正で涙目になるので注意しよう）
変形パネル＞ピクセルグリッドに整合：ON（なお変形パネルに「新規オブジェクトをピクセルグリッドに整合」なるオプションがあるが私の環境だけなのかONにしても全然効いてくれない。イラレにはよくあること。なのでオブジェクトを作成する都度せっせとONにしている）
変形パネル＞線幅と効果を拡大・縮小：OFF（オブジェクトの拡大縮小操作で線幅が少数点数になってしまうので。作業的にONにする必要があるときは都度ONにする。余談だが以前はこの設定が奥深くにあって辛かった）
線幅パレット＞線の位置＞線を内側 or 外側に揃える（内側にするとCSSの box-sizing: border-box; と同じ状態になるので内側を推奨。なお線幅が偶数ピクセルなら中央でも構わない）

アンチパターン

以下の設定は推奨しない。

ピクセルプレビュー：どんなオブジェクトもピクセルクリーンに配置してくれるのはいいが、スナップしてくれなくなるので作業効率が落ちる。スナップのないイラレなど考えられない（注意イラレのたぶんCC2017からピクセルプレビューでもスナップしてくれるようになった。なのでCC2017以降ならオンで構わない）。
環境設定＞スマートガイド＞整列ガイド：これがONだと変なところにスナップされてしまうので嫌い。整列は自前アクションでキーボードショートカットを割り当てるのが吉。

2012/5/26：イラレCS5及びCS6の場合の追記

このエントリはイラレCS4をベースに記載している。また本文中にも書いてあるように（おそらく）イラレ10くらいから適用可能な方法である。CS5およびCS6では、変形パネルに「ピクセルグリッドに整合」オプションが追加され、これをONにしておけば、とりあえずシャープな線や矩形を描くことは可能になった（新規作成でプロファイル「Web」を選択しておけばデフォルトでON）。
CS6に関して言えば、このオプションはオブジェクトの位置を0.5px単位でずらすことで線のにじみを回避している（CS5は持ってないため不明だがまあ同じだろう）。この「ピクセルグリッドに整合」の欠点は、デザインの試行錯誤の過程等で線幅を太くしたり細くしたりしているうちに、オブジェクトの位置が0.5pxずつ移動してしまうことだ（適当に矩形や線を描いて線幅をいじってみるとすぐ分かるが、この妙な動きはかなりショック）。これを回避するには、矩形の場合、「ピクセルグリッドに整合」は残念だが常にOFFにしておき、線幅パレットで「線の位置」を「線を内側に揃える」又は「線を外側に揃える」にする。この方法は、以下に説明する「効果＞パスのオフセット...」を使った方法と考え方は同じ。CS4ではナゾの滲みのせいで使えなかった方法がCS6では使えるようになったため、だいぶ楽チンになった。なお、線の場合は、このエントリで紹介する方法か、もしくは、上の問題があることを意識した上で「ピクセルグリッドに整合」を使う。
追記おしまい。以下本文。

IllustratorでWebやソフトウェアのUIデザインを行う際には、ご存知のとおりピクセル単位の処理にまつわるさまざまな問題点に出くわすこととなる。たとえば・・・

線幅の値によっては、線幅が太る（多くは線幅が奇数値のとき）。
アンチエイリアスがなんていうか、間抜け・・・。
オブジェクトサイズが見た目上と異なる。

これらはイラストレーターの内部的には整合が取れており問題ない。しかしwebなどの最終出力＝ディスプレイな作業時には、見た目上意図したとおりになっているかどうかも気にしなければならないため、問題となる。

▼イラストレーターのピクセル処理の泣きどころ＞＜

WebだろうがソフトウェアのUIだろうがあらゆるデザインにイラレ使いたがりッ子の私としては、1ピクセルのシャープな線をビシッとひきたいのに、いざやってみると2ピクセルの間抜けな線になったりすると激しく萎える。これまでは、大好きな変形パネルを使って0.5ピクセル単位の調整を行うことでこの問題に対処していた。

そんな折、三階ラボさんのこの記事にヒントを得て、この問題にファイナルアンサーとも呼ぶべき一定の解を、ついに得ることができた！三階ラボさんの記事は相当完璧な解説なので、イラストレーターホリックな向きには一読を強烈にオススメする。かなり前の記事なのに、なんで今まで気がつかなかったんだろう。ちなみに以下に書くのは、私の利用法に合わせて少々アレンジしたものです（最後のパスのオフセットのかけ方のところ）。

試していませんが、たぶんイラストレーター10以降くらいで有効な方法ではないかと思います（私はCS4で確認）。

まずはイラストレーターの環境設定

「一般＞キー入力」を「0.5px」に。
「単位」の一般と線を「ピクセル」に。
「スマートガイド」の「整列ガイド」も基本的には外しておいた方がよいと思われ（変なところに吸着されるとかえって邪魔。整列は整列アクションにキーボードショートカットを割り当てたい）。
また環境設定とは別に、書類設定（CS3まで）またはアートボード設定（CS4）において、アートボードの大きさを整数ピクセル値にしておく（印刷物の作業を行う人は特に注意）。

ここまではWebの作業する人なら普通にやっている設定かもしれない。キー入力が1pxでなく0.5pxなのがミソ。

それから表示メニュー

「表示＞ピクセルプレビュー」をオン
実はこの設定を行うと前述の環境設定の1の設定は無視されて強制的にキー入力＝1pxとなる。しかし後述の理由でピクセルプレビューは頻繁にオンオフするので、やはりキー入力＝0.5pxの設定は必要。
「表示＞ピクセルにスナップ」をオン
ピクセルプレビューがオフのときはこのメニューは「グリッドにスナップ」となるので、まず上記1を設定すべし。

ここから先は、実際の作業中の操作となる。

実践編１「1pxの線幅を持つ、四角形を描きたい！」

たとえば「K100%の1ピクセルの線を持つ100×100ピクセルの長方形」を普通に描くと、結果として「K50%の2ピクセルの線を持つ102×102ピクセルの長方形」となる（上に挙げた「なんじゃこりゃ」の例を参照）。これは、線幅がパスの両側にとられることでまず1pxずつ太り、2pxに太った線を1pxに見せかけるために色を薄くする（アンチエイリアスがかかる）という処理がなされるためである。本来はこの問題を解決するために、線パレットの「線の位置」で内側（や外側）を指定できるようになっているはずなのだが、実はこのオプション、上辺に微妙すぎるアンチエイリアスが残ってしまい、繊細なデザイナーの気持ちをいちじるしく傷つけ、血圧をただちに上昇せしめる*1。

そこでこのようにする。

対象の四角形（線の位置は中央でよい）を選択し、「効果＞パスのオフセット...」でオフセット量を「-0.5px」とする。

これだけで「線幅が太る」「間抜けなアンチエイリアスがかかる」「オブジェクトサイズが見た目上と異なる」という３つの問題を一挙に解決できる。この方法はどんな線幅でも適用可能である。線幅2pxのときにはオフセット「-1px」、3pxのときにはオフセット「-1.5px」と、線幅の半分のオフセット値を設定してあげればよい。これでうまくいかない場合は、変形パレットで当該オブジェクトのX、Y、W、Hが整数値になっているかを確認（前段の設定が間違いなければ、いかように四角を描いても整数になるはずだ）。

▼これでイラストレーターでの四角形の描画はパーペキ。

実践編２「1pxの線幅を持つ、線を描きたい！」

「効果＞パスのオフセット...」は直線のようなオープンパスの場合、期待するような結果を得られない。そこでここでは2つの方法を紹介する。

0.5ピクセルメソッド
これは従来からの私のやり方。ピクセルプレビューをオフにして、カーソルキーを一回たたいて0.5pxずらす方法。縦線ならXの値を0.5pxずらし、横線ならYの値を0.5pxずらす。キーボードだけで操作できるのでまずまず軽快。
パスのアウトラインメソッド
かなり強引な方法だが、1pxなり3pxなりの線をアウトライン化して、塗りにしてしまう。他のオブジェックトと整列させたり、グラデーションを設定したい場合などに便利なので、意外と実用的な方法。ただし、点線にしたり、アピアランスで線を追加していって複雑な線を作りたいときには、この方法はとれない。

直線の場合はこの２つの方法を使い分けることになる。私は最初の方法をとることが多い。

▼直線の場合はちょっとだけ面倒だよ。

ピクセルプレビューの問題点に関する補足

オブジェクトがピクセルに吸着するので便利なピクセルプレビューだが、困った問題もある。

ピクセルプレビューの状態でオブジェクトを移動すると、0.5pxに合わせたオブジェクトも整数値に戻ってしまう。その都度、Command（Ctrl） + Option（Alt） + Y でモードを切り替えるのは少々手間（ちなみに私は、なるべくキーボードは左手、マウスは右手から離したくないという理由で、ピクセルプレビューにCommand + Option + Eを割り当てている）。
スマートガイドが出なくなる。これもモードの性質上仕方のないことかもしれない。ピクセルプレビューを使わなくても、アートボードサイズが整数値ならば、ラフに引いたオブジェクトも奇麗な（小数点が混じらない）ピクセル値になるので、通常モードを基本に作業してもいいかもしれない（私もいまだに気分によってころころ変わる）。ただし通常モードの場合、表示倍率が100%じゃないと、整数値にならないので注意。

なんだかんだで私はピクセルプレビューOFFで作業することが多いかもしれない。表示倍率100%に戻れば、通常モードでも奇麗な四角形が描けるので、いちいちモード間を往復する手間が省けるのである。

以上、パスのオフセットをはじめとする細かな技を駆使することにより、四角形の描画とその後の扱いが劇的にラクチンになるという話。しかしそれ以前にAdobeには、こういう基本的なところでさくっと作業できるようにして欲しいモノである。