名刺デザインの提案はPDFより3Dで｜折り方・名刺ケースまでAIで完成イメージに

名刺やショップカードのデザインを提案するとき、PDF を送って「いかがでしょうか？」で終わっていませんか。

平らな PDF だと、受け取った人は 折ったらどの面が表に来るのか、名刺入れに入れたらどう見えるのか を、頭の中で組み立てるしかありません。とくに三つ折りの名刺は、面の並びが印刷のデータと実物で入れ替わるので、デザインした側でも分かりにくいところです。

そこで、AI（Claude Code）に頼んで、ブラウザで動かせる 3D の完成イメージ を作ってみました。折り方の順にひらいたり、名刺ケースに入れたり、机に置いたりできます。この記事では、架空のお店「ひだまりベーカリー」の見本を使って、できあがりと作り方を紹介します。

触れる見本：三つ折り名刺の 3D 完成イメージ

まずは実物を触ってみてください。スマホでも PC でも動きます。ドラッグで回せて、ホイールか 2 本指で拡大できます。

三つ折り名刺の 3D 完成イメージ（見本）を開く

操作している様子です。

折り方のとおりにひらける

三つ折り（縦型）の名刺は、表紙を上へめくる → 中の面を下へひらく の順でひらきます。3D の見本も、この順番どおりに動きます。

「裏表紙」のボタンで、閉じたときの裏側も見られます。三つ折りでは裏表紙の面を 上下逆さ にデータを作るので、正しく作れているかの確認にも使えます。

名刺ケースに入れたところ・机に置いたところ

名刺ケースに束で入れたところと、机の上に置いたところも用意しました。渡す場面や、店頭に置いた場面を想像してもらいやすくなります。

PDF だけより、3D の完成イメージがあると何がいいのか

実際に自分の名刺で作ってみて、よかったことは次の 3 つです。

1. 面の順番の取り違えに気づける 三つ折りは、印刷のデータの並びと、折ったときの並びが違います。裏表紙の面はデータでは逆さに入れますし、どの面とどの面が背中合わせになるかも、平らなデータでは見えません。折った姿で見ると、組み合わせがおかしくないかを、その場で確かめられます。
2. 相手が想像しなくていい 「この面をめくると、ここが出てくる」を説明しなくても、触れば分かります。デザインに詳しくない人ほど、平らな PDF より伝わりやすいと感じました。
3. URL で送れる アプリを入れてもらう必要はなく、リンクを送るだけです。LINE やメールで送れば、相手はスマホでそのまま触れます。

なお、3D の完成イメージは あくまでイメージ です。画面の色は印刷の色とは違って見えますし、紙の厚みや手ざわりまでは分かりません。最終の確認は、これまでどおり PDF や色校正で行います。

作り方：AI に何を渡したか

作ったのは、ブラウザで 3D を表示する three.js というライブラリを使った 1 枚の Web ページです（three.js の仕組みは「そもそもWebGLって何？」でまとめています）。コードは Claude Code に書いてもらいました（Claude Code については「Claude CodeはVS Code版で足りる？」で紹介しています）。

AI に渡したのは、次の 3 つです。

1. 表面と裏面のデザインを、仕上がりのサイズで書き出した画像（塗り足しやトンボは含めない）
2. 折り方の図（印刷会社のデータのテンプレートに載っている、どの面が表紙で、どの順にひらくかの図）
3. 寸法（三つ折りの縦型は、名刺 3 枚分をつなげた 91×163mm。どの面が何 mm か）

名刺の基本の大きさが 91×55mm で、三つ折りの縦型はそれを長い辺でつなげた 163×91mm になることは、印刷会社の説明にも書かれています。同じ説明には「内側に折り込む面は 2mm 短くする必要があります」ともあり、見本の 3 面が 55mm・55mm・53mm なのはこのためです。 出典：二つ折り名刺・三つ折り名刺｜名刺良品

AI への頼み方の例

三つ折り名刺（縦型・仕上がり 91×163mm）の完成イメージを、three.js で 1 枚の HTML にしてください。

・表面.jpg と 裏面.jpg は、仕上がりサイズで書き出したデザインです（上から 53mm・55mm・55mm の 3 面）
・折り方は添付の図のとおり：表紙を上へめくる → 中の面を下へひらく
・ボタンで「閉じる」「表紙をめくる」「全部ひらく」「裏表紙を見る」を切り替えられるように
・マウスのドラッグ・スマホの指で回せて、拡大縮小もできるように
・名刺ケースに束で入れた場面と、机の上に置いた場面も作ってください
・スマホでも PC でも、画面いっぱいに表示されるように

つまずいたところ

• 面の向き：三つ折りは、面ごとに表と裏の絵の向きが違います。最初は裏表紙が逆さに見えたので、「閉じて裏返したときに、裏表紙が正しい向きで読めるか」を確かめてもらいました。
• スマホで画面からはみ出す：PC では正しく見えたのに、高精細の画面（スマホなど）で見ると、3D の名刺が右下に大きくずれて切れていました。3D を描く枠の大きさを画面に合わせる指定が抜けていたのが原因で、AI に伝えるとすぐ直りました。スマホの実機でも必ず開いてみる のがおすすめです。
• 表と裏の組み合わせ：自分の名刺を入稿したとき、印刷会社（プリントパック）の入稿画面にある 3D の確認で見ると、表紙の裏に来るはずの面が、別の面の裏に来ていました。入稿画面の確認用の画像には、表面と裏面のどこが背中合わせになるかの印（Ⓐ と Ⓐ' など）が出ていて、それを見ると 表面の上と裏面の上が背中合わせ でした。テンプレートの図だけを見て作ると、ここを取り違えます。表面を 180° 回して作り直し、入稿画面の 3D で正しく折れることを確かめました。自分で作った 3D の完成イメージと、印刷会社の入稿画面の確認の両方で見る のが安心です。
• 完成イメージの更新：デザインを直したら、書き出した画像も差し替えないと、3D は古いままです。

まとめ

• 名刺の提案は、PDF に加えて 触れる 3D の完成イメージ を送ると、折ったときの姿や、使う場面が伝わりやすくなります。
• 作り方は、仕上がりサイズの画像・折り方の図・寸法 を AI に渡して、three.js のページにしてもらうだけです。
• 3D はあくまでイメージなので、色や紙の確認は PDF や色校正で行います。

三つ折りの名刺だけでなく、ショップカードやパンフレット、パッケージの提案にも使えます。今回の見本は こちら から触れるので、提案の参考にしてみてください。