マニュアル キャンセル

スライスと画像マップ

  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. 環境設定の指定
      11. タッチワークスペース
      12. Illustrator での Microsoft Surface Dial のサポート
      13. 復帰、取り消し、履歴、自動処理
      14. ビューを回転
      15. 定規、グリッド、ガイド
      16. Illustrator でのアクセシビリティ
      17. セーフモード
      18. アートワークの表示
      19. Illustrator での Touch Bar の使用
      20. ファイルとテンプレート
    3. Illustrator のツール
      1. ツール一覧
      2. 選択ツール
        1. 選択
        2. ダイレクト選択
        3. グループ選択
        4. 自動選択
        5. 投げ縄
        6. アートボード
      3. ナビゲートツール
        1. 手のひら
        2. ビューを回転
        3. ズーム
      4. ペイントツール
        1. グラデーション
        2. メッシュ
        3. シェイプ形成
      5. テキストツール
        1. 文字
        2. パス上文字
        3. 縦書き文字
      6. 描画ツール
        1. ペン
        2. アンカーポイントの追加
        3. アンカーポイントの削除
        4. アンカーポイント
        5. カーブ
        6. 直線セグメント
        7. 長方形
        8. 角丸長方形
        9. 楕円形ツール
        10. 多角形
        11. スター
        12. ペイントブラシ
        13. 塗りブラシ
        14. 鉛筆
        15. Shaper
        16. スライス
      7. ツールを変更
        1. 回転
        2. リフレクト
        3. 拡大/縮小
        4. シアー
        5. 自由変形
        6. スポイト
        7. ブレンド
        8. 消しゴム
        9. はさみ
  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 オブジェクトの作成
      5. 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. タブ
      12. テキストと文字
      13. 環境に無いフォントの検索(Typekit のワークフロー)
      14. Illustrator 10 からのテキストの更新
      15. アラビア語およびヘブライ語のテキスト
      16. フォント | FAQ とトラブルシューティングのヒント
      17. 3D テキスト効果を作成
      18. クリエイティブなタイポグラフィデザイン
      19. 文字の拡大・縮小と回転
      20. 行間と字間
      21. ハイフネーションと改行
      22. テキストの機能強化
      23. スペルチェックと言語の辞書
      24. 日本語の書式設定
      25. アジア言語スクリプト用コンポーザー
      26. ブレンドオブジェクトを使用したテキストデザインの作成
      27. 画像トレースを使用したテキストポスターの作成
    8. 特殊効果の作成
      1. 効果の操作
      2. グラフィックスタイル
      3. ドロップシャドウの作成
      4. アピアランス属性
      5. スケッチとモザイクの作成
      6. ドロップシャドウ、光彩、ぼかし
      7. 効果のまとめ
    9. Web グラフィック
      1. Web グラフィック作成に対する最善の取り組み
      2. グラフ
      3. SVG
      4. アニメーションの作成
      5. スライスと画像マップ
  6. 読み込み、書き出し、保存
    1. インポート
      1. 複数ファイルの配置
      2. リンクされたファイルと埋め込みファイルの管理
      3. リンク情報
      4. 画像の埋め込み解除
      5. Photoshop からのアートワークの読み込み
      6. ビットマップ画像の読み込み
      7. Adobe PDF ファイルの読み込み
      8. EPS ファイル、DCS ファイルおよび AutoCAD ファイルの読み込み
    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. サポートされるファイル形式
    5. GPU デバイスドライバーの問題
    6. Wacom デバイスの問題
    7. DLL ファイルの問題
    8. メモリの問題
    9. 環境設定ファイルの問題
    10. フォントに関する問題
    11. プリンターの問題
    12. クラッシュレポートをアドビと共有
    13. Illustrator のパフォーマンスの改善

スライスについて

Web ページは、HTML テキスト、ビットマップ画像、ベクターグラフィックなど数多くのオブジェクトで構成されます。Illustrator では、スライスを使用して、アートワーク上の各 Web オブジェクトの境界を定義することができます。例えば、アートワーク内に、JPEG 形式で最適化する必要のあるビットマップ画像が 1 つだけ含まれており、その他の画像は GIF 形式で最適化した方がよい場合は、スライスを使用してビットマップ画像を分離します。「Web およびデバイス用に保存」コマンドを使用してアートワークを Web ページとして保存する場合は、各スライスを別々のファイルに保存し、ファイルごとに異なる形式、設定、カラーテーブルを指定することができます。

Illustrator ドキュメントにおけるスライスは、作成される Web ページではテーブルのセルに相当します。初期設定では、スライス領域はテーブルのセルに配置された画像ファイルとして書き出されます。テーブルのセルに画像ファイルではなく HTML テキストと背景カラーを配置する場合は、スライスの種類を「画像なし」に変更します。Illustrator テキストを HTML テキストに変換する場合は、スライスの種類を「HTML テキスト」に変更します。

スライスの種類とアートワーク
スライスの種類とアートワーク

A. 「画像なし」スライス B. 「画像」スライス C. 「HTML テキスト」スライス 

スライスは、アートボード上および Web およびデバイス用に保存ダイアログボックスで確認できます。スライスには、アートワークの左上から順番に左から右、上から下に番号が付けられます。スライスの配置や合計数を変更すると、新しい並び順に合わせて番号が自動的に更新されます。

スライスを作成する場合、周囲のアートワークも自動的にスライスされ、HTML テーブルを使用してレイアウトが保持されます。自動的に生成されるスライスには、自動スライスとサブスライスの 2 種類があります。自動スライスは、アートワーク内でスライスとして定義されていない領域に対して生成されます。スライスを追加または編集するたびに、自動スライスが再生成されます。サブスライスは、ユーザーが指定したスライスが重なり合っている場合の、それらのスライスの分割方法を示します。サブスライスには番号が付き、スライス記号が表示されますが、元になるスライスと別々に選択することはできません。作業中、必要に応じて、サブスライスと自動スライスが自動的に再生成されます。

スライスの作成

  1. 次のいずれかの操作をおこないます。
    • アートボード上のオブジェクトを 1 つ以上選択して、オブジェクト/スライス/作成を選択します。

    • スライスツール を選択し、スライスを作成する範囲をドラッグして指定します。Shift キーを押しながらドラッグすると、スライスの形が正方形になります。Alt キー(Windows)または Option キー(Mac OS)を押しながらドラッグすると、中心からスライスが作成されます。

    • アートボード上のオブジェクトを 1 つ以上選択して、オブジェクト/スライス/選択範囲から作成を選択します。

    • スライスを作成する場所にガイドを配置して、オブジェクト/スライス/ガイドから作成を選択します。

    • 既存のスライスを選択し、オブジェクト/スライス/スライスを複製を選択します。

      ヒント:アートワーク内のオブジェクトの境界にスライスのサイズを合わせる場合は、オブジェクト/スライス/作成を選択します。オブジェクトを移動または修正すると、更新されたアートワークを囲むようにスライス領域が自動的に調整されます。このコマンドは、テキストオブジェクトからテキストと基本書式設定を取り込むスライスを作成するときにも使用できます。

      ヒント:元のアートワークとは関係なくスライスのサイズを指定するには、スライスツールを使用するか、選択範囲から作成コマンドまたはガイドから作成コマンドを選択します。これらの方法で作成したスライスはレイヤーパネルの項目として表示され、ほかのベクターオブジェクトと同じように移動、サイズ変更、削除できます。

スライスの選択

スライス選択ツール を使用して、アートワークウィンドウまたは Web およびデバイス用に保存ダイアログボックスでスライスを選択します。

  • スライスを選択するには、スライスをクリックします。
  • 複数のスライスを選択するには、Shift キーを押しながらクリックします (Web およびデバイス用に保存ダイアログボックスでは、Shift キーを押しながらドラッグすることもできます)。
  • 重なり合ったスライスの場合に、下になったスライスを選択するには、そのスライスの見える部分をクリックします。

    また、アートワークウィンドウでは、以下の方法でスライスを選択することもできます。

  • オブジェクト/スライス/作成を選択して作成したスライスを選択するには、アートボード上の該当するアートワークを選択します。スライスがグループまたはレイヤーに関連付けられている場合は、レイヤーパネル内の該当するグループまたはレイヤーの横にあるターゲットアイコンを選択します。
  • スライスツール、選択範囲から作成コマンドまたは「ガイドから作成」コマンドを使用して作成したスライスを選択するには、レイヤーパネルでそのスライスをターゲットに指定します。
  • 選択ツール でスライスパスをクリックします。
  • スライスパスのセグメントまたはスライスのアンカーポイントを選択するには、ダイレクト選択ツールでクリックします。

    注意:自動スライスは選択できません。選択できないスライスは薄く表示されます。

スライスオプションの設定

スライスのオプションは、作成される Web ページでスライスの中身がどのように表示され機能するかを決定します。

  1. スライス選択ツールを使用して、次のいずれかの操作をおこないます。
    • アートワークウィンドウでスライスを選択し、オブジェクト/スライス/スライスオプションを選択します。

    • Web およびデバイス用に保存ダイアログボックスで、スライス選択ツールを使用してスライスをダブルクリックします。

  2. スライスの種類を選択し、該当するオプションを設定します。

    画像

    作成される Web ページでスライス領域を画像ファイルにする場合に選択します。画像を HTML リンクにする場合は、URL とターゲットフレームセットを入力します。画像上にマウスを置いたときにブラウザーのステータスエリアに表示されるメッセージ、画像が非表示のときに表示される代替テキスト、テーブルセルの背景カラーを指定することもできます。

    画像なし

    作成される Web ページでスライス領域を HTML テキストと背景カラーにする場合に選択します。「HTML テキスト」テキストボックスに文字を入力し、標準の HTML タグを使用してテキストの書式を設定します。スライス領域に収まる長さのテキストを入力してください。テキストが長すぎると隣のスライスにはみ出し、Web ページのレイアウトに影響します。ただし、アートボード上ではテキストを表示できないため、テキストの表示を確認するには Web ページを Web ブラウザーで表示する必要があります)。テーブルセル内のテキスト配置方法を変更するには、「横」および「縦」オプションを設定します。

    HTML テキスト

    この種類を使用できるのは、テキストオブジェクトを選択し、オブジェクト/スライス/作成を選択して、スライスを作成した場合だけです。Illustrator テキストは、作成される Web ページでは、基本的な書式設定属性を持った HTML テキストに変換されます。テキストを編集するには、アートワークのテキストを更新します。テーブルセル内のテキスト配置方法を変更するには、「横」および「縦」オプションを設定します。テーブルセルの背景カラーも選択できます。

    ヒント:スライスオプションダイアログボックスで「HTML テキスト」スライスのテキストを編集するには、スライスの種類を「画像なし」に変更します。この場合、アートボード上のテキストオブジェクトとのリンクは切断されます。テキストの書式設定を無視するには、テキストオブジェクトの最初に <unformatted> と入力します。

スライスのロック

スライスをロックすると、間違ってサイズを変更したり、移動したりするのを防ぐことができます。

  • すべてのスライスをロックするには、表示/スライスをロックを選択します。
  • スライスを個別にロックするには、レイヤーパネルでスライスの編集コラムをクリックします。

スライスの境界の調整

オブジェクト/スライス/作成を使用してスライスを作成した場合、スライスの位置とサイズは、スライスに含まれるアートワークと連動します。そのため、アートワークを移動したりサイズを変更したりすると、スライスの境界は自動的に調整されます。

スライスツール、「選択範囲から作成」コマンドまたは「ガイドから作成」コマンドを使用して作成したスライスの場合は、以下の方法によりスライスを手作業で調整することができます。

  • スライスを移動するには、スライス選択ツール でスライスを新しい位置にドラッグします。移動方向を垂直、水平、45 度方向に制限するには、Shift キーを押しながらドラッグします。
  • スライスのサイズを変更するには、スライス選択ツールでスライスを選択し、スライスの角または辺をドラッグします。選択ツールと変形パネルを使用して、スライスのサイズを変更することもできます。
  • スライスを整列または分布するには、整列パネルを使用します。スライスを整列すると、不要な自動スライスが除去され、サイズの小さい効率的な HTML ファイルが作成されます。
  • スライスの重なり順を変更するには、レイヤーパネルでスライスを新しい位置にドラッグするか、オブジェクト/重ね順を選択します。
  • スライスを分割するには、スライスを選択し、オブジェクト/スライス/スライスを分割を選択します。

    どの方法で作成されたスライスでも結合することができます。スライスを選択し、オブジェクト/スライス/スライスを結合を選択します。結合によって作成されるスライスのサイズと位置は、元のスライスの外枠を合わせてできる長方形と同じです。結合元のスライスが隣接していない場合、または大きさや向きが異なる場合は、新しいスライスが別のスライスと重なり合うことがあります。

    すべてのスライスのサイズをアートボードの境界に合わせるには、オブジェクト/スライス/アートボードサイズでクリップを選択します。アートボードのサイズを超えるスライスはアートボードに合わせて切り取られ、アートボード内の自動スライスはアートボードの境界まで拡張されます。アートワークには影響しません。

スライスの削除

スライスを削除するには、直接削除する方法と、対応するアートワークからスライスを解除する方法があります。

  • スライスを削除するには、スライスを選択して、Delete キーを押します。オブジェクト/スライス/作成を使用して作成したスライスの場合は、対応するアートワークも同時に削除されます。対応するアートワークを残しておく場合は、スライスを直接削除する代わりに、スライスを解除します。
  • すべてのスライスを削除するには、オブジェクト/スライス/すべてを削除を選択します。オブジェクト/スライス/作成を使用して作成したスライスは、削除ではなく解除されます。
  • スライスを解除するには、スライスを選択し、オブジェクト/スライス/スライスを解除を選択します。

スライスの表示と非表示の切り替え

  • アートワークウィンドウでスライスを非表示にするには、表示/スライスを隠すを選択します。
  • Web およびデバイス用に保存ダイアログボックスでスライスを非表示にするには、スライスの表示を切り替えボタン をクリックします。
  • スライス番号を非表示にし、スライス線のカラーを変更するには、編集/環境設定/スマートガイド・スライス(Windows)または Illustrator/環境設定/スマートガイド・スライス(Mac OS)を選択します。

イメージマップの作成

イメージマップを使用すると、ホットスポットと呼ばれる画像領域を URL にリンクできます。Web ブラウザーでユーザーがホットスポットをクリックすると、リンク先へジャンプします。

リンクを作成するときのイメージマップとスライスの主な違いは、アートワークを Web ページとして書き出す方法にあります。イメージマップを使用すると、アートワークは 1 つの画像ファイルとしてそのまま保存されます。一方、スライスを使用すると、アートワークが複数のファイルに分割されます。イメージマップとスライスのもう 1 つの違いは、イメージマップではアートワークの多角形または長方形の領域にリンクできるのに対して、スライスでは長方形の領域にしかリンクできないという点です。長方形の領域だけにリンクする場合は、イメージマップよりもスライスの方が適している場合があります。

注意:

予想外の結果が生じるのを避けるため、URL リンクを含むスライスにはイメージマップのホットスポットを作成しないでください。一部のブラウザーでは、イメージマップリンクまたはスライスリンクのいずれかが無視されることがあります。

  1. URL にリンクするオブジェクトを選択します。
  2. 属性パネルで、イメージマップメニューからイメージマップの形状を選択します。
  3. 「URL」テキストボックスに相対 URL または完全な URL を入力するか、URL リストから使用する URL を選択します。ブラウザーボタンをクリックすると、実際に接続して URL が有効かどうかを確認できます。
    注意:

    URL メニューに表示される項目数を増やすには、属性パネルメニューの「パネルオプション」を選択します。URL リストに表示する URL の数を 1 ~ 30 の範囲で入力します。

アドビのロゴ

アカウントにログイン