マニュアル キャンセル

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

  1. Illustrator ユーザーガイド
  2. Illustrator とは
    1. Illustrator の概要
      1. Illustrator の新機能
      2. よくある質問
      3. Illustrator の必要システム構成
      4. Apple Silicon での Illustrator の使用
    2. ワークスペース
      1. ワークスペースの基本
      2. ドキュメントの作成
      3. ツール
      4. ショートカットキーのカスタマイズ
      5. アートボード
      6. ワークスペースのカスタマイズ
      7. プロパティパネル
      8. 環境設定の指定
      9. タッチワークスペース
      10. Illustrator での Microsoft Surface Dial のサポート
      11. 復帰、取り消し、自動処理
      12. ビューを回転
      13. 定規、グリッド、ガイド
      14. Illustrator でのアクセシビリティ
      15. セーフモード
      16. アートワークの表示
      17. Illustrator での Touch Bar の使用
      18. ファイルとテンプレート
      19. Adobe Creative Cloud で設定を同期
    3. Illustrator のツール
      1. 選択ツール
        1. 概要
        2. 選択ツール
        3. ダイレクト選択ツール
        4. 投げ縄
        5. アートボード
      2. ナビゲーション
        1. 概要
        2. ズーム
        3. ビューを回転
      3. ペイント
        1. 概要
        2. グラデーション
        3. シェイプ形成
      4. 文字
        1. 概要
        2. 文字
        3. パス上文字
  3. Illustrator iPad 版
    1. Illustrator iPad 版のご紹介
      1. Illustrator iPad 版の概要
      2. Illustrator iPad 版についてのよくある質問
      3. 必要システム構成 | Illustrator iPad 版
      4. Illustrator iPad 版で実行できる操作とできない操作
    2. ワークスペース
      1. Illustrator iPad 版のワークスペース
      2. タッチショートカットとジェスチャー
      3. Illustrator iPad 版のキーボードショートカット
      4. アプリケーション設定を管理
    3. ドキュメント
      1. Illustrator iPad 版でのドキュメントの操作
      2. Photoshop および Fresco ドキュメントの読み込み
    4. オブジェクトの選択と配置
      1. リピートオブジェクトの作成
      2. オブジェクトのブレンド
    5. 描画
      1. パスの描画と編集
      2. シェイプの描画と編集
    6. 文字
      1. 書体とフォントの操作
      2. パス上のテキストデザインの作成
      3. カスタムフォントを追加
    7. 画像を操作
      1. ラスタライズ画像のベクター化
    8. カラー
      1. カラーとグラデーションの適用
  4. クラウドドキュメント
    1. 基礎知識
      1. Illustrator クラウドドキュメントの操作
      2. Illustrator クラウドドキュメントの共有と共同作業
      3. Adobe Illustrator 用のクラウドストレージのアップグレード
      4. Illustrator クラウドドキュメント | よくある質問
    2. トラブルシューティング
      1. Illustrator クラウドドキュメントの作成または保存時のトラブルシューティング
      2. トラブルシューティング:Illustrator クラウドドキュメントで発生する問題
  5. コンテンツの追加と編集
    1. 描画
      1. 描画の基本
      2. パスの編集
      3. ピクセルパーフェクトなアートの描画
      4. ペンツール、曲線ツール、または鉛筆ツールを使用した描画
      5. 単純な線とシェイプの描画
      6. 画像トレース
      7. パスの単純化
      8. 遠近グリッドの定義
      9. シンボルツールとシンボルセット
      10. パスセグメントの調整
      11. 5 つの簡単なステップで花をデザイン
      12. 遠近描画
      13. シンボル
      14. web ワークフローのピクセル整合パスの描画
    2. 3D 効果と Adobe Substance マテリアル
      1. Illustrator の 3D 効果について
      2. 3D グラフィックの作成
      3. 3D オブジェクトの作成
      4. 3D テキストの作成
    3. カラー
      1. カラーについて
      2. カラーの選択
      3. スウォッチの使用と作成
      4. カラー調整
      5. Adobe Color テーマパネルの使用
      6. カラーグループ(カラーハーモニー)
      7. Color テーマパネル
      8. アートワークの再配色
    4. ペイント
      1. ペイントについて
      2. 塗りと線を使用したペイント
      3. ライブペイントグループ
      4. グラデーション
      5. ブラシ
      6. 透明と描画モード
      7. オブジェクトにストロークを適用する
      8. パターンの作成と編集
      9. メッシュ
      10. パターン
    5. オブジェクトの選択と配置
      1. オブジェクトの選択
      2. レイヤー
      3. オブジェクトのグループ化と分割・拡張
      4. オブジェクトの移動、整列、分布
      5. オブジェクトの重ね合わせ    
      6. オブジェクトのロック、非表示、および削除
      7. オブジェクトの複製
      8. オブジェクトの回転とリフレクト
    6. オブジェクトのリシェイプ
      1. 画像の切り抜き
      2. オブジェクトの変形
      3. オブジェクトの組み合わせ
      4. オブジェクトのカット、分割、トリミング
      5. パペットワープ
      6. オブジェクトの拡大・縮小、傾斜、および変形
      7. オブジェクトのブレンド
      8. エンベロープを使用した変形
      9. 効果を使用したオブジェクトの変形
      10. Shaper ツールやシェイプ形成ツールを使ったシェイプの新規作成
      11. ライブコーナーの操作
      12. リシェイプワークフローの強化とタッチ操作のサポート
      13. クリッピングマスクの編集
      14. ライブシェイプ
      15. シェイプ形成ツールを使用したシェイプの作成
      16. オブジェクトを一括選択
    7. 文字
      1. テキストの作成
      2. フォントとタイポグラフィ
      3. 書式設定の種類
      4. テキストの読み込みと書き出し
      5. 段落の書式設定
      6. 特殊文字
      7. パステキストの作成
      8. 文字スタイルと段落スタイル
      9. タブ
      10. テキストと文字
      11. 環境に無いフォントの検索(Typekit のワークフロー)
      12. Illustrator 10 からのテキストの更新
      13. アラビア語およびヘブライ語のテキスト
      14. フォント | FAQ とトラブルシューティングのヒント
      15. 3D テキスト効果を作成
      16. クリエイティブなタイポグラフィデザイン
      17. 文字の拡大・縮小と回転
      18. 行間と字間
      19. ハイフネーションと改行
      20. テキストの機能強化
      21. スペルチェックと言語の辞書
      22. 日本語の書式設定
      23. アジア言語スクリプト用コンポーザー
      24. ブレンドオブジェクトを使用したテキストデザインの作成
      25. 画像トレースを使用したテキストポスターの作成
    8. 特殊効果の作成
      1. 効果の操作
      2. グラフィックスタイル
      3. ドロップシャドウの作成
      4. アピアランス属性
      5. スケッチとモザイクの作成
      6. ドロップシャドウ、光彩、ぼかし
      7. 効果のまとめ
    9. Web グラフィック
      1. Web グラフィック作成に対する最善の取り組み
      2. グラフ
      3. SVG
      4. アニメーションの作成
      5. スライスと画像マップ
  6. 読み込み、書き出し、保存
    1. インポート
      1. アートワークファイルの読み込み
      2. ビットマップ画像の読み込み
      3. Photoshop からのアートワークの読み込み
      4. 複数ファイルの配置 | Illustrator CC
      5. 画像の埋め込み解除
      6. Adobe PDF ファイルの読み込み
      7. EPS ファイル、DCS ファイルおよび AutoCAD ファイルの読み込み
      8. リンク情報
    2. Illustrator の Creative Cloud ライブラリ 
      1. Illustrator の Creative Cloud ライブラリ
    3. 保存
      1. アートワークの保存
    4. エクスポート
      1. Photoshop での Illustrator アートワークの使用
      2. アートワークの書き出し
      3. アセットの収集と一括書き出し
      4. ファイルのパッケージ
      5. Adobe PDF ファイルの作成
      6. CSS の抽出 | Illustrator CC
      7. Adobe PDF オプション
      8. ファイル情報とメタデータ
  7. プリント
    1. プリントの準備
      1. プリントするドキュメントの設定
      2. 用紙のサイズと方向の変更
      3. 切り抜きまたは整列用のトリムマークの指定
      4. 大きなカンバスサイズの使用
    2. プリント
      1. オーバープリント
      2. カラーマネジメントを使用したプリント
      3. PostScript によるプリント
      4. プリントプリセット
      5. トンボと裁ち落とし
      6. 透明が使用されているアートワークのプリントおよび保存
      7. トラッピング
      8. 色分解のプリント
      9. グラデーション、メッシュ、カラーブレンドのプリント
      10. 白のオーバープリント
  8. 自動処理
    1. 変数パネルを使用したデータ結合
    2. スクリプトによる自動処理
    3. アクションによる自動処理
  9. トラブルシューティング 
    1. クラッシュの問題
    2. クラッシュ後のファイルの回復
    3. ファイルの問題
    4. GPU デバイスドライバーの問題
    5. Wacom デバイスの問題
    6. DLL ファイルの問題
    7. メモリの問題
    8. 環境設定ファイルの問題
    9. フォントに関する問題
    10. プリンターの問題
    11. クラッシュレポートをアドビと共有

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

Web グラフィックについて

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

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

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

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

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

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

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

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

注意:

Illustrator には、Web ページやバナーなども含め、Web 専用のテンプレートが多数用意されています。ファイル/テンプレートから新規を選択して、テンプレートを選択します。

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

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

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

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

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

ピクセルプレビューをオフにした状態(上)とオンにした状態(下)
ピクセルプレビューをオフにした状態(上)とオンにした状態(下)

注意:

ピクセルグリッドは定規の原点(0,0)に影響されます。定規の原点を移動すると、アートワークのラスタライズ結果が変化する場合があります。

モバイルデバイス向けの 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 ファイルを圧縮解除できることを確認します。

アドビのロゴ

アカウントにログイン