Canvas でサイトを視覚的に編集する
大幅な変更にはチャットが便利ですが、ページ上の要素を直接指差して変えたいときもありますよね。そんなときに役立つのが Canvas です。このチュートリアルでは、レストランのサイト「Hinoki Udon」を例に、ページを直接クリックしながら編集していきます。
著者：Oberon Lai。私は ShipPress（Codotx, LLC）の開発者で、これは自社の製品です。
-
Canvas を開く
プレビューの上部にあるすべてのページをクリックします。これで Canvas が開き、サイトのすべてのページが並んで表示されます。
初回は使い方の簡単なヒントが表示されます。見出しやテキスト、画像をクリックして変更するか、下のボックスに変更内容を入力して指示します。わかったをクリックして閉じます。
-
画面の移動：ズーム、合わせる、移動…
− と + で拡大・縮小できます。合わせるをクリックすると、上部に固定ページ、続いて投稿やカテゴリーといったサイト全体を一度に表示できます。
特定のページへ直接移動したいときは、移動…を開きます。すべての固定ページ、投稿、カテゴリーが一覧表示されるので、目的のものを選択すると Canvas がそこへ一気にズームします。
-
文字を自分で変更する
見出しやテキストをクリックすると、その文字を編集できる小さなパネルが開きます。新しいテキストを入力して保存をクリックしてください。
動画では、「Made by hand, every morning」を毎朝手打ちの自家製麺に変更しています。見出しはすぐに切り替わります。自分で入力したため、AI のトークンは消費されません。やり直したいときは、保存完了のメッセージ内にある元に戻すをクリックしてください。
-
一部分だけ AI にお願いする
文字の変更だけでなく、クリックしたまさにその部分について AI に指示を出すこともできます。画像やセクションをクリックすると、下のボックスに選択した対象（例えば画像など）が表示されます。あとは変更内容を入力して Enter キーを押すだけです：
この画像の角を丸くして、やわらかな影を付けて。
AI はその部分だけを変更します。チャットの回答には変更内容が表示され、元に戻すボタンや続けて指示を出すためのボタンも用意されています。
-
エディターで警告されたブロックを直す
Canvas はすべてのページのすべてのブロックをチェックします。WordPress エディターでブロックに無効なコンテンツがあると判定された場合、ページ名の横に赤い直すブロックバッジが表示されます。
そのバッジをクリックすると、Canvas が該当のブロックを表示して赤枠で囲みます。AI に直してもらうをクリックすると、AI が見た目を変えずにブロックを修復し、バッジが消えます。
-
チャットと Canvas を一緒に使う
Canvas を開いたままでも、左側のチャットを引き続き使用できます。動画では次のように入力しています：
お問い合わせページの導入文の下に「英語メニューもあります」と短い一文を追加して。
AI の処理が完了すると、新しいテキストがすぐに Canvas に反映されます。
-
Canvas から元に戻す
Canvas の右上にある元に戻すをクリックすると、最新の変更を取り消せます。さらに前に戻りたい場合は、履歴にある復元ポイントを使用してください。
-
ヒント
- 誤字の修正や言い回しの変更：テキストをクリックして入力します。即座に反映され、AI のトークンも消費しません。
- 見た目やレイアウト：まず画像やセクションをクリックしてから、AI に変更内容を伝えます。どの部分のことかを AI が正確に認識します。
- ページ数が多いサイト：スクロールする代わりに、移動…や合わせるを活用しましょう。
- 赤いバッジが出たら？直すブロックをクリックして、AI に直してもらうを選択します。
-
次のステップ
より大きな変更を行いたい場合は、チャットでサイトを編集するをご覧ください。AI による変更はいつでも取り消せます。詳しくは復元ポイントでAIによる変更を元に戻すをご覧ください。サイトの仕上がりに満足できたら、ShipPress のアドレスを使って無料でサイトを公開することができます。