エディター画面の使い方
エディター画面って、どんな感じなの？
エディター画面は、サイトをデザインする作業スペースだよ！
まずは全体の構成を見てみよう。
エディター画面の構成
画面がいくつかに分かれてるね。
そうだね！ATOMZエディターは5つのエリアで構成されているんだ。
それぞれ役割が違うから、一つずつ見ていこう！
| エリア | 役割 |
|---|---|
| ツールバー(上部) | デバイス切り替え（PC / タブレット / スマホ）、プレビュー、公開、元に戻す/やり直し、プロジェクト設定 |
| レイヤーパネル(左) | ページ内の要素を階層構造で表示・管理 |
| キャンバス(中央) | 実際にデザインを編集する領域 |
| プロパティパネル(右) | 選択した要素のスタイルや設定を変更 |
| 要素パネル(下部) | テキスト、画像、ボタン、アイコンなど、ページに追加できる要素 |
5つのエリアがあるんだね！それぞれ詳しく見ていきたい！
それじゃあ、上から順番に一つずつ見ていこう！
ツールバー(上部)
上の方にあるボタンって何に使うの？
上部ツールバーには、よく使う機能が並んでいるよ！
| 機能 | 説明 |
|---|---|
| ATOMZアイコン | プロジェクト設定画面に遷移 |
| プロジェクト設定 | プロジェクト名の変更、ドメイン設定、SEO設定、外部サービス連携などの設定を開く |
| デバイス切り替え | PC / タブレット / スマホ表示の切り替え |
| 元に戻す/やり直す | 操作の取り消しとやり直し |
| ページ切り替え | 現在編集中のページ名を表示。クリックでページ一覧を表示し、別のページに切り替えたり、新しいページを追加できる |
| プレビュー | 実際の表示を確認 |
| 公開 | サイトを公開 |
特に「元に戻す」機能は便利だから、間違えても安心だよ！
ページの追加
新しいページってどうやって追加するの？
ページ名をクリックすると、ページ一覧が表示されるよ！
そこから「新しいページを追加」をクリックすればOK。
複数のページを作れるんだね！
レイヤーパネル(左)
左のレイヤーパネルって何に使うの？
レイヤーパネルでは、ページ内の要素を階層構造で見ることができるよ！
要素の親子関係が一目でわかるんだ。
複雑なデザインになってくると、レイヤーパネルがとても便利！
目的の要素をすぐに見つけられるよ。
キャンバス(中央)
中央のキャンバスって？
絵を描くキャンバスと同じ！
ここに要素を配置してサイトをデザインしていくんだ。
キャンバスでは、実際のサイトの見た目を確認しながら編集できるよ！
プロパティパネル(右)
右パネルには、どんな設定があるの？
要素を選択すると、右パネルに詳細な設定項目が表示されるよ！
スクリーンショットで見てみよう。
右パネルの主な設定項目
- サイズ（幅・高さ） - 要素のサイズを指定
- マージン - 外側の余白
- パディング - 内側の余白
- 角丸 - 角の丸み
- 塗り（背景色） - 要素の背景色
- 線（枠線） - ボーダーの設定
- 不透明度 - 透明度の調整
項目が多いね...どの順番で設定すればいいの？
要素パネル(下部)
下のツールバーから、いろんな要素を追加できるんだよね？
そうだよ！テキスト、画像、ボタンなど、いろんな要素が用意されているんだ。
クリックで選択したり、ドラッグ＆ドロップでキャンバスに配置できるよ！
アイコンの追加
アイコンも追加できるの？
ATOMZには、豊富なアイコンライブラリが統合されているよ！
アイコン(Material IconsやFontAwesome)を検索して、簡単に追加できるんだ。
キーボードショートカット
作業を早くする方法ってある？
キーボードショートカットを使えば、作業がグッと速くなるよ！
よく使うものを紹介するね。
| ショートカット | 機能 |
|---|---|
Cmd/Ctrl + Z | 元に戻す（Undo） |
Cmd/Ctrl + Shift + Z | やり直す（Redo） |
Cmd/Ctrl + C | コピー |
Cmd/Ctrl + V | ペースト |
Cmd/Ctrl + D | 複製 |
Delete / Backspace | 削除 |
Space + ドラッグ | キャンバスを移動（パン） |
Cmd/Ctrl + マウスホイール | ズームイン/アウト |
次のステップ
エディター画面、だんだんわかってきた！