Zazzleデザインツール 101 - デスクトップ版

Zazzle デスクトップ版デザインツールへようこそ！モバイル版またはアプリ版のヘルプ記事を読む場合は、こちらをクリックしてください。

デザインツールは、カスタマイズのための究極のリソースです。本記事はツールのデスクトップ版に焦点を当てており、その機能と操作を詳しく解説します。また、よくある作業の手順もステップごとに案内します。

 

この記事のセクションへジャンプ:

  1. ビデオ — デザインツールのツアーと招待状の作成
  2. 概要情報
  3. デスクトップデザインツールの各部
  4. ガイドライン
  5. デザインオブジェクトと基本操作

 

ビデオ — デザインツールのツアーと招待状の作成

 

概要情報

Zazzle デザインツールは、デスクトップブラウザ、モバイルブラウザ、Zazzleアプリで使用できます。最も快適で効率的に使うためには、デスクトップ版を推奨します。

  1. デザインツールへのアクセス方法 —
    • 既存デザインのある商品ページから —「このデザインをカスタマイズ」ボタンをクリックし、「デザインツールで編集」を選択します。
    • 自分で作成するかブランクの商品ページから —「デザインを追加」ボタンをクリックします。
  2. デザインツールの終了方法 —
    • デザインが完了したら、右上の「完了」ボタンをクリックして商品ページに戻ります。
  3. デザインの保存 —
    • ログイン済みの場合、変更内容はアカウント内の「保存済みデザイン」に自動保存されます。ログアウト中でも、同じブラウザでURLに戻ればデザインは残ります。

 

デスクトップデザインツールの各部

parts of design tool.png

 

トップバー

トップバーには、編集、協働、設定、保存などの主要操作へのショートカットが配置されています。「共有」や「完了」ボタンもここにあり、デザインの共有やツールの終了に使います。

  1. 編集 — コピー、貼り付け、すべて選択などの一般的なコマンドがあります。
  2. 協力 — デザインの共同編集用リンクを生成できます。
  3. 設定 — ツールの見た目や動作を変更できる追加オプションが見られます。
  4. ヘルプ — キーボードショートカット、ガイドライン情報、ヘルプセンターへのリンクが表示されます。
  5. 完了 — クリックするとデザインツールを終了します。
  6. シェア — 共同編集用のリンクを生成します。

左ツールバー

左側のツールバーは、画像、テキスト、図形の追加やレイヤー調整など、基本的なデザイン機能へのアクセスを提供します。デザイン作成・編集の出発点です。

  1. アップロード — 自分の画像をアップロードできます。「スマホからアップロード」ボタンで簡単にスマホ写真も追加可能です。
  2. テキスト — カスタムテキストを追加し、フォント、サイズ、色、配置を調整できます。
  3. 要素 — 図形やQRコードを追加できます。「QRコードを追加」ボタンでURL入力も可能です。
  4. アイコン — アイコン一覧から選んで追加します。
  5. 背景 — 背景画像のアップロード、色選択、提供背景の選択が可能です。
  6. 商品情報 — 商品説明、サイズ、寸法、素材など詳細を確認できます。
  7. レイヤー — 「表面」「裏面」などデザイン面を切り替え、各レイヤーの管理・編集が行えます。
  8. ヘルプ — キーボードショートカットや赤・青・緑のガイドライン線の説明が見られます。

デザインキャンバス

キャンバスは、デザインを配置・編集・確認するメインの作業画面です。リアルタイムでプレビューされます。

  1. デザインエリアラベル — キャンバス左上に「表面」「裏面」などが表示され、レイヤーパネルと切り替え可能です。
  2. トップツールバー — オブジェクト操作に使う共通ボタン群です。
    1. 元に戻す、やり直す — Ctrl+Z／Command+Z（取り消し）、Ctrl+Y／Command+Shift+Z（やり直し）で効率的に操作できます。
    2. 前方／後方 — オブジェクトの重なり順を調整します。
    3. タイリング — パターンやデザインをキャンバス全体に繰り返し配置します。
    4. 配置 — オブジェクトを正確に配置、均等分布するためのツールです。
    5. ガイドライン — 印刷範囲や表示範囲の確認用の目安線です。
    6. グリッドライン — 配置精度を高めるためのグリッド表示の切り替えです。
    7. グループ化 — 複数オブジェクトをまとめて一緒に操作できるようにします（2つ以上選択時に有効）。
    8. マスク — SVGと画像を組み合わせてマスク処理ができます（SVGと画像1点以上選択時に有効）。
  3. デザインエリア — オブジェクト操作を行う領域です。
  4. 凡例 — ガイドライン線についてのインタラクティブな説明が表示されます。
  5. ズームツール — キャンバス左下、凡例横にあり、細部デザインの拡大・縮小に便利です。

プロパティパネル

画面右側にあり、選択中オブジェクトのサイズ、色、配置など編集可能な設定を表示します。要素に応じた詳細カスタマイズが可能です。

 

プレビューウィンドウ

画面右下にあるダイアログで、製品上のプレビューを素早く確認できます。矢印で複数画像を切り替え、「–」ボタンで最小化できます。

 

ガイドライン

Guidelines.png

ガイドラインは、印刷または表示範囲にデザイン要素を正しく配置するのに役立つ視覚的目安です。印刷成果物を最良にするために、

  1. 断ち切りライン（赤線） — 印刷時のズレを考慮した余裕領域です。背景やパターンは必ずこの範囲まで広げて、不要な白い縁が出ないようにします。

  2. 可視線（青線） — 最終的に製品に確実に表示される範囲です。この範囲ギリギリに重要な要素を配置しないよう注意します。

  3. 安全領域（緑点線） — テキストやロゴなど重要な要素はこの内側に配置し、印刷後に切り取られないようにします。

 

デザインオブジェクトと基本操作

design objects.png

デザインオブジェクトは、テキスト、画像、図形、アイコンなど、デザインの構成要素です。以下はオブジェクト操作の概要です。

オブジェクトの基本操作

  1. オブジェクトの選択 — 選びたいオブジェクトをクリックします。
  2. 複数オブジェクトの選択 — クリック＆ドラッグで選択範囲を描くか、Shiftキーを押しながらクリックします。
  3. 選択解除 — キャンバス外のどこかをクリックして解除します。
  4. オブジェクトの移動 — 選択したオブジェクトをドラッグして移動します。
  5. 削除 — オブジェクトを選択後、Deleteキーを押すか右クリックから「削除」を選びます。
  6. 回転 — 選択したオブジェクトの回転ハンドルで角度を調整します。
  7. サイズ変更 — コーナーハンドルをドラッグして比率を保持して拡大・縮小。サイドハンドルで比率を無視して変更できます。
  8. 複製 — 右クリックで「複製」を選ぶか、ツールバーの複製オプションを使用します。
  9. グループ化／解除 —
    1. グループ化 — 複数オブジェクト選択後、「グループ」ボタンでまとめて編集しやすくします。
    2. グループ解除 — グループを選択し、「グループ解除」ボタンをクリックします。
    3. グループ編集 — グループをダブルクリックまたは「グループ編集」ボタンで、内部のオブジェクトを個別に操作できます。終了するにはグループ外をクリックします。

  10. 微調整配置 — キーボードの矢印キーでオブジェクトを少しずつ動かせます。

  11. オブジェクト属性 — 選択後は右のプロパティパネルで、色、サイズ、フォントなどをカスタマイズできます。