「8pxのグリッド」と「1px単位のピクセル整合」は別の設定です。
8pxは余白や配置を揃えるための例で、輪郭のにじみをなくす必須値ではありません。
ピクセルプレビューで拡大して輪郭を確認し、表示メニューのピクセルへのスナップを使います。
既存のオブジェクトは選択してから「ピクセルを最適化」で調整します。
斜線や曲線のアンチエイリアスまで一律になくす機能ではありません。
水平・垂直の輪郭を中心に確認してください。
現在の操作はAdobe公式のピクセル整合ガイドも参照できます。
Illustratorでアイコンなどの輪郭をピクセルの境界へ合わせ、書き出し時のにじみを抑える設定と手順を解説します。
本文の画面例はCC 2017以降の旧UIを含みます。
使用中のバージョンでは、メニューの「ピクセルにスナップ」と「ピクセルを最適化」を確認してください。
2026年10月16日に、Windows 11 Pro（10.0.26200）のAdobe Illustrator 30.8.2で、プロパティパネルの「ピクセルグリッドに整合」を使い、既存の四角形をピクセルの境界に合わせられることを確かめました。
Illustrator 2017以降の設定
1. ドキュメントの設定
- ファイル > 新規 を選択
- Web タブを選択
- 幅と高さを入力し、単位をピクセルに設定
- カラーモードをRGBに設定
2. 表示の設定
- 表示 > ピクセルプレビュー をオン
- 1pxのピクセルグリッドを見るには600%以上へ拡大する。表示されない場合は、環境設定のガイド・グリッドで「ピクセルグリッドを表示（600%以上にズーム）」に相当する項目を確認する。
3. 配置用の8pxグリッドを使う場合（任意）
- 編集 > 環境設定 を開く
- ガイド・グリッド を選択
- グリッドを8px、分割数を1に設定（配置用グリッドの例。制作基準に合わせて調整）し、表示メニューの「グリッドを表示」をオンにする。これはピクセルプレビューで表示する1pxのピクセルグリッドとは別の補助線です。
4. ピクセルスナップのオプション
- 表示 > ピクセルにスナップをオンにする。コントロールパネルの磁石アイコンでも切り替えられます。横の矢印から、描画・移動・拡大縮小時のスナップを設定します。
- オブジェクト > ピクセルを最適化 で既存のパスをピクセルグリッドへ吸着させて調整
既存のパスを整合した結果（2026年10月16日の確認）
Windows 11 Pro（10.0.26200）のAdobe Illustrator 30.8.2で、位置が小数になっている四角形をピクセルの境界に合わせました。
検証用に64×64ptのRGBのドキュメントを作り、線なし・青の塗りで24×24ptの四角形を置きました。
四角形を選択し、プロパティパネルの「クイック操作」にある「ピクセルグリッドに整合」を押しました。
Xは16.3ptから16ptに、Yは-47.7 ptから-48 ptに変わり、幅と高さの24ptは変わりませんでした。
-48 ptになった。検証用のドキュメントの作成はスクリプトで行い、画面で操作したのは「ピクセルグリッドに整合」のボタンだけです。
画面は626.09%に拡大した通常の表示で、ピクセルプレビューではありません。
「オブジェクト」メニューからの操作、磁石アイコンのピクセルスナップ、8pxのグリッドの環境設定は確かめていません。
Illustrator 2014以前の設定
Illustrator 2014以前のバージョンでは、新規オブジェクトをピクセルグリッドに整合 という機能がありました。
ピクセルグリッドへの整合でパスの位置や形状が変わる場合があります。適用前のコピーを残し、意図した形を保てているか確認してください。
Illustratorに関する関連記事は、下記リンクから確認できます。
環境設定の記事は、ほかにもあります。
まとめ
IllustratorでUIアイコンなどの素材を作成する際、ピクセルグリッドからずれて配置されると、書き出し時に意図しないアンチエイリアスが発生して輪郭がぼやける原因になります。
CC 2017以降ではピクセルスナップ機能が刷新され、ピクセルパーフェクトなデータ作成をスムーズに行えます。
設定を変えた後は、書き出した画像を実際の表示サイズで確認してください。すべての輪郭からアンチエイリアスがなくなるとは限りません。
ピクセル確認に使う画面環境を整える
OSのディスプレイ表示倍率とIllustratorのズーム倍率を考慮した、細部のピクセル確認に適したモニター選びの基準を紹介しています。
詳細は、運営メディア「デザノマ」の作業用モニターの解像度・表示倍率の考え方で解説しています。
1倍の書き出し画像で確認する
ピクセルプレビューだけで判断せず、使用するアートボードを1倍のPNGへ書き出し、画像のピクセル寸法と1対1で対応する倍率で水平・垂直の輪郭を見ます。ブラウザーやOSの表示倍率で拡大された画面は、画像1pxと画面1pxの比較とは条件が異なります。SVGは表示サイズでも描画が変わるので、使用するサイズごとに確認してください。
線は中心・内側・外側のどこへ配置するかと線幅で境界が変わります。「すべてのX・Yを整数にする」と決めるだけでは、1px幅の線などの境界がピクセルへ合うとは限りません。斜線や曲線も同じ方法で整数へ丸めず、意図した形と書き出し結果を比較します。Adobeの説明でも、ピクセル整合は水平・垂直のセグメントが中心で、それ以外の部分は変更されない場合があります。
上の四角形について、整合の前と後に同じ設定で1倍のPNGを書き出し、輪郭の半透明の画素を数えました。
| 項目 | 整合前 | 整合後 |
|---|---|---|
| 四角形の位置（X・Y） | 16.3pt・-47.7 pt | 16pt・-48 pt |
| 書き出したPNGの大きさ | 64×64px | 64×64px |
| 四角形のまわりの半透明の画素 | 96個 | 0個 |
| 選択していない楕円のまわりの半透明の画素 | 61個 | 61個 |
半透明の画素は、PNGの不透明度が0より大きく255未満の画素です。
この線なしの四角形では、整合した後の1倍のPNGで、水平・垂直の輪郭の半透明の画素がなくなりました。
楕円は選択しておらず整合の対象にしていないため、楕円に整合をかけたときの結果は分かりません。
PNGは、アンチエイリアスあり、背景を透明、アートボードで切り抜き、拡大率100%の設定で、スクリプトから書き出しました。
書き出しダイアログの操作、線幅のある線（中心・内側・外側）、斜線は確かめていません。
書き出しの設定はJPG・PNG・SVGのJSX例とSVG設定へ進んでください。
旧画面例を残しつつ、ここで説明した確認方法を追加しています。
参照資料と確認範囲
よくある質問：Illustratorのピクセル整合
「8pxのグリッド」と「ピクセル整合」は、同じものですか？
別の設定です。8pxは、余白や配置を揃えるための例で、輪郭のにじみをなくす必須値ではありません。ピクセル整合は、1px単位で輪郭をピクセルの境界へ合わせる設定です。
ピクセルに合わせるには、何をすればよいですか？
描画・移動中は「表示」→「ピクセルにスナップ」を使い、既存のオブジェクトは選択して「ピクセルを最適化」で調整します。
1pxのグリッドを見る場合はピクセルプレビューをオンにして600%以上へ拡大します。配置用の8pxグリッドは任意で、ピクセル整合の必須設定ではありません。
ピクセル整合をすれば、すべての輪郭のにじみがなくなりますか？
なくなるとは限りません。斜線や曲線のアンチエイリアスまで一律になくす機能ではなく、水平・垂直の輪郭を中心に確認してください。Adobeの説明でも、ピクセル整合は水平・垂直のセグメントが中心で、それ以外の部分は変更されない場合があります。設定を変えた後は、書き出した画像を実際の表示サイズで確認してください。
メニュー名が違う、または見つからないときは？
記事の画面例は、CC 2017以降の旧UIを含みます。使用中のバージョンでは、メニューの「ピクセルにスナップ」と「ピクセルを最適化」を確認してください。現在の操作は、Adobe公式のピクセル整合ガイドも参照できます。
Adobe Illustrator 30.8.2では、オブジェクトを選択したときのプロパティパネルの「クイック操作」に「ピクセルグリッドに整合」のボタンがありました。
Illustrator 2014以前の設定は、今でも使えますか？
Illustrator 2014以前のバージョンには、「新規オブジェクトをピクセルグリッドに整合」という機能がありました。旧版の項目名をそのまま探すのではなく、使用中の版のピクセルスナップと既存オブジェクトの整合機能を確認してください。整合でパスの位置や形状が変わる場合があるため、適用前のコピーと書き出し結果を比べます。
ピクセルが合っているかは、どう確認しますか？
ピクセルプレビューだけで判断せず、使用するアートボードを1倍のPNGへ書き出し、画像のピクセル寸法と1対1で対応する倍率で、水平・垂直の輪郭を見ます。ブラウザーやOSの表示倍率で拡大された画面は、画像1pxと画面1pxの比較とは条件が異なります。SVGは表示サイズでも描画が変わるので、使用するサイズごとに確認してください。
線がにじむのは、座標が整数でないからですか？
それだけとは限りません。線は、中心・内側・外側のどこへ配置するかと線幅で境界が変わります。「すべてのX・Yを整数にする」と決めるだけでは、1px幅の線などの境界がピクセルへ合うとは限りません。斜線や曲線も同じ方法で整数へ丸めず、意図した形と書き出し結果を比較します。
記事の内容は、今のIllustratorで確認されていますか？ 最新はどこで確認しますか？
2026年10月16日に、Windows 11 Pro（10.0.26200）のAdobe Illustrator 30.8.2で、線なしの四角形を「ピクセルグリッドに整合」で整合し、1倍のPNGで輪郭の半透明の画素が96個から0個になることを確かめました。
「オブジェクト」メニューからの操作、ピクセルプレビュー、8pxのグリッド、線幅のある線、斜線や曲線は確かめていません。
旧画面例を残しつつ、確認方法を追加しています。
画面環境の整え方は、運営メディア「デザノマ」の作業用モニターの記事を参照できます。
書き出しの設定は、JPG・PNG・SVGのJSX例とSVG設定の記事へ進んでください。
参照資料はAdobeの「ピクセルに整合したアートワーク」で、最新はAdobe公式のヘルプで確認してください。
コメント