パソコン版デザイン編集マニュアル

PC
パソコン版 デザイン編集マニュアル

Windows・Mac のブラウザでの操作方法

このページでは、パソコンで名刺などのデザインを作成・編集する方法をご説明します。
スマートフォン・タブレットをお使いの方は、スマートフォン用の操作マニュアルをご覧ください。
推奨ブラウザ：Google Chrome／Microsoft Edge／Safari／Firefox の最新版※掲載している画面は一例です。商品によってテンプレートや表示される項目が異なります。赤い枠は説明のために付けたものです。画像をクリックすると拡大して表示できます。

目次
  1. ご注文までの流れ
  2. 編集画面を開く
  3. 編集画面の見かた
  4. 名刺情報を入力する
  5. 文字（テキスト）を編集する
  6. 画像（ロゴ・写真）を配置する
  7. 図形・背景色
  8. 選択・移動・拡大縮小・回転
  9. 整列・均等配置
  10. コピー・グループ化
  11. レイヤー（重なり順・ロック・削除）
  12. ガイド線（印刷範囲）
  13. 表面・裏面の編集
  14. フリーデザイン（向きの変更）
  15. PCに保存・読込
  16. デザインを完了してカートへ
  17. デザインの再編集・再注文
  18. ショートカットキー一覧
  19. 困ったときは
1ご注文までの流れ
  1. STEP 1商品ページで用紙・枚数などのオプションを選ぶ
  2. STEP 2デザインを作成・編集するを押す
  3. STEP 3編集画面でデザインを作成する
  4. STEP 4デザイン完了してカートへを押す
  5. STEP 5カートでプレビューを確認し、ご注文手続きへ

▲ 目次へ戻る

2編集画面を開く
  1. 商品ページで、用紙・枚数など必要なオプションを選択します。
  2. デザインを作成・編集するボタンを押すと、編集画面が開きます。
必須項目が未選択のため灰色になった「デザインを作成・編集する」ボタン
必須項目が未選択の間は、ボタンが灰色で押せません
押せるようになった「デザインを作成・編集する」ボタン
必須項目を選ぶと青色になり、押せるようになります
ボタンの下に表示される「※必須項目（○○）を選択すると、デザインを作成・編集できます。」の案内に従って選択してください。
価格（SKU）が複数ある商品は、ご希望の価格の行にあるボタンを押してください。

▲ 目次へ戻る

3編集画面の見かた
編集画面の全体。上部バー、左パネル、キャンバス、右パネルの配置
編集画面の全体（①〜④は下の表を参照）
① 上部バー 編集中の面の表示・切替、元に戻す／やり直す、PCへの保存・読込、編集の中止（キャンセル）と完了（デザイン完了してカートへ）を行います。
② 左パネル 文字・画像・図形の追加などのツールです。各項目の見出しをクリックすると開閉でき、開閉状態は次回も記憶されます。
③ キャンバス デザインを編集する場所です。右下の＋－で表示を拡大・縮小、100%で元の大きさに戻します（印刷サイズは変わりません）。
④ 右パネル 選択中のオブジェクト（文字・画像・図形）の色やフォントなどを変更する「プロパティ」と、重なり順を管理する「レイヤー」です。
キャンセルを押すと編集画面が閉じます。作成途中のデザインを残したい場合は、先にPCに保存してください。

▲ 目次へ戻る

4名刺情報を入力する
  1. 左パネルの「名刺情報入力」に、会社名・役職・氏名・ふりがな・郵便番号・住所・電話番号・FAX・携帯番号・メールアドレス・URL を入力します。
  2. デザインに反映を押すと、デザイン内の該当する文字が入力内容に置き換わります。
名刺情報入力欄に入力し、デザインに反映した画面
入力して「デザインに反映」を押すと、デザインの文字が置き換わります
・空欄の項目は反映されず、テンプレートの文字がそのまま残ります。不要な項目は、キャンバス上で選択して削除してください（削除の方法）。
・両面印刷の場合、入力内容は表面・裏面の両方に反映されます。
・フリーデザイン（白紙）や、ご自分で追加した文字には反映されません。直接文字を編集してください。

▲ 目次へ戻る

5文字（テキスト）を編集する
文字を追加する
＋ テキスト追加
文字を書き換える
  1. 書き換えたい文字をダブルクリックすると、入力できる状態になります。
  2. 文字を入力・修正します。Enterで改行できます。
  3. キャンバスの空いている場所をクリックすると確定します。
氏名の文字をダブルクリックして編集中の状態
ダブルクリックすると文字が入力できる状態になります（文字が青く選択された状態）
フォント・文字サイズなどを変える
文字を選択し、右パネルにプロパティが表示された画面
文字を選択すると、右パネルにフォント・文字サイズなどが表示されます
フォント 書体を選びます。
文字サイズ 数値で文字の大きさを指定します。
字間 文字と文字の間隔です（10きざみ。マイナスで詰まります）。
行間 複数行の行の間隔です（0.1きざみ）。
太字 チェックで太字になります。
行揃え left（左揃え）／center（中央揃え）／right（右揃え）
縦書き チェックで縦書きになります。縦書きの文字をダブルクリックすると、編集中だけ横書きで表示され、確定すると縦書きに戻ります。
塗り色 文字の色です。
線色・線幅・線あり 文字のフチ取りです。「線あり」にチェックすると線が付きます。
透明度 スライダーで透け具合を調整します（100%＝不透明）。
文字をドラッグで一部だけ選択した状態でも、フォント・太字の変更は文字全体に反映されます。
複数の文字をまとめて選択（またはグループ化）すると、フォントや文字サイズを一括で変更できます。

▲ 目次へ戻る

6画像（ロゴ・写真）を配置する
  1. 左パネル「オブジェクト追加」の＋ 画像配置を押します。
  2. パソコン内の画像ファイル（JPEG・PNG など）を選択すると、キャンバスに配置されます。
  3. 配置直後は小さめに表示されます。画像の四隅の■をドラッグして大きさを調整してください。
ロゴ画像を配置し、選択している画面
配置した画像（右下のロゴ）。四隅の■で大きさを調整します
・きれいに印刷するため、できるだけ解像度の高い画像をご用意ください。小さな画像を大きく拡大すると、ぼやけて印刷されます。
・背景を透明にしたロゴは、透過PNG形式をおすすめします。
・画像の端まで印刷したい場合は、塗足し範囲の端まで配置してください。

▲ 目次へ戻る

7図形・背景色
図形を追加する
□ 四角形○ 円△ 三角形／ 線
図形追加のボタンと、円を選択してプロパティを表示した画面
左パネル「図形追加」と、図形を選択したときのプロパティ
塗り色／塗りあり 図形の内側の色です。「塗りあり」のチェックを外すと、塗りなし（枠線だけ）になります。
線色／線幅／線あり 枠線の色と太さです。「線あり」のチェックを外すと枠線が消えます。
透明度 図形の透け具合です。
背景色を変える
塗足し範囲

▲ 目次へ戻る

8選択・移動・拡大縮小・回転
選択 オブジェクトをクリックします。右パネル「レイヤー」の一覧をクリックしても選択できます。
複数選択 Shiftを押しながらクリック、またはキャンバスの空いている場所からドラッグして範囲で囲みます。
選択解除 キャンバスの空いている場所をクリックします。
移動 ドラッグします。細かく動かすときは矢印キー（↑↓←→）で1ずつ、Shift＋矢印キーで10ずつ移動します。
拡大・縮小 選択枠の四隅・各辺の■をドラッグします。
回転 選択枠の上に出る●をドラッグします。

▲ 目次へ戻る

9整列・均等配置
複数の文字を選択し、左パネルの整列と編集操作を開いた画面
複数選択した状態（電話番号など4行）と、左パネルの「整列」「編集操作」
⇤ 左／↔ 中／⇥ 右 横方向の位置（左端・中央・右端）を揃えます。
⤒ 上／↕ 中／⤓ 下 縦方向の位置（上端・中央・下端）を揃えます。
⇔ 横均等／⇕ 縦均等 3つ以上選択したオブジェクトを、選択範囲の中で等間隔に並べます。
・1つだけ選択している場合は、デザイン（用紙）全体に対して揃えます。例：「↔ 中」で用紙の左右中央に配置。
・複数選択している場合は、選択した範囲の中で揃えます。

▲ 目次へ戻る

10コピー・グループ化
コピー・貼り付け
📄 コピーCtrlC📋 貼り付けCtrlV
グループ化・グループ解除
  1. 2つ以上のオブジェクトを選択し、▣ グループ化（Ctrl＋G）を押します。
  2. 解除する場合は、グループを選択して▢ グループ解除（Ctrl＋Shift＋G）を押します。
グループを選択した状態でプロパティ（色・フォントなど）を変更すると、グループ内のすべてのオブジェクトに反映されます。

▲ 目次へ戻る

11レイヤー（重なり順・ロック・削除）
上にあるもの（前面）から順に
レイヤー一覧。背景画像がロックされ、鍵のアイコンが赤くなっている
ロック中のオブジェクトは鍵のアイコンが赤くなり、名前が薄く表示されます
↑ 前面へ 選択中のオブジェクトを1つ手前に移動します。
↓ 背面へ 選択中のオブジェクトを1つ奥に移動します。
削除 選択中のオブジェクトを削除します。Deleteキー／BackSpaceキーでも削除できます。
🔒 ロック 一覧の右端にある鍵のアイコンを押すと、そのオブジェクトを選択・移動できないように固定します。背景の写真など、うっかり動かしたくないものに便利です。もう一度押すと解除されます。
ロック中のオブジェクトはキャンバス上でクリックしても選択されません。編集したいときは、先にレイヤー一覧の鍵アイコンでロックを解除してください。
ロックは編集画面での操作のためのもので、印刷には影響しません。

▲ 目次へ戻る

12ガイド線（印刷範囲）
ガイド線は編集画面だけの表示で、印刷されません。
塗足し範囲 背景色や写真は、この端まで配置してください。外周は断裁で切り落とされます。
印刷範囲 仕上がりのサイズです。
印刷補償範囲 文字・ロゴなど切れてはいけない要素は、この内側に配置してください。
左パネルのガイドを開き、塗足し範囲・印刷範囲・印刷補償範囲の説明が表示された画面
左パネル「ガイド」に、各範囲の線の色とサイズが表示されます
断裁時にはわずかなズレが生じることがあります。印刷補償範囲の外側にある文字は切れてしまう場合がありますので、ご注意ください。

▲ 目次へ戻る

13表面・裏面の編集
表面裏面
  1. 商品によって、上部バーの「裏面印刷あり」にチェック、または「裏面印刷：」の選択欄から裏面の種類を選びます。
  2. 裏面を押すと、裏面の編集に切り替わります。編集中の面は「デザイン編集（裏面）」のように表示されます。
  3. 表面を押すと表面に戻ります。表面・裏面の編集内容はそれぞれ保持されます。
裏面印刷を選び、裏面の編集に切り替えた画面
裏面印刷を選ぶと「裏面」ボタンが表示されます（裏面は白紙から作成できます）
・裏面印刷を「なし」に変更しても、作成中の裏面デザインは保持されます（印刷はされません）。
・裏面印刷の選択は、商品ページのオプションにも自動で反映されます。料金が変わる場合がありますので、カートで金額をご確認ください。

▲ 目次へ戻る

14フリーデザイン（向きの変更）
横向き縦向き

▲ 目次へ戻る

15PCに保存・読込
  1. 上部バーの💾 PCに保存を押すと、デザインデータ（.json ファイル）がダウンロードされます。
  2. 続きを編集するときは、編集画面を開いて📂 読込を押し、保存したファイルを選択します。
上部バーの元に戻す・やり直す・PCに保存・読込・デザイン完了してカートへボタン
上部バー：左から「元に戻す」「やり直す」、「PCに保存」「読込」、右端が「デザイン完了してカートへ」
・両面のデザインは、表面・裏面がまとめて保存されます。
・保存したファイルは、同じ商品（同じサイズ）の編集画面で読み込んでください。

▲ 目次へ戻る

16デザインを完了してカートへ
  1. デザインが完成したら、上部バー右のデザイン完了してカートへを押します。
  2. 「保存中…」と表示された後、カート画面に移動します。
  3. カートに表示されるデザインプレビュー（両面の場合は表面・裏面）で、内容をご確認ください。
カート画面のデザインプレビューと、デザインを再編集するボタン
カート画面のデザインプレビュー。修正する場合は「デザインを再編集する」を押します
両面印刷の場合、次の確認が表示されることがあります。
・裏面印刷の種類が未選択：上部の「裏面印刷」から選択してください。
・裏面を一度も表示していない：自動で裏面が表示されますので、内容を確認して、もう一度デザイン完了してカートへを押してください。
・裏面が白紙：このまま進むか確認されます。裏面を作成する場合は「キャンセル」を押して編集してください。
「デザインを保存できませんでした」と表示された場合も、編集中のデザインはそのまま残っています。通信状態をご確認のうえ、もう一度デザイン完了してカートへを押してください。

▲ 目次へ戻る

17デザインの再編集・再注文
カートから修正する
デザインを再編集するデザイン完了してカートへ
ご注文内容の確認画面から再編集した場合、完了後はカート画面に戻ります。お手数ですが、もう一度ご注文手続きへお進みください（ご入力済みのお客様情報は保持されます）。
過去の注文から再注文する（会員の方）
  1. ログインして、マイページの購入履歴を開きます（二段階認証を設定している場合は、パスワードの後に確認コードを入力します）。
  2. 商品のデザインを再編集するを押すと、前回のデザインとオプションが読み込まれた状態で編集画面が開きます。
  3. 必要に応じて修正し、デザイン完了してカートへで再注文できます。
マイデザインから編集する（会員の方）
  • 再編集する：編集画面を開いて続きを編集します。
  • SVGダウンロード：デザインデータをダウンロードします（両面の場合は表面・裏面）。
  • 削除：デザインを削除します（元に戻せません）。
状態が「編集中（下書き）」はまだ注文していないデザイン、「注文済み」はご注文済みのデザインです。
保存されたデザインデータは、一定の保存期間を過ぎると自動で削除される場合があります。大切なデザインはPCに保存しておくことをおすすめします。

▲ 目次へ戻る

18ショートカットキー一覧
Ctrl⌘ command
操作 キー
元に戻す Ctrl＋Z
やり直す Ctrl＋Y または Ctrl＋Shift＋Z
コピー Ctrl＋C
貼り付け Ctrl＋V
グループ化 Ctrl＋G
グループ解除 Ctrl＋Shift＋G
削除 Delete または BackSpace
移動（1ずつ） ↑↓←→
移動（10ずつ） Shift＋↑↓←→
複数選択 Shift＋クリック
文字の編集 文字をダブルクリック

▲ 目次へ戻る

19困ったときは
「デザインを作成・編集する」ボタンが押せない
必須のオプションが選択されていません。ボタンの下の案内に表示されている項目を選択してください。
オブジェクトをクリックしても選択できない
ロックされている可能性があります。右パネル「レイヤー」の一覧で鍵のアイコンを押してロックを解除してください。
「デザインに反映」を押しても文字が変わらない
空欄の項目は反映されません。また、ご自分で追加した文字やフリーデザインの文字には反映されませんので、文字をダブルクリックして直接編集してください。
文字を編集中に Delete キーを押しても文字全体が消えない
文字の編集中は、Delete／BackSpace キーは1文字ずつの削除になります。文字全体を削除する場合は、空いている場所をクリックして編集を終えてから、文字を選択して削除してください。
フォントが変わらない・表示がおかしい
フォントの読み込みに時間がかかる場合があります。少し待ってから、もう一度フォントを選び直してください。
間違えて削除・変更してしまった
上部の↶ 元に戻す（Ctrl＋Z）で、操作を取り消せます。
「デザインを読み込み中です」と表示される
デザインの読み込みが完了していません。少し待ってから、もう一度お試しください。
「デザインのデータ容量が大きすぎる」と表示される
配置した画像のファイルサイズが大きすぎる可能性があります。画像を小さく（圧縮）してから配置し直すか、使用する画像の数を減らしてください。
ガイド線は印刷されますか？
印刷されません。ガイド線は編集画面だけの表示です。

▲ 目次へ戻る

« 操作マニュアルのトップへ　｜　スマートフォン用マニュアル ›