サイトエディターの画面

サイトエディターの画面の見方と、チャットで AI に頼むときの基本を説明します。公開前に見せる共有 URL、ダッシュボードでの複製と削除もここにあります。

サイトの編集はすべて「サイトエディター」で行います。ダッシュボードでサイトを選ぶと開きます。

サイトエディター

画面の構成

画面は、上部のバー、左側のプレビュー、右側のチャットの 3 つに分かれています。

上部のバー - 左から順に、次のボタンが並んでいます
- パソコン・タブレット・スマートフォンの表示幅の切り替え
- プレビューの再読み込み
- 表示するページの切り替え
- 共有 URL を開く (四角から矢印が出たアイコン)。公開前のサイトを他の人に見せるための URL です
- 「ダッシュボード」に戻る
- 「ドメイン」設定
- 「CMS」管理画面
- 「公開する」
- 「…」メニュー (管理用の名前、サイト設定、HTML エクスポート、バージョン履歴)。管理用の名前の横の鉛筆アイコンから、名前を変えられます
左側 (プレビュー) - 今のサイトの見た目です
- 下部中央のツールバーにある 2 つのアイコンで、「要素を選択」と「テキストを編集」を切り替えます
- 「要素を選択」をオンにすると、プレビューの中の部分をクリックして選べます。選んだ状態でチャットに頼むと、その部分を変更できます
- 「テキストを編集」では、文字を直接書き換えられます
右側 (チャット) - できるくんAI への指示を入力します。AI の作業が終わると、結果が左のプレビューに反映されます。上部の「コード」タブに切り替えると、サイトを構成するファイルを見られます

スマートフォンなど狭い画面では、左右に並びません。「サイト確認」と「チャット」のタブで切り替えます。

入力欄に頼みたいことを日本語で書き、右下の矢印ボタンで送信します。Enter キーは改行です。
画像は、入力欄にドラッグするか、「+」→「ファイルを追加」で添付します。添付できるのは JPEG、PNG、WebP、GIF です。1 回に 5 枚まで、1 枚 10MB までです
「+」ボタンには、「画像を作る」と「SEOを設定する」(タイトル・ディスクリプション、Google アナリティクス、Google サーチコンソール) の入口もあります
AI が作業している間も、次の指示を送れます。送った指示は「送信待ち」として並び、「✕」で取り消せます
作業を途中で止めたいときは、AI の吹き出しの右下にある停止ボタンを押します。止めた作業の変更は保存されません。保存が始まったあとは止められません

フリープランでは、AI への指示は 10 回までです。
残りの回数は、入力欄の中に「残り〇回」と表示されます。

次の操作を、それぞれ 1 回として数えます。

上限に達すると、入力欄に「無料プランの編集上限に達しました」と表示され、送信できなくなります。「プレミアムにアップグレード」からプレミアムプランに変更すると、無制限になります。

上部のバーの共有 URL ボタン (四角から矢印が出たアイコン) を押すと、いま表示しているページが別のタブで開きます。この URL を送ると、ログインしていない人もサイトを見られます。

「…」→「バージョン履歴」から、変更前の状態に戻せます。手順は以前の状態に戻すをご覧ください。

ダッシュボードのサイト一覧では、サイトのカードにマウスを重ねると右下にボタンが表示され、次の操作ができます。

リンクをコピー (鎖のアイコン) - 編集画面のリンクと、公開サイトのリンクをコピーします。未公開のサイトでは公開サイトのリンクは選べません
「︙」→「複製する」- 同じ内容のサイトをもう 1 つ作ります。プレミアムプランの機能です
「︙」→「削除する」- 「サイトを削除しますか？」の確認で「削除する」を押すと、サイトとその関連データが削除されます。元に戻せません
「︙」→「チームを移動」- 別のチームにサイトを移します。プレミアムプランのオーナーか管理者で、移動できる別のチームがあるときだけ表示されます。手順はチームで使うをご覧ください