Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。|デザイナー、コーチ、ディレクターズメモ|井川

igawa design.

Memo

Figmaで名刺デザイン。

Figmaで印刷物を。名刺を作ってみる。

デジタルデバイス向けのデザインツール「Figma」で、紙媒体の名刺を作れるらしい。

Figmaのロゴ。

Figmaで名刺制作。

ひとまずテストとして自分用の名刺制作を試みる。印刷物でよく使用するテキストのカーニングやアウトライン化も可能で、PDFでの書き出しもできる。

ある程度IllustratorやPhotoshopを使えればほとんど問題ないだろう。ベクターデータもドラッグ&ドロップで持って来られる。(もちろんラスターも可。)

無料プランがあるので、初心者でも練習用として学びやすい。

Figmaで名刺制作。

仕上がりのイメージ。

一般的な名刺サイズ、両面カラーでの印刷を想定。

Figmaで名刺デザイン。
Figmaで名刺デザイン。

テストのため自分用のもの。電話番号はモザイク。

Figmaの画面。

表面も裏面も同じ画面で、フレーム(イラレでのアートボード)を分けて作成できる。

フレーム内に画面上部のツールで文字を入力したり、画面右側のパネルでサイズや整列で整えていく。

Figmaで作成した名刺データ。

印刷用の解像度とサイズ、ファイル形式や裁ち落としなど。

Figmaでは、サイズの単位がデジタルデバイス用の「px」となっている。
なので、現時点では印刷用の「mm」の設定はできない。

A4など紙媒体用のプリセットも若干あるのだが、現状(2022年11月現在)では単位はあくまでもpxであり、カラーモードもRGBオンリーとなっている。

それでも無料プランで使用できるソフトとしては、かなりクオリティが高い。

解像度。

印刷用の解像度は通常300dpi〜350dpiだが、Figmaには解像度の設定箇所がない。
そのため、デジタルデバイス用のppi(通常は72ppi。)へ変換する。

dpiはdots per inchで、ppiはpixels per inch。1インチ(約2.54cm)あたり、点(ドットやピクセル)がいくつあるかでサイズが決まる。

サイズ。

日本の名刺は91mm×55mmが一般的なので、これを350dpiに相当するピクセルに変換する。
すると1254px×758pxとなる。

つまり、1254px×758pxのフレームサイズ内でデザインをするということになる。

参考:pixel⇔mm⇔dpi 計算機|シメケンプリント
参考:takanorip blog さま Figmaで名刺をデザインするための豆知識
参考:Print for Figma 解像度300dpiのFigmaのプラグイン。

裁ち落とし。

ただし名刺印刷の場合、裁断に備えた外側3mmの裁ち落とし領域がなければならない。91mm×55mmの天地左右に3mmの塗り足し分のサイズが必要となる。

なので350dpiの場合、フレームサイズは1254px×758pxでは足りない。
塗り足し分を含めたサイズは、97mm×61mmの変換で1337px×841pxとなる。

トンボ。

印刷物は通常はトンボ(トリムマーク)が必要となるが、Figmaには備わっていない。
今回は印刷会社確認の上での、断ち落とし領域を設けたPDF入稿のため、トンボは付けず。

デザイン時、91mm×55mmの長方形の内側と外側の3mmの領域では、文字や図形や写真などの配置に気をつける必要がある。

参考:イラレ/Illustrator トンボ(トリムマーク)の作り方 – ネット印刷は【印刷通販@グラフィック】

アウトライン化。

印刷物ではほぼほぼ必須であるアウトライン化は、Figma単体で可能。右クリックメニューから簡単にできる。

ファイル形式。

Figmaは印刷物制作によく使われるIllustratorのAIファイルやPhotoshopのPSDファイルには対応していない。

なので現時点ではPDF形式一択となる。Figmaの右側のパネル内のExport(エクスポート)から書き出しができる。

まとめ。
  • デザイン:Figmaのツール類で可能。
  • サイズ:97mm×61mm相当の1337px×841px。(350dpiの場合。裁ち落とし分を含む。)
  • トンボ:なし。
  • アウトライン化:あり。
  • ファイル形式:PDF。

Figmaでの入稿はカラーモードをCMYKにする。PDFの場合トンボが不要の場合も。

Figmaは現状CMYKに対応していないので、オンラインツールを利用。

名刺など紙媒体への印刷はRGBではなく、CMYKでの作成となる。が、FigmaにCMYKモードはない。

印刷会社やオンラインサイトなどでRGBからCMYKへのオンライン変換ツールがあるので、そこで変換する。

参考:PDF To CMYK

モニターではなく実際に紙にプリントされた色を確認したい場合は、自分のプリンターや、勤務先、知り合いの会社、コンビニなどのプリンターなどでチェックはできる。

ただし、印刷物は紙の種類によって仕上がりイメージが結構違うので、あくまでも参考までにしておいた方が無難だろう。

(どうしても色にこだわりにある場合は、元々印刷用ソフトであるIllustratorが便利。)

用紙の確認。

印刷の場合は、紙質によって仕上がりイメージが違う。Webの場合でもモニターによって画質が違うように、印刷の場合は紙質に多くの種類がある。

たいていの印刷会社は、印刷用のサンプルとして紙見本、ペーパーカタログが用意されており、郵送での取り寄せが可能。

(有料、無料があるが、手元にあると事前にイメージがしやすい。)

Figma作成のPDFに対応しているかを事前にチェック。

PDF入稿に対応している印刷会社は多々ある。

印刷会社が用意している印刷用テンプレートには、Figmaのものはおそらくまだないか、もしあっても少ないと思われる。

なので、あらかじめ印刷会社のサイトや問い合わせでPDF入稿での注意点などを問い合わせておくと安心かもしれない。

PDF入稿の場合、トンボが不要ということもある。

要するに。
  • CMYK変換:オンラインツールで可能。
  • 用紙:ペーパーカタログで確認可能。
  • PDF入稿:入稿手順やトンボの有無など、印刷会社で確認。

Figmaで名刺デザイン。

前述の参考にさせていただいた記事では、ラクスルさんが対応していそうとのことだが、実際には試していないようだ。

自分もラクスルで注文することがあり、知人の印刷会社も良いのだが、今回は流れで長らく定期的にお世話になっているグラフィックさんに問い合わせた。提案を受けたグラフィックのWeb入稿システムを試してみたところ、いけそうな感じだった。

実際に入稿ができたら、後日続きをアップしようと思う。


補足:Figma作成データの入稿と、実際の仕上がり。

仕上がりました。

参考:Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお客さま対応のみでの利用とさせていただいております。
    • 社会的に正当な理由、法に基づいた理由がない限り、第三者へ開示することはありません。