Webデザインデータを印刷用に調整する手順|Figma・Photoshopからの出力方法
卒業アルバム以外の無線綴じなどは引き続き承っております。
LPやコーポレートサイトなどの内容をそのまま冊子にしたいという要望は年々増えています。しかしwebデザインと冊子デザインは概念が全く違うものなので、そのままのデータでは印刷できません。
今回は、Figma、PhotoshopなどWeb制作で使われる代表的なツールから、印刷用のPDFを作る初歩的な方法を紹介します。
目次
Figmaから印刷用PDFを作る方法
FigmaはWebデザインの定番ツールですが、印刷を前提にしたデータ作成ではいくつか注意が必要です。
1.単位をpixelで計算する
まず、フレーム(アートボード)のサイズがpixelでしか指定できないので、A4などにリサイズする際は印刷サイズ+塗り足し四方3mmのサイズ(A4の場合は216×303)をpixel変換します。
以下のようなサイトで変換すると便利です。
https://shimeken.com/print/pixel-mm-dpi
2.エクスポートからPDFを書き出す
- 対象のフレームを選択
- 右側のプロパティで「エクスポート」→「PDF」を選択

3.カラーモードをCMYKに変換
FigmaはRGB専用の環境です。そのため、Figma上でCMYK変換はできません。印刷用PDFを作る際は、最終的にIllustratorやPhotoshopでCMYK変換を行う必要があります。Figmaで書き出したPDFをIllustratorで開き、 [ファイル]→[ドキュメントのカラーモード]→「CMYKカラー」に変更すれば印刷用に変換できます。
Photoshopから印刷用PDFを作る方法
Web用のデザインデータを印刷向けに使う場合は、まずサイズ・解像度の調整が重要です。
1. 単位と画像解像度を変更する
例えば横長のデザインをA4横にしたい時、比率がA4でなくてもひとまず[イメージ]→[画像解像度]を開き、横、縦のどちらかをA4サイズに合わせます。そして解像度を300dpiに設定します。再サンプルでディテールを保持を選択しておくと、解像度が荒くなりにくいです。

2. カンバスサイズを印刷サイズに調整
カンバスサイズで正しい比率に設定します。基準位置を上にするか、下にするか、真ん中にするか、レイアウト調整しやすい方向を選んでおくと後が楽です。

3. カラーモードをCMYKに変更
[イメージ]→[モード]→「CMYKカラー」を選択します。
RGBのまま印刷すると、発色がくすむ・黒がグレーになるなどのズレが生じます。
4. PDFで保存
[ファイル]→[別名で保存]→形式を「Photoshop PDF」に。
ダイアログで「PDF/X-1a:2001」を選択すると、フォントや画像が埋め込まれた印刷用PDFを作成できます。
まとめ
Webデザインのデータを印刷用にする方法は、正しくサイズを設定し、リサイズしてPDFに書き出すことです。
ただし、
- FigmaはRGBカラーしか扱えないからIllustratorなどで変換すると安心
- Photoshopでは解像度を必ず300dpiに
- PDF/X-1a形式で保存する
といった基本を押さえておかないと、印刷結果がモニターと大きく異なってしまいます。
「こんな本にはどんな用紙がいい?」「予算に合った仕様にしたい」など冊子作りのご相談は
電話連絡先:06-6753-9955 / 法人専用窓口:0120-264-233
(平日10:00~18:00)
またはお問合わせフォームからお気軽にお問合わせください。
印刷製本の専門スタッフがお答えしております。
冊子のジャンルから選ぶ
利用シーン、目的に合った冊子印刷の仕様を、価格例と合わせてご提案しています。
お見積り&ご注文でサイズや部数、製本方法などを変更してすぐに印刷価格がチェックできます。
製本方法から選ぶ
製本方法のメリットを活かした仕様、冊子のページ数や部数に合った仕様を格安でご提案しています。
対応サイズや用紙、印刷仕様、オプション加工、納期、価格例をご案内します。












