Web グラフィック作成のベストプラクティス

Adobe Illustrator には、web ページをレイアウトしたり、web グラフィックを作成および最適化するための様々なツールが用意されています。例えば、web セーフカラーを使用し、画質とファイルサイズのバランスを考慮して、グラフィックに最適なファイル形式を選択します。Web グラフィックではスライスやイメージマップを活用することができます。さらに、多くの最適化オプションを使用して、web 上でのファイルの表示状態を確認することができます。

Web 用のグラフィックを作成する場合は、プリント用のグラフィックとは異なる点があることを考慮する必要があります。 

Web グラフィックの特質を考慮し、適切な判断を下すために、次の 3 つのガイドラインに留意してください。

Web セーフカラーを使用する

多くの場合、アートワークにおいてカラーは重要な要素です。しかし、作業中のアートボード上に表示されているカラーは、必ずしも別のユーザーの web ブラウザーで同じように表示されるとは限りません。Web グラフィックの作成時に予防措置として次の 2 つの対策を講じておくと、ディザ（使用できないカラーをシミュレートする方法）や、その他のカラーに関する問題の発生を防ぐことができます。1 つは、常に RGB カラーモードで作業を行うことです。2 つ目は、web セーフカラーを使用することです。

画質とファイルサイズのバランスをとる

Web 上で画像を配信するためには、画像のファイルサイズを小さくすることが重要です。ファイルサイズが小さいほど、web サーバーでの画像の保存と転送を効率よく行え、ユーザー側でも画像を短時間でダウンロードできます。Web グラフィックのサイズと推定ダウンロード時間は、web およびデバイス用に保存ダイアログボックスで確認できます。

目的のグラフィックに最適なファイル形式を選択する

最高の画質で表示し、かつ web に適したサイズのファイルを作成するには、グラフィックの種類に応じて保存するファイル形式を変える必要があります。特定の形式について詳しくは、web グラフィックの最適化オプションを参照してください。

ピクセルプレビューモードについて

Web デザイナーがピクセル単位で正確なデザインを作成できるようにするために、Illustrator ではピクセル整合プロパティが追加されています。あるオブジェクトのピクセル整合プロパティが有効な場合、そのオブジェクトの水平方向のパスと垂直方向のパスがすべてピクセルグリッドに整合し、ストロークのアピアランスが正確になります。オブジェクトを変形する場合、このプロパティを設定している限り、オブジェクトは新しい座標系に合わせてピクセルグリッドに再整合します。このプロパティは、変形パネルで「ピクセルグリッドに整合」オプションを選択することで有効にすることができます。Illustrator には、ドキュメントレベルの「新規オブジェクトをピクセルグリッドに整合」オプションもあり、web ドキュメントではデフォルトで有効になっています。このプロパティを有効にすると、描画するすべての新しいオブジェクトはデフォルトでピクセル整合になります。

詳しくは、Web ワークフローのピクセル整合パスの描画を参照してください。

アートワークを JPEG、GIF、PNG などのビットマップ形式で保存している場合、Illustrator では 72 ピクセル/インチにラスタライズされます。ラスタライズ後にオブジェクトがどのように表示されるかは、表示／ピクセルプレビューを選択して確認できます。プレビュー機能は、ラスタライズ 画像 内のオブジェクトの配置、サイズ、アンチエイリアスなどを正確に調整する場合に特に便利です。

Illustrator でオブジェクトがどのような形でピクセルに分割されるかを確認するには、表示／ピクセルプレビューを選択して、個々のピクセルが見えるようにアートワークを拡大します。ピクセルの配置は、アートボードを 1 ポイント（1/72 インチ）ごとに分割しているピクセルグリッドによって決まります。600％表示に拡大すると、ピクセルグリッド を 表示できます。オブジェクトを移動、追加または変形した場合、オブジェクトはピクセルグリッドにスナップします。スナップしたオブジェクトのエッジ（通常は左側と上側のエッジ）では、アンチエイリアスが失われます。表示／ピクセルにスナップコマンドの選択を解除すると、オブジェクトを、グリッドの間に自由に配置できるようになります。この操作でオブジェクトのアンチエイリアスがどのように変化するかを確認してください。ほんの少し調整しただけでも、 オブジェクトの ラスタライズ結果が異なります。

モバイルデバイス向けの Illustrator 画像を作成するためのヒント

画像コンテンツをモバイルデバイス向けに最適化するには、Illustrator で作成したアートワークを SVG-T などの SVG 形式で保存します。SVG-T は、特にモバイルデバイス向けに設計されています。

以下のヒントを使用して、Illustrator で作成した画像がモバイルデバイスで適切に表示されるようにします。

• SVG 標準を使用してコンテンツを作成します。SVG を使用してモバイルデバイスにベクター画像を読み込ませると、ファイルサイズが小さくなり、表示環境に依存しません。また、カラー制御に優れ、拡大縮小、そしてソースコードのテキスト編集が可能になります。その上、SVG は XML ベースなので、ハイライト、ツールチップ、特殊効果、オーディオ、アニメーションなどのインタラクティビティを画像に組み込むことができます。

• 最初から、対象モバイルデバイスに合わせた表示可能なサイズで作業を行います。SVG は拡大縮小できますが、正しいサイズで作業することによって、最終的な画像の品質およびサイズが対象デバイスに最適化されます。

• Illustrator のカラーモードを RGB に設定します。SVG は、モニターなどの RGB ラスター表示デバイスで表示されます。

• ファイルサイズを縮小するには、オブジェクト（グループを含む）の数を減らすか、複雑なオブジェクトを避け単純化（ポイントを少なく）します。使用するポイントを減らすと、SVG ファイルのアートワークを記述するテキスト情報の量が大幅に減少します。ポイントを減らすには、オブジェクト／パス／単純化を選択し、様々な組み合わせを試して、品質とポイント数のバランスを見つけます。

• 可能であればシンボルを使用します。同じシンボルであれば複数使用しても、ベクターで記述されたオブジェクトは一度定義されるだけです。再利用されるボタンの背景のようなオブジェクトがアートワークに含まれている場合に有用です。

• 画像をアニメーション化する場合、使用するオブジェクトの数を制限し、オブジェクトをできるだけ再利用して、ファイルサイズを縮小します。個別のオブジェクトではなくオブジェクトのグループにアニメーションを適用して、コードの繰り返しを避けます。

• SVGZ の使用を検討します。これは、SVG の gzip で圧縮されたバージョンです。コンテンツによっては、圧縮によってファイルサイズは大幅に縮小されます。通常、テキストは大幅に圧縮されますが、埋め込まれたラスタライズファイル（JPEG、PNG または GIF ファイル）などのバイナリエンコードされたコンテンツの場合はあまり圧縮されません。SVGZ ファイルは、gzip で圧縮されたファイルを展開するアプリケーションによって圧縮解除できます。SGVZ を正常に使用するには、対象モバイルデバイスが gzip ファイルを圧縮解除できることを確認します。