AIでホームページを作成する流れ

1. 入力前に、来店前のお客様が知りたいことを整理する

作成画面では飲食店を選び、カフェの用途に合わせて入力します。ここでは「朝凪コーヒー」という架空店舗の既存サンプルを参考にしています。掲載する事業情報は、自分の店の確認済み情報へ置き換えてください。

最初は必須項目から進められます。価格、営業時間、休業日、予約を受け付けるかなども入力すると、後から直す内容を減らせます。住所・電話番号は実際に公開してよいものだけを使い、分からない項目は事実を補って作らず、確認してから追加します。

この例では予約を受け付けないため、「訪問した人に一番してほしいこと」で「メニューを見る」を選びます。実際の受付方法に合わせて、サイトの主なボタンの目的を決めます。

• 入力画面の画像を拡大して見る
• カフェの用途を引き継いで作成画面を開く

2. 写真とデザインの希望を追加し、デザイン案を見る

手元の写真がなければ、そのまま入力を進められます。写真を使う場合は、店内、外観、メニューなど何の写真か分かるものを選びます。実際に掲載したい写真と、色・雰囲気だけを参考にする画像を区別して指定します。

必須情報から進むボタンは「まずデザイン案を見る」です。任意項目も入れる場合は、内容、デザイン・写真の順に進んで「この内容でデザイン案を見る」を選びます。次のデザイン確認画面に出るのは色や配置の参考画像で、まだ編集できるサイトではありません。

3. デザイン確認後にサイトを作成する

デザイン案で、店の雰囲気、文字の見やすさ、写真の扱いを確認します。未登録の場合は「無料登録してサイト作成を続ける」から進みます。登録済みの場合は「公開情報を確認してサイトを作成」で住所や連絡先などを確かめてから作成します。

ここでは一般向けの公開はまだ行われません。編集できるサイトの作成が終わるとプレビューへ進み、文章や写真を確認・修正できます。デザイン参考画像だけを見て、営業時間やリンクの動作まで確認済みとしないことが大切です。

4. プレビューで、入力した事実と利用方法を照合する

カフェの例では、メニュー名と価格の組み合わせ、8:00〜18:00の営業時間、火曜休、予約不要・来店順の案内が合っているかを読み比べます。「予約不要」なのに予約ボタンがある、ランチの価格が別の単品に付いている、といった食い違いを残さないようにします。

文章や写真を調整したら「下書き保存」し、開き直して変更が残ることを確認します。下書き保存だけでは公開サイトは変わりません。ページ内リンクは目的の場所へ、電話・問い合わせなどは実際に案内したい先へ進むかを確かめます。自分のサイトに送信フォームを置く場合は、入力欄の名前や必須表示も確認します。

5. 公開URLを確認し、次の更新まで決める

初めて公開するときは「確認して公開」から進みます。すでに公開中のサイトを更新するときは「変更を反映」を選びます。

プランを選ぶとLiteは7日間、Proは14日間、Businessは14日間の無料公開体験を利用できます。無料期間後は選択した月払い・年払いの料金がかかります。申込画面で支払い方法と継続条件を確認してください。

公開後は、プレビューではなく公開URLをスマートフォンでも開き、文字切れ、写真、価格、営業時間、問い合わせ先を確認します。季節メニューを変えるときは、メニュー名・価格・説明・写真を一組で見直し、保存・公開後のページにも変更が反映されたことを確かめます。

下の画像とリンク先は、比較用の既存サンプルです。本ページの参考入力例から今回生成したものではなく、実在する顧客の導入成果でもありません。サンプル上で実際の問い合わせ送信や予約は行われません。

• カフェの完成サンプルを見る
• カフェの制作例・更新手順を詳しく読む