Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figmaで印刷物つくってみた
Search
moco
May 28, 2023
Design
4
12k
Figmaで印刷物つくってみた
「ノンデザイナーでもクオリティを担保できる仕組みづくり Figmaで印刷物つくってみた」
2023/5/28 名古屋Figma勉強会で登壇した際のスライド
moco
May 28, 2023
Tweet
Share
More Decks by moco
See All by moco
Claude Codeに介抱されながらアプリ作ってみた
moco1013
0
220
生成AI×UIデザイン勉強会@千株式会社 社内勉強会
moco1013
0
1.9k
インタビューだけじゃない!ユーザーに共感しユーザーの目👀を手に入れるためのインプット
moco1013
0
780
忙殺されたワーママデザイナーが育休中に勉強して自分を取り戻すまで
moco1013
2
2.8k
Other Decks in Design
See All in Design
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.7k
株式会社Muture_ソーシャル推進事業
muture
PRO
0
130
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
100
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
530
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
480
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
160
「UXとUIの違い」v2
shirasu3
0
210
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
RailsConf 2023
tenderlove
30
1.2k
A Tale of Four Properties
chriscoyier
160
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
How STYLIGHT went responsive
nonsquared
100
5.7k
Transcript
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