チュートリアル

変更したい場所を指し示す

変更をお願いするときにいちばん難しいのは、場所を言葉で伝えることです。「タイトルの下の2行目」や「左のあの枠」といった具合です。ShipPress では、プレビューの上に3つのツールがあるので、言葉ではなく指し示して伝えられます。Select tool は要素を1つ選び、Draw tool はエリア全体を丸で囲み、Edit by hand は自分で変更したいときに WordPress のブロックエディターでページを開きます。このチュートリアルでは、Pier 7 Coffee のホームページを使って説明します。

1. プレビューの上にあるツールを見つける

   ShipPress でサイトを開き、プレビューの上にある行を見てください。左から順に、Refresh、Select tool、Draw tool、Edit by hand、Colors and fonts が並んでいます。その左にあるページ選択では、サイトのどのページを表示するかを選べます。

   

2. Select tool をクリックして、ポインターを重ねる

   Select tool をクリックします。黄色に変わったら、オンになっています。次に、プレビューの上でポインターを動かしてみましょう。ShipPress は、ポインターの下にある要素を青い枠で囲み、paragraph（段落）のように名前を表示します。この時点では、まだ何も選ばれていません。ツールをオフにしたいときは、いつでも Esc を押してください。

   

3. 要素をクリックする

   変更したい要素をクリックします。その要素は、テキストが入った小さなタグとして、画像と一緒にチャットボックスに追加されます。AIはその要素をそのまま受け取るので、場所を説明する必要はありません。外したいときは、タグの × をクリックしてください。

   

   

4. 変更したい内容を伝えて送信する

   隣にいる人にお願いするように、やりたいことを入力して Enter を押します。AIはどの要素か分かっているので、「この行」と書くだけで十分です。AIはその行だけを変更し、送信すると Select tool は自動的にオフになります。AIは、Undo this change など、続けて使える短いボタンも表示してくれます。

   

   

5. Draw tool でエリアを丸で囲む

   変更したいのが1つの要素ではなく、ブロック全体という場合もあります。Draw tool をクリックし、プレビュー上でマウスのボタンを押したまま、エリアの周りをぐるりと囲んでください。赤い丸は画面に残り、囲んだ部分の画像がチャットボックスに追加されます。その中にある要素も一緒に添付されます。

   

6. 送信して、結果を確認する

   お願いしたい内容を書いて、Enter を押します。ここでは、丸で囲んだ枠を濃い緑の単色にして、文字をクリーム色にし、1～2行に収めるようお願いしました。AIがチャットで答えると、プレビューが更新されます。描き込んだ画像はメッセージの中に表示されるので、何を指し示したのかをいつでも確認できます。

   

   

7. 自分で直したいときは Edit by hand を使う

   Edit by hand をクリックすると、今のページが ShipPress の中で WordPress のブロックエディターで開きます。文字をクリックして書き換え、Save を押すだけです。一般的な WordPress サイトと同じです。初回は、WordPress の簡単なウェルカムガイドが表示されます。× で閉じると、ページが表示されます。そのあと Refresh をクリックすると、プレビューで結果を確認できます。

   

8. 元に戻す・前の状態に戻す

   AIが行った変更が気に入らないときは、返答の下にある Undo this change をクリックしてください。ShipPress は、AIが作業するたびに復元ポイントも保存します。そのため、右上の History から、以前のどのバージョンにも戻せます。

9. どれを使えばよいか

   • Select tool：見出し、1行のテキスト、ボタン、画像など、1つの要素を変えたいとき。
   • Draw tool：ブロック、セクション間の余白、複数の要素にまたがる部分を変えたいとき。
   • Edit by hand：文章を自分で書き直したり、ブロックを自分で並べ替えたりしたいとき。
   • Colors and fonts：サイト全体の色、フォント、余白を変えたいとき。
   • 何も選ばずにツールをオフにするには、Esc を押します。