ホームページを自分で作るのに必要なもの全部｜初心者がつまずいた5つのこと

結論：自分で作るなら、先に用意するのは5つだけ💡

ホームページを自分で作るには、先に5つだけ用意しておくものがあります。お店の基本情報、写真、言葉、独自ドメイン、サーバーの5つです。この5つさえそろっていれば、あとは作り始めながら考えても間に合います。

私はAIを使って、5軒分のホームページを作ってきました。5軒とも練習用に作った架空のお店・会社です。ただし1軒目の「炭火と肴 たか田」だけは、サイトそのものをConoHa WINGで実際に公開していて、私が公開までの手順を全部やりました。残り4軒（ひだまり堂・誠和運送・グリーンリンク・十色雑貨店）は業種を変えて作ったもので、手元に置いています。住所や電話番号はすべてダミーで、サイトの中にもその旨を明記しています。

この記事では、作る手順そのものではなく「作り始める前に何がいるか」と「実際に何につまずいたか」をお伝えします。作り方の詳しい手順は、後半でご案内する別記事にまとめています。

準備①〜③：お店の「中身」（基本情報・写真・言葉）📋

作り始める前に、まずお店の「中身」を3つ準備しておきます。基本情報・写真・言葉の3つです。

基本情報は、店名・住所・電話番号・営業時間、業種によっては許可番号までまとめておきます。架空の練習用サイトで作った4軒でも、この基本情報はいったんすべてダミーで用意しました。実在しない情報だと分かるように、サイトの中に「架空の練習用サイトです」と明記しています。

写真は「何のシーンが必要か」をリストにしておくと、あとの作業がスムーズです。AIで生成する場合も同じで、先に場面を決めておくと迷いません。写真については、後の「つまずき」の章で実際に起きたことをお伝えします。

言葉は、キャッチコピーやメニューの説明文、お店への想いなどです。AIに丸投げすると、どのお店にも当てはまる文章になりがちです。自分の言葉の元ネタだけは、先に用意しておくと仕上がりがブレません。

準備④⑤：HPの「住所」と「土地」（ドメインとサーバー）🏠

中身の準備ができたら、次はホームページを公開する場所を用意します。ここで必要なのが、独自ドメインとサーバーの2つです。

独自ドメインは、ホームページの「住所」にあたります。サーバーは、その住所に建物を建てる「土地」です。住所だけあっても土地がなければ建物は建てられず、土地だけあっても住所がなければ誰も訪ねてこられません。この2つは、セットで用意します。

私は「炭火と肴 たか田」を公開するとき、ConoHa WINGでこの2つをまとめて用意しました。契約特典で独自ドメインが2つ無料になり、住所と土地を別々に探す手間がありませんでした。3ヶ月使ってみた本音のレビューは、こちらに書いています。

ConoHa WING レビュー｜40代主婦が3ヶ月使って感じた本音【メリット・デメリット全部書く】

作る手段は3つ｜ノーコード・AI・外注の違い🛠️

準備が整ったら、次に決めるのは「何を使って作るか」です。ホームページの作り方は、大きく分けて3つあります。ノーコードツール、AI、外注です。

ノーコードツールは、Wixやペライチのように決められたパーツを組み合わせて作るタイプです。AIは、ChatGPTやClaude Codeに要望を言葉で伝え、ページそのものを作ってもらうタイプです。外注は、制作会社やフリーランスに依頼する方法です。

方法	特徴	向いていること
ノーコード	決められたパーツを組み合わせて作る	テンプレートの型に沿って作りたいとき
AI	言葉で伝えてページそのものを作ってもらう	細かい要望を反映させながら形にしたいとき
外注	制作会社やフリーランスに依頼する	自分の作業時間をかけたくないとき

外注の費用は、依頼先や内容によって幅が大きいところです。私は依頼したことがないので、この記事では相場の金額は書きません。気になる場合は、依頼先に直接見積もりを聞くのが確実だと思います。

私がAIを選んだのは、テンプレートに縛られず、細かい要望を反映させたかったからです。

AIで作るとどうなる？5軒作った実際の流れ⚡

AIでホームページを作る流れは、お店の基本情報や写真、言葉をAIに伝え、できたHTMLを見て直したいところを伝え直す、この繰り返しです。

私は5軒すべてをこの流れで作りました。居酒屋ならメニュー、運送会社なら「選ばれる理由」、雑貨店なら商品カードと、業種が違えば構成も変わります。それでも、基本情報・写真・言葉の準備さえできていれば、AIに伝える材料には困りませんでした。

実際にどんな言葉でAIに伝えたか、どんなページができあがったかは、居酒屋「たか田」を1日で作ったときの手順として、こちらの記事にまとめています。

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

クロコ（私が使っているAI）とのやりとりをすべて公開した実践編もあります。実際にどんな言葉で伝えて、どんな返事が返ってきたのか、会話そのものを見てみたい方はこちらをどうぞ。

【実践編・HP作成】AIに居酒屋のホームページを作ってもらった全記録｜クロコとのやりとり公開

5軒作って、毎回つまずいたこと⚠️

5軒作ってみて、順調にいかなかったことも正直にお伝えします。ここが、この記事で一番伝えたいところです。

1つ目は、AIで生成した写真に、実在するブランドのラベルが写り込んでいたことです。「たか田」の地酒とお造りの写真をAIで作ったところ、実在する銘柄のラベルがそのまま写っていました。実在ラベルの無い新しい画像に差し替えて解決しましたが、誠和運送やグリーンリンクの写真を追加するときも、実在するメーカーのロゴや架空の会社名の誤りが混ざっていないか、毎回同じ点を警戒することになりました。この件は、別記事に詳しく書いています。

AIで作った画像に知らない会社名が…画像生成で気をつけたい落とし穴【実例3つ】

2つ目は、作り終えたあとに表示が崩れていたことです。誠和運送のサイトで「選ばれる理由」1つ目の画像が表示されず、隣のカードの文字が透けて見えていました。作った直後は気づけず、あとから自分でスクリーンショットを見返していて気づきました。壊れていた古いファイルは別に残したうえで、直しています。

3つ目は、見た目の調整は一度で決まらないということです。十色雑貨店では、1日のうちに余白・カテゴリの並び・商品カードの列数・文字色・背景・ヒーロー画像を何度も作り直し、途中経過のバックアップファイルが10本以上残っています。

費用は結局いくら？公開までの目安💰

ここが一番気になるところだと思うので、整理します。ホームページを自分で作って公開するまでにかかる費用は、大きく3つに分かれます。

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

ConoHa WINGのWINGパック ベーシックは、契約期間によって月額が変わります。3ヶ月なら1,331円、6ヶ月なら1,210円、12ヶ月なら970円、24ヶ月なら844円、一番長い36ヶ月なら659円です。初期費用は無料で、SSDの容量は500GBです。

私自身は12ヶ月契約で、月額970円（税込）で使っています。つまり、作るのは無料、公開して初めて月数百円というのが実際のところです。

公開してから必要になること🔍

ページが完成しても、そのまま公開できるわけではありません。「作る」と「公開する」の間に、もう2つやることがあります。

1つ目は、画像を軽くすることです。「たか田」のお造りの写真はファイルが重く、sipsというコマンドで軽量化してからサーバーに転送しました。見た目だけを追いかけていると、ここを見落とします。

2つ目は、サーバーに置く手段を用意することです。「たか田」のページを作り終えたあと、FTPアカウントの作成が最優先の宿題として残りました。HTMLができあがっていても、置く手段がなければ誰にも見てもらえません。

よくある質問❓

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

私自身、エンジニアではありません。40代で未経験からAIを使い始めて、この5軒を作りました。この記事で紹介した5つの準備を先に済ませておけば、あとはAIとの言葉のやりとりで進められます。

Q. 作業はどれくらいかかりますか？

お店によって差があります。「たか田」は1日で形になりましたが、「十色雑貨店」は1日のうちに何度も作り直しました。一度で決まるものではないと思っておくと、気持ちが楽になります。

Q. 無料で作ることはできますか？

作る部分はAIの無料枠でも試せます。ただし、公開してほかの人に見てもらうには、独自ドメインとサーバーの費用がかかります。目安はこの記事の「費用は結局いくら？」の章にまとめています。

Q. AIで作ったサイトでも、変な仕上がりになりませんか？

写真の実在ブランド写り込みや、作ったあとの表示崩れのように、確認が必要な場面はありました。「5軒作って、毎回つまずいたこと」の章の3つを、公開前のチェックとして見ておくと安心です。

Q. お店から頼まれて作った経験はありますか？

ありません。ココナラやクラウドワークスなどに出品したこともなく、この5軒はすべて自分で決めて作った練習用のサイトです。私は制作を請け負う側ではなく、自分のページを自分で作った側の目線でこの記事を書いています。だからこそ、うまくいかなかったところも隠さずに書きました。

まとめ🌸

5軒作ってみて分かったのは、一度で仕上がることはなかったということです。写真の写り込み、表示崩れ、何度もの作り直し。それでも1つずつ直しながら、「たか田」のホームページは今も公開したまま動いています。

実際にAIとどんな言葉でやりとりしてページを作ったのか、具体的な手順を知りたい方は、入門編と実践編の記事をあわせてご覧ください。準備さえできていれば、次にやることは案外シンプルです。

なお、ここで使ったサーバーやドメインは、私が副業ブログを始めたときに契約したものと同じです。AIを使って何かを作り、それを収入につなげるまでの流れは、副業ブログで月1万円稼ぐロードマップ【完全版・40代・AI活用】にまとめています。