パッケージ・ラベルのモックアップ作成ツールツールを開く

使い方

パッケージ・ラベルのモックアップ作成ツールです。商品の大きさから箱の形と寸法を決め、展開図をダウンロードしてデザインし、画像を読み込んで立体で確認できます。

Google Chrome(PC版)Microsoft Edge でも使えます。タブレットは横向きで使えます(スマホ・タブレットの縦向きには対応していません)。Safari・Firefox では、データ連携(フォルダ連携)など一部の機能が使えません。

動画で見る約2分

使い方の手順

1

プロジェクトをつくる

▶ 動画で見る(0:00〜)

一覧の「新しいプロジェクト」から、プロジェクト名を入れて、つくるものを選びます。

  • 「用途から選ぶ」:食品・化粧品・アクセサリー・ギフトから、形と寸法の目安を選びます。「その他」は形の一覧へ進みます。
  • 「サイズ・形から選ぶ」:キャラメル箱・ワンタッチ底・かぶせ蓋(天地箱)・スリーブ+トレイ・組箱トレイから選びます。それぞれ、どんな商品に向いているかを書いています。
  • 「ラベルをつくる」:ワインボトル・四合瓶・細口ボトル・ジャム瓶・缶・化粧品ボトル・チューブから容器を選びます。
  • 箱とラベルは、1つのプロジェクトにいくつでも入れられます。「形状・デザイン」の上のタブで切り替え、「+ 追加」で増やし、× で削除できます(削除の前に確認します)。
2

商品の大きさから、箱の寸法を決める

▶ 動画で見る(0:12〜)

「形状・デザイン」の右のパネルを、上から順に決めていきます。

  • 1. 形状:箱の形を選びます。
  • 2. 中に入れる商品:商品の幅・奥行・高さ・重さを入れると、おすすめの内寸が出ます。「この内寸にする」でそのまま使えます。
  • 3. 内寸:寸法を細かく調整します。かぶせ蓋は上箱を下箱よりすき間の分だけ大きく、スリーブは中箱をスリーブより小さくします。
  • 4. カラー:紙の色を選びます。よく使う色のほか、カラーピッカーで自由に選べます。
  • おすすめ・メモ:すき間や重さに合わせた助言、上箱・中箱の寸法差、配送サイズ(60・80・100…)の目安を出します。「メモに入れる」で打ち合わせメモに書き込めます。
💡 寸法・形は打ち合わせ用の目安です。入稿の前に、印刷会社のテンプレートで確認してください。
3

展開図をダウンロードして、デザインする

▶ 動画で見る(0:36〜)

展開図の下の「展開図をダウンロード」から、Illustrator 用のスクリプト(.jsx)か、実寸のPDF(線だけ)を書き出します。

  • Illustrator の「ファイル → スクリプト → その他のスクリプト…」で .jsx を開くと、切り線・折り線・塗り足し・面の名前のレイヤーと、空の「デザイン」レイヤーができます。
  • 面の名前の「↑」が、その面の上の向きです(ふたや底の面は、展開図の上で逆さまになります)。
  • 塗り足しまで色をのばしておくと、立体の角まできれいに見えます。
4

デザインされた展開図を読み込んで、立体で確認する

▶ 動画で見る(0:47〜)

「デザイン」以外のレイヤーを隠して、アートボード全体を PNG か JPG で書き出し、「デザインされた展開図を読み込む」で読み込みます。

  • 展開図にデザインが重なり、「立体」に切り替えると各面に貼られた状態を確認できます。展開図の上に画像をドロップしても読み込めます。
  • 立体はドラッグで回転、ホイールで拡大します。「ふたを開ける」「中箱を引き出す」で開いた状態、「商品表示」で中に入れる商品の大きさを点線で確認できます。
  • 背景はふだんは白です。白い紙やデザインが見えにくいときは、グレー・黒も選べます。展開図の文字や線の色は、下の明るさに合わせて自動で変わります。
💡 寸法や形を変えると展開図の大きさも変わるため、読み込んだデザインはずれます(変える前に確認が出ます)。寸法を決めてから展開図をダウンロードしてください。
5

ラベルをつくる

▶ 動画で見る(1:15〜)

右のパネルで、容器・ラベルの形(長方形・角丸・楕円・円・上がアーチ・一周の帯)・大きさと位置・カラーを決めます。

  • デザインは箱と同じように、展開図(ラベルの型)をダウンロードして作り、画像で読み込みます。
  • 立体では、容器に巻いた形で確認できます。透明・銀のラベルも選べます。
6

共有モードでお客様に見せる

▶ 動画で見る(1:42〜)

右上の「▶ 共有モード」で、編集用の表示を隠したプレゼン用の画面になります。

  • 展開図と立体を切り替えて見せられます。背景は白・グレー・黒から選べます。
  • 「この立体を画像でダウンロード」で、いまの向きの商品だけを、背景なし(透過PNG)で保存できます。
7

まとめて書き出す

▶ 動画で見る(1:59〜)

「まとめ」で、アイテムごとの立体と展開図(左上のスイッチで切り替え)、仕様、配送の目安と、打ち合わせメモを一覧できます。

  • 立面図(PDF):斜め・正面・側面・上面の図と寸法・仕様。お客様に見せる資料に。
  • 展開図(PDF・.jsx):実寸。線だけの型と、デザイン入り。
  • 立体の画像(透過PNG):背景なしの立体。

よくある質問

料金はかかりますか?

無料です。登録やログインも不要で、ブラウザを開くだけで使えます。

このツールでデザインはできますか?

デザインは Illustrator などで作り、画像で読み込む使い方です。このツールは、寸法と展開図を決めて、デザインを立体で確かめるためのものです。

データや画像はどこに保存されますか?

お使いのブラウザ内にだけ保存され、サーバーには送信されません。Chrome・Edge では「データ連携」で選んだフォルダにも、画像を含めて自動で保存できます。

展開図はそのまま入稿に使えますか?

打ち合わせとデザインの目安です。紙の厚みや機械によって寸法が変わるため、入稿は印刷会社のテンプレートで確認してください。

紙の銘柄は選べますか?

紙の色だけを選べます。銘柄や質感は印刷会社と相談して決めてください。

商用利用はできますか?

できます。書き出したPDFや画像は、そのままお客様に提出できます。

機能のご要望や不具合のご報告は、お気軽にお寄せください。ご要望・お問い合わせ ↗