お店のホームページを自分でAIツールで作成【飲食店・実例あり】

2026年4月10日ホームページ作成

「ホームページ、そろそろ作らないとな…」と思いながら、見積もりを依頼したら制作費が30〜50万円。「高すぎる」と感じた経験はないでしょうか。

かといってWordPressは設定が複雑そうだし、Wixやペライチは使ったことがない。コーディングなんて学んでいる時間もない。

そんな状況で出会ったのがTeleportHQです。ビジュアルエディタでデザインを組んで、ボタン一発でHTML/CSSを書き出せるツール。これを使って、実際にイタリアンレストランを想定したホームページを自分で作ってみました。

この記事では、その全過程を正直に書きます。うまくいったこと、詰まったこと、かかった時間と費用まで。「自分にもできそうか」を判断するための情報として、参考にしてもらえれば嬉しいです。

この記事が役に立つ人	この記事が向いていない人
コーディングなしでHPを作りたい	ブログや予約システムを使いたい
費用をできるだけ抑えたい	ECサイト・決済機能が必要
まず自分で試してみたい	大規模サイトを運営予定
イタリアンなど飲食店を経営している	頻繁に自分でコンテンツ更新したい

なぜホームページ作成にTeleportHQを選んだのか

最初に候補に挙げたのはWix、STUDIO、ペライチ、そしてTeleportHQの4つでした。それぞれ触ってみた正直な印象をまとめると、こんな感じです。

ツール	良かった点	気になった点
Wix	直感的でわかりやすい	月額費用が高め。デザインの自由度に限界を感じた
STUDIO	デザインが洗練されている	学習コストがやや高い。日本語サポートが薄い
ペライチ	とにかく簡単	1ページ完結向き。複数ページになると割高
TeleportHQ	AIでデザイン生成できる。HTMLとして書き出せる。無料から始められる	日本語の情報が少ない

決め手になったのは2点です。

1つは「AIがデザインの叩き台を作ってくれる」こと。プロンプト（AIへの指示文）を入力するだけでページの構成とデザインが生成されるので、ゼロから考える手間が大幅に省けます。

もう1つは「HTML/CSSとして書き出せる」こと。自分のサーバーに置けるのでツールのサービス終了リスクがなく、月額費用もサーバー代だけで済みます。

※TeleportHQは無料プランでプラットフォームの動作確認や、非常に小規模なプロジェクト、お店のホームページ1サイトなら無料で十分まかなえます。

項目	無料プラン (Free Forever)	プロフェッショナルプラン
料金	¥0	$18 / 月（月払い） $9 / 月（年間払い）（エディター単位）
プロジェクト数	1プロジェクト	無制限
プロジェクトあたりのページ数	3ページ	実質無制限
コードの表示/ダウンロード	10回/月まで（毎月リセットされます）	無制限
AIトークン	月間15,000トークン トークンは$5で5,000/$50で60,000/ $100で1,300,000の単位で追加購入できます。	月間75,000トークン トークンは5$で5,000/50$ 60,000/ 100$ 1.3Mの単位で追加購入できます。
フォーム/送信数	1フォーム / 30送信	10フォーム / 2000送信
ファイルサイズ	1ファイル2MBまで	1ファイル10MBまで
アセット容量	5MB	1GB
その他の制限	ロゴ透かし表示あり	ロゴ透かしなし

無料プランでは３ページまでしか作成できません。

今回は３ページ作成し、予約ページは生成されたページをコピーして手動で作成します。
もし、このTeleportHQを今後も使っていきたいとなればプロフェッショナルプランに移行して全ページを作成できます。

以下では、TeleportHQ以外のAIホームページ作成ツールも紹介しています。

実際に作ったイタリアンのお店のホームページ（全４ページ）

今回制作したのは「SottoSole(このお店はダミーです）」という架空のイタリアンレストランのホームページです。

構成はシンプルに４ページで仕上げました。
（フリープランは３ページまでですので、１ページは手動で別途追加作成しました。）

• トップページ
  キービジュアル＋キャッチコピー＋店舗紹介
  アクセス：Googleマップ埋め込み＋住所・電話番号・営業時間
• 料理メニューページ
  コース・アラカルトを写真つきで紹介
• お問い合わせページ
  Googleフォームを埋め込んで問い合わせに対応
• 予約ページ（手動で別途作成）
  生成CODEをダウンロードして、お問い合わせページのレイアウトをコピーして再利用。
  Googleフォーム＋スプレッドシート＋Apps Scriptで動く「簡易実用」予約システムを作成。
  Apps Scriptで以下の機能を実装します。
  ✓ 当日予約禁止
  ✓ 定休日ブロック
  ✓ 7名以上は相談メール
  ✓ 時間ごとの満席管理
  ✓ 満席時は自動キャンセル
  ✓ お客様へ予約受付メール
  ✓ 店舗へ予約通知メール
  ✓ 日付ごとに満席管理

「シンプルすぎない？」と思うかもしれませんが、お客さんがホームページで知りたいのは「どんな雰囲気の店か」「何が食べられるか」「どこにあるか」「予約できるか」の4点に絞られます。

この4ページでそれをすべてカバーできます。
※ページ数を増やすより、各ページの完成度を上げる方が離脱率を下げる効果が高いです。

TeleportHQでのお店のホームページの作り方【ステップごとに解説】

STEP1：アカウント登録

まずteleporthq.ioにアクセスして、「Get started – it’s free　→」をクリックします。

Googleアカウントでサインアップします。登録自体は1分もかかりません。（お問い合わせ、予約にGoogleフォームを使用しますので、Googleアカウントが一番便利です。）

機能がフルサポートしていないブラウザの場合は警告が出ます。

上記の警告画像はfirefoxでアクセスした時です。このままでも利用できますが、AI生成コードが正しく動かない場合があり、そのまま進めると思ったようにサイトが動作しません。
操作してみて、一番安定しているブラウザはMicrosoft Edgeでした。

STEP2：プロジェクトを作る

ダッシュボードが開いたら「Create AI Project」をクリックしてプロジェクトを作成します。

フリープランでは、１プロジェクトのみ作成できます。

生成AIに利用できる無料トークン数は15,000です。今回作成したサンプルでは14,500トークン消費しました。

ただ初めて使用したため試行錯誤したトークンもあるので使い慣れているともっと少ないトークン数で作成できます。
※無料トークンを使い切った場合は有料で追加購入できます。5$で5,000トークンです。

STEP3：プロンプトでサイトの特徴を伝える

「Create AI Project」をクリックするとジェネレーター画面になります。

サイトの特徴を入力

言語は日本語を選択しておいてください。

デザインカテゴリと雰囲気の設定

おすすめのデフォルトをそのまま採用しました。

カラーとフォントの設定

おすすめのデフォルトをそのまま採用しました。

ページの選択

Homepageを選択します。他のメニュー（カード型）も選択したいところですが、フリープランではこの段階で一つしか選択できません。（後ほどAI生成ページにて追加可能です。）

STEP4：トップページを生成する

「Generate」ボタンをクリック

STEP3で設定した画面下部の「Generate」をクリックすると生成AIが起動し、１分前後でトップページが生成されます。生成が完了すると、完了メールがメールに届きます。

トップ画面の生成結果

※この初期生成ページはあくまで出発点です。フォント・色・写真をすべて自分好みに変えられます。

また生成プロンプトをもっと好みに合うように変更して再作成も可能です。プロジェクトを作成すると新たなページの追加やデザインができるようになります。

プロジェクト画面のツールアイコン、ボタン、エリアの名称について

以後、AIとのチャットでページのカスタマイズのやりとりをしていると、「左のパネル」、「右側のプロパティパネル」「上の」といった指示が出されます。

「右側のプロパティパネル」とはいったいどこのことを言っているのか初見では分かりづらいです。
実はAIアシスタントをクローズするとAIチャットパネルの代わりにプロパティパネルが表示されます。

AIチャットパネルを出したままだと永遠に「右側のプロパティパネル」はどこにあるか分かりません。

今回作成していくうえで必要なツールアイコン、ボタン、エリアの名称を記載しておきますので迷った時の参考にしてください。

STEP5：ページを追加する（その１）

「Pages +」をクリック

新たなページを追加します。AIがどれにするか指示してくれます。
料理メニュー（カード型）を作りたかったので選択します。（プロンプトのどの部分に対応するかも表示されています。）

「Generate」ボタンを押すと１分前後で生成されます。ヘッダーメニューにも自動的にリンクが追加されます。

STEP6：ページをカスタマイズする

トップページ中の本日のおすすめに表示されている料理メニューは固定で表示されています。
画像をクリックしたら詳細を表示するように、右欄のチャットでAIに指示してみます。

カスタマイズ内容を入力

AIから複数の生成方法が提案されます。無料プランでも実現可能な方法も出してくれていますので、無料プランでも実現できる方法をAIに指示します。

詳細ポップアップ画面の生成結果

プロジェクトページの下部「Preview」をクリックすると、ブラウザの別タブに画面が表示されます。画像をクリックしてポップアップするか確認します。

指示するだけで簡単に修正できました。51か所もコード変更してくれたようです。

画像は現段階ではサンプルですので後でいつでも置き換えできます。テキストもクリックしていつでも修正できます。
（ポップアップ部のテキストは右プロパティパネルで変更します。）

※フリープランで注意すべきことは、配布された総トークンが15,000です。この段階で残り6,168トークンです。トークンはプロンプト入力だけでなく出力もカウントされます。

曖昧な指示を何度も繰り返すと目標に達せず消費される一方ですので、的確な指示をすることを心掛けてください。

例えば先ほどのプロンプト
”「本日のおすすめ」の料理画像をクリックしたら、素材の詳細と価格を表示するページを表示したい。”
のように簡略化したプロンプトにすると、HOMEページなのか料理メニュー（カード）なのか、どの画像なのか、全部なのかが曖昧になり、特定するために更にやり取りが発生しトークンが消費されます。

STEP7：作成コードのダウンロード

これまでの生成コードを一旦ダウンロード

プロジェクト画面右上の「</>Code」－「Download」タブ－「HTML」－「Download ZIP」でダウンロードできます。
※「</>Code」クリック時に[Upgrade]の案内ダイアログが出た場合は[ｘ]で画面をクローズしてスキップしてください。

PCローカルでブラウザ表示

PC上で展開してindex.htmlをダブルクリックすればローカルでブラウザ表示できます。

サイトのtitleタグがTeleportHQのプロジェクト名になってしまっています。デフォルトでプロジェクト名を作成した場合はサイトとは無関係な単語になっています。（プロジェクト名を修正し再ダウンロードすればindex.htmlに反映されます。）


適宜メモ帳などでindex.htmlを直接修正しても構いません。（この場合、生成コードを再ダウンロードした場合は元にもどりますので都度修正することになります）


修正後のトップ画面

※フリープランでは月10回までのダウンロードができます。「Code」タブの「view」でソースコードを表示した場合も１回カウントされますので、基本的にDownload(ダウンロード）を使用してください。

通常はサイト構成を固めてからWebサイトを構築していきますが、今回はAIと壁打ちして微調整しながら作り上げていきます。最初に具体的なサイト構成が決まっているのならその構成をAIに指示してもよいです。

生成したサイト構成

トップページ
├─ コンセプト（南イタリアの食卓）
├─ 本日のおすすめ
├─ 人気メニュー
├─ お客様の声
├─ 店舗情報
│   ├─ アクセス（Googleマップ）
│   ├─ 営業時間
│   └─電話番号
├─ 予約（未実装）
└─ その他リンク（フッター）
    └─ プライバシーポリシー（未実装）

料理メニュー（カード型）
├─ 本日のおすすめ
├─ 南イタリア料理メニュー
├─ 店舗情報
│   ├─ アクセス（Googleマップ）
│   ├─ 営業時間
│   ├─ 電話番号
└─ その他リンク（フッター）
    └─ プライバシーポリシー（未実装）

STEP8：「お問い合わせ」ページの追加

お問い合わせフォーム自体はGoogleフォームで作成します。TeleportHQ単体ではフォームの送信処理（メール送信）ができません。そこでGoogleフォームを使います。

※Googleフォームはデザインのカスタマイズ性は高くありませんが、返信内容をスプレッドシートで自動管理できるのが最大の利点です。

まずはGoogleフォームの公式サイト、またはGoogleドライブから新しいフォームを作成します。

フォームの作成

1. ブラウザで Google フォーム にアクセスします。
   
   
2. 「新しいフォームを作成」にある 「空白」 （＋マーク）をクリックします。
   
   
   
3. 左上の「無題のフォーム」をクリックし、「お問い合わせ」などの名前を入力します。
   

項目の設定（質問の追加）

問い合わせに必要な基本的な項目を作っていきます。右側のメニューにある「＋」ボタンで項目を追加できます。

• お名前： 記述式を選択し、「必須」をオンにします。
• メールアドレス： 記述式を選択し、「必須」をオンにします。
  • Tips: 「設定」タブから「回答」＞「メールアドレスを収集する」を有効にすると、入力漏れを防げます。
• お問い合わせ内容： 段落（長文回答）を選択し、「必須」をオンにします。

デザインのカスタマイズ

右上のパレットアイコン（テーマをカスタマイズ）をクリックすると、色やフォントを変更します。ヘッダー画像はTeleportHQ側でテンプレート作成しますので、ここでは背景色とフォントを変更します。

背景色とフォントをTeleportHQが生成したサイトと合わせる。

回答の通知設定（重要）

問い合わせが来たときにメールで通知を受け取る設定です。これを忘れると、フォームを開くまで問い合わせに気付けません。

1. 「回答」 タブをクリックします。
   
   
   
2. スプレッドシートのアイコン（作成）をクリックして、回答保存用のExcelのようなシートを作成します。
   
   
   
   
   
   
   
3. 同じ「回答」タブの右側にある 「縦の三点リーダー（︙）」 をクリックする。
   
   
   
4. 「新しい回答についてのメール通知を受け取る」 にチェックを入れます。
   

フォームの公開

作成が終わったら、実際に使える状態にします。

1. 右上の 「公開」 ボタンをクリックします。ダイアログが表示されたら「公開」をクリックします。
   
   
   
2. 正しく、動作するか上部のリンクマークをクリックして回答者へのリンクをコピーしてブラウザで動作確認をしてください。
   
   
   
   
   
3. 回答結果
   回答を受けるとメール通知と共に、管理画面にもリアルタイムに回答数がカウントアップされます。
   
   「回答」をクリックしてスプレッドシートの内容を確認してください。
   
   
   
4. 「縦の三点リーダー（︙）」－「＜＞HTMLを埋め込む」を選択し、表示されたHTMLをコピーします。（後でTeleportHQで作成してお問い合わせページに埋め込みます。
   
   
   

Formspreeという選択肢

デザインにこだわりたい場合はFormspreeという無料サービスも使えます。TeleportHQのフォーム要素にメールアドレスを設定するだけで送信処理を代行してくれます。月50件まで無料です。

お問い合わせページの作成

TeleportHQのプロジェクトに戻りお問い合わせページの作成をAIに指示します。

これで３ページ作成できました。「Preview」で確認してください。

STEP9：その他の調整

最後の予約ページを作成する前に気になるところを先に調整していきます。

1. メニューリンクの順番の変更
   左メニューのComponents-Navigation内の要素を上下して移動させることができます。
   
   
   
2. キャンバス上でドラッグしても動かせますが、レイアウトが崩れる場合があります。崩れた時は戻るアイコンで一つ前に戻せます。
   
   
   
3. テキストの編集はプロジェクトのキャンバス上でダブルクリックしてフォーカスを当てれば直接編集できます。適宜修正してください。
   
   
4. 税込み価格で統一すること、アレルギー表示のひと言を入れることの2点を意識しました。
   「※アレルギーのある方はお気軽にご相談ください」を一行添えるだけで、お客さんの安心感が上がります。
   
   
   
5. 料理カードのポップアップする画面の文言、価格を変更する場合
   AIアシスタントのチャット欄をクローズすると右側にプロパティパネル（属性一覧）が表示されますので、料理画像を選択してプロパティパネル内の属性内容を適宜変更してください。
   
   例：地魚のペスカトーレの価格\2,400を\2,600にする場合
   
   キャンバス上の「AI　Assistant」をクリックすればプロパティパネルがクローズされAI　Assistantが表示されます。過去の入力内容も消えずに残っています。
   
   
6. リンク先の変更１（AIに指示）
   
   
   
7. 予約ページ別途作成の為にリンク先だけを追加（AIに指示）
   
   
   直接AIの方で編集できると回答されましたが、トークンが減るので自分で変更しました。
   提示された指示内容でTeleportHQ初見の私は結構悩んだ。AIの言う右側のプロパティパネルとはどこにあるのか？これはAIアシスタントをクローズするとその代わりにプロパティパネルが表示されます。とはいうもののプロパティパネルの属性一覧にリンク先を入力する箇所は見当たらなかった。
   
   実際の手動変更の手順
   ・左パネルのComponents-Navigationをクリックして、キャンバスに表示されている予約ボタンをクリックしてフォーカスを当てる。
   
   
   ・Components-Navigation内の要素「Btn」をクリックしてリンクアイコンをクリックし、予約ページのファイル名reserved.htmlを入力する。
   
   
   
8. リンク先の変更２（AIに指示）
   
   
   
9. ビジュアルの差し替えを行います。これも結構はまりました。ドラッグ＆ドロップするだけでいけるのではとやったのですが、どうもレイアウトが崩れるし、削除して再設置してもポップアップに反映しない等の不具合が発生し、AIにどうすればよいか、方法を尋ねました。
   
   
   
   結局これでもpreview画面では正しく変更されているものの、肝心のキャンバス画面は空白状態です。これはTeleportHQ-1001.pngとファイルをアップロードしたもの、ファイルマネージャーでは全部小文字に勝手に変換されてしまっており内部的に不整合が起こっているようです。ファイル名は小文字で統一した方がよさそうです。
   
   ※ファイルマネージャーで適当にフォルダを作成し、画像をアップできます。（フォルダ、ファイル名は英数小文字にするのが安全です。）
   ※料理写真は自然光の下で撮ると格段にきれいに仕上がります。スマホカメラでも十分です。テーブルに白い紙を敷いて反射板にする裏技もあります。ただし、フリープランでは１ファイルは最大２MBで合計５MBまでです。
   
   これ以上AIと壁打ちしても無駄なような気がして改めて指示された１．の方法を試みます。
   ・実際の画像の置き換え方法
   置き換え対象の画像をダブルクリックして、ファイルマネージャーを呼び出す。（先にファイルマネージャーを選択しておいても良い）
   
   
   
   ここで左の画像ファイルにフォーカスを当てます。
   
   
   画像ファイル名の右横にリプレイスアイコンが表示されます。このアイコンをクリックすることでキャンバス上で選択されている画像と差し替えができます。（AIが指示したプロパティパネルでは変更できませんでした）
   
   
   
10. レスポンシブの確認
    上部のアイコンメニューでスマホアイコンに切り替えると、モバイル表示を確認できます。テンプレートベースで作ると大体レスポンシブ対応になっていますが、テキストが長すぎてはみ出ていないか、ここで確認しておきます。
    ※キャッチコピーが長すぎるとスマホでレイアウトが崩れやすいです。30文字以内を目安にすると安全です。
    スマートフォンで閲覧した場合に最下部のフッターが１行縦にならんで崩れているのでAIに修正指示を出します。
    
    結果
    
    ２か所変更完了とありますが、これは具体的にどこが変わったか興味があれば、Codeをダウンロードしてstyle.cssの中身を比較すればすぐにわかります。
    
    スタイルシートが分からなくても指示だけで変更できますので、まさしくここまでノーコードで作成が可能です。
    基本的に自分で修正できるところは修正し、ややこしいところはAIに指示すればどんどんでき上っています。

STEP10:「予約ページ」の作成

フリープランではページは３ページまでですので、これ以上はページの追加はできません。予約ページが必要ないなら予約関連をAI指示で削除してそのまま、サーバーにアップすれば公開できます。
せっかくですので、予約ページも少しだけがんばって手動で作ってみましょう。

TeleportHQから最新の生成コードをダウンロードし、PC上の適当なフォルダに展開します。
お問い合わせページpage.htmlをコピーしてファイル名をreserved.htmlに変更します。


これで、ホームページの「ご予約」「席を予約する」をクリックするとreserved.html（中身はお問い合わせ）が表示されるはずです。TeleportHQで事前にreserved.htmlでリンク指示して生成したためです。後は、reserved.htmlをメモ帳で開いて予約フォームのiframeを書き換えれば完成です。
では、Googleフォームでお問い合わせと同様に先に予約フォームを作ります。

予約フォームの作成

以下の項目を追加

項目	形式
お名前	記述式
メールアドレス	記述式
電話番号	記述式
予約日	日付
予約時間	時間
人数	プルダウン
メッセージ	記述式
注意事項	チェックボックス

回答保存設定

フォーム上部 回答 → スプレッドシート作成これで予約台帳が自動作成されます

静的HTMLサイトでも使える「満席管理・予約制限」

以下の機能をApps Scriptを使って実現します。エクセルではVBA（Visual Basic for Applications）がこれに当たります。

✓ 当日予約禁止
✓ 定休日ブロック
✓ 7名以上は相談メール
✓ 時間ごとの満席管理
✓ 人数は「4名」形式でも計算
✓ 満席時は自動キャンセル
✓ お客様へ予約受付メール
✓ 店舗へ予約通知メール
✓ 日付ごとに満席管理

予約台帳のフォームを表示し、「拡張機能」－Apps Scriptをクリックします。

以下のコードを貼り付けて、保存します。（定休日、人数等はソースコード内の値を適宜書き換えてください。）

注意： getSheetByName() のシート名は、実際のGoogleスプレッドシートのタブ名と完全一致させてください。スプレッドシートを開き、下部タブに表示されているシート名を確認してから書き換えてください。

function checkReservation(e) {

// シート名は実際のスプレッドシートの名称に合わせること（例：「フォームの回答 1」）
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("フォームの回答 1");
var data = sheet.getDataRange().getValues();

var email = e.namedValues["メールアドレス"][0];
var name = e.namedValues["お名前"][0];
var phone = e.namedValues["電話番号"][0];
var dateStr = e.namedValues["予約日"][0];
var time = e.namedValues["予約時間"][0];
var peopleText = e.namedValues["人数"][0];

// ------------------
// 7名以上チェック
// ------------------

if (peopleText.includes("7名以上")) {

MailApp.sendEmail({
to: email,
subject: "【予約人数について】",
body:
name + " 様\n\n" +
"7名以上の予約は席調整が必要なため\n" +
"店舗よりご連絡いたします。\n\n"
});

MailApp.sendEmail({
to: "[email protected]",
subject: "【大人数予約相談】",
body:
"7名以上の予約相談\n\n" +
name + "\n" +
dateStr + " " + time + "\n" +
peopleText
});

return;
}

// ------------------
// 人数変換
// ------------------

var people = Number(peopleText.replace("名",""));
if (isNaN(people) || people <= 0) { 
MailApp.sendEmail(email, "【エラー】", name + " 様\n\n人数の入力が正しくありません。"); 
return;
}


// ------------------
// 日付処理
// ------------------

var today = new Date();
today.setHours(0,0,0,0);

var reserveDate = new Date(dateStr);
reserveDate.setHours(0,0,0,0);


// ------------------
// 当日予約禁止
// ------------------

if(reserveDate.getTime() == today.getTime()){

MailApp.sendEmail(email,
"【予約不可】当日予約について",
name + " 様\n\n当日の予約は受付しておりません。");

return;

}

// ------------------
// 定休日チェック（月曜）
// ------------------

if(reserveDate.getDay() == 1){

MailApp.sendEmail(email,
"【定休日】",
name + " 様\n\n申し訳ありません。\n月曜日は定休日です。");

return;

}

// ------------------
// 満席チェック
// ------------------

var total = 0;

for(var i=1;i<data.length-1;i++){

var rowDate = new Date(data[i][4]);
rowDate.setHours(0,0,0,0);

var rowTime = data[i][5];
var rowPeople = Number(String(data[i][6]).replace("名",""));

if(
rowDate.getTime() == reserveDate.getTime()
&& rowTime == time
){

total += rowPeople;

}

}

// 最大席数
var MAX_SEAT = 20;

if(total + people > MAX_SEAT){

MailApp.sendEmail(email,
"【満席】予約不可",
name + " 様\n\n申し訳ありません。\nこの時間は満席です。");

return;

}

// ------------------
// お客様予約受付メール
// ------------------

MailApp.sendEmail({
to: email,
subject: "【予約受付】ありがとうございます",
body:
name + " 様\n\n" +
"以下の内容で予約を受け付けました。\n\n" +
"予約日: " + dateStr + "\n" +
"時間: " + time + "\n" +
"人数: " + people + "名\n\n" +
"ご来店をお待ちしております。"
});

// ------------------
// 店舗通知メール
// ------------------

MailApp.sendEmail({
to: "[email protected]",
subject: "【新規予約】" + dateStr + " " + time,
body:
"新しい予約\n\n" +
"名前: " + name + "\n" +
"電話: " + phone + "\n" +
"日付: " + dateStr + "\n" +
"時間: " + time + "\n" +
"人数: " + people + "名"
});

}

トリガー設定

Apps Script トリガー→イベントタイプ→フォーム送信時

これで予約ごとに定休日、満席チェックが実施されます。

予約ページ　reserved.htmlをメモ帳等で開き、必要箇所を直接修正します。

HTMLサイトに埋め込み

対象	作業	修正前	修正後
A	修正	お問い合わせ	ご予約
B	削除	<span>ご予約、貸切、メニューについてなど、 お気軽にお問い合わせください。</span>
C	置換	問い合わせフォームの <iframe ～　</iframe>	予約フォームの <iframe ～　</iframe>

   

動作確認

修正したreserved.htmlをダブルクリックしてブラウザで表示させて、動作確認を行ってください。
必要事項を入力して送信とすると、予約台帳に記録されます。

満席管理・予約制限機能も正しく動作するか必ずチェックをしてください。

ここまでで、2460トークン残っていました。もしトークンを使い果たした場合でも、５＄で5000トークン購入可能です。

その他、必要な画像、価格、料理内容を実際の提供するサービスに合わせて変更すればサイトの完成です。

レンタルサーバーにアップロード

アップロードファイルの準備

ダウンロードして展開したコードと独自作成したreserved.htmlでサイトのコード一式となります。PC上のローカルのindex.htmlをブラウザで開いてデザイン通りに表示されていれば準備完了です。

ファイルの一式アップロード

ファイル一式をWebサーバーにアップロードすればインターネットに実際公開されます。
今回はバリュードメインのOneレンタルサーバーベーシックプランを使いました。月額680円～で、800GB NVMe SSD・転送量無制限・15日間無料トライアルつきです。

1. Oneレンタルサーバーのコントロールパネルにログイン
   
   
   
2. ファイルマネージャーを開いて public_html フォルダへ移動
   （ファイルマネージャーはサーバー全体管理にあります。）
   
   
   
   
   
3. PCのエクスプローラーでファイル一覧にマウスを移動させてCTRL+Aで全選択します。
   
   
   
4. ドラッグ＆ドロップでサーバーのフォルダにコピーしてください。
   

サブフォルダのファイルも全てアップできているか確認してください。

初期ドメインでアクセスして表示を確認してください。
今回はhttps://rs97376214.oners.jp/で実際にアップロードしてサンプル公開しましたので参考にしてください。
（ただし、「お問い合わせ」、「ご予約フォーム」は入力可能ですが、送信はできないようにしてあります。）

※FTPソフト不要でブラウザのファイルマネージャーだけで完結します。アップロード自体は１分もかかりませんでした。

独自ドメインを設定する

One レンタルサーバーにはドメイン無料特典があります。申込み時に希望のドメインを選ぶだけで、別途ドメイン代がかかりません。

※お店の名前や地域名が入ったドメインにすると、お客さんが覚えやすく信頼感も上がります。
※ドメイン名に迷ったらValue Domainドメイン検索で「AIにドメイン名を考えてもらう」を使うこともできます。

ホームページ作成費用・時間・感想のまとめ

ホームページ作成費用

項目	費用	備考
TeleportHQ	無料	1プロジェクト3ページまで無料プランで対応可
One レンタルサーバー ベーシック	月額680円～
独自ドメイン	無料	One レンタルサーバーのドメイン無料特典を利用
SSL証明書	無料	Let's Encrypt を利用
お問い合わせフォーム	無料	Googleフォームを使用
予約フォーム(簡易満席、制限機能付き)	無料	Googleフォーム＋Apps  Script使用
合計（初年度）	月額680円～のみ	年間換算で約8,160円～

業者に依頼した場合の制作費30～50万円と比較すると、コストは圧倒的に抑えられます。One レンタルサーバーのドメイン無料特典のおかげで、ランニングコストはサーバー代だけです。

お店のホームページ作成にかかった時間

写真画像や料理メニュー内容等は用意済みとして、実際かかった時間は次のようになります。

作業内容	所要時間
TeleportHQの操作に慣れる	約1時間
AIにサイトのコンセプトをプロンプトで指示	約30分
トップページ制作	約30分
メニューページ制作	約30分
お問い合わせページ制作	約1時間
予約ページ制作	約1.5時間
エクスポート～サーバーアップロード	約30分
ドメイン設定・SSL有効化	約30分（＋DNS反映待ち）
合計	約6時間

1日でやるには少し多いですが、週末2日に分ければ十分完成できる量です。最初の「慣れる時間」を除けば、2回目以降は半分以下の時間でできると思います。

AIでホームページ作成をやってみた正直な感想

一番驚いたのは、HTML（iframeの埋め込みを除く）やCSSを一行も書かずにここまでの品質のデザインが作れたことです。デザインの基礎（余白・フォント・配色）さえ気をつければ、プロが作ったサイトに近いものが仕上がります。
料理画像を差し替えているうちにこのお店に行ってみたいという気になりました。

TeleportHQのHTML要素やプロパティの属性の場所がわかりにくく、少し時間を取られました。でも一度やり方を覚えれば、次からは迷わずできます。

「完璧を目指すより、まず公開する」という気持ちが大切だと感じました。写真が仮素材でも、テキストが途中でも、公開してから直していけばいい。完成してから公開しようとすると、ずっと公開できません。

TeleportHQが向いている人・向いていない人

向いている人

• コーディングの経験がなく、学ぶ時間もない
• 制作コストをとにかく抑えたい
• お店・サービスの情報をシンプルに発信したい
• まず自分で試して、後から業者に任せることも検討している
• Figmaなどのデザインツールを使っている（インポート機能が使える）

向いていない人

• ブログを定期的に更新したい（WordPressの方が向いている）
• オンライン予約・決済機能が必要（専用サービスとの連携が必要）
• SEOを本格的に強化したい（静的サイトは更新頻度で不利になることがある）
• 複雑なアニメーションやインタラクションが必要

※「まず公開してみて、将来的に機能を追加したい」という場合は、TeleportHQでスタートして後からWordPressへ移行するという段階的な方法もあります。

まとめ：AIツールならホームページをサーバー代だけで作成

TeleportHQのAIを使えば、コーディングの知識ゼロでもイタリアンレストランのホームページを自分で作ることができます。もうテンプレートを選んでそこから修正をかけていくという時代は終わるかもしれません。

• TeleportHQでビジュアルエディタを使いデザイン（無料）
• HTML/CSSとしてエクスポート
• One レンタルサーバー ベーシックプランにアップロード（月額680円～）
• One レンタルサーバーのドメイン無料特典で独自ドメインを取得・設定

初年度の維持費は月額680円～のサーバー代のみ。ドメインは One レンタルサーバーの無料特典で取得できるので、実質サーバー代だけで本格的なお店のHPを持てます。

※ユーザーノートの記事は、弊社サービスをご利用のお客様に執筆いただいております。