【入門編・HP作成】AIでホームページ作成は無料でできる？居酒屋のHPを1日で作った手順

「お店のホームページが欲しいけど、業者さんに頼むと20万円とか30万円とか…。自分で作るなんて無理だし」

少し前までの私も、まったく同じことを思っていました。私は40代の主婦で、パソコンは得意ではありません。プログラミングの勉強をしたこともありません。

そんな私がAIに「居酒屋のホームページ作って」と頼んだら、たった1日で、お店の雰囲気が伝わるトップページができてしまいました。

この記事では、実際にやった手順と、かかったお金（ほぼゼロです）、そして正直な「ここはまだできていない」という部分まで、全部公開します。

先にお伝えすると、私自身もまだHP作成を勉強中の身です。だからこそ、「初めての1歩」でつまずきそうなところを、同じ目線でお伝えできると思っています。

AIでホームページ作成、無料でどこまでできる？🤔

結論からお伝えします。

• ホームページを「作る」ところまでは、無料でできました
• インターネットに「公開する」には、月数百円〜のサーバー代がかかります

私が使ったのはClaude Code（クロード コード）というAIです。パソコンに話しかけるように「作って」とお願いすると、AIがホームページの中身（コード）を全部書いてくれます。私がやったのは、お店の情報を伝えることと、できあがったページを見て「ここをこうしてほしい」と感想を言うことだけでした。

コードは1行も書いていませんし、読めるようになる必要もありませんでした。

「本当にそれだけで？」と思いますよね。私も半信半疑だったので、実際の頼み方からお見せします。

実際にAIに頼んだ言葉（プロンプト）を公開📝

やったことは、たった2つです。

ステップ1：お店の情報をメモにまとめる

まず、お店の基本情報を普通の文章でメモにしました。特別な書き方はいりません。私が用意したメモの項目はこれだけです。

ポイントは最後の「お店の雰囲気」です。ここを書いておくと、AIがデザインの色や字体まで雰囲気に合わせてくれます。

ステップ2：メモを渡して、ひとこと頼む

あとは、このメモをAIに渡してこう頼んだだけです。

これだけで、AIが数分でトップページの第1案を作ってくれました。

1日でできたトップページがこちら🏮

黒と木目を基調に、炭火のオレンジ色がぽっと灯ったようなデザイン。お品書きや宴会案内、店舗案内まで入った「1ページ完結型」のトップページです。

※このお店は練習用に設定した架空の居酒屋です。住所などはすべてダミーです。

正直、第1案を見た瞬間に「えっ、もうお店っぽい…」と声が出ました。ただし、一発で完成したわけではありません。実際の流れはこうでした。

1. 21時すぎ：メモを渡して「作って」→ 第1案ができる
2. 感想を言って直してもらう：「もう少し高級感がほしい」「メニューの字が小さい」など、思ったままの言葉で2〜3往復
3. 23時ごろ：スマホで見たときにヘッダーが崩れているのを発見 →「スマホで崩れてるよ」と伝えたら修正 → 完成

直してほしいところは、専門用語ではなく普通の感想でいいというのが一番の発見でした。「なんか寂しい」「もっと美味しそうにして」でも、AIはちゃんと汲み取ってくれます。

このときのAIとのやりとりの全文は、別記事【実践編・HP作成】AIに居酒屋のホームページを作ってもらった全記録で公開しています。

ちなみにその後、AIに写真も作ってもらって追加しました。写真が入った現在のトップページがこちらです。実際にインターネットで公開されていて、スマホからも見られます。

やってみてわかった良かったこと✨

実際に手を動かして感じたメリットは3つです。

• デザインの知識がゼロでもお店らしくなる：色選びも字体もAIにおまかせ。「雰囲気」を言葉で伝えるだけでした
• 修正をその場で何度でも頼める：業者さんだと修正のたびに日数や追加料金が気になりますが、AIは深夜でも即対応。気が済むまで直せます
• スマホ対応も自動でやってくれる：今はお店を探すのはほぼスマホです。何も言わなくてもスマホ表示に対応した作りになっていました（それでも崩れは1ヶ所あったので、確認は必要でした）

正直なデメリット・まだできていないこと⚠️

いいことばかり書くのはこのブログの方針に反するので、正直に書きます。

• 写真は自分で用意する必要がある：AIはページの枠組みは作れますが、料理やお店の写真は別です。私は実物の写真がないので、1日目は写真なしのデザインのままでした（その後、写真もAIで生成して追加できました。このお話も別記事にする予定です）
• 1ページ目はできたけど、複数ページはこれから：お品書きや宴会案内を独立したページに分ける作業は、まだやっていません。私も現在進行形で勉強中です
• 「公開」には別の作業が必要：作った直後のページは、自分のパソコンの中にあるだけです。世界中の人に見てもらうには、次にお話しするサーバーという「土地」を借りる必要があります（私はこのあと実際に借りて、公開までできました）
• AIの答えを鵜呑みにできない場面もある：営業時間やメニューの値段などは、自分の目での確認が必須です。実際、スマホ表示の崩れも私が見つけて直してもらいました

それでも「業者に頼むと数十万円」だったものが、自分の手の届く範囲に来た。この実感は大きかったです。

費用の話：作るのは無料、公開にはいくらかかる？💰

ここが一番気になるところだと思うので、整理します。

項目	費用	補足
AIでHPを作る	無料〜	AIの無料枠でも試せます（本格利用は月20ドル程度〜）
サーバー（HPを置く土地）	月659円〜	ConoHa WINGベーシック・36ヶ月契約の場合（2026年7月時点）
ドメイン（HPの住所）	実質無料	ConoHa WINGは契約特典で独自ドメインが2つ無料（2026年7月時点）

つまり、作るのは無料、公開して初めて月数百円というのが実際のところです。

このブログ自体もConoHa WINGで運営しています。初期費用が無料で、ドメインも特典で無料になったので、「HPの維持費＝月々のサーバー代だけ」というシンプルさが、私のような初心者にはありがたかったです。

ドメインを別で取りたい場合（すでにサーバーがある場合など）は、お名前.comのようなドメイン専門サービスもあります。

よくある質問❓

Q. パソコンが苦手でも本当にできますか？

私もパソコンは得意ではありませんが、できました。必要なのは「文字を打って、AIとやりとりすること」だけです。エクセルより簡単だと感じました。ただし、AIツールの最初の設定だけは少し戸惑うかもしれません（そこも今後の記事で解説予定です）。

Q. どのAIを使ったんですか？

Claude Code（クロード コード）というAIです。料金や始め方は別記事で詳しくまとめています。

→ Claude Codeの料金はいくら？非エンジニアが3ヶ月使った費用と活用例

Q. 無料のホームページ作成サービスとどう違うの？

無料サービスは手軽ですが、広告が入ったり、デザインの自由度に限界があったりします。AIに作ってもらう方法は「完全に自分のお店だけのデザイン」にできるのが違いです。そのかわり、公開にはサーバー代がかかります。

Q. お店の実物写真がなくても作れますか？

枠組みは作れます。私の練習ページも最初は写真なしで、「写真がなくても雰囲気が出るデザインにして」と頼んだら、色と余白でお店らしさを出してくれました。そのあと、写真そのものもAIで生成して追加できました。

まとめ：完璧じゃなくても、1歩目は今日踏み出せる😊

• AIに頼めば、ホームページを「作る」のは無料でできました
• 必要なのはお店の情報メモと、「作って」のひとこと
• 公開するならサーバー代が月659円〜（2026年7月時点）
• 実物写真への差し替えや複数ページ化など、できていないことも正直にあります（続きも記事にします）

「勉強してからやろう」と思っていたら、私は多分ずっと始められませんでした。AIと一緒なら、勉強しながらでも形になります。

このホームページ作成は、私が取り組んでいる「AI副業」の新しい挑戦の1つです。ブログで月1万円を目指してきたこれまでの道のりは、こちらのロードマップにまとめています。

→ 副業ブログで月1万円稼ぐロードマップ【完全版・40代・AI活用】

【実践編・HP作成】では、AIとの実際のやりとりを会話そのままの形で全公開しています。あわせてどうぞ。