Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Æ Figmaで印刷物を作った Æ Figmaでの印刷物の Æ Figmaで印刷物を作る時に Æ Figmaで印刷物を作る 背1 作り( 気をつけるこ! メリット・デメリット 本日おはなしすること

Slide 3

Slide 3 text

moco デザイナー と申します！ だれなの？ @moco_megane よろしければフォローお願いします

Slide 4

Slide 4 text

だれなの？ 印刷会社の DTPデザイナー （5年） 事業会社の EC周りWebデザイナー （5年） 制作会社の Webデザイナー （2年） イマココ

Slide 5

Slide 5 text

DTPってなに？ 8 DeskTop Publishingの略 8 「卓上出版」という意味

Slide 6

Slide 6 text

DTPってなに？ 5 DTP以前は「写植（写真植字）」
 で出版物を作ってい" 5 DTP＝ という解釈で一旦OK 出版物をパソコンで作る
 画像の出典：写研アーカイブ https://archive.sha-ken.co.jp/phototypesetting/

Slide 7

Slide 7 text

制作の背景

Slide 8

Slide 8 text

なぜFigmaで印刷物を？

Slide 9

Slide 9 text

業務委託でお請けした 事業会社さんからのご依頼 最初にお伝えします 事業会社のA社さん

Slide 10

Slide 10 text

顧客へ、定期的に数ページのDM冊子を送付したい デザイナーの手が足りないので、今後は営業メンバーで もさわれるようテンプレから作ってほしい Adobe製品より直感的・無料で使える Figmaでお願いしたい A社さんからのご依頼

Slide 11

Slide 11 text

最初にうかがった時の感想 「い、いけるんか…！？？？」

Slide 12

Slide 12 text

というのも、基本的に 印刷物は印刷物に適したツールで 作るのがベストなのです

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

情報収集

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

先人たちの 知恵を借りる https://twitter.com/factorzero/status/1572135351493464066 https://mob-inc.jp/news-figma https://onl.bz/Back4B5

Slide 20

Slide 20 text

FigmaのDesigner AdvocateであるCorey Leeさんが 印刷用のデザインガイドを公開されていました！ https://twitter.com/factorzero/status/1572135351493464066

Slide 21

Slide 21 text

公式・非公式の情報に 目を通した結果…

Slide 22

Slide 22 text

懸念点の確認 ①カラーモードは変更できる？ →PDF書き出し時にできそう （色は変わるけどやむなし）

Slide 23

Slide 23 text

懸念点の確認 ②単位px→mmにどう換算する？ → を参照 Print Guide for Figma

Slide 24

Slide 24 text

懸念点の確認 ③トンボはどうつける？ →ナシでOKな印刷会社を利用する or 書き出し時につける

Slide 25

Slide 25 text

なんだかいけそうな気配！

Slide 26

Slide 26 text

つくってみる

Slide 27

Slide 27 text

①プラグインでベースを作る https://www.figma.com/community/plugin/874441781480244375/Print-for-Figma

Slide 28

Slide 28 text

用紙サイズ （今回は見開きA3） 解像度 （特に理由がなければ300に） マージン （今回は周囲10mm） 塗り足し （今回は3mm）

Slide 29

Slide 29 text

テンプレートが完成！ 中央のガイドは 手動で入れると◎ 10mmのマージンは レイアウトグリッド（青） として表示される 塗り足し3mmは レイアウトグリッド（赤） として表示される

Slide 30

Slide 30 text

②オートレイアウトを活用してデザイン 目次にオートレイアウト使うと便利

Slide 31

Slide 31 text

デザイン完成！

Slide 32

Slide 32 text

気合いで入稿

Slide 33

Slide 33 text

印雑物を作ったことがある方ならわかると思いますが 入稿（印刷会社に印刷用データを渡す）の作業こそが もっとも気を抜いてはいけない 瞬間です

Slide 34

Slide 34 text

ミスったら即、刷り直しだから…

Slide 35

Slide 35 text

今回はそもそも完璧なデータは作れない前提。 データを 作ることを目標に！ 「なんとか刷れる」 ※印刷会社の入稿ガイドを、事前に必ず確認してください！

Slide 36

Slide 36 text

一般的な日本式の コーナートンボが必要 　〜デザイン：営業さんがFigmaで行う 入稿〜：インハウスデザイナーさんがIllustratorで行う 印刷会社さん

Slide 37

Slide 37 text

①Figmaからjpgでエクスポート 見開き単位で エクスポート

Slide 38

Slide 38 text

②Illustratorに貼り付ける ここでカラーモードを CMYKに ※この時点で色が変わります！ 　シビアな色合わせは難しいです…！

Slide 39

Slide 39 text

③PDFを書き出す 書き出し設定で トンボをつける ※PDFの規格については 　入稿ガイドを 　参照してください！

Slide 40

Slide 40 text

④印刷会社さんにお渡し ここからはもう祈るしかない…

Slide 41

Slide 41 text

刷り上がり・感想

Slide 42

Slide 42 text

「仕上がりすごくキレイです！Figmaで入稿したとは思えない出来です！」 A社のインハウスデザイナーさん

Slide 43

Slide 43 text

うれしい…やってよかった…！

Slide 44

Slide 44 text

2冊目を作成・運用 してくださっている営業さん r 以前は他のツールを使っていたが、決まったテンプレ しかさわれないのが不満だった。Figmaだと編集にお ける自由度が高く、思い通りに編集できてよかった。 r 共同編集ができるおかげで、他の人に相談しながら作 業できて助かる。

Slide 45

Slide 45 text

ぜんぶFigmaのおかげです…！

Slide 46

Slide 46 text

まとめ

Slide 47

Slide 47 text

Figmaで印刷物は作れる！ ネット上でもあまり例を見ない 「ページもの」「オフセット印刷」の関門を
 くぐり抜けた…！

Slide 48

Slide 48 text

" テンプレートさえ用意すれば、ノンデザイナー でもクオリティを担保しながらデザイン作成が できる " 関係者が多くても常に最新データを確認できる Figmaを使うメリット

Slide 49

Slide 49 text

シビアな色の調整はできない 場合によっては印刷会社さんに断られる可能性 もあり。作成前に事情を伝えた上で入稿方法の すり合わせが必要！ Figmaを使うデメリット

Slide 50

Slide 50 text

印刷物は専用ツールで作成するのが理想。 ただしそうも言っていられない時！ 総括

Slide 51

Slide 51 text

Figmaなら ノンデザイナーでもクオリティを担保しながら クリエイティブ制作ができて みんなハッピーになれるかも！　 総括

Slide 52

Slide 52 text

ご清聴 ありがとうございました！ @moco_megane