「8pxのグリッド」と「1px単位のピクセル整合」は別の設定です。
8pxは余白や配置を揃えるための例で、輪郭のにじみをなくす必須値ではありません。
ピクセルプレビューで拡大して輪郭を確認し、表示メニューのピクセルへのスナップを使います。
既存のオブジェクトは選択してから「ピクセルを最適化」で調整します。
斜線や曲線のアンチエイリアスまで一律になくす機能ではありません。
水平・垂直の輪郭を中心に確認してください。
現在の操作はAdobe公式のピクセル整合ガイドも参照できます。
Illustratorでアイコンなどの輪郭をピクセルの境界へ合わせ、書き出し時のにじみを抑える設定と手順を解説します。
本文の画面例はCC 2017以降の旧UIを含みます。
使用中のバージョンでは、メニューの「ピクセルにスナップ」と「ピクセルを最適化」を確認してください。
Illustrator 2017以降の設定
1. ドキュメントの設定
- ファイル > 新規 を選択
- Web タブを選択
- 幅と高さを入力し、単位をピクセルに設定
- カラーモードをRGBに設定
2. 表示の設定
- 表示 > ピクセルプレビュー をオン
- 表示 > グリッドを表示 をオン
3. 環境設定の変更
- 編集 > 環境設定 を開く
- ガイド・グリッド を選択
- グリッドを8px、分割数を1に設定（配置用グリッドの例。制作基準に合わせて調整）
4. ピクセルスナップのオプション
- コントロールパネル右上の磁石アイコンをクリックし、ピクセルスナップオプションを有効化
- オブジェクト > ピクセルを最適化 で既存のパスをピクセルグリッドへ吸着させて調整
Illustrator 2014以前の設定
Illustrator 2014以前のバージョンでは、新規オブジェクトをピクセルグリッドに整合 という機能がありました。
ただし、この機能は意図せずパスの形状や描画位置がずれる現象が起きやすかったため、適用タイミングへの注意が必要です。
Illustratorに関する関連記事は、下記リンクから確認できます。
環境設定の記事は、ほかにもあります。
まとめ
IllustratorでUIアイコンなどの素材を作成する際、ピクセルグリッドからずれて配置されると、書き出し時に意図しないアンチエイリアスが発生して輪郭がぼやける原因になります。
CC 2017以降ではピクセルスナップ機能が刷新され、ピクセルパーフェクトなデータ作成をスムーズに行えます。
設定を変えた後は、書き出した画像を実際の表示サイズで確認してください。すべての輪郭からアンチエイリアスがなくなるとは限りません。
ピクセル確認に使う画面環境を整える
OSのディスプレイ表示倍率とIllustratorのズーム倍率を考慮した、細部のピクセル確認に適したモニター選びの基準を紹介しています。
詳細は、運営メディア「デザノマ」の作業用モニターの解像度・表示倍率の考え方で解説しています。
1倍の書き出し画像で確認する
ピクセルプレビューだけで判断せず、使用するアートボードを1倍のPNGへ書き出し、画像のピクセル寸法と1対1で対応する倍率で水平・垂直の輪郭を見ます。ブラウザーやOSの表示倍率で拡大された画面は、画像1pxと画面1pxの比較とは条件が異なります。SVGは表示サイズでも描画が変わるので、使用するサイズごとに確認してください。
線は中心・内側・外側のどこへ配置するかと線幅で境界が変わります。「すべてのX・Yを整数にする」と決めるだけでは、1px幅の線などの境界がピクセルへ合うとは限りません。斜線や曲線も同じ方法で整数へ丸めず、意図した形と書き出し結果を比較します。Adobeの説明でも、ピクセル整合は水平・垂直のセグメントが中心で、それ以外の部分は変更されない場合があります。
書き出しの設定はJPG・PNG・SVGのJSX例とSVG設定へ進んでください。旧画面例を残しつつ、ここで説明した確認方法を追加しています。Illustrator 2026上での整合前後の画像比較は未実施です。
コメント