エディタの基本操作
デザインを編集する画面（エディタ）の見方と、基本となる操作（拡大縮小・移動・選択・やり直し・グリッド）を覚えましょう。これさえ知っていれば、迷わずに作業を進められます。
画面の各部分
エディタの画面は、大きく 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）または 画面下部のツールバーのやり直し矢印（↷）ボタン |
画面下部のツールバーには 戻る（↶） / やり直し（↷） ボタンが用意されています。マウスでクリックするだけなので、キーボードショートカットを覚えなくても操作できます。戻れる操作がないときはボタンが薄く表示されます。
グリッドの表示
オブジェクトをきれいに揃えて配置したいときは、グリッド（方眼） を表示すると便利です。グリッドの設定はすべて画面下部のツールバーから行います。
- 画面下部のツールバーの グリッドアイコン（格子状） をクリックします。
- 開くメニューで以下を切り替えできます:
- グリッド表示:
ONにするとキャンバスに方眼が表示されます。 - グリッドに吸着:
ONにするとオブジェクトをドラッグしたときに最寄りのグリッド線に揃います。 - サイズ: グリッドの間隔（px）を変更できます（1〜100）。
- グリッド表示:
オブジェクトの位置をきっちり揃えたいときは 「グリッド表示 ON + グリッドに吸着 ON」 にすると、ドラッグ操作が最寄りのグリッド線にカクッと吸着するので、整った見た目を作りやすくなります。
自動保存について
編集中の内容は 自動的に保存 されます。明示的に「保存」ボタンを押さなくても、しばらく経てばサーバー側に反映されます。
ただし、確実に保存しておきたい節目では、上部の 「保存」 ボタンを押してください。
✅ ここまでで身につけておきたいこと
Ctrl+ マウスホイールまたは下部ツールバーの+/-で拡大縮小できるSpaceを押しながらドラッグでキャンバスを動かせる- クリックまたは右の「オブジェクト一覧」からオブジェクトを選べる
Ctrl + Z/Cmd + Zまたは下部ツールバーの戻る矢印で取り消せる- 下部ツールバーのグリッドアイコンからグリッド表示・吸着を切り替えられる
すべて当てはまれば、これからの作業を快適に進められます。
次のステップ
操作の基本が身についたら、次は オブジェクトを追加する に進みましょう。実際にデザインに要素を配置していきます。