チャットでお客様の声セクションを追加する

実際のお客様からの温かい言葉は、ご自身で書くどんな紹介文よりも、はじめて訪れた人の心を動かすことがよくあります。WordPressでは、お客様の声のブロックやプラグインを選び、レイアウトを作り、テーマに合わせてデザインを整える必要があります。ShipPressなら、チャットでセクションの内容を伝えるだけで、AIがサイトのデザインですでに使われている部品を使って作ってくれます。このチュートリアルでは、Pier 7 Coffeeのホームページに「What our regulars say」セクションを追加します。

レビューを置く場所を決める

ShipPressでサイトを開き、レビューを表示したい場所までプレビューをスクロールします。おすすめは、提供しているものを紹介する部分のあとで、来店を呼びかける部分の前です。Pier 7 Coffeeでは、Journalセクション（Read the journalがあるところ）と、大きな「Sit at the bar」の写真のあいだに決めました。

変更前：Journalセクションからそのまま「Sit at the bar」の写真につながっています。
1通のメッセージでセクションを伝える

+ New Workerをクリックして新しいチャットを開き、希望を入力します。セクションのタイトル、置く場所、レビューの数、それぞれのレビューに表示する内容を書きましょう。あわせて、サイトのほかの部分に合わせることと、変更してはいけない部分も伝えます。私は次のように送りました。
ホームページで、JournalセクションとSit at the barの写真のあいだに、「What our regulars say」という短いお客様の声セクションを追加してください。レビューを3件横に並べ、それぞれに短い一言、5つ星、名字ではなく名前、いつも頼むものを表示します。フォントと色はサイトのほかの部分と同じものを使い、スマートフォンでは縦に並べてください。それ以外は何も変更しないでください。

セクションを置く場所と、各レビューに表示する内容を伝えます。
AIに作ってもらう

Enterキーを押します。AIはまずホームページを見つけ、各セクションがどのように作られているかを確認してから、新しいセクションを追加します。作業の手順はチャットで見ることができます。私の場合は約4分かかりました。作業中も続けて入力できます。新しいメッセージは、作業が終わるまで待機します。

AIはまずページを読み込み、そのあとで変更を加えます。
AIの作業内容を読む

作業が終わると、AIがレイアウトについて説明してくれます。レビュー3件が横に並び、それぞれに一言、5つ星、名前、いつもの注文が表示されること、LotsやJournalのセクションと同じ部品を再利用したのでフォントや余白がそろっていること、ページのほかの部分には一切手を加えていないことが書かれています。また、一言やお名前は仮のものであることをはっきり伝え、本物のレビューへの差し替えも提案してくれます。

短い要約です。ご自身で用意する必要があるものも書かれています。
新しいセクションを確認する

プレビューを同じ場所までスクロールして戻します。新しい「What our regulars say」セクションが、Journalとバーの写真のあいだに表示されています。レビュー3件が一列に並び、背景は同じクリーム色で、罫線や小さな大文字のラベルもページのほかの部分と同じです。

最初からデザインの一部だったように見えます。
短い追加メッセージで微調整する

最初のバージョンは少し控えめでした。星は小さな黒色で、一言の文字も小さめでした。短いメッセージ1通で直せます。私は次のように送りました。
星を金色にして少し大きくし、一言の文字も少し大きくして目立つようにしてください。
数秒後には、星が温かみのある金色で大きくなり、一言の文字もカードのほかの文字より大きくなりました。

ちょっとしたデザインの変更は、一文で伝えられます。

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

プレビューの右上にあるPhoneをクリックし、セクションまでスクロールします。3件のレビューが縦に積み重なり、それぞれ星、一言、お名前が表示されるので、小さな画面でも読みやすくなっています。

スマートフォンではレビューが縦に並びます。
本物のレビューに差し替える

AIが書いた一言、お名前、注文内容は、レイアウトを確認していただくためのサンプルにすぎません。Go liveの前に、お客様が実際に話してくれた言葉に置き換えましょう。本物のレビュー（たとえば、Googleに投稿されたものや、いただいたメッセージ。掲載には許可をいただいてください）をチャットに貼り付けて、使うようにAIに頼むか、返答の下にあるSwap in my real reviewsという提案をクリックします。レビューが3件に満たない場合は、2件にするか、大きな一言を1件だけ載せるようにお願いしてください。

完成したレイアウトです。本物のレビューを入れる準備ができています。
Historyでいつでも元に戻せる

ShipPressは、AIが作業するたびに復元ポイントを保存します。右上のHistoryをクリックすると、新しいセクションの復元ポイントと、金色の星の復元ポイントが表示されます。戻りたい時点の横にあるRestoreをクリックすると、その瞬間のサイトの状態にそのまま戻せます。

変更ごとに復元ポイントが作られます。
ヒント
- 本物のレビューだけを使い、お客様のお名前を載せる前には必ず確認しましょう。
- 一言は短いほどよく伝わります。1〜2文ずつにしましょう。
- パソコンでは3件を一列に並べるとちょうどよく、スマートフォンでは縦に並びます。
- 来店やお問い合わせを促す部分の近く、たとえば住所や連絡先の前にセクションを置きましょう。
- Go liveをクリックする前に、Phoneでページを確認しましょう。