IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版)

この記事は鷹野雅弘によって執筆されました。
公開日:2014年4月14日、更新日:2016年4月22日

IllustratorをWeb制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます(ツッコミ歓迎ですので、何かあればお気軽に)。

  • ドキュメントプロファイルは「Web」。[プレビューモード]を「ピクセル」に変更、[新規オブジェクトをピクセルグリッドに整合]はオフ
  • [線の位置]を「内側」にして作業
  • [アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく
  • [新規オブジェクトをピクセルグリッドに整合]はオフに
  • [プレビュー境界を使用]にチェックを入れる
  • キー入力を「1ピクセル」に
  • アートボードの座標に注意
  • sRGBを基準に

これによって、次のような問題を回避できます。

  • プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。
  • [新規ピクセルグリッドを整合]をオンにしているとき、1ピクセルの線のオブジェクトを描くと、ピクセルグリッドでなく、ピクセルグリッドの中心に吸着する。そのため、実際の大きさは1ピクセル(=0.5+0.5)大きくなってしまう。
  • [線の位置]を内側(外側)にして作業しても、次に描くときには「中央」に戻ってしまう
  • せっかくいい感じに作業していても複数オブジェクトの整列を行うと、エッジがにじむ。または、見た目の通りに整列されない
  • [新規オブジェクトをピクセルグリッドに整合]がオンのまま描画すると、パスと描画のズレが生じる
  • アートボードごとに分けて制作しているとき、個別の書き出しでは問題ないのに、アートボード書き出しするとエッジがにじむことがある

Webで使うIllustrator(+SVG、+アイコンフォント) - NAVER まとめも併せてご覧ください。

ドキュメントプロファイル

後述する内容とダブりますが、新規にドキュメントを作成する場合には、ドキュメントプロファイルに「Web」を選択し、次の2点を修正しておくとよいでしょう。

  • [プレビューモード]を「デフォルト」から「ピクセル」に変更
  • [新規オブジェクトをピクセルグリッドに整合]のチェックをはずしておく

ドキュメントプロファイルについては、末尾にもふれています。

単位はピクセル

  • ドキュメントプロファイルを「Web」に設定すれば、単位は「ピクセル」になる
  • 後から修正するには、[環境設定]ダイアログボックスの[単位]カテゴリで設定する([一般]だけでなく、[線]、[文字]、[東アジア言語のオプション]など、すべて「ピクセル」に変更しておく)
    AiCC-for-Web-12-s.jpg
  • 環境設定の[単位]を開くには、command+shift+Uキー
  • command+option+shift+Uキーで、単位の設定は順番に変更される

ピクセルプレビューで作業すべし

  • [表示]メニューの[ピクセルプレビュー]にチェックを付ける(新規ドキュメントの作成時、ドキュメントプロファイルに「Web」を選択してもピクセルプレビューがオンにならないので注意)

ただし、オブジェクトのアンカーポイントを調整するとき、ピクセルプレビューONの状態だと、アンカーポイントがピクセルグリッドに吸着してしまうため、思い通りの場所に移動できないことがあります。

[線の位置]を「内側」にして作業すべし

  • 四角形を描画前には、[線の位置]は変更できない(描画後に、変更し、グラフィックスタイルに登録しておくとよい)
  • [アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく

[新規オブジェクトをピクセルグリッドに整合]はオフに

  • ピクセルプレビューで作業すれば、(新規オブジェクトをピクセルグリッドに整合]をオフにしていても)ピクセルグリッドにスナップします。
  • [新規オブジェクトをピクセルグリッドに整合]がオンのまま描画すると、パスと描画のズレが生じます。
    ご参考
  • 後から設定するには、[変形]パネルメニューから設定します。

キー入力を「1ピクセル」に

オブジェクトを選択時、カーソルキーを押したときに移動する距離を設定するのが[キー入力]。[環境設定]ダイアログボックスの[一般]の[キー入力]で設定する。

AiCC-for-Web-13-s.jpg

プレビュー境界を使用

[新規オブジェクトをピクセルグリッドに整合]はオフにし、[線の位置]を「内側」にして作業すれば問題ないのですが、外部からデータを作業するときには、[環境設定]ダイアログボックスで[プレビュー境界を使用]オプションにチェックを付けておきましょう。

たとえば、[線の位置]が「内側」の場合、次のようにパスで揃ってしまいます。

[プレビュー境界を使用]オプションにチェックを付けると、見た目の通りに揃います。

アートボードの座標に注意

アートボードの座標(X/Y)の値が整数値になっていない場合、アートボード書き出しを行うと、エッジがぼんやりしてしまいます。

  • コントロールパネルで手入力で調整
  • または、アートボードオプションで手入力で調整
  • (アートボードツールを選択時)[変形]パネルでは調整できない

なお、アートボードを使用している場合には、[表示]メニューの[定規]→[アートボード定規に変更]をクリックして、ウィンドウ定規(アートボードにかかわらず、ひとつの定規を使用)からアートボード定規(アートボードごとに異なる定規)に変更しておくとよいでしょう。

[ピクセルグリッドに整合]の使いどころ

外部からドキュメントなどで、ピクセルグリッドにスナップしていないオブジェクトがある場合には、[変形]パネルの[ピクセルグリッドに整合]オプションをチェックします。

ただし、オブジェクトごとに行うこと。複数オブジェクトをまとめて行うと、かえって調整作業が増えます。また、有機的なベジェ曲線を持つロゴなどに[ピクセルグリッドに整合]を実行すると、意図しない形状になってしまうことがあるので注意してください。

カラー設定、校正設定は「sRGB」を基準に

Webブラウザーで表示されることを前提に、作業用スペース、および、表示を「sRGB」に設定します。

sRGBは、色空間(表示・印刷できる色の範囲やその表現方式)の国際標準規格のひとつ。表現できる色の範囲が狭く、エメラルドグリーン、濃いシアン、オレンジ、明るい赤や黄色などは苦手なため、“画像を書き出すと、作業しているモニターの色味に比べて沈む”といった状況を避けることができます。

作業用スペース

[編集]メニューの[カラー設定]をクリックして[カラー設定]ダイアログボックスを開き、「Web・インターネット用 - 日本」を選択します。これによって[作業用スペース]が「sRGB」になります。

校正設定

[表示]メニューの[校正設定]→[インターネット標準RGB(sRGB)]をクリックしておきます。

オレオレドキュメントプロファイルを活用しよう

ここにあげた内容を毎回ちまちまと設定するのは面倒だし、モレが生じやすい。 「/Users//Library/Application Support/Adobe/Adobe Illustrator XX Settings/ja_JP/New Document Profiles」内にある「Web.ai」を複製し、そのドキュメントを調整しておきましょう(例:「Web-v2」)。

[ファイル]メニューの[新規]をクリックして、[新規ドキュメント]ダイアログボックスを開き、[プロファイル]のポップアップメニューから、そのドキュメントプロファイルを選択して作業をスタートするのが望ましいです。

追記:

@battaさんからツイートいただきました。まったく同感です!

追記(2014年6月9日):

直線などのオープンパスの場合、[線の位置]の変更ができません。そのため、「ピクセルグリッドに整合:オフ、ピクセルにスナップ:オン」で1ピクセルの罫線は、次のように2ピクセルで描画されてしまいます。

pixel-grid-NG.jpg

回避策は2つ。

  • [変形]パネルで[ピクセルグリッドに整合]をオンにする
  • [キー入力]を「0.5px」に設定。ピクセルにスナップを一時的にオフにしてカーソルキーで0.5ピクセル移動する

追記(2014年8月14日):

オープンパスの[線の位置]の変更できない件、チュートリアルマニアックスで回避策が示されていました。

なるほど!!!

追記(2016年4月22日):

こちらの記事が素晴らしくまとまっています。

『10倍ラクするIllustrator仕事術』(増強改訂版[CS5/CS6/CC/CC 2014対応])

2014年10月に発売。新しいバージョンを使いながらも、古いやり方のまま作業されている中級以上のユーザー向けの書籍。ツールやコマンドなどの基本的な使い方の解説はありません。

2015年3月、8月に増刷。前書(2011年版)と合算すると3万部超のロングセラーとなっています。

改訂版に関する情報

2011年に発売した書籍の改訂版です。

  • 対応バージョンは、CS5/CS5.1/CS6/CC/CC 2014
  • 178ページから78ページ増量の256ページ
  • 金額は180円(だけ)アップの2,380円(税別)

Illustrator CC 2015への対応

Illustrator CC 2015への対応版は準備していません。おそらく、次期バージョン(Illustrator CC 2016?)に併せて改訂します。Illustrator CC 2015に関する情報は、サポートページにて公開します。

全都道府県縦断セミナーツアー

2014年10月に技術評論社から発売された『10倍ラクするIllustrator仕事術』(増強改訂版)のプロモーションのために、全国47都道県にて実施。

47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年に発売されたロングセラー書籍『10倍ラクするIllustrator仕事術』の改訂版。2014年10月に技術評論社から発売、現在、四刷です。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る