いちばんやさしい・ハンズオン

AIと無料でつくる
— はじめてのホームページ

むずかしいソフトのインストールは一切なし。お金も1円もかかりません。フォルダを作るところから、ChatGPTにHTMLもトップ画像も作ってもらい、最後は世界に無料で公開(デプロイ)するまでを、 1ステップずつ、中学生でも分かるように進めます。コードは自分で書きません。ぜんぶChatGPTに作ってもらいます。いっしょにやれば、今日中に「世界に出した自分のページ」が持てます。

🎯 今日のゴール

お店の紹介や自己紹介の1ページのホームページを、トップ画像つきで作り、だれでも見られるURL(インターネット上の住所)として無料で公開できるようになる。

はじめる前に

用意するもの(ぜんぶ無料)

パソコン
WindowsでもMacでもOK。スマホだけだと少し難しいので、できればパソコンで。
ブラウザ
Chrome・Edge・Safariなど、いつも使っているものでOK。
ChatGPT
無料でOK。chat.openai.com にアクセスできれば大丈夫(登録は必要)。
メモ帳などの文字を打つソフト
Windowsなら「メモ帳」、Macなら「テキストエディット」。最初から入っています。

💡 そもそもHTMLって何？

ホームページの「文章と骨組み」を書いたもので、ただのテキスト(文字)ファイルです。むずかしいものではありません。拡張子(名前のうしろ)を .html にすると、ブラウザが「これはホームページだ」と分かって表示してくれます。それだけ。

デスクトップにフォルダを作る

まず、作品を入れる「箱」を作ります。デスクトップ(パソコンの最初の画面)の何もない所を右クリックしてください。

・Windows：「新規作成」→「フォルダー」を選ぶ
・Mac：「新規フォルダ」を選ぶ

できたフォルダの名前を my-website に変えましょう(日本語やスペースは避けると安心)。

できたかな？ デスクトップに「my-website」という名前のフォルダができていればOK！

空っぽの index.html を作る

次に、ホームページ本体のファイルを作ります。名前は必ず index.html にします(「表紙」という意味の決まった名前です)。

Windowsの場合

1. メモ帳を開く
2. 「ファイル」→「名前を付けて保存」
3. 保存先を、さっき作った my-website フォルダにする
4. 「ファイルの種類」を 「すべてのファイル」に変える(ここ大事！)
5. 名前を index.html にして保存

Macの場合

1. テキストエディットを開く
2. メニュー「フォーマット」→「標準テキストにする」を選ぶ(大事！)
3. 「ファイル」→「保存」で my-website フォルダに index.html として保存
4. 「.txtを使用」と聞かれたら 「.htmlを使用」を選ぶ

💡 拡張子が見えない時(Windows)

ファイル名のうしろの .html が見えない場合は、フォルダの「表示」メニューで「ファイル名拡張子」にチェックを入れると見えます。もし index.html.txt になっていたら、うしろの .txt を消しましょう。

できたかな？ my-website フォルダの中に index.html ができていればOK！

ためしに1行だけ書いて、表示してみる

本番の前に、「本当に表示できるの？」を確かめます。 index.html を開いて(メモ帳/テキストエディットで)、下の文をまるごとコピーして貼り付け、保存してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>わたしのはじめてのページ</title>
  </head>
  <body>
    <h1>やった！表示できた！</h1>
    <p>これがわたしのホームページです。</p>
  </body>
</html>

保存したら、フォルダの中の index.html をダブルクリックしてみてください。ブラウザが開いて、「やった！表示できた！」という大きな文字が出れば大成功です。

💡 これがすごいこと

サーバーも、むずかしい準備も無しに、あなたのパソコンの中だけでホームページが表示できました。 HTMLファイルはダブルクリックするだけでブラウザが読んでくれる——これを知っているだけで、もう怖くありません。

できたかな？ ブラウザに「やった！表示できた！」と出ればOK！ここまで来たら半分終わりです。

ChatGPTに、あなたのホームページを作ってもらう

いよいよ本番。コードは自分で考えません。ChatGPTに「こんなページが欲しい」と伝えるだけ。下のテンプレの空欄(___)を、あなたの内容に書きかえて、ChatGPTに送ってください。

あなたはプロのWeb制作者です。初心者向けに、
1つのHTMLファイルだけで完結するホームページを作ってください。

【何のページ】___（例：小さなカフェの紹介 / わたしの自己紹介）
【載せたいこと】___（例：店名、こだわり、営業時間、地図の代わりに住所、問い合わせ先）
【雰囲気・色】___（例：やさしい / かわいい / かっこいい、ベージュ系）

条件：
- CSS(見た目)も同じHTMLファイルの中に入れて、1ファイルで使える形にして
- スマホでも見やすいようにして
- 画像は使わず、色と文字だけで作って
- 説明はいらないので、HTMLのコードだけをコードブロックで出して
- 日本語で

ChatGPTが、長いHTMLのコードをコードブロック(黒い枠)で返してくれます。その枠の右上にあるコピーボタンを押せば、まるごとコピーできます。

💡 うまく伝えるコツ

具体的に書くほど、良いページが返ってきます。迷ったら「もっとおしゃれにして」「文字を大きくして」など、追加でお願いすればどんどん直してくれます。この「頼んで・見て・直す」のやり取りは、AIに任せる技術でくわしく解説しています。

もらったコードを貼り付けて、表示する

コピーしたら、index.html を開いて、中身をぜんぶ消してから、貼り付けます(さっきの練習の文は消してOK)。保存したら、ブラウザで開いている index.html を再読み込み(更新)してください。

・更新のショートカット：Windows は F5、Mac は ⌘(コマンド)＋R

あなたのホームページが表示されました。おめでとうございます、もうあなたは「ホームページを作れる人」です。

できたかな？ ブラウザに、あなたの内容のホームページが表示されればOK！🎉

気に入らない所を直す(これがバイブコーディング)

完璧じゃなくて当たり前。直したい所は、そのままChatGPTにお願いします。全部を作り直す必要はありません。「ここをこう変えて」と言うだけ。

・「タイトルの色を、もっと濃い青にして」
・「営業時間の下に、電話番号を大きく入れて」
・「全体をもっと余白多めで、ゆったりさせて」

返ってきた新しいコードを、また index.html に貼り付けて保存→更新。これのくり返しです。「言葉で頼んで、AIが直す」——これがいま話題の“バイブコーディング”そのものです。

💡 困ったとき

真っ白になった・文字化けした・変な表示になった——そんな時は、その状態をそのままChatGPTに伝えて「直して」と言えば直ります。エラーが出ても大丈夫。エラーは「敵」ではなく「ヒント」です(エラー文おみくじで練習できます)。

トップに「顔」になる画像を入れる(画像もChatGPTが作る)

文字だけでも立派なページですが、いちばん上に大きな画像が1枚あるだけで、ぐっと「本物」っぽくなります。じつはその画像も、ChatGPTに無料で作ってもらえます。

① ChatGPTに画像をお願いする

ChatGPTのメッセージ欄に、こんなふうに頼んでみてください。

次の雰囲気の横長の画像を1枚作ってください。
【何の画像】___（例：あたたかい雰囲気の小さなカフェの店内）
【色】___（例：ベージュとブラウンのやさしい色）
【文字】画像の中に文字は入れないで
【形】横長（ホームページの一番上に置くヘッダー用）

画像ができたら、画像の上で右クリック→「名前を付けて画像を保存」(スマホなら長押しで保存)。保存先は、さっきの my-website フォルダにして、名前を hero.png にしましょう(index.html と同じフォルダに入れるのが大事)。

💡 画像が作れない・作りたくない時は

無料の写真サイト(「フリー素材写真」で検索。Unsplash や Pexels など) から好きな写真をダウンロードしてもOK。それを同じように hero.png (または hero.jpg) という名前で my-website フォルダに入れてください。

② ChatGPTにHTMLへ画像を入れてもらう

今のあなたのHTMLコードをまるごとコピーして、ChatGPTにこう頼みます。

このHTMLの一番上に、hero.png という画像を大きく表示してください。
画像は index.html と同じフォルダにあります。
横幅いっぱいに、きれいに表示されるようにしてください。
（ここに今のHTMLコードを貼り付ける）

返ってきたコードを、また index.html に貼り付けて保存→更新(F5 / ⌘R)。ページの一番上に、あなたの画像が出てくれば大成功です。

できたかな？ ページの上に画像が表示されればOK！画像が出ない時は、名前が hero.png で、 index.html と同じフォルダに入っているか確認してみて。

もっと自由にアレンジする(全部タダで盛れる)

ここまで来たら、あとは「こうしたい」を言葉にするだけ。追加のソフトもお金も要りません。ぜんぶChatGPTに頼めます。気になったものを1つずつ試してみましょう。

・「一番上に、お店の名前とキャッチコピーを画像の上に重ねて表示して」
・「『予約はこちら』みたいな目立つボタンを付けて」
・「メニューや料金を、きれいな表(カード)にして並べて」
・「一番下に、住所・電話番号・営業時間のフッターを付けて」
・「スクロールすると、ふわっと出てくる動きを付けて」
・「スマホで見たときに、もっと見やすく整えて」

返ってきたコードを貼り付けて保存→更新、のくり返し。「言葉で頼む→AIが直す」だけで、どんどん本格的になっていきます。

💡 迷ったらこの一言

「このページ全体を、プロが作ったみたいに、もっとおしゃれで見やすくして」—— ざっくりお願いするだけでも、ChatGPTがまとめて整えてくれます。

世界に無料で公開する(デプロイ)

いよいよ最後。今はパソコンの中にしかないあなたのページを、だれでもURLで見られる状態にします。これを「デプロイ(公開)」と言います。いちばんかんたんで無料な方法を紹介します。

Netlify Drop（ネットリファイ・ドロップ）を使う

1. ブラウザで app.netlify.com/drop を開く
2. デスクトップの my-website フォルダを、そのページの点線の枠の中にドラッグ＆ドロップ(つかんで落とす)する
3. しばらく待つと、あなたのページのURLが表示される 🎉

そのURLを、スマホや友だちに送ってみてください。あなたが作ったページが、世界のどこからでも見られます。これで、あなたは「作れる人」から「公開できる人」になりました。

💡 URLをずっと残したい・名前を変えたい時

無料アカウント(メールだけで登録)を作ると、そのページをずっと残せて、 URLの名前も少し変えられます。登録も、もちろん無料。ファイルを直したくなったら、また同じ my-website フォルダを Netlify Drop に落とし直すだけで、公開中のページが新しくなります。

できたかな？ もらったURLをブラウザに入れて、あなたのページが表示されればOK！スマホから開ければ、まちがいなく「世界に公開」できています。🌏

つまずいたら

よくある「あれ？」と直し方

❓ 画面が真っ白

→ index.html を開いているか確認。ファイル名が index.html.txt になっていないかも見てみて(なっていたら .txt を消す)。

❓ 文字が □□□ に化ける

→ 1行目あたりに <meta charset="UTF-8"> があるか確認。無ければChatGPTに「文字化けするので直して」と頼む。

❓ 変更が反映されない

→ 保存し忘れかも。保存してから、ブラウザを更新(F5 / ⌘R)。それでもダメなら一度ブラウザで開き直す。

❓ 画像が表示されない（枠だけ出る）

→ 画像の名前が hero.png になっているか、index.html と同じフォルダに入っているかを確認。ちがう名前なら、その名前をChatGPTに伝えて直してもらう。

❓ 公開したページで画像だけ出ない

→ デプロイ(Netlify Drop)に、画像ごと my-website フォルダ全体を落とせているか確認。index.html 1つだけをドロップすると画像が付いてきません。

もっとやりたくなったら

次にできること

できたページを世界に公開したり、もっと理解を深めたくなったら、この先の道もあります。

HTML/CSSをちゃんと学ぶ作品を公開する(Git)作品を仕事につなげる AIへの頼み方を極める

じつは、種明かし

これ、ぜんぶ「全自動」でもできるんです

ここまでは、あなたが手でコピペして進めました。でも——HTMLを作る・画像を用意する・アレンジする・公開(デプロイ)するという一連の流れは、じつは人が手を動かさなくても、AIが自動でまとめてやることができます。「こういうサイトが欲しい」と一言伝えるだけで、作成から公開まで裏側で全部走る——そんな仕組みが、いまは本当に作れます。

実際、この学習サイトも、そうしたAIによる自動化の仕組みを使って運営しています。「自分の仕事にも、こういう“AIが勝手に作って公開してくれる環境”を用意したい」—— そう思ったら、その環境づくりごと、HaLVision(ハルビジョン)にご相談ください。

全自動の環境づくりを相談する →

ここから先は、プロの出番

もっとこだわりたくなったら

自分で、しかも無料でここまで作れたのは、すごいことです。でも——集客できるデザイン、スマホでの美しい見え方、予約・問い合わせフォーム、検索で見つけてもらう工夫(SEO)、ロゴや写真の作り込み、独自ドメイン…… 「もっとこだわりたい」の先は、専門の知識と手間がかかる領域です。

「自分のお店・事業の“顔”になる本格的なサイトが欲しい」——そう思ったら、私たちHaLVision(ハルビジョン)にお任せください。この学習メディアを運営している、Web制作・アプリ開発のプロチームです。あなたが自分で作ってみた経験は、打ち合わせでもきっと役立ちます。

制作を相談する →LINEで気軽に聞く

↑ このページのさいしょへ戻る