チャットでフッターを編集する

フッターはすべてのページの一番下にあるため、訪問者が住所、営業時間、リンク、SNSアカウントを探す場所です。WordPressでは、サイトエディターを開いてフッターのテンプレートパーツを見つけ、ブロックを1つずつ並べ替える必要があります。ShipPressでは、フッターに入れたい内容をチャットで伝えるだけで、AIがサイト全体のフッターを変更してくれます。このチュートリアルでは、Pier 7 Coffeeのフッターを更新します。

現在のフッターを確認する

ShipPressでサイトを開き、プレビューを一番下までスクロールします。変更したい点をメモしておきましょう。Pier 7 Coffeeのフッターには、店名、住所、営業時間、そして11個のリンクが並ぶ長いExploreリストがありました。一方で、お店の短い説明も、SNSへのリンクも、ページの先頭にすばやく戻る手段もありませんでした。

変更前：長いリンクリストが1つあるだけで、SNSリンクはありません。
1通のメッセージで新しいフッターを伝える

+ New Workerをクリックして新しいチャットを開き、変更したい点をすべて1通のメッセージにまとめて書きます。全ページが対象であること、色とフォントはそのままにすること、それ以外には手を加えないことも伝えましょう。私は次のように送りました。
すべてのページのフッターを更新してください。PIER 7 COFFEEのロゴの下に、1行のキャッチコピー「Roasted on the harbor, poured at the bar.」を追加してください。InstagramとFacebookのテキストリンクを入れたFollow us列を追加してください（リンク先はひとまず#にしてください）。長いExploreリストは、短い2つの列に分けてください。一番下の著作権表示の行の右側に「Back to top」リンクを追加してください。色とフォントは同じままにしてください。それ以外は変更しないでください。

フッターの変更点を1通のメッセージにまとめて伝えます。
AIに変更を任せる

Enterキーを押します。AIはまずフッターの作りを確認し、そのあと編集します。フッターは全ページで共通なので、1回の変更ですべてのページが更新されます。作業の手順はチャットで確認できます。私の場合は約3分かかりました。

AIはまずフッターを読み取り、そのあとで編集します。
AIの作業内容を読む

作業が終わると、AIが変更点を1つずつ報告してくれます。店名の下のキャッチコピー、5～6個のリンクずつに分けた2つのExplore列、今のところリンク先が#になっている新しいFollow us列、そしてBack to topリンクです。また、フッターが4列から6列になったことも伝えてくれます。

すべての変更点が短くまとめられます。
プレビューで確認する

プレビューをフッターまでスクロールします。お願いした内容はすべて入っていましたが、この幅では6列は多すぎました。店名が2行に折り返され、メールアドレスが隣の列にはみ出していました。結果は必ず自分の目で確かめ、そのうえで修正をお願いしましょう。

最初のバージョン：内容はそろっていますが、窮屈です。
短い追加メッセージでレイアウトを直す

どこがおかしいか、どうしたいかを伝えます。私は次のように送りました。
フッターの列が窮屈になりました。ロゴが2行に折り返され、メールアドレスが隣の列にはみ出しています。ロゴとキャッチコピーはフッター上部の独立した行に置き、その下に他の列を1行で並べて、列の間隔を少し広げてください。
1～2分後、店名とキャッチコピーが独立した行に収まり、住所、営業時間、リンク、Follow usの各列にもゆとりができました。

どこがおかしいか、どうなってほしいかを伝えます。

上が最初のバージョン、下が追加メッセージ後です。
Phoneで確認する

プレビューの右上にあるPhoneをクリックし、一番下までスクロールします。小さな画面では、列が縦に積み重なり、リンクは大きく表示され、Back to topは著作権表示の行の隣に表示されます。

スマートフォンでは列が縦に積み重なります。
本物のSNSリンクを追加する

InstagramとFacebookのリンクは、まだ#のままです。Go liveする前に、本当のアドレスを送りましょう。例：「Instagramはinstagram.com/pier7coffee、Facebookはfacebook.com/pier7coffeeにリンクして、新しいタブで開くようにしてください。」回答の下に表示される提案Link Instagram and Facebookをクリックする方法もあります。

完成したフッター。あとは本物のリンクを入れるだけです。
Historyでいつでも元に戻す

ShipPressは、AIが作業するたびに復元ポイントを保存します。右上のHistoryをクリックすると、新しいフッターの復元ポイントと、レイアウト修正の復元ポイントが表示されます。どちらかの横にあるRestoreをクリックすると、その時点のサイトの状態にそのまま戻せます。

変更のたびに復元ポイントができます。
ヒント
- フッターには、住所、営業時間、電話番号やメールアドレス、SNSアカウントなど、実用的な情報を入れましょう。
- リンクのリストは短くしましょう。11個の長いリストより、5個ずつの2列のほうが見つけやすくなります。
- フッターが窮屈に見えたら、列を減らすか、店名を独立した行に置くようお願いしましょう。
- Go liveする前に本物のSNSリンクを貼り付けて、#を指すリンクが残らないようにしましょう。
- Go liveをクリックする前に、Phoneでフッターを確認しましょう。