スライスとは？意味とPhotoshop・Illustratorでの画像切り出し手順を初心者向けに解説

公開日：2026-08-20

Webデザインの学習を始めると、必ずといっていいほど耳にするのが「スライス」という言葉です。デザインカンプ（完成見本のデザインデータ）を前に、どこをどう切り出せばいいのか、Photoshopの操作画面を見ながら手が止まってしまった経験がある人も多いのではないでしょうか。本記事では、スライスの意味をひとことで整理したうえで、デザインカンプから画像パーツができるまでの流れを5つのステップに分解し、Photoshop・Illustratorそれぞれの具体的な操作方法、JPEG・PNG・GIF・SVGの使い分け、画質を保ったまま仕上げるコツまでを、実務でそのまま使える手順として解説します。

第1章 スライスとは？意味をひとことで

スライスとは、Webサイトのデザインカンプを、ロゴ・ボタン・バナー・アイコンといったパーツごとに切り分け、HTML/CSSで組み立てられる画像ファイルとして書き出す作業のことです。デジタルハリウッドの用語解説でも、スライスは「スライスツールを使って1枚の画像を複数に分割するスキル」であり、分割した画像をHTMLやCSSで組み立ててWebサイトに表示するための工程として説明されています。

もともとはAdobe Photoshopに搭載された「スライスツール」という機能名に由来する呼び方です。デザインカンプ上に格子状の区切り線（スライス）を引き、区切られたエリアごとに画像形式を指定して書き出す、という使い方が一般的でした。現在では「画像アセット」（Photoshop）や「アセットの書き出し」（Illustrator）といった新しい機能を使う場面が増えていますが、パーツを個別の画像として書き出すという役割は変わらないため、現場では今もツール名にかかわらず「スライスする」という言葉が使われ続けています。

第2章 スライスが必要とされる3つの理由

デザインカンプは1枚のファイルにすべての要素がまとまった状態です。しかしHTML/CSSでページを組み立てるには、パーツごとに独立した画像ファイルが必要になります。ここでスライスが必要とされる理由を、3つの視点から整理してみます。

1. デザインとコーディングをつなぐため
デザイナーがカンプを作成し、コーダー（マークアップエンジニア）がHTML/CSSで組み立てるという分業体制では、書き出し済みの画像一式が両者をつなぐ受け渡しの単位になります。スライスが的確に行われているほど、コーディング側の作業もスムーズに進みます。

2. パーツを個別に管理するため
ロゴやアイコンのように繰り返し使うパーツを個別ファイルとして持っておくと、差し替えや使い回しがしやすくなります。逆に1枚の画像にまとめてしまうと、一部だけを修正したいときに全体を作り直す必要が出てきます。

3. 画質とファイルサイズのバランスを取るため
写真、ロゴ、アイコンではそれぞれ適した画像形式が異なります。パーツごとに切り分けて書き出すからこそ、それぞれに最適な形式・圧縮方法を選び、画質を保ちながらファイルサイズを抑えることができます。

未経験からWeb制作を学び始めた段階では、「デザインの見た目を再現すること」と「コーディングしやすい形に画像を用意すること」が別の作業であると意識できているかどうかで、その後の学習効率が大きく変わってきます。たとえば、1枚のバナー画像の中にロゴ・キャッチコピー・ボタンがすべて含まれている場合、そのまま1枚の画像として書き出してしまうと、後からキャッチコピーの文言だけを変更したいときにも画像全体を作り直すことになります。ロゴ・文字部分・ボタンをそれぞれ別のレイヤーとしてスライスしておけば、文言はHTML上のテキストとしてコーディングし、ロゴやボタンだけを画像として差し替えるといった柔軟な運用が可能になります。

第3章 【全体像】デザインカンプが画像パーツになるまでの5ステップ

具体的な操作に入る前に、全体の流れを押さえておきましょう。デザインカンプから画像パーツが完成するまでは、おおよそ次の5ステップで進みます。

※「該当章」の数字は、この記事の目次番号、および各見出しの先頭に付いているオレンジ色の「第N章」ラベルに対応しています。

このステップを意識しておくと、「今どの作業をしているのか」が把握しやすくなり、途中で迷子になりにくくなります。ここから各ステップを詳しく見ていきます。

第4章 STEP1：書き出し前にレイヤーを整理する

書き出し操作そのものより先に大切なのが、デザインカンプ側の下準備です。準備が不十分なまま作業を始めると、書き出し漏れや命名の重複に後から気づき、やり直しが発生しやすくなります。

コーダーにデータを渡す前のレイヤー整理では、次のようなポイントが実務で重視されています。

• 統一感のある命名にする：画像は「image」ではなく「img」、メインビジュアルは「mv」のように、社内・チームで決めたルールに沿った略称を使うと、コーディング側が迷いません。
• 配置順序をHTMLの並びに合わせる：レイヤーパネルの並び順を、実際のマークアップの流れ（左上から右下など）に近づけておくと、コーダーが目的のパーツを探す手間を減らせます。
• 要素ごとにグループ化する：ヘッダー、メインビジュアル、フッターなど、コンテンツのまとまりごとにレイヤーをグループ化しておくと、レイヤーパネルを見ただけでページ全体の構成がつかみやすくなります。
• 不要なレイヤーは削除しておく：作業用のメモやラフスケッチなど、書き出しに関係ないレイヤーが残っていると、相手を混乱させる原因になります。
• 状態違いのパーツにも名前をつける：ボタンのホバー時のデザインがある場合は「btn_hover」のように、状態がひと目でわかる名前にしておくと親切です。

このタイミングで、書き出し先フォルダの構成（例：/images/ フォルダ）もコーディング側とすり合わせておくと、書き出し後にファイルを移動する手間を減らせます。画像アセットで書き出すと、カンプファイルと同じ階層に「（ファイル名）-assets」という名前のフォルダが自動生成されるため、コーディング用のディレクトリにそのままコピーするのか、サブフォルダごとに仕分けし直すのかを、書き出し前の段階で決めておくと二度手間になりません。チームで作業する場合は、フォルダ構成とファイル命名ルールをまとめた簡単なメモを共有しておくだけでも、後工程での確認作業がぐっと減ります。

第5章 STEP2：Photoshopで画像を書き出す（3つの方法と使い分け）

Photoshopには、パーツを画像として書き出す方法が3つあります。それぞれ操作方法と向いている場面が異なるため、状況に応じて使い分けます。

スライスツールを使う場合

ツールバーの「切り抜きツール」を長押しすると表示されるメニューから「スライスツール」を選択し、書き出したい範囲をドラッグで指定します。範囲を指定したら「ファイル」から「書き出し」内の「Web用に保存（従来）」を選び、書き出し範囲をクリックして保存します。手動で区切り線を引く分、エリア単位で細かく分割したいレイアウトに向いていますが、背景など書き出したくない要素は事前にレイヤーを非表示にしておく必要があり、修正のたびにスライス作業をやり直す手間がかかる点はデメリットです。

画像アセットを使う場合

書き出したいレイヤーの名前に、拡張子を含めて指定します（例：「ロゴ.png」）。そのうえで「ファイル」から「生成」内の「画像アセット」にチェックを入れると、保存するたびに該当レイヤーが自動で画像として書き出されます。書き出し先は、カンプファイルと同じ階層に自動生成される「（ファイル名）-assets」フォルダです。画像アセットの大きな利点は、背景レイヤーの表示・非表示を切り替える必要がなく、デザインを修正した際にも-assetsフォルダ内の画像が変更点を自動で引き継いでくれるため、再書き出しの手間がかからない点にあります。パーツ数が多く、こまめに修正が発生するデザインでは特に効果を発揮します。

書き出し形式を使う場合

複数のレイヤーをまとめて一括で書き出したい場合は、「ファイル」から「書き出し」内の「書き出し形式」を使います。レイヤーを右クリックして同じメニューを呼び出すことも可能です。このダイアログでは、ファイル名・ファイル形式（PNG・JPGなど）・画質・画像サイズ・メタデータの扱いなどをまとめて設定でき、複数レイヤーを選択した状態で「全てを書き出し」を実行すると、それぞれが個別のファイルとして一括で保存されます。複数サイズ・複数形式を一度に用意したいときに向いた方法です。

3つの方法の比較表

どれか1つが常に正解というわけではなく、案件の規模や修正頻度に応じて使い分けるのが実務的な進め方です。

第6章 STEP3：Illustratorでオブジェクトを書き出す

Illustratorにも書き出しの仕組みがありますが、現在はパネル上でオブジェクトを直感的に扱える「アセットの書き出し」が中心的な方法になっています。

アセットの書き出しパネルの使い方

パネルが表示されていない場合は「ウィンドウ」から「アセットの書き出し」を選ぶと呼び出せます。書き出したいオブジェクトをアートワーク上で選択し、パネル内にドラッグ＆ドロップすると、書き出し候補として登録されます。登録したアイテムの名前はダブルクリックで編集でき、ここでつけた名前がそのまま書き出し時のファイル名になります。複数のアセットを選択したいときは、Shiftキーを押しながらクリックします。

書き出し実行前には、パネル下部の書き出しオプションでファイル形式（PNG・SVGなど）やサイズ、解像度を指定できます。特にロゴやアイコンなど、輪郭を崩さずにサイズを変えたいパーツは、この段階でSVG形式を選んでおくと、Retina対応やサイズ違いの調整に個別対応しやすくなります。

スクリーン用に書き出しでまとめて出力する

登録済みのアセットをまとめて処理したいときは、「ファイル」から「書き出し」内の「画面に書き出し」を開き、「アセット」タブから全アセットを一括で書き出すこともできます。アートボード全体を画像化したいときや、同じデザインを複数サイズでまとめて用意したいときに活用すると効率的です。

第7章 STEP4：JPEG・PNG・GIF・SVGを使い分ける

スライスや書き出しの際に必ず選ぶことになるのが、画像の保存形式です。それぞれ得意な用途が異なるため、パーツの特性に合わせて選ぶことが、画質とファイルサイズのバランスを保つポイントになります。

JPEG

非可逆圧縮（データの一部を間引いて圧縮する方式）の形式で、約1,677万色のフルカラーを扱えますが、透過には対応していません。写真やグラデーションを含む、色数の多いメインビジュアルの書き出しに向いています。保存を繰り返すたびに画質が少しずつ劣化していく性質があるため、元データは別途保存しておくと安心です。

PNG

可逆圧縮（データを間引かない圧縮方式）の形式で、フルカラーに加えてアルファチャンネルによる透過を完全にコントロールできます。ロゴやアイコン、テキストを含むバナーなど、輪郭をくっきり保ちたいパーツや、背景を透過させたいパーツの書き出しに適しています。

GIF

可逆圧縮ですが、色数は最大256色に制限されています。透過にも対応していますが、完全な透明か不透明かの二択で、PNGのような中間の透明度は表現できません。ファイルサイズを抑えやすく、簡単なアニメーション表現にも対応できるため、色数の少ないシンプルなアイコンや簡易的な動きをつけたバナーに向いています。

SVG

数式的な図形定義によるベクター形式で、拡大・縮小しても画質が劣化しない点が最大の特徴です。ファイルサイズも比較的小さく、ロゴ・アイコン・チャート・インフォグラフィックなど、レスポンシブデザインで様々なサイズに対応させたいパーツに向いています。

迷ったときの目安

• 写真・フルカラーのメインビジュアル → JPEG
• 透過が必要なロゴ・アイコン・バナー → PNG
• 輪郭が崩れては困るロゴ・アイコン（サイズ違いが必要） → SVG
• 色数の少ない簡易的なパーツ・簡単なアニメーション → GIF

同じロゴを試しにJPEG・PNG・SVGでそれぞれ書き出して見比べてみると、透過の有無や輪郭のシャープさ、ファイルサイズの違いを体感しやすくなります。判断に迷ったときは、実際に書き出して比較してみるのが一番の近道です。

第8章 STEP5：Retina対応と軽量化で仕上げる

Retina（2x）対応

Retinaディスプレイのように高精細な画面では、通常の液晶画面の2倍のピクセル数を同じ画面サイズの中に収めています。そのため、表示サイズと同じピクセルサイズのまま画像を書き出すと、画面上で縦横2倍に引き伸ばされて表示され、輪郭がぼやけて見えてしまいます。

対応の考え方はシンプルで、表示したいサイズの2倍のピクセルサイズで画像を書き出し、CSS側で表示サイズを縮小して指定する方法が広く使われています。たとえばブラウザ上で幅200pxとして表示したい場合は、実際には幅400pxの画像を用意しておき、HTML/CSS側で縮小表示させることで、Retinaディスプレイでも画像を美しく表示できます。書き出し形式やアセットの書き出しパネルでは、1x・2xのサイズをまとめて指定できるため、あらかじめ両方を書き出しておくと、コーディング時にサイズを揃えやすくなります。

軽量化のひと手間

書き出した画像は、そのままコーディングに使う前に圧縮しておくと、ページの表示速度を保ちながら画質を維持しやすくなります。TinyPNGやSquooshのような画像圧縮ツールを使い、画質の劣化が目立たない範囲で容量を抑えるのが一般的な流れです。圧縮ツールを何重にもかけてしまうと、かえって画質が損なわれることがあるため、圧縮は基本的に一度だけかける意識を持つとよいでしょう。パーツごとに適した形式を選んだうえで、最後にひと手間圧縮を挟む、という流れを習慣にしておくと、画質を保ったまま実務で使える画像アセットを用意できるようになります。

第9章 初心者が陥りやすい失敗と回避策

スライスや書き出しに慣れていない段階では、いくつか共通した失敗パターンがあります。あらかじめ知っておくと、作業のやり直しを減らせます。

• 書き出し漏れに気づかない：レイヤーの表示・非表示を切り替えながら作業していると、書き出し対象のレイヤーが非表示のままになっていることがあります。書き出し前にレイヤーパネル全体を見直す習慣をつけると防ぎやすくなります。
• ファイル名の表記ゆれ：「btn.png」「button.png」のように同じパーツに違う名前をつけてしまうと、コーディング時に画像の場所がわかりにくくなります。4章で触れた命名ルールを先に決めておくことが対策になります。
• 等倍のまま書き出してRetinaでぼやける：8章で触れたとおり、表示サイズと同じピクセルサイズで書き出すと、高精細ディスプレイで画像がぼやけて見えることがあります。2xサイズの書き出しを合わせて用意しておくと安心です。
• 形式選びを後回しにする：とりあえずPNGで統一してしまうと、写真系のパーツでファイルサイズが不必要に大きくなることがあります。7章の目安を参考に、パーツごとに形式を検討する習慣をつけましょう。
• 書き出し後にレイヤーを削除・統合してしまう：書き出しが終わった後にカンプ側のレイヤーを整理・統合してしまうと、修正が発生した際に再書き出しができず、作り直しになりかねません。書き出し済みのカンプは別名保存でバックアップしておくと安心です。

よくある質問