Figmaで印刷物つくってみた

moco （@moco_megane） 2023/5/28（日）名古屋Figma勉強会ノンデザイナーでもクオリティを担保できる仕組みづくりつくってみたで印刷物 Figma

Æ 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
XD Adobe Photoshop Adobe InDesign Figma 一般的なデザインツールの使い分け

印刷物 Web Adobe Illustrator パーツ作成・加工 ※独断ですこのへん諸説ありそうレイアウト Adobe
XD Adobe Photoshop Adobe InDesign Figma 一般的なデザインツールの使い分け

元DTPデザイナーの葛藤 @ 本当はWeb用のツールで印刷データ作るの怖い…！（印刷事故への恐怖） @ でもクライアントがお困りの事情も  よくわかる…！ @ あとなんか面白そう…！

リスクヘッジしながらやってみよー！

情報収集

①カラーモードは変更できる？ ②単位px→mmにどう換算する？ ③トンボはどうつける？主な懸念点

先人たちの知恵を借りる https://twitter.com/factorzero/status/1572135351493464066 https://mob-inc.jp/news-figma https://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

Figmaで印刷物つくってみた

Figmaで印刷物つくってみた

More Decks by moco

Other Decks in Design

Featured

Transcript