メインコンテンツまでスキップ

エディタの基本操作

テンプレートを編集する画面（エディタ）の見方と、基本となる操作（拡大縮小・移動・選択・やり直し・グリッド）を覚えましょう。これさえ知っていれば、迷わずに作業を進められます。

画面の各部分​

エディタの画面は、大きく 3 つの場所に分かれています。

場所役割
左のサイドバーテキスト・画像・表など、テンプレートに置く道具が並んでいます
中央のキャンバス用紙そのもの。ここに道具を配置していきます
右のプロパティパネル選んでいるオブジェクトの設定（文字サイズ・色など）を変えられます

拡大縮小（ズーム）​

細かい部分を見たいときや、全体を見渡したいときに使います。

やりたいこと操作方法
拡大するCtrl + マウスホイールを奥に回す（Mac: Cmd + ホイール）
または 画面下部のツールバーの + ボタン を押す
縮小するCtrl + マウスホイールを手前に回す（Mac: Cmd + ホイール）
または 画面下部のツールバーの - ボタン を押す
全体表示に戻す画面下部のズーム表示部分（例: 100%）をクリックして 「全体表示」 を選ぶ
使い分けのコツ
  • キーボード操作が苦手な場合は、画面下部のツールバー の + / - ボタンを使うとマウスだけで拡大縮小できます。現在のズーム率（例: 100%）も同じ場所に表示されています。
  • 細かい位置合わせをするときは 150〜200% に拡大、全体のバランスを見るときは 50〜75% に縮小すると作業しやすくなります。

キャンバスの移動（パン）​

拡大して用紙の一部だけが見えている状態で、見たい場所に移動するための操作です。

  • Space キーを押しながらドラッグ すると、キャンバスを動かせます。
  • マウスのドラッグだけだと、誤って配置済みのオブジェクトを動かしてしまうので注意してください。

オブジェクトの選択​

配置したテキストや画像を編集するには、まず 選択 する必要があります。

やりたいこと操作方法
1 つだけ選ぶキャンバス上で クリック、または 右側の「オブジェクト一覧」 から選びたい項目（例: text1）をクリック
複数まとめて選ぶ何もないところからドラッグして囲む
追加で 1 つだけ選ぶShift を押しながらクリック
選択を解除するキャンバスの何もない場所をクリック、または Esc キー

選択中のオブジェクトは、青い枠と角の四角い印で示されます。選んでいる間は右のプロパティパネルで設定を変更できます。

オブジェクト一覧から選ぶと確実

オブジェクトが小さい・他のオブジェクトと重なっているなどでクリックしにくい場合は、画面右側の 「オブジェクト一覧」 タブから直接項目を選ぶと確実です。一覧には配置済みのすべてのオブジェクトが text1 image1 のような名前で表示されています。

やり直し（Undo / Redo）​

操作を間違えてしまっても、簡単に元に戻せます。

やりたいこと操作方法
ひとつ前に戻すキーボード Ctrl + Z（Mac: Cmd + Z）
または 画面下部のツールバーの戻る矢印（↶）ボタン
戻したのをやり直すキーボード Ctrl + Shift + Z（Mac: Cmd + Shift + Z）
または 画面下部のツールバーのやり直し矢印（↷）ボタン
下部ツールバーのやり直しボタン

画面下部のツールバーには 戻る（↶） / やり直し（↷） ボタンが用意されています。マウスでクリックするだけなので、キーボードショートカットを覚えなくても操作できます。戻れる操作がないときはボタンが薄く表示されます。

グリッドの表示​

オブジェクトをきれいに揃えて配置したいときは、グリッド（方眼） を表示すると便利です。グリッドの設定はすべて画面下部のツールバーから行います。

  1. 画面下部のツールバーの グリッドアイコン（格子状） をクリックします。
  2. 開くメニューで以下を切り替えできます:
    • グリッド表示: ON にするとキャンバスに方眼が表示されます。
    • グリッドに吸着: ON にするとオブジェクトをドラッグしたときに最寄りのグリッド線に揃います。
    • サイズ: グリッドの間隔（px）を変更できます（1〜100）。
位置合わせを楽にする設定

オブジェクトの位置をきっちり揃えたいときは 「グリッド表示 ON + グリッドに吸着 ON」 にすると、ドラッグ操作が最寄りのグリッド線にカクッと吸着するので、整った見た目を作りやすくなります。

編集内容は自動保存される？​

されます。編集中の内容は 自動的に保存 され、明示的に「保存」ボタンを押さなくても、しばらく経てばサーバー側に反映されます。

ただし、確実に保存しておきたい節目では、上部の 「保存」 ボタンを押してください。

✅ ここまでで身につけておきたいこと​

  • Ctrl + マウスホイールまたは下部ツールバーの + / - で拡大縮小できる
  • Space を押しながらドラッグでキャンバスを動かせる
  • クリックまたは右の「オブジェクト一覧」からオブジェクトを選べる
  • Ctrl + Z / Cmd + Z または下部ツールバーの戻る矢印で取り消せる
  • 下部ツールバーのグリッドアイコンからグリッド表示・吸着を切り替えられる

すべて当てはまれば、これからの作業を快適に進められます。

次のステップ​

操作の基本が身についたら、次は オブジェクトを追加する に進みましょう。実際にテンプレートに要素を配置していきます。