チャットでサイトを編集する
サイトが完成した後も、作ったときと同じようにチャットで変更できます。このチュートリアルでは、うどん屋さんのサイト「Hinoki Udon」を例に進めます。ヘッダーを濃い緑色に変え、短い FAQ セクションを追加し、ダミーの電話番号を差し替えます。さらに、AI が作業している最中に新しいメッセージを送るとどうなるかも見てみましょう。
著者：Oberon Lai。私は ShipPress（Codotx, LLC）の開発者で、これは自社の製品です。
-
サイトを開いてチャットを確認する
ShipPress でサイトを開きます。左側にチャット、右側にサイトのプレビューが表示されます。公開するをクリックするまで、変更した内容はすべてお使いのコンピューター内だけに保存されます。
-
色を変更する
メッセージ入力欄をクリックし、人に伝えるときと同じように希望を入力して Enter キーを押します。たとえば：
ヘッダーを濃い緑にして、文字を白にしてください。
AI は作業を進めながら手順を表示します。完了するとプレビューが更新され、すべてのページでヘッダーが濃い緑色になります。
-
変更点を確認する
リクエストごとに、AI が行った作業をわかりやすい言葉で説明します。完了しました。変わったところ：の下に変更の種類が表示されます。プレビューで見るをクリックして結果を確認しましょう。
回答の下には、この変更を元に戻すなど、クリックして実行できる次のステップが ShipPress から提案されます。結果が思っていたのと少し違う場合は、修正したい内容を伝えるだけで大丈夫です。
-
セクションを追加する
新しいセクションの追加をお願いし、どこに配置するかを伝えます。たとえば：
「席の予約」の上に短い FAQ セクションを追加してください：予約なしでのご来店も歓迎、ベジタリアン向けの昆布だしあり、お子様連れ歓迎。
AI はまずページを読み込み、サイトの他の部分と同じスタイルでセクションを追加します。動画では、タップすると質問が開く「Good to know」セクションを追加しています。
-
テキストを変更する
文章を変更したいときは、AI に実際のテキストを伝えます。最初のバージョンには電話番号や料金などのプレースホルダーが入っていることがよくあります。たとえば：
実際の電話番号は 075-123-4567 です。サイト内のすべての場所に反映してください。
AI は古いテキストがある場所をすべて見つけ出し、どこを変更したかを教えてくれます。
-
AI の作業中にメッセージを送信する
作業が終わるのを待つ必要はありません。AI が作業している間もそのまま入力を続けて Enter キーを押せます。入力したメッセージが今の作業を中断させることはありません。メッセージは次に実行の下で待機し、そこで編集したり送らないを選んだりすることも可能です。そして現在の作業が完了すると、すぐに AI へ送信されます。
急ぎの場合は、止めて今すぐ送信をクリックしてください。AI は今の作業を中断し、新しいメッセージの作業にすぐ取り掛かります。
-
プレビューで結果を確認する
プレビューに変更がまだ反映されていない場合は、プレビューの上にある再読み込みをクリックしてください。ページをスクロールしたり、スマホに切り替えて小さな画面での見え方を確認したりできます。以前の状態に戻したいときは、チャット内のこの変更を元に戻すか、画面上部の履歴を使います。
-
より良い結果を得るためのヒント
- 1回にひとつずつ変更をお願いする。各リクエストがより早く完了し、元に戻すのも簡単です。
- どこを変更するかを伝える。たとえば「席の予約」の上やヘッダー内など。
- 実際の情報（料金、営業時間、電話番号）を伝える。AI に推測させるのではなく、正確な情報を渡しましょう。
- 結果が気に入らないときは？この変更を元に戻すをクリックするか、どのように変えたいかを伝えてください。
-
次のステップ
サイトの見た目が整ったら、ネット上に公開しましょう。ShipPress のアドレスを使って無料でサイトを公開するを参考に進めるか、独自ドメインを使って公開することができます。すべてのページを一度に確認するなど、その他の編集方法についてはサイトを編集するをご覧ください。
まだ ShipPress をお持ちでないですか？ShipPress をダウンロード（無料、Mac）から入手できます。