トピックス

キャラクターデータの納品形式|AI・SVG・PNGの選び方と確認項目

鳥のキャラクターをパソコン、印刷物、カードで比較する納品データ確認のイラスト
3BROS. JOURNAL / PRACTICAL GUIDEキャラクター素材の受け取り方

WORKING NOTES

受け取るだけでなく、
使う場面まで確かめる。

企業キャラクターの制作が終わっても、受け取ったファイルをそのまますべての媒体で使えるとは限りません。SNS、Webサイト、営業資料、印刷物では必要な形式やサイズが異なります。

この記事ではデザインのルールではなく、納品データの選び方と受け取り時の確認を解説します。まず使用媒体と担当者の編集環境を制作会社へ伝えましょう。

01編集用・配布用・確認用を分ける

担当者全員に同じファイルを渡すより、役割に合わせて用意すると扱いやすくなります。編集できる元データが必要な人と、資料へ貼り付けたい人では求めるものが違うためです。

編集用

制作担当者が形や色などを調整するためのデータ。使用ソフトとバージョン、編集可能な範囲を確認します。

配布用

社内資料やWeb掲載に使う書き出し済み画像。用途に合う大きさと背景で渡します。

確認用

完成形やファイルの対応関係を確認する見本。どのポーズがどのファイルか分かる一覧を添えます。

元データの納品が制作費に含まれるか、外部制作会社への共有が可能かは、依頼時の条件で確認します。ファイルを受け取ったことだけで、利用や改変の条件まで決まるわけではありません。

02AI・SVG・PNG・PDFは何に使う?

形式主な用途受け取り時の注意
AIIllustratorでの編集や制作会社への引き継ぎここでのAIはIllustrator形式。配置画像・フォント・対応バージョンを確認する
SVGベクターを使ったWeb向けの図形・イラスト掲載先の対応と実際の表示を確認。画像を内包している場合もある
PNG透過画像を資料やSNS素材へ配置するピクセル数と背景透過を確認。大きく拡大すれば粗くなる
PDF完成形の共有や、指定条件に沿った印刷入稿確認用と印刷用を区別。印刷会社の入稿条件を優先する

表は横にスクロールできます。

PNGはピクセルで表す画像、SVGはベクターを扱う形式です。ただし、ファイルの拡張子だけで中身を判断しないことが大切です。AIやSVGの中に小さな画像が配置されていれば、拡大時にその部分が粗くなることがあります。

「AI形式なら高画質」とは限りません

PNGをAIファイルに貼り付けて保存しても、元の画像にない細部が復元されるわけではありません。編集可能なパスなのか、画像の配置なのかを確認します。

白背景と透明背景を見分ける

白い画面で確認するだけでは、背景が透明か判断しにくい場合があります。確認用の複製を色付きのスライドへ置き、輪郭の周囲に白い四角や不自然な縁が出ないかを見ます。元データは上書きしません。

印刷はサイズと色の条件もセットで

印刷物では、仕上がり寸法、色の指定、配置画像の解像度などを入稿先とそろえます。一律の解像度だけを指定せず、実際の印刷サイズと入稿仕様を制作担当者へ共有しましょう。

03制作会社へ渡す納品条件の例

「一式ください」ではなく、使う場所と必要な状態を記入します。次は社内資料とWebで使用する場合の例です。

利用先
社内スライド、Webサイト、SNS投稿。印刷物への展開は別途相談。
配布用
承認した各ポーズの背景透過PNG。実際の配置サイズに合わせたピクセル数を制作側と決める。
編集用
契約に含まれる編集可能データと対応ソフト。リンク画像や使用フォントの扱いも確認する。
確認用
ポーズ名、ファイル名、使用例が対応する一覧PDF。
管理情報
版番号、承認日、作成者、利用上の注意、差し替え対象を記載する。

ファイル名は「character_wave_web_v01.png」のように、用途と版が分かる規則を決めます。「最終」「最終2」だけで区別すると、後から受け取る人が迷いやすくなります。

納品フォルダは、編集用・配布用・見本・注意事項を分けます。複数サイズを用意する場合は、どのサイズをどこで使うのかを書いた簡単な一覧があると、毎回制作会社へ確認する手間を減らせます。

04納品後は実際の使用環境で確認する

  • 承認したポーズ・表情の点数がそろっている
  • 見本とファイル名の対応が正しい
  • 指定ソフトで開き、画像やフォントの欠落がない
  • 色付き背景で透過と輪郭を確認した
  • 実際の配置サイズで線や表情が読める
  • Web掲載用と印刷用を取り違えない名前になっている
  • 最新版の保存場所と共有範囲が決まっている

不具合を伝えるときは「画像がおかしい」だけでなく、ファイル名、開いたソフト、使用サイズ、問題の画面をセットにします。たとえば「スライドに横幅8cmで配置すると輪郭に白い縁が見える」と伝えると、確認条件をそろえやすくなります。

PNGだけでも運用できますか?

決まった大きさで資料に貼り付ける用途なら足りる場合があります。ただし、後で大型印刷や形の調整が必要になるかも考え、編集用データの要否を依頼時に相談します。

SVGを受け取ればWebサイトへすぐ掲載できますか?

掲載システムや運用ルールによります。アップロード対応や表示を制作担当者に確認してください。形式を使うためだけに、サイトの制限を無条件で解除することは避けます。

納品完了は、ファイルが届いた時点ではなく、合意した用途で使えることを確認した時点で判断すると、公開直前の手戻りを防ぎやすくなります。

参考情報

Adobe:PNGとSVGの違い

Adobe:Illustratorでのアートワークの保存

確認日:2026年9月25日。記入例・確認表は本記事の実務例です。実際の仕様や運用条件に合わせて調整してください。