【初心者でもわかる】WEBデザインの納品方法とファイル形式まとめ

「拡張子ってなに？」
「バナーってpngとjpegのどっちで納品してもいいの？」
「HPのデザインだけって何をどういう形で納品するのが正解？」

これらはWEBデザイナーとして活動を始めた頃、実際に私がぶつかった不安や疑問です。

現在、私はデザインのみを制作しているWEBデザイナーです。
今も昔も、コーディングについては基礎基本程度の知識のみ。

駆け出しの頃は、デザインを作れるようになったのはいいものの、自分が作った画像データがどのように使われるのかイメージができていませんでした。
そのため、いざ本格的に仕事を始めようとしたとき、どのような形で納品すべきか正解がわからず不安な気持ちでいっぱいに…。

今回は、当時の私のように、駆け出しWEBデザイナーさんがつまづきやすい「WEBデザインの納品形式」についてわかりやすく解説していきます！

現役WEBデザイナーである私自身が、これまで都度調べて理解していったことを、初心者さんでもわかる言葉でポイントをまとめました。

この記事があれば、どんなお客様や納品物でも安心して対応できる！と思ってもらえるような、WEBデザイン納品時のチェックリストも用意しています。

ぜひ何度でも見返して、自信を持って仕事に取り組むためのお守りにしてもらえたら嬉しいです。

WEBデザインに関わるデータファイル形式と使い分け
- WEBデザインに関わるデータファイル形式6つ
- JPEGとPNGの使い分け
【制作物別】納品時のファイル形式とチェックリスト
WEBデザインの納品方法
まとめ

WEBデザインに関わるデータファイル形式と使い分け

まずは、WEBデザインに関わる主なデータファイル形式について解説します。

データファイル形式（拡張子）はたくさん存在していますが、WEBデザインに関しては、こちらで紹介する形式に絞って理解しておけば問題ありません。

ポイントを押さえて、それぞれの違いを把握しておきましょう。

WEBデザインに関わるデータファイル形式6つ

WEBデザインに関わるデータファイル形式はたったの6つ！
覚えておくべきポイントを絞って表にしました。

用途	種類（拡張子）	説明	主な使用場面
データ作成	PSD （.psd) ピーエスディー	Photoshopの全機能を保存できるPhotoshop専用のファイル形式。	Photoshopでの作業。
データ作成	AI (.ai) エーアイ	Illustraterの全機能を保存できるIllustrater専用のファイル形式。	Illustraterでの作業。
データ保存	JPEG (.jpeg) ジェイペグ	WEB上で表示するために、一般的に使用されている画像のファイル形式。※透明を保持しない	写真などの連続階調画像*の保存。
	PNG (.png) ピング	WEBで表示するために一般的に使用されている画像のファイル形式。※透明を保持する	主にイラストやその他画像の保存。＊PNG-8はGIFと同様に単調画像向き＊PNG-24はJPEGと同様に連続階調画像向き
	GIF (.gif) ギフ	イラストやアイコンなどの単調画像をWEBで表示するために一般的に使用されているフォーマット。画像の容量は少ない。※透明を保持する	主にシンプルなイラストやロゴなどに使用される。
データ作成・保存	EPS (.eps) イーエスピー	ベクトル画像、ビットマップ画像の両方を含めることができるファイル形式。	主にIllustratorやPhotoshopで編集可能。

*連続階調画像…写真のような色調が緩やかに変化する画像
*ベクトル画像…点の座標や線、曲線などの数値データをもとに数学的な計算で画像を再現するデジタル画像。拡大や縮小、その他の変形をしても画質が劣化しない。
*ビットマップ画像…ドット（小さな正方形のピクセル）で構成された画像。拡大、縮小によって画質が劣化する

JPEGとPNGの使い分け

JPEGとPNGは以下のように使い分けましょう。

写真や多色のデータ →JPEG
WEBサイトで表示する画像 →JPEG
色数の少ないイラストやロゴ →PNG
高画質を求められる画像 →PNG

写真や多色のデータはJPEG

写真や多色のデータはJPEGで納品しましょう。

JPEGは非可逆圧縮（目視では確認できないような細かなデータを削除する保存方法）のため、データファイルを小さくすることができます。

多色のデータや写真はデータが重くなりやすいため、JPEGでの保存が適しています

WEBサイトで表示する画像はJPEG

WEBサイトで使用する画像は、基本的にはJPEGがおすすめです。

WEBサイトは表示速度が重視されるため、データファイルが小さくなるJPEGだと読み込みが早くなります。

高画質を求められる画像はPNG

高画質であることを求められる場合にはPNGで納品しましょう。

PNGは可逆圧縮（すべてのデータを保持する保存方法）のため、画質が劣化しにくいのが特徴です。

一般的なイラストやロゴであればPNGの中でもPNG-8で問題ありません。

写真などの多色データをPNGで保存する場合には、PNG-24で設定しましょう。PNG-24に設定することで、より多くのデータを保持することが可能になり、より高画質なデータになります。

色数の少ないイラストやロゴはPNG

色数の少ないイラストやロゴはPNGで納品します。

PNGは高画質な保存ができる一方で、データが重くなりやすいというデメリットもあります。色数の少ないイラストやロゴは、そもそものデータが重くないため、PNGで保存してもデメリットはありません。

透過できるという側面も含めて、イラストやロゴはPNGでの納品がおすすめです。

【制作物別】納品時のファイル形式とチェックリスト

ここでは納品する際のファイル形式と納品時のデータ作成の注意点を、制作物別にチェックリストにしてまとめました。

納品時に大切なのは、その後どのように扱われるかをイメージすること。

チェックリストにはなぜ注意すべきかの理由も添えていますので、併せて確認してくださいね。

ホームページ／ランディングページ用画像

ファイル形式

JPEG／PNG／GIF／（PSD）

基本的にはJPEGでOK
透過する素材やロゴはPNG
アニメーション素材はGIF

＊画像データ＋PSDデータを求められる場合、PSDデータだけを求められる場合（画像の切り出しなし）もあります

納品時のデータチェックリスト

余白をきっちり揃えているか

→余白がバラバラだとコーディングが複雑になるため。

キリの良い数値で作成しているか（.00pxの数値はないか）

→フォントや配置を小数点単位で作成するとコーディングで設定しても表示されるブラウザごとに小数点以下の数値への反応（切り捨て、切り上げ、四捨五入など）が異なるため。

ホバー時（マウスカーソルが乗ったとき）のボタンデザインがあるか

→コーディングの際に設定する必要があるため。

フォントサイズ・フォント名を共有できているか

→あらかじめフォントサイズのルール（規則性）やフォント名をコーディングで設定する必要があるため。

画像のデータ名を半角英数字で内容がわかる名前に設定しているか

→コーディング時には全角英数字や日本語、半角カタカナ、スペース、記号は使用できないため。

＜PSDデータを渡さない場合＞全体のレイアウト（ワイヤーフレーム）を共有できているか

→全体像を把握できるワイヤーフレームをもとにコーディングするため。

＜PSDデータを渡す場合＞レイヤーが整理されているか、わかりやすいか

→素材の書き出しなどをスムーズに行えるようにするため。

データサイズが大きすぎないか

→データサイズが大きすぎるとサイトの表示速度が遅くなるため。（画像1枚のファイルサイズは200KBが目安）

ホームページ制作におけるデザイン画像の納品時は、その先に「コーディング作業が発生する」ということを念頭においてデータを用意しましょう。
チェックリストは主に、コーダーがスムーズにコーディングできるように注意すべき点をあげています。

また、サイトの離脱率を抑えるためにも画像の表示速度に配慮できると、プロとして評価が一段上がります。

ホームページやランディングページの目的も理解して制作・納品に取り組みましょう。

バナー／ヘッダー／SNS用画像

ファイル形式

JPEG／PNG

基本的にはJPEGでOK
高画質なデータを求められる場合はPNG

納品時のデータチェックリスト

縦横比、サイズが適切か

→縦横比やサイズが異なるとデザインが見切れたり小さく表示されたりする可能性があるため。

表示される場所に適したレイアウトになっているか

→SNSやヘッダーは表示される際にボタンやアイコンと重なったり、表示されるデバイスに合わせて端が見切れてしまう可能性があるため。必要な要素が被ったり見切れたりしないように、表示される場所に配慮して制作する必要がある。

バナー・ヘッダー・SNS画像はコーディングが必要ないため、余白やフォントサイズを数値で設定する必要はありません。

一方でサイズ規格や表示画面の制約があるため、画像の用途を理解して制作する必要があります。

ロゴ

ファイル形式

PNG／AI

基本的にはPNGとAIの2つのデータで納品することが多い

納品時のデータチェックリスト

印刷用とWEB用の用途に合わせた解像度、カラー設定になっているか
￮印刷用：高解像度データ（300dpi以上、CMYKモード）
￮Web用：低解像度データ（72dpi、RGBモード）

多用途に合わせたカラーバリエーションがあるか（フルカラー版／白黒版／カラー反転版など）

→様々な用途で使用する可能性があるため。いくつかのカラーバリエーションを制作する場合が多い。

ロゴ制作では、使用場面が多岐に渡るため、様々な用途や状況に幅広く対応できる汎用性の高いデータ、バリエーションになっているかが重要です。

ファイル形式も、画像データ（PNG）のみではなく、作成データ（AI）をセットで納品することがほとんどです。

一般的な画像データ（ビットマップ画像）は拡大縮小など編集を加えることにより画質が劣化してしまいます。

ロゴはWEBに限らず看板やチラシなどにも使用されることがあるため、編集することを前提として作成データをセットで納品することが一般的だと理解しておきましょう。

WEBデザインの納品方法

ここでは準備した納品データの受け渡しについて、4つの方法を解説いたします。
納品方法ごとに向いているケースと注意点をまとめているので、それぞれの特性と向き不向きを理解して、適した納品方法を選ぶようにしましょう。

メール

お客様とやりとりをするメールにデータを添付する形で納品する方法です。

メールアドレスは多くの人が日常的に利用しているツールのため、納品時に特別な説明が必要ありません。そのため、納品方法としてはもっともシンプルかつスムーズな方法だと言えます。

向いているケース

お客様とメールでやりとりをしている場合
データが2MB以内の場合

注意点

容量が大きすぎると相手が受信できない可能性があるため、送付後に別のメールや連絡手段できちんと届いているか確認するようにしましょう。
誤送信の可能性があるため、送付前に必ず宛先と添付内容を入念に確認しましょう。
複数のファイルが存在する場合はZIPファイル形式にして送付しましょう。
セキュリティ対策が必要な場合は、ZIPファイルにパスワードをつけ、別途メールでパスワードを送付するようにしましょう。

クラウドストレージ

クラウドストレージとは、インターネット上でデータを保存、管理、共有できるオンラインサービスのことです。

Googleドライブ、DropBox、OneDriveなどが有名です。自分のストレージサービスにアップロードして共有する方法と、お客様のストレージサービスにログインしてアップロードする方法の2つのパターンがあります。

確認もアップロードも便利な反面、ダウンロードやアクセスのタイミングが相手任せになりがちだということを理解しておく必要があります。

向いているケース

お客様がクラウドストレージサービスを利用している場合（アクセス権をもらい、アップロードする）
自分がクラウドストレージサービスを利用している場合（お客様に確認・ダウンロードできるリンクを共有する）
データが大容量の場合（目安2MB以上）
数あるデータからお客様に選んでもらって納品する場合
データのやりとりが頻繁にある場合

注意点

利用するプランによってストレージできる容量が決まっているので、空き容量とアップするデータのサイズを確認するようにしましょう。
ダウンロードの期限を決めておくようにしましょう。
共有リンクや共有相手を誤らないように確認しましょう。

ファイル転送サービス

サイト上に期限付きでファイルをアップロードし、ダウンロードリンクとパスワードを共有することによってお客様にダウンロードしてもらう方法です。

有料版でセキュリティ保証されているサービスの利用が最も安心ですが、制作会社勤めでない限り、なかなか導入は難しいかもしれません。

無料で使えるサービスではギガファイル便が有名ですが、広告表示がありダウンロードがわかりにくいデメリットがあります。お客様も利用経験があるかを確認し、セキュリティ面でも了承を得てから使用するのがおすすめです。

向いているケース

データが大容量の場合（目安2MB以上）
スポット的なデータのやりとりの場合

注意点

無料のファイル転送サービスを利用する場合は、「ダウンロードの履歴が確認できない」「セキュリティ対策が万全とは言い切れない」などの情報漏洩リスクの観点から、お客様に必ず利用の許可をとるようにしましょう。
ダウンロードの期限を明確に伝えておきましょう。期限後も連絡がない場合は、ダウンロードされているかこちらから確認するようにしましょう。

チャットアプリ／SNS

お客様とのやりとりをしているアプリやSNSのメッセージ機能にデータ共有機能がついている場合、そのままデータを共有する方法もあります。

やりとりがスムーズな一方で、画質が落ちるなどの注意点もあるため、アプリやSNSの機能ごとにデータ共有に適しているかを確認するようにしましょう。

向いているケース

お客様とSNSメッセージやチャットアプリでやりとりをしている場合
データの容量が小さい場合

注意点

データサイズやアプリによって画質が落ちる可能性があるため、必ず納品後に確認をしてもらいしましょう。
アプリ内での保存期限があるため、お客様には確認時にダウンロードしてもらうように伝えましょう。
送付するごとに通知が行くアプリの場合は、送付枚数へ配慮し、送付時間の一般的なマナーを守りましょう。

納品トラブルを防ぐチェックリスト

これまでの内容を踏まえて、納品に関わるトラブルを起こさないためのチェックリストを作成しました。

私自身もご依頼をいただいた際に、必ず以下の項目は確認するようにしています。

制作前・納品時・制作後にぜひ活用してみてください！

いつ	チェックすること	備考
制作前	画像データの用途は何か	用途に適したファイル形式・納品方法かを確認しましょう。
	納品形式の指定があるか	お客様の納品形式に指定がある場合はそれに順じ、お任せの場合は適したファイル形式を提案しましょう。
	納品方法の指定があるか	お客様の納品方法に指定がある場合はそれに順じ、お任せの場合は適した納品方法を提案しましょう。
納品時	ファイル名が適しているか	内容が分かるファイル名になっているか、半角英数字になっているかを確認しましょう。
	サイズが正しいか	制作したデータのを納品用のファイル形式に出力した後に、指定された正しいサイズになっているかを確認しましょう。
	データ容量が重くないか	容量が重い場合は、ネット上で表示速度が遅くなったり、納品方法によっては受信できない、画質が落ちるなどのトラブルが起きる可能性があるため、必ず確認するようにしましょう。容量が重すぎる場合は、適宜画像を圧縮する対応や納品方法をクラウドストレージ共有、ファイル転送サービスを使うなど工夫が必要です。
	正しいデータを添付、アップロードできているか	誤送信、誤共有がないように、入念に確認しましょう。
納品後	データが無事に届いているか（ダウンロードできているか）	万が一、データが届いていない、見ることができないなどのトラブルに備えて、お客様から連絡が来る前にこちらから積極的に確認するようにしましょう。
納品後	届いた（ダウンロードした）データに不備がないか	万が一、データに不備があった場合に備えて、お客様から連絡が来る前にこちらから積極的に確認するようにしましょう。

まとめ

今回は、WEBデザインのデータファイル形式と納品方法について、ポイントを押さえて解説しました！

▼WEBデザインで知っておくべきファイル形式

用途	種類（拡張子）	説明	主な使用場面
データ作成	PSD （.psd) ピーエスディー	Photoshopの全機能を保存できるPhotoshop専用のファイル形式。	Photoshopでの作業。
データ作成	AI (.ai) エーアイ	Illustraterの全機能を保存できるIllustrater専用のファイル形式。	Illustraterでの作業。
データ保存	JPEG (.jpeg) ジェイペグ	WEB上で表示するために、一般的に使用されている画像のファイル形式。※透明を保持しない	写真などの連続階調画像*の保存。
	PNG (.png) ピング	WEBで表示するために一般的に使用されている画像のファイル形式。※透明を保持する	主にイラストやその他画像の保存。＊PNG-8はGIFと同様に単調画像向き＊PNG-24はJPEGと同様に連続階調画像向き
	GIF (.gif) ギフ	イラストやアイコンなどの単調画像をWEBで表示するために一般的に使用されているフォーマット。画像の容量は少ない。※透明を保持する	主にシンプルなイラストやロゴなどに使用される。
データ作成・保存	EPS (.eps) イーエスピー	ベクトル画像、ビットマップ画像の両方を含めることができるファイル形式。	主にIllustratorやPhotoshopで編集可能。

JPEGとPNGの使い分けは特に重要なので、しっかり覚えておくようにしましょう。

▼JPEGとPNGの使い分け

写真や多色のデータ →JPEG
WEBサイトで表示する画像 →JPEG
色数の少ないイラストやロゴ →PNG
高画質を求められる画像 →PNG

▼【制作物別】納品時のファイル形式

制作物の種類	納品時のデータファイル形式
ホームページ	JPEG／PNG／GIF／（PSD）基本的にはJPEGでOK 透過する素材やロゴはPNG アニメーション素材はGIF ＊画像データ＋PSDデータを求められる場合、PSDデータだけを求められる場合（画像の切り出しなし）もあります
バナーヘッダー SNS用画像	JPEG／PNG 基本的にはJPEGでOK 高画質なデータを求められる場合はPNG
ロゴ	PNG／AI 基本的にはPNGとAIの2つのデータで納品することが多い