プロのデザインからカフェのWebサイトを作成する
見栄えの良いWebサイトを最も早く作る方法は、完成されたデザインからスタートして、AIにお店専用の内容へと仕上げてもらうことです。このチュートリアルでは、Pier 7 CoffeeのカフェWebサイトを作成します。デザインウォールでcafeを検索し、すべてのページが揃ったデザインをプレビューしてサイト名を付けたら、チャットで店名、メニュー、価格、営業時間を変更し、Seasonal specialsセクションを追加していきます。
著者: Oberon Lai。私はShipPress（Codotx, LLC）を開発しているため、これは自社製品の紹介となります。このページにはアフィリエイトリンクは含まれていません。
-
デザインウォールでcafeを検索する
Home画面に、ShipPressのデザインウォール（Start from a design）が表示されます。Search designsにcafeと入力してください。デザインウォールがコーヒーや飲食店向けのデザインに絞り込まれます。また、Industry、Type、Colors、Styleの各フィルターを使用することもできます。
-
デザインと各ページをプレビューする
デザインをクリックするとプレビューが開きます。すべてのデザインは専用のサンプルページを備えた完全なWordPressブロックテーマになっているため、上部で各ページ（Home、Bar Menu、Visit & opening hoursなど）をクリックして確認したり、ComputerとPhoneの表示を切り替えたりできます。右側のパネルには次の手順が案内されています。ShipPressがお使いのパソコン上に新しいWebサイトを作成し、変更したい内容をAIに伝えます。Go liveをクリックするまで、インターネット上に公開されることはありません。
-
サイト名を入力してUse this designをクリックする
What's your website called?の下にお店の名前を入力し（後からいつでも変更できます）、Use this designをクリックします。初回はデザインのダウンロードが行われるため、1分ほどかかる場合があります。完了すると右側に作成中のサイトが開き、左側でサイトの編集を担当するAIアシスタントのWorkerが待機します。
-
変更したい内容をAIに伝える
チャットボックスに、普段の言葉でお店についての情報を入力します。店名やキャッチコピー、メニューページのドリンクと価格、営業時間などを伝えてEnterキーを押してください。Workerはまず各ページの内容を読み込み、ステップごとに変更を適用していきます。作業に合わせてプレビュー画面も各ページへと順に切り替わります。変更に確認が必要な場合は、承認カードで許可を求めてきます。
ヒント: 対象のページ名を指定してください（たとえば Bar Menuページで… など）。AIが作業している間も続けて入力でき、新しいメッセージは次の順番で処理されます。
-
すべてのページを確認する
Workerの作業完了メッセージが表示されたら、Refreshをクリックし、プレビュー上部のページメニューまたはAll pagesから各ページを確認します。デザインのクオリティはそのままに、店名、メニュー、価格、営業時間があなたのお店仕様に生まれ変わります。変更が完了するたびにHistoryに復元ポイントが保存されるため、いつでも元の状態に戻すことができます。
-
チャットでセクションを追加する
さらにコンテンツを追加したい場合も、チャットで伝えるだけです。たとえば、Homeページに冬のドリンク3品と価格を掲載したSeasonal specialsセクションを追加してのように依頼してみてください。Workerがデザイン全体のスタイルに合わせて新しいセクションを作成してくれます。
-
次のステップ
チャットや手動で編集を続けたら、ShipPressのアドレスを使って無料でサイトを公開したり、ご自身のホスティングサーバーに移行したりできます。詳しくはチャットでサイトを編集するおよびサイトを無料で公開するをご覧ください。