デザインの編集

デザインテンプレートを選択するとデザイン編集画面に移動します。ここではテンプレートの上に「文字を入れる」「写真を入れる」「線を引く」「加工を入れる」など、デザインを自由に編集することができます。シンプルでわかりやすい表現、使いやすいボタン配置、デザインが苦手な方をサポートする便利な機能を備えた【クイックデザインONLINE】オリジナルの編集画面です。

重要なお知らせ

  • 編集したデザインを保存する際は、画面右下の 保存して確認画面へ進む をクリックしてください。
  • ※ クリックすると編集中のデザインが自動的に「デザインBOX」へと保存されます。

    ※「保存して確認画面へ進む>」をクリックすると、テンプレートを変更する(選びなおす)ことはできません。

メニューバーの「デザインBOX」ボタン、画面上部の「保存」ボタンは次回Webサイト更新時に反映する予定です。しばらくはご迷惑をおかけいたしますが、上記の方法にてデザイン編集画面をご利用いただきますようお願い申し上げます。

デザイン編集画面  
マウスをのせると簡単な解説が表示され、クリックすると詳細な説明をご覧いただけます

デザイン編集画面 メニューバー 保存・表示 背景デザイン コピーと削除 文字を入れる 文字を整える 文字を囲む 線を引く 写真を入れる 加工を入れる デザインテンプレート デザインスケール 前後ページ

デザインテンプレート

デザインを編集する際のベース(土台)となる「背景のデザイン」です。デザインテンプレートの内側3mmの範囲であれば、文字や写真などを自由に配置することができます。

デザインスケール

デザインテンプレートの左上の角を基準点として、印刷物のタテヨコの長さをミリ単位で示す定規のようなものです。画面表示を拡大縮小すると、デザインスケールも拡大縮小されます。

メニューバー  
編集画面から別のページへ移動したり、別のページを呼び出します

TOPページ

編集中のデザインを保存したあと、【 クイックデザインONLINE 】のトップページに移動します。

TOPページへのボタン

デザインBOX

編集中のデザインを保存したあと、【 ネット印刷のキングプリンターズ 】のデザインBOXに移動します。

  • 編集したデザインを保存する際は、画面右下の 保存して確認画面へ進む をクリックしてください。
  • ※ クリックすると編集中のデザインが自動的に「デザインBOX」へと保存されます。

    ※「保存して確認画面へ進む>」をクリックすると、テンプレートを変更する(選びなおす)ことはできません。

メニューバーの「デザインBOX」ボタン、画面上部の「保存」ボタンは次回Webサイト更新時に反映する予定です。しばらくはご迷惑をおかけいたしますが、上記の方法にてデザイン編集画面をご利用いただきますようお願い申し上げます。

写真フォルダ

編集に使用する写真やイラスト、ロゴや地図の画像を保存しておく【 写真フォルダ 】を開きます。

写真フォルダへのボタン

校正用PDF

デザインの校正用として、ご家庭やオフィスのプリンタで出力することができるPDFファイルをダウンロードします。校正用となりますので、デザインの上に「クイックデザインONLINE 校正用」という文字が入っています。

校正用PDFへのボタン

デザイン例を表示する

制作事例(デザイン例)のページを表示します。全体のレイアウト、キャッチコピーの文言、文字の大きさやバランス、写真の使い方など、デザインに迷ったときはぜひ参考にしてください。

デザイン例へのボタン

保存・表示  
保存、戻る、進むといった時系列、画面表示に関する操作を行います

最初からやり直す

画面に表示されている(選択済みの)テンプレートを使って、デザインの編集を最初からやり直します。

最初からやり直すボタン

1つ戻る

最後に行った動作の前の状態に戻ります。もう一度クリックすると、さらにひとつ前の状態に戻ります。

前に戻るボタン

1つ進む

「1つ戻る」をクリックして戻った分だけ、1クリックごとに次の状態に進むことができます。

次に進むボタン

保存

編集中のデザインを【 デザインBOX 】に保存します。保存した後は、保存する前の状態に戻ることはできません。

  • 編集したデザインを保存する際は、画面右下の 保存して確認画面へ進む をクリックしてください。
  • ※ クリックすると編集中のデザインが自動的に「デザインBOX」へと保存されます。

    ※「保存して確認画面へ進む>」をクリックすると、テンプレートを変更する(選びなおす)ことはできません。

メニューバーの「デザインBOX」ボタン、画面上部の「保存」ボタンは次回Webサイト更新時に反映する予定です。しばらくはご迷惑をおかけいたしますが、上記の方法にてデザイン編集画面をご利用いただきますようお願い申し上げます。

画面表示

編集中のデザインを拡大・縮小して表示します。100%(全体表示)をクリックすると画面いっぱいに表示します。

拡大、縮小ボタン

背景デザイン  
背景となるテンプレートを別のカラーやデザインパターンに差し替えます

ワンクリックで背景のデザインを差し替えることができます。カラーバリエーションやデザインパターンをはじめ、金券においては金額の部分だけを変更したり、DMはがきにおいては切手枠のデザインを変更することも可能です。用途別のチラシ、大人用と子供用のチケット、金額が異なる金券をデザインする際にたいへん便利な機能です。

最背景デザインの選択

「金券・ギフト券」の背景デザインについて

「金券・ギフト券」の背景デザインから選択できる「金額」につきましては、大きさを変えたり(拡大・縮小)、配置する場所を変える(動かす)ことができます。拡大・縮小する手順は通常の文字(テキストボックス)と同じですが、金額を動かす際はテキストボックス内の数字の上にカーソルをあわせる必要がございますのでご注意ください。

✕ 0(ゼロ)の真ん中にある空白にカーソルを合わせても反応しません。

◯ 0(ゼロ)の数字を描く「線」にカーソルを合わせると反応します。

カーソルを合わせる

文字を入れる  
文字や文章をテンプレート上に配置します

枠内に文字や英数字を入力して「ヨコに配置」「タテに配置」いずれかをクリックすると、編集画面の中央に配置します。配置された直後は【テキストボックス】と呼ばれる赤い枠に入っていますが、別の場所をクリックすると赤い枠が消えて印刷される文字だけが残ります。【テキストボックス】単位で「文字を整える」「文字を囲む」ことが可能です。

文字を入れる

目的や用途に応じて「短文モード」「長文モード」をお選びください

■短文モード

入力した文字列を「1行」で配置します。
文字や単語、短いフレーズごとに色や大きさを変えたい場合に適しています。

最適な用途:タイトル/見出し/キャッチコピー/アドレス情報/日時/料金 など

短文モードイメージ

■長文モード

入力した文字列をテキストボックス内に収めて配置します。
長い文章を長方形の枠内に整えて、デザイン上に配置したい場合に適しています。

最適な用途:案内文/解説文/人物のプロフィール/リードコピー/お客様の声 など

長文モードイメージ

テキストボックスとは?

文字を選択すると表示される「文字情報が入っている箱」だとお考えください。選択されていない状態でマウスをのせると水色に変わり、そのままクリック(選択)すると赤い枠が表示されます。「文字を整える」「文字を囲む」の操作はテキストボックス単位となりますので、「ボックス内の数字だけ拡大する」「箇条書きの1行目だけ書体を変更する」など、ボックス内の文字や文章を部分的に編集することはできません。

テキストボックスの画像
長文テキストボックスの画像
文字を修正する方法

修正したい文字を選択すると画面右側の「文字を入れる」の枠内に選択した文字内容が表示されますので、そこで文字の修正を行ってください。修正した後、スグ下の「変更を適用する」ボタンをクリックするとテンプレート上の文字が修正されます。

文字をアクティブ
文字を修正
文字を拡大・縮小する方法

文字が選択された状態で、テキストボックスの4辺中央と4角にある「□」にマウスをのせると「リサイズ」という文字が現れ、それをクリックしたまま外側に動かすと拡大、内側に動かすと縮小することができます。キーボードの「shift」を押しながら同じ動作を行うと、文字をタテ長やヨコ長に変化させることが可能です。

文字を拡大・縮小する方法

■長文モードの場合

入力した文字がテキストボックスに収まりきらない場合は「文字数超過」が表示されます。
その際は、「テキストボックスを拡大」「文字を小さくする」など調整してください。

長文モードイメージ
文字を斜めに配置する方法

文字が選択された状態で、テキストボックスの少し上にある「◯」にマウスをのせると「回転」という文字が現れ、クリックしたまま左右に動かすと【テキストボックス】の中央にある「✕」を支点に文字を傾ける(斜めに配置する)ことができます。

文字を斜めに配置する方法

文字を整える  
書体や大きさ、色や間隔などを調整します

文字の書体をはじめ、大きさや色、字間や行間を調整(変更)することができます。また、箇条書きした文字や文章などをヨコに配置した場合は左右に揃えたり、タテに配置した場合は上下に揃えることが可能です。整えたい文字を選択し、テキストボックスを表示した状態で操作を行ってください。

文字を整える
① 書 体  : 厳選された28種類の書体を自由に使うことができます。書体の種類は「使える書体」にてご確認ください。
② 大きさ  : 上下の矢印で1ポイントずつ文字の大きさを変えたり、数値を入力して指定の大きさに変更することができます。
③ カラー  : カラーパレットの中からお好みのカラーをクリックすると、ボックス内の文字の色を変更することができます。
④ 字 間  : 上下の矢印で字間を広げたり縮めたりすることができます。数値を入力して指定の間隔に設定することも可能です。
⑤ 行 間  : 上下の矢印で行間を広げたり縮めたりすることができます。数値を入力して指定の間隔に設定することも可能です。
⑥ ヨコ揃え : 箇条書きの文字や文章をヨコに配置した際、「左揃え・中央揃え・右揃え」に変更することができます。
⑦ タテ揃え : 箇条書きの文字や文章をタテに配置した際、「上揃え・真中揃え・下揃え」に変更することができます。

■長文モードの揃え位置

長文モードで文字を配置した場合は、強制的に「ヨコ揃え→左揃え」「タテ揃え→上揃え」となりますので、「⑥ヨコ揃え ⑦たて揃え」を任意で変更することができません。あらかじめご了承くださいませ。

長文モードイメージ

■長文を配置する場合

文字の入力欄の右下の印を下方向にドラッグして、入力した文字を全て表示させることができます。

文字を入れる

文字を囲む 

テキストボックスから外側2mmの範囲に【テキストフレーム】と呼ばれる線や塗(ぬり)の枠を配置することができます。囲みたい文字を選択してから、フレームを線で表現する場合は「線で囲む」を、塗で表現する場合は「背景を塗る」をクリックしてください。配置された【テキストフレーム】は【テキストボックス】とは関係なく大きさや形を変えることが可能です。

文字を囲む

テキストフレームとは?

「文字を囲む外枠」だとお考えください。選択されていない状態でマウスをのせると水色に変わり、そのままクリック(選択)すると赤い枠が表示されます。配置した直後は【テキストボックス】と【テキストフレーム】両方が赤く選択された状態となっておりますが、別の場所をクリックすると赤い線が消えて印刷される文字とフレームが残ります。【テキストフレーム】は【テキストボックス】とは個別に選択することができるため、フレームの大きさや形を変えたり、新たに作成した【テキストボックス】をフレーム内に配置することも可能です。

※ 線の種類や太さ、カラーを選択してから文字を囲むこともできます。

テキストフレームを拡大・縮小する方法

内側の赤い枠が【テキストボックス】、外側の赤い枠が【テキストフレーム】です。

テキストフレームを拡大・縮小する方法

テキストフレームを拡大・縮小する方法

テキストフレームを拡大・縮小する方法

フレームを選択した状態で、赤い枠の4辺と4角にある「□」にマウスをのせると「リサイズ」という文字と矢印が現れます。「□」をクリックしたまま矢印の方向に動かすとフレームの形や大きさを自由に変えることができます。

テキストフレームを拡大・縮小する方法
テキストフレームを斜めに配置する方法

フレームを選択した状態で、テキストフレームの少し上にある「◯」にマウスをのせると「回転」という文字が現れ、クリックしたまま左右に動かすと中央にある「✕」を中心にフレームを傾ける(斜めに配置する)ことができます。

テキストフレームを拡大・縮小する方法
線の太さと種類 : 線で囲んだ場合、3種類の線✕3段階の太さ=計9パターンの
線から自由に変更することができます。
ナンバリング
角を丸くする  : 【テキストフレーム】の4つの角を丸くします。丸(半径)の
度合いを調整することもできます。
ナンバリング
線や塗のカラー : 【テキストフレーム】の線や塗枠の色を変更することができます。
カラーパレットからご選択ください。
カラーパレット

線を引く 

「ヨコ線を配置」「タテ線を配置」いずれかをクリックすると、編集画面の中央にヨコ線、タテ線が配置されます。配置された直後は選択された状態(赤い線)ですが、別の場所をクリックすると印刷される線だけが残ります。配置された線の種類や太さ、カラーを変更することも可能です。※ 線の種類や太さ、カラーを選択してから文字を囲むこともできます。

線を引く
線の太さと種類 : 線で囲んだ場合、3種類の線✕3種類の線 ✕ 3段階の太さ=計9パターン
の線から自由に変更することができます。
ナンバリング
線のカラー   : カラーパレットの中からお好みの色に変更することができます。
カラーパレット
線の長さを変える方法

選択された状態か、線の両端にある「□」にマウスをのせると「リサイズ」とう文字と矢印が現れますので、「□」をクリックしたまま矢印の方向に動かすと線を伸ばしたり縮めたりすることができます。

線を拡大、縮小する方法
線を斜めに配置する方法

選択された状態から線の少し上にある「◯」にマウスをのせると「回転」という文字が現れ、クリックしたまま上下(左右)に動かすと左端(上部)にある「✕」を支点に線を傾ける(斜めに配置する)ことができます。

先を斜めに配置する方法

写真を入れる  
写真やロゴ、イラストなどをテンプレート上に配置します

写真やイラスト、ロゴマークや地図などの画像ファイルをアップロードして、テンプレート上に配置することができます。配置された写真は大きさを変えたり、四角や円形に切り抜くことも可能です。いちどアップロードされた画像ファイルは【写真フォルダ】に保管され、デザインを編集する際にいつでもご利用いただけます。

デザイン編集画面

写真フォルダとは?

写真を保管しておくためのフォルダ(入れ物)です。デザインに使用した(アップロードした)写真は全て【写真フォルダ】に保管され、次回デザインする際にリストから選択していつでもご利用いただけます。必要のない写真や間違ってアップロードした写真を削除することも可能です。

アップロードできる
1ファイルあたりの容量 
最大20MBまで

アップロード可能な
ファイル形式      
jpg / jpeg / gif / png

新たに追加する
 〜 新規の写真(画像ファイル)をテンプレート上に配置する方法 〜

1)「新たに追加する」をクリックすると、【写真フォルダ】が開いて「写真アップロード」のタブが選択された状態となります。

写真を新たに追加する

2)パソコンのデスクトップにある写真をクリックしたまま「ここにファイルをドロップしてください」と書かれた点線の枠内にドラッグ&ドロップしてください。「ファイルを選択」をクリックすると、Finder(Mac)やエクスプローラー(Windows)が自動的に起動しますので、そこから使用する画像ファイルを選んでください。

ファイルを選択

3)枠内に使用する写真が表示されますので、間違いない場合は右下にある「アップロード」をクリック、キャンセルする場合は「キャンセル」をクリックして写真を選びなおしてください。

アップロード

4)印刷に適したサイズ(画像解像度)でテンプレートの中央に写真が配置されますので、お好みの場所に配置しなおしてください。配置された写真は自動的に【写真フォルダ】に保管されます。

写真の配置

リストから選ぶ
 〜【写真フォルダ】にある画像ファイルをテンプレート上に配置する方法 〜

1)「リストから選ぶ」をクリックすると、【写真フォルダ】が開いて「アップロードされた写真一覧」のタブが選択された状態となります。

写真をリストから追加する

2)テンプレート上に配置したい写真をクリックして、右下にある「配置する」をクリックすると、印刷に適したサイズ(画像解像度)でテンプレートの中央に写真が配置されます。

写真をリストから追加する
写真を拡大・縮小する方法

写真が選択された状態で、赤い枠の4辺の中央と4角にある「□」にマウスをのせると「リサイズ」という文字が現れ、それをクリックしたまま外側に動かすと拡大、内側に動かすと縮小することができます。キーボードの「shift」を押しながら同じ動作を行うと、写真をタテ長やヨコ長に変化させることが可能です。

写真を拡大・縮小する方法
写真を斜めに配置する方法

写真が選択された状態で、テキストボックスの少し上にある「◯」にマウスをのせると「回転」という文字が現れ、クリックしたまま左右に動かすと写真の中央にある「✕」を支点に傾ける(斜めに配置する)ことができます。

写真を回転する方法

切り抜く/大きさ 
〜 写真を切り抜いたり、大きさを変えたりする方法 〜

切り抜く:

正方形・長方形・円・楕円・六角形に写真を切り抜くことができます。切り抜いた写真を縮小・拡大したり、斜めに傾けることも可能です。

正方形・長方形に切り抜く方法

1回目のクリック → 切り抜きたい部分の「角(かど)」をクリックして「支点」を決めます。

2回目のクリック → 「支点」から対角線にマウスを動かして切り抜き範囲を確定させます。

正方形・長方形に切り抜く方法

これで切り抜きが完了です。
やり直したい場合は「1つ戻る」ボタンをクリックして同じ作業を行ってください。

円・楕円・六角形に切り抜く方法

1回目のクリック → 切り抜きたい部分の「中心」をクリックして「支点」を決めます。

2回目のクリック → 「支点」から斜め方向にマウスを動かして切り抜き範囲を確定させます。

円・楕円・六角形に切り抜く方法

これで切り抜きが完了です。
やり直したい場合は「1つ戻る」ボタンをクリックして同じ作業を行ってください。


大きさ:

写真を選択した状態で「大きさ」をクリックすると、拡大・縮小率を示すバーが現れますので、
ブルーのつまみをクリックしながら左右に動かして写真の大きさを調整してください。

写真が選択された状態で、赤い枠の4辺中央と4角にある「□」を外側にドラッグして拡大縮小する方法もございますが、拡大・縮小率(パーセンテージ)を見ながら大きさ変更する場合や、弊社が推奨する最大の拡大率(150%)に設定する場合はこちらの方法が便利です。

大きさ

コピーと削除  
文字や写真をコピーまたは削除します

コピー

選択した文字・線・写真などをコピーして、スグ右下に配置します。一度に複数の文字や写真を選択してからコピーすることも可能です。

文字や画像のコピー

削除

選択した文字・線・写真などを削除します。一度に複数の文字や写真を選択してから削除することも可能です。

文字や画像の削除

加工を入れる 

名刺の4角を丸くカットする、金券に偽造防止を目的とした箔押しライン(偽造防止箔線)を入れる、回数券にナンバリング印刷を追加するなど、印刷物に何らかの加工を加えることができます。追加できる加工は印刷物によって異なり、加工が選択できない印刷物もございます。

加工ボタン
ナンバリング : 5桁もしくは6桁の通し番号を印字します。
お好みの桁数をクリックして位置を指定してください。
ナンバリング
偽造防止箔線 : 偽造防止や高級感演出を目的とした箔押しのラインを入れる加工です。
9種類のラインからお好みの箔線をお選びください。
加工場所は固定となります。
偽造防止箔線
角 丸    : 名刺やショップカードの4角を丸くカットする加工です。
角丸の半径を「3・4・5・7mm」の4パターンからお選びいただけます。
一般的な名刺やカードは3〜4mmを、やわらかい印象を与えたい
名刺や小さいお子様向けのカードは5〜7mmがおすすめです。
角丸

デザインの階層(レイヤー)について

デザインの階層とは文字や写真、線や枠を重ねてデザインした際に表示される順番(何が上で何が下になるか?)です。【クイックデザインONLINE】ではこの階層が固定されています。(図式化した以下の画像をご覧ください)例えば「写真の上に文字を置く」ことはできますが、「塗り枠の上に写真を置く」ことはできません。なお「2種類の塗り枠を重ねる」「写真を2枚重ねる」「写真の上にイラストを置く」など同じ階層を重ねた場合は、最後に配置(アップロード)したものが上に表示(印刷)されます。

Photoshopのレイヤーについて

デザイン階層(レイヤー)の順番

加 工  : 「加工を入れる」を選択した際に現れる加工
文 字  : 「文字を入れる」から配置した文字や文章
 線   : 「線を引く」から配置したタテ線・ヨコ線
 枠   : 「文字を囲む」から配置した枠線や塗り枠
写 真  : 「写真を入れる」から配置した写真やロゴ
背 景  : デザインテンプレート(背景のデザイン)

前後ページ  
「テンプレート選択に戻る」「保存して確認画面へ進む」など、前後のページに移動します

写真を回転する方法

テンプレート選択へ戻る

今いるデザイン編集画面から、テンプレート選択ページへと戻ります。ページが移動するときに編集中のデザインデータが破棄されますので、これまで編集した内容を保存する場合は、ご面倒ですが画面右下にある【保存して確認画面へ進む】をクリックしていったん確認画面へとお進みいただき、編集中のデザインを保存してからあらためてテンプレート選択ページへとお戻りください。(※)

(※)デザイン編集画面の上部に【保存】ボタンを設置する予定です。ボタンが設置された後は【保存】→【テンプレート選択へ戻る】の順にクリックすると、編集中のデザインデータを保存した後にテンプレート選択ページへと戻ります。

保存して確認画面へ進む

編集中のデザインを保存した後、オモテ面とウラ面のデザインを確認する画面へと進みます。デザイン確認画面を経て引き続きウラ面のデザインを選択→編集したり、表と裏のデザインをチェックして印刷注文へと進んだり、再び表や裏のデザインを編集することができます。