こんにちは。あさマック @mixplace です。主にWebアプリケーションのフロントエンド開発をしているエンジニアですが、ここ最近はUIデザイン領域にも重きを置きています。デザイニングとエンジニアリングの狭間にいる民として、サービスの体験をデザインする難しさを楽しさと噛みしめている今日この頃です。
ここ最近、いくつかの案件を担当させていただいているなかで、Webサービスの紹介冊子（PDF）を制作する機会がありまして、Figmaを選定して制作を行いました。
いわゆる複数ページもののPDFファイルですね。
今回は、紹介資料をFigmaでデザインしていて、どうしたら良いかわからずハマったことを3点のTipsとして自身の備忘を兼ねてご紹介します。
この記事は、Figma Advent Calendar 2021 の10日目の記事としてお送りします。
1. 用紙サイズに合ったFrameを作成したい
ポイント: 用紙サイズを72dpiでmm→pxに単位を変えてFrameを作成する
一般的なスライド作成/DTPソフトウェアにおいては、単位がmmやcmで表現しますが、Figmaはpxです。
この際に悩むのが、Frameのサイズです。
ありがたいことにFigmaではFrameを作成する際、よく使うサイズがプリセットで登録されており、Paperカテゴリにある「A4」をクリックすると、595px × 842px のFrameが作成されます。
このFrameをPDFでExportすると、A4の用紙サイズである 21.0cm × 29.7cm で書き出されます。
初見だと「Frameのサイズが小さすぎないか？」と違和感や不安を感じられるかもしれませんが、これはFigmaがFrameを72dpiとして扱っているためです。
A4以外の用紙で制作することもあるかと思いますので、以下にまとめました。
用紙サイズとピクセル数の早見表
ピクセルの単位は72dpiです。
| 用紙サイズ | 幅 × 高さ (mm) | 幅 × 高さ (px) |
|---|---|---|
| A3 | 297 × 420 | 842 × 1191 |
| A4 | 210 × 297 | 595 × 847 |
| A5 | 148 × 210 | 420 × 595 |
| B4 | 257 × 364 | 729 × 1032 |
| B5 | 182 × 257 | 516 × 729 |
| はがき | 100 × 148 | 283 × 420 |
| 名刺 | 55 × 91 | 156 × 258 |
ほか、用紙サイズのmm←→ピクセル数の単位を調べるには、以下のWebページが参考となります。
https://www.benricho.org/size_scale/pixel.html
2. 各Frame毎にページ番号を順に打ちたい
ポイント: Paginate プラグインを使って打つ
Paginate プラグインを用いることで、Component化しているテキストオブジェクトを選択するだけでページ番号に置き換えてくれます。
3. 複数ページをまとめたPDFファイルを作成したい
ポイント: macOSのプレビューアプリで結合できるが、テキストオブジェクトの扱いに注意が必要
Frame内でデザインが終われば、Frame毎にPDF形式でExportするだけです。
Fileメニューの“Export Frames to PDF...”を使っても良いでしょう。
ただし、Figmaでは複数ページを1つのPDFファイルに結合して書き出す機能は標準では存在しません。
Macをお使いの方であれば、プレビューアプリを使って複数のPDFファイルを1つのPDFに結合することができます。
ただ、PDFを結合して保存するとテキストオブジェクトの選択とコピーが出来なくなる場合が高確率で発生しました。（これはmacOSのプレビューアプリの仕様と思われます。）
テキストオブジェクトは選択できるよう担保したかったため、やむなくAdobe Acrobatを利用してPDFを1ページに結合しましたが、
Exportされるファイルを個別最適化して書き出せる「Tiny Image Compressor」というFigma プラグイン（有償、14日間トライアル）を使うのも良いでしょう。
複数ページを1 PDFファイルとして書き出したり、CMYKで出力することもできる万能なFigma プラグインです。
あとがき
「PowerPointやGoogle Slidesで作るよりも正確精緻に仕上げたい、だけどIllustratorやInDesignを使うには大層だ。」というシチュエーションはあるかと思います。
また、デジタルプロダクトを開発運営している事業者の場合、Figmaでプロトタイピングを行っていることも多いかと思います。
プロダクトのプロトタイプからサービス資料まで一環したものを1つのツールで完結して作れることは、サービスが目指す世界観やブランディングの観点でも一貫性が持て、またデザイン成果物が一ヶ所に集まる点でもメリットがあると感じました。
今回は“FigmaでPDF資料制作するのも手段の1つとして存在する”ということをお伝えしたく、記事とさせていただきました。
それでは明日以降も Figma Advent Calendar 2021 をお楽しみください！See you next time!