「ノンデザイナーでもクオリティを担保できる仕組みづくり Figmaで印刷物つくってみた」 2023/5/28に、名古屋Figma勉強会で登壇した際のスライドです
moco （@moco_megane）2023/5/28（日）名古屋Figma勉強会ノンデザイナーでもクオリティを担保できる仕組みづくりつくってみたで印刷物Figma
View Slide
Æ Figmaで印刷物を作ったÆ Figmaでの印刷物のÆ Figmaで印刷物を作る時にÆ Figmaで印刷物を作る背1作り(気をつけるこ!メリット・デメリット本日おはなしすること
mocoデザイナーと申します！だれなの？@moco_meganeよろしければフォローお願いします
だれなの？印刷会社のDTPデザイナー（5年）事業会社のEC周りWebデザイナー（5年）制作会社のWebデザイナー（2年）イマココ
DTPってなに？8 DeskTop Publishingの略8 「卓上出版」という意味
DTPってなに？5 DTP以前は「写植（写真植字）」 で出版物を作ってい"5 DTP＝という解釈で一旦OK出版物をパソコンで作る 画像の出典：写研アーカイブ https://archive.sha-ken.co.jp/phototypesetting/
制作の背景
なぜFigmaで印刷物を？
業務委託でお請けした事業会社さんからのご依頼最初にお伝えします事業会社のA社さん
顧客へ、定期的に数ページのDM冊子を送付したい デザイナーの手が足りないので、今後は営業メンバーでもさわれるようテンプレから作ってほしい Adobe製品より直感的・無料で使えるFigmaでお願いしたいA社さんからのご依頼
最初にうかがった時の感想「い、いけるんか…！？？？」
というのも、基本的に印刷物は印刷物に適したツールで作るのがベストなのです
Adobe Illustratorパーツ作成・加工※独断ですこのへん諸説ありそう印刷物 WebレイアウトAdobe XDAdobe PhotoshopAdobe InDesignFigma一般的なデザインツールの使い分け
印刷物 WebAdobe Illustratorパーツ作成・加工※独断ですこのへん諸説ありそうレイアウトAdobe XDAdobe PhotoshopAdobe InDesignFigma一般的なデザインツールの使い分け
元DTPデザイナーの葛藤@ 本当はWeb用のツールで印刷データ作るの怖い…！（印刷事故への恐怖）@ でもクライアントがお困りの事情も よくわかる…！@ あとなんか面白そう…！
リスクヘッジしながらやってみよー！
情報収集
①カラーモードは変更できる？②単位px→mmにどう換算する？③トンボはどうつける？主な懸念点
先人たちの知恵を借りる https://twitter.com/factorzero/status/1572135351493464066https://mob-inc.jp/news-figmahttps://onl.bz/Back4B5
FigmaのDesigner AdvocateであるCorey Leeさんが印刷用のデザインガイドを公開されていました！https://twitter.com/factorzero/status/1572135351493464066
公式・非公式の情報に目を通した結果…
懸念点の確認①カラーモードは変更できる？→PDF書き出し時にできそう（色は変わるけどやむなし）
懸念点の確認②単位px→mmにどう換算する？→ を参照Print Guide for Figma
懸念点の確認③トンボはどうつける？→ナシでOKな印刷会社を利用するor 書き出し時につける
なんだかいけそうな気配！
つくってみる
①プラグインでベースを作るhttps://www.figma.com/community/plugin/874441781480244375/Print-for-Figma
用紙サイズ（今回は見開きA3）解像度（特に理由がなければ300に）マージン（今回は周囲10mm）塗り足し（今回は3mm）
テンプレートが完成！中央のガイドは手動で入れると◎10mmのマージンはレイアウトグリッド（青）として表示される塗り足し3mmはレイアウトグリッド（赤）として表示される
②オートレイアウトを活用してデザイン目次にオートレイアウト使うと便利
デザイン完成！
気合いで入稿
印雑物を作ったことがある方ならわかると思いますが入稿（印刷会社に印刷用データを渡す）の作業こそがもっとも気を抜いてはいけない瞬間です
ミスったら即、刷り直しだから…
今回はそもそも完璧なデータは作れない前提。データを作ることを目標に！「なんとか刷れる」※印刷会社の入稿ガイドを、事前に必ず確認してください！
一般的な日本式のコーナートンボが必要 〜デザイン：営業さんがFigmaで行う入稿〜：インハウスデザイナーさんがIllustratorで行う印刷会社さん
①Figmaからjpgでエクスポート見開き単位でエクスポート
②Illustratorに貼り付けるここでカラーモードをCMYKに※この時点で色が変わります！ シビアな色合わせは難しいです…！
③PDFを書き出す書き出し設定でトンボをつける※PDFの規格については 入稿ガイドを 参照してください！
④印刷会社さんにお渡しここからはもう祈るしかない…
刷り上がり・感想
「仕上がりすごくキレイです！Figmaで入稿したとは思えない出来です！」A社のインハウスデザイナーさん
うれしい…やってよかった…！
2冊目を作成・運用してくださっている営業さんr 以前は他のツールを使っていたが、決まったテンプレしかさわれないのが不満だった。Figmaだと編集における自由度が高く、思い通りに編集できてよかった。r 共同編集ができるおかげで、他の人に相談しながら作業できて助かる。
ぜんぶFigmaのおかげです…！
まとめ
Figmaで印刷物は作れる！ネット上でもあまり例を見ない「ページもの」「オフセット印刷」の関門を くぐり抜けた…！
" テンプレートさえ用意すれば、ノンデザイナーでもクオリティを担保しながらデザイン作成ができる" 関係者が多くても常に最新データを確認できるFigmaを使うメリット
シビアな色の調整はできない 場合によっては印刷会社さんに断られる可能性もあり。作成前に事情を伝えた上で入稿方法のすり合わせが必要！Figmaを使うデメリット
印刷物は専用ツールで作成するのが理想。ただしそうも言っていられない時！総括
Figmaならノンデザイナーでもクオリティを担保しながらクリエイティブ制作ができてみんなハッピーになれるかも！ 総括
ご清聴ありがとうございました！@moco_megane
moco1013
jamiekost
joelgoodman
xinyao
uxaustralia
miure
myoshiro
yutaromurakami
aicocco
okabemy
usagimaru
mclloyd
jeffersonlam
frogandcode
eileencodes
davidbonilla
chriscoyier
panda_program
chrisshort
malarkey
sstephenson
tmm1
destraynor