デザインデータの作り方｜レイヤー分けと書き出しの基本

「データください」と言われて送ったら、「これじゃなくて実データを」と返ってきた。
作ったバナーの文字を1つ直したいだけなのに、どこをさわればいいか分からない。デザインを始めた人が最初につまずくのは、絵の作り方ではなくデータの作り方です。

ここを支えているのがレイヤーです。要素を1枚ずつ別のシートに分けて重ねる仕組みで、これができていると、あとからの修正が一瞬で終わります。
この記事ではレイヤーの分け方と、目的別の書き出し方をまとめます。読み終えたら、修正依頼が来ても怖くなくなりますよ◎（ソフトごとのボタンの場所は扱いません。どのソフトでも共通する考え方です）

レイヤーは透明なシートの重ね方

レイヤーは、透明なシートを何枚も重ねて1枚の絵にする仕組みです。いちばん下に背景、その上に写真、その上に帯、いちばん上に文字。上のシートが下のシートを隠します。

PowerPointで写真の上に文字を置いた経験があれば、もう使っています。あとから文字だけドラッグして動かせるのは、写真と文字が別のものとして乗っているからです。デザインソフトのレイヤーは、その並び順に名前を付けて管理できるようにしたものだと思ってください。

1枚の紙に直接描いていくのと何が違うのか。あとから1つだけ動かせることです。
紙に描いたら、文字の位置を変えるには周りごと消して描き直します。レイヤーが分かれていれば、文字のシートを動かすだけ。下の写真は無傷のままです。

レイヤーを分ける目的は、きれいに整理することではありません。直す場所だけを、他に影響を出さずに直せるようにすることです。だから「あとで直しそうなもの」を基準に分けます。

どこでレイヤーを分けるか

分けすぎても探すのが大変になります。実務でよく使う基準は3つです。

名前も必ず付けてください。「レイヤー12」「コピー2のコピー」が並んだデータは、3日後の自分でも読めません。見出し_日付のように、中身が分かる名前にします。

他の人に渡すデータなら、この一手間が特に効きます。受け取った側は中身を知らないので、名前だけが手がかりです。名前を付けるのに1分、付けなかったせいで探すのに30分。差はこのくらい出ます💡

不透明度は「消す」の代わりに使う

不透明度は、そのレイヤーをどのくらい透かすかの設定です。100%で完全に見えて、0%で完全に見えなくなります。

よく使うのは次の場面です。

1つ目は毎日どこかで見ています。動画のサムネイルや広告バナーで、写真の上に薄い黒がかかって白い文字が読めるようになっているもの。あれが不透明度40%くらいの四角です。

気をつけたいのは、不透明度で色を薄くしないことです。青を50%にすれば薄い青に見えますが、下に別の色が来ると見え方が変わります。書き出したときに想定と違う色になる原因です。
薄い色を使いたいなら、色そのものを薄い色に指定してください。カラーコードの読み方と使い方で、指定のしかたを扱っています。

実データと書き出しデータは別物

ここが冒頭の「実データください」の話です。制作の現場では、2種類のデータを持ちます。

• 実データ（元データ）：レイヤーが分かれたまま保存したもの。編集できる。PSD・AI・Figmaのファイルなど
• 書き出しデータ：レイヤーを1枚に統合して出力したもの。編集できない。JPEG・PNG・PDFなど

納品でPNGだけ渡すと、修正のたびに制作者へ戻ってきます。実データも渡しておけば、相手側で文字だけ直せます。逆に、権利や品質の管理で実データを渡さない契約もあります。どちらにするかは最初に決めておくところです。

形式	中身	使う場面
PSD	Photoshopの実データ。レイヤーが残る	写真加工・バナーの元データ
AI	Illustratorの実データ。線と塗りの情報が残る	ロゴ・印刷物の元データ
PDF	相手の環境を選ばず同じ見た目で開ける	確認用の共有、印刷所への入稿
PNG・JPEG	1枚に統合された画像。編集できない	Webへの掲載、確認用の共有

PDFは少し特殊で、確認用にも入稿用にも使えます。ただし入稿用は、書き出しの設定（塗り足しやフォントの扱い）が印刷所ごとに違います。渡す前に相手の指定を見てください。

実データは絶対に上書きしすぎないでください。大きく方向を変えるときは「_v2」を付けて別名保存します。戻したくなったときに戻れないのが、いちばん痛い失敗です。

書き出し（エクスポート）とスライス

エクスポートは、実データから使える画像を出力する操作です。日本語では「書き出し」と呼びます。保存とは別の操作で、元データはそのまま残ります。

書き出しで決めるのは3つだけです。

3つ目の「部分ごとに出す」のがスライスです。1枚のデザインに切り取り範囲を指定して、パーツごとに別ファイルとして書き出します。Webサイトの制作でよく使います。ロゴ、アイコン、写真、ボタン。それぞれ別画像として必要だからです。

スライスするときのコツは、切り取り範囲に余白まで含めることです。ロゴのふちギリギリで切ると、Web上で他の要素とくっついて見えます。上下左右に少し余白を残して切ってください。

ミニ実践：1つの素材を目的別に書き出す

10分で終わります。用意するのは無料のCanvaかFigmaのどちらか。ブラウザだけで動きます。

1. 1080×1080pxのキャンバスを作る
2. 4つのレイヤーを作る。下から順に、背景の色 → 写真（無料素材で構いません） → 半透明の黒い四角 → 白い文字。文字は「9月30日まで」のように、あとで変わりそうな内容にします
3. 半透明の四角は不透明度を40%にする。文字が読めるようになるのを確認します
4. 各レイヤーに名前を付ける。「背景」「写真」「文字の下じき」「日付」の4つです
5. この状態で実データを保存する。ファイル名は「告知_v1」にします
6. SNS用にJPEGで書き出す。1080×1080pxのままです
7. 資料に貼る用にPNGで書き出す。同じ絵でも容量が違うのを見比べてください
8. 最後に、日付のレイヤーだけ「10月31日まで」に書き換えて、もう一度JPEGで書き出す。ここが30秒で終われば、レイヤー分けは成功です

最後の手順が一番大事です。レイヤーを分けていないと、この修正に何分もかかります。

できあがったデータを、次のチェックリストで確認してみてくださいね。

• すべてのレイヤーに、中身が分かる名前が付いている
• あとで変わる文字が、独立したレイヤーになっている
• 実データを別名で保存してある
• 書き出した画像のサイズが、使う場所に合っている
• 日付の差し替えが1分以内に終わった

やってしまいがちな失敗

レイヤーを統合してから保存する

統合すると軽くなるので、つい上書き保存してしまいます。もう分けられません。
直し方は、統合するのは書き出しの直前だけにすること。統合したデータは別名で保存します。

文字を画像にしてしまう

文字を画像化すると、誤字が見つかっても打ち直せません。
直し方は、文字は文字のまま残すこと。入稿の都合で図形に変えるときは、変える前のデータを別名で残します。この操作はラスターとベクターの違いで説明したアウトライン化です。

書き出しサイズを毎回その場で決める

同じシリーズのバナーで、幅が1枚だけ違うことがあります。並べたときに崩れます。
直し方は、書き出しサイズを最初に一覧で決めておくこと。制作の前にメモしておくと、迷う時間がなくなります。

ファイル名を「最終」で管理する

「最終」「最終2」「本当に最終」。どれが最新か分かりません。
直し方は、日付か連番に統一すること。「告知_20260813」か「告知_v3」のどちらかに決めてください。

よくある質問

レイヤーとは簡単に言うと何ですか？

透明なシートです。背景・写真・文字をそれぞれ別のシートに描いて、重ねて1枚の絵にします。
分けておくと、文字だけ動かす、写真だけ差し替える、といった修正が他に影響を出さずにできます。

レイヤーは何枚まで分ければいいですか？

枚数の上限より、分ける基準を決めるほうが大事です。「あとで直しそうなもの」を1つずつ独立させて、一緒に動かすものはグループにまとめる。この2つで足ります。
目安として、バナー1枚なら10〜20枚くらいに落ち着きます。

実データを渡さないといけませんか？

決まりはありません。契約で決めるところです。
渡すと相手が自分で修正できるので喜ばれます。渡さない場合は、修正の依頼をどこまで受けるかを最初に伝えておくとトラブルになりません。どちらにするか、見積もりの時点で確認しておいてください。

書き出したら色が変わって見えます

2つ原因が考えられます。
1つは不透明度で色を薄くしている場合。下のレイヤーの色が透けて、想定と違う色になります。
もう1つはカラーモードの違いです。画面用（RGB）と印刷用（CMYK）では出せる色の範囲が違うので、変換すると鮮やかな色ほどくすみます。

次に学ぶこと

最後に整理します。

• レイヤー：透明なシートの重ね方。役割と修正の可能性で分ける
• 名前を付ける：中身が分かる名前に。3日後の自分のために
• 不透明度：下じきや下絵に使う。色を薄くする用途には使わない
• 実データと書き出しデータ：PSD・AIは編集用、PNG・JPEGは出力用
• スライス：部分ごとの書き出し。余白まで含めて切る

データの作り方が分かったら、次は著作権と肖像権の基礎へ。使った素材を安心して納品できるかどうかを確認します。ここを飛ばすと、あとから作り直しになることがあります。

制作全体の進め方はデザインカンプの作り方と制作の流れで扱っています。並びはデザイン基礎コースの目次から確認できます。