Figmaで技術同人誌の表紙データを作ろう
はじめに
この記事は、Aizu Advent Calendar 2023 23日の記事です。22日は@acomagu, 24日は@kasukashu02です。
こんにちは、マヤミトです。皆さんは技術同人誌書いてますか？自分は技術書典やコミケに度々サークル参加して技術同人誌を出しています。
同人誌を出す上で、表紙データを必ず作る必要があると思います。表紙データを作るのにエンジニアだと使い慣れたFigmaを使いたいという人も多いのではないかと思います。
この記事では、Figmaの基本的な使い方はわかるという人向けに、Figmaで同人誌の表紙データを作る際に注意しなければいけない点やそれに対応するためのテクニックを紹介したいと思います。
前提: Figmaの画像エクスポートは72dpiが基準
Figmaには、デザインを画像としてエクスポートする機能があります。Figmaでデザインした表紙データをこのエクスポート機能を使って印刷用に画像ファイルとして書き出します。ここで重要になってくるのが画像のdpiです。
印刷所に同人誌の印刷を依頼する場合、大抵の場合は入稿する表紙データの仕様の指定があると思います。例えば自分がいつもお世話になっている印刷所だと600dpiで指定されます。
Photoshopなどのツールがある人であれば、Figmaで適当に大きいサイズでエクスポートしてから目的の出力サイズの600dpiに変換すればいいと思います(例えばB5 600dpiなどのように)。ただ、それが面倒だという人やそもそも他のツールを持っていない人もいると思います。
ではFigma上で始めから画像を目的のサイズの600dpiで出力できればいいのではないか？と思うかもしれません。しかし、Figmaはあくまで「インターフェースデザインツール」(公式サイトより)です。こういった使い方は想定していません。
そこで今回は、Figmaでも目的の出力サイズの画像を目的のdpiで出力するテクニックを紹介します。
Figmaのエクスポートの倍率指定を使う
※初めにお伝えすると、このセクションは読み飛ばしても構いません。
Figmaには、エクスポート時に倍率の指定をすることができます。ここで例えば2xを指定すると2倍のサイズで、つまり画像が144dpiで出力されます。
この仕組みを使って、目的のdpiの出力が得られるように指定する倍率を計算し、そこからFigma上でのサイズを逆算していきます。
B5 600dpiで出力したい場合を考えてみましょう。
デフォルトで72dpiなので、どうすれば600dpiで出力できるか考えてみます。600/72で、8.333...倍で出力すればおよそ600dpiになりますね。
次に出力サイズを計算します。以下のサイトに各用紙サイズのdpiごとのピクセル数が一覧で載ってるので、これを参考にします。
今回はB5 600dpなので、4299x6071ですね。
これをFigmaのエクスポートで8.33xを指定した際にそのサイズが出力されるようにFigma上のサイズを計算します。
4299を600/72で割って515.88、6071を600/72で割って728.52なので、515.88x728.52なframeを作ります。
デザインができたら、それをエクスポートします。その際に倍率を8.333xに指定します。
エクスポートしたファイルの情報を見てみましょう。計算通り、ピクセル数が4299x6071になっていることを確認できると思います。
オンラインで画像のdpiを確認できるツールでも、ちゃんと600dpiで出力できていることが確認できますね。
Figmaのエクスポートの幅指定・高さ指定を使う
これが一番簡単だと思います(おい)。
この記事を書いている最中に気づいたのですが、Figmaでは画像のエクスポートで倍率ではなく幅や高さのピクセル数を指定して出力することができます。
つまり、面倒くさいdpiの計算などしなくても、始めからFigma上で目的のピクセル数の幅高さでデザインを作ったあとにその幅or高さでエクスポートすれば、素直に目的のピクセル数の画像を出力することができたというわけです。(とほほ)
まとめ
今回Figmaで作ったデザインを任意のサイズの画像に出力する方法を紹介しました。いかがでしたか？
2つやり方を紹介しましたが、正直どちらでもいいかなと個人的には思っています。目的を達成できればそれが全てです。
Figmaは(特にクライアントサイドの)エンジニアにとって親しみやすいデザインツールです。同人誌作りはハードルが高いかと思われるかもしれませんが、普段使っているツールを活用すれば意外なほど簡単に作ることができます。皆さんもぜひ技術同人誌の執筆にチャレンジしてみてください。
Discussion