エディターの概要
エディターでは、サイトをデザインして構築できます。中央のキャンバスでは、サイトが実際に動作します。左側のパネルでは、要素の追加、ページの管理、AI とのチャットができます。右側の編集パネルでは、選択した要素のスタイルを変更できます。
ツールバー
左から順に説明します。
- WebTwizz ロゴでロゴメニューを開きます。メニューには、ダッシュボードへ、ファイル、編集、バージョン履歴、サイトの設定、環境設定（ライト、ダーク、システムのテーマ）、ヘルプ（ドキュメントとキーボードショートカット）、アカウント設定があります。
- 参照と編集でキャンバスの操作モードを切り替えます。下の参照と編集をご覧ください。
- コード切り替え（
<>の切り替えボタン）でコードエディターを開きます。もう一度クリックするとキャンバスに戻ります。 - 幅メニュー（デバイスのアイコン）でキャンバスの幅を設定します。レスポンシブデザインをご覧ください。
- パスバーには、
/や/aboutなど、現在のページのパスが表示されます。クリックしてパスを入力すると、別のページに移動できます。バー内の更新ボタンでキャンバスを再読み込みします。 - 元に戻すとやり直す。
- プレビュー（目のアイコン）で新しいブラウザータブにサイトを開きます。プレビューと公開をご覧ください。
- 保存には、作業内容が保存されているかどうかが表示されます。すべて保存されるとチェックマークが表示され、クリックするとバージョン履歴が開きます。作業内容の保存をご覧ください。
- アップグレードは Free プランで表示されます。
- 公開で公開パネルを開きます。
設定またはデータを開いている間は、パスバーが非表示になり、ツールバーの右側にはプレビュー、アップグレード、公開だけが表示されます。
左サイドバー
左側に並ぶ各アイコンで、それぞれのパネルを開きます。
- 要素では、要素、レイアウト、コンポーネントを追加します。要素パネルをご覧ください。
- AI アシスタントでAI チャットを開きます。
- レイヤーには、ページ上のすべての要素がツリー形式で表示されます。レイヤーパネルをご覧ください。
- ページでは、ページの追加、名前の変更、整理ができます。ページパネルをご覧ください。
- データでは、コレクションとデータソースを管理します。データと CMSをご覧ください。
- 設定でサイトの設定を開きます。
開いているパネルのアイコンをもう一度クリックするか、⌘B / Ctrl+B を押すと、サイドバーを折りたためます。
キャンバス
キャンバスでは、実際のサイトが動作しています。変更はすぐに反映されます。
参照と編集
ツールバーの参照ボタンと編集ボタンでモードを切り替えます。
- 参照では、訪問者と同じようにサイトを操作できます。リンクでの移動、ボタンやメニューの操作、フォームの送信ができます。要素は選択されません。
- 編集では、ページを変更できます。要素にカーソルを合わせると強調表示され、クリックすると選択できます。テキストをダブルクリックすると入力でき、右クリックでコンテキストメニューが開きます。ドラッグすると要素を移動できます。
エディターは最後に使ったモードを記憶します。初めて開くときは参照モードで始まります。レイヤーパネルを開くと編集モードに切り替わります。AI の作業中、コードエディター内、バージョン履歴内では、モード切り替えボタンを使えません。
編集パネル
要素を選択すると、右側の編集パネルにその要素のスタイルと設定が表示されます。⌘E / Ctrl+E を押すか、右端の矢印をクリックすると、表示と非表示を切り替えられます。編集パネルをご覧ください。
AI で編集を使った手軽な修正
要素を選択して ⌘K / Ctrl+K を押すと、その下に AI で編集バーが開きます。「もっと大きく」「文字をネイビーに」などの変更を入力すると、適用する前にページ上で結果を確認できます。AI で編集をご覧ください。
スマートフォンでの利用
タブレットより狭い画面では、エディターは AI とのチャットと結果の確認に適した構成になります。
- 上部のチャットタブとプレビュータブで、AI チャットとサイトを切り替えます。プレビューをもう一度タップすると再読み込みします。
- キャンバスは参照モードと同じように動作します。要素の選択、編集パネル、コードエディターの利用には、より広い画面が必要です。
- 保存ボタンはロゴの隣にあります。編集を止めてから約 30 秒後に、作業内容が自動保存されます。
- ロゴメニューのプレビューメニューでは、新しいタブでのプレビュー表示、再読み込み、プレビューサーバーの再起動ができます。設定はサイトの設定にあり、エディターに戻るでサイトに戻れます。
主なショートカット
| 操作 | Mac | Windows |
|---|---|---|
| 元に戻す | ⌘Z | Ctrl+Z |
| やり直す | ⌘⇧Z | Ctrl+Shift+Z |
| 保存 | ⌘S | Ctrl+S |
| AI で編集（要素を選択中） | ⌘K | Ctrl+K |
| 要素を削除 | ⌫ | Backspace または Delete |
| 選択を解除 | Esc | Esc |
| 編集パネルの表示・非表示 | ⌘E | Ctrl+E |
| サイドバーの表示・非表示 | ⌘B | Ctrl+B |
| バージョン履歴 | ⌘H | Ctrl+H |
すべてのショートカットは、コンテキストメニューとショートカットをご覧ください。