スライスの作成

Last updated on 2026年10月29日

デスクトップ版の Adobe Photoshop で、スライスツール、Guides、またはレイヤーを使用して、Web 最適化のために画像を書き出し可能な領域に分割する方法を説明します。

スライスを使うと、画像を小さなセクションに分割し、個別に加工したり、異なる URL リンクを割り当てたりしてから、Web 用に書き出すことができます。

スライスツールでスライスを作成

ユーザースライスを作成すると、Photoshop は自動的にカバーされていない領域を自動スライスで埋めます。ユーザースライスは実線のボーダーで表示され、自動スライスは点線のボーダーで表示されます。

スライスをガイドや他のスライスに揃えるには、描画する前に表示 > スナップ先を選択します。

スライスツールを選択します。

オプションバーで、ドロップダウンからスタイルを選択します：

スライスを作成したい画像領域をドラッグします。

メモ

スライスを正方形に固定するには Shift を押しながらドラッグし、中心から描画するには Alt (Windows) または Option (macOS) を押しながらドラッグします。

同じ手順を繰り返して、スライスを追加で作成します。

Guides からスライスを作成すると、ドキュメント内の既存のスライスがすべて削除されます。現在のスライス設定を保持する必要がある場合は、ファイルのコピーを保存してください。

表示 > Guides > 新規ガイドを選択し、希望するスライスの境界を定義する垂直または水平ガイドを設定し、OK を選択します。

スライスツールを選択します。

オプションバーで Guides からスライスを選択します。

レイヤーから作成したスライスは、レイヤーを移動または編集すると境界が自動的に調整されるため、動的なデザインに役立ちます。これらは実線のボーダーとレイヤーアイコンバッジで表示され、ユーザースライスに変換しない限りサイズを変更できません。

広い範囲にわたってアニメーション化する予定のレイヤーには、レイヤーベースのスライスを使用しないでください。スライスのサイズが非現実的なほど大きくなる可能性があります。

レイヤーパネルで、スライスするコンテンツを含むレイヤーを選択します。

レイヤー > 新規レイヤーベーススライスを選択します。

スライスを作成したら、スライス選択ツールでスライスを選択し、移動、サイズ変更、プロパティの変更を行うことができます。ユーザースライスは、最も柔軟性があります。スライスの境界線を表示するには、表示 > 表示 > スライスを選択します。

ファイル > 書き出し > Web 用に保存を選択し、各スライスの書き出しオプションを設定して、ファイルを保存します。Photoshop は各スライスを個別の画像ファイルとして書き出し、web ページにスライスを表示するために必要な HTML または CSS を生成します。

Photoshopで魅力的な画像を作成
業界をリードする使い慣れた創造的なツールで写真を編集、レタッチ、変換できます。

ファイル形式リストのカスタマイズ

Photoshop で WebP ファイルを保存して開く

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。