スライスと画像マップ

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

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

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

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

スライスの作成

スライスの選択

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

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

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

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

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

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

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

スライスのロック

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

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

スライスの境界の調整

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

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

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

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

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

スライスの削除

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

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

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

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

イメージマップの作成

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

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