【完全無料】IT知識不要！ AWSを使って自分のWebサイトを公開する方法

「自分専用のホームページがあればいいのに。」個人事業主として働いている方、クリエイターとして活動している方は、一度は思ったことがあるのではないでしょうか。

しかし、どうやって作れば良いかわからない。AIで作ってみたけれど、公開方法がわからない。画像を入れたり、自分で都度編集したりできない。こういった課題を持つ方が多いと思います。

今回は、【プログラミング不要】【完全無料】【画像あり】【自由にカスタマイズ】で自身のWebサイトを作る方法を紹介します。

作成する流れ

1. AIで自身のホームページを作ってみる。
2. AIに指示してカスタマイズする。
3. AWSで公開設定をする。
4. 挿入する画像を準備する

この４つの手順で簡単に作成できます。順番に進めていきましょう。

1.AIで自身のホームページを作ってみる

まずはお好きなAIツールを使って、自身のホームページを作ってみます。Claude、ChatGPT、Geminiなど何でも構いません。
おすすめのプロンプトはこちらです。この文章に自身のことを書き込んで、AIに投げてみましょう。作りたいものがイメージできない場合は、「おすすめで作って」と依頼するのも良いと思います。

## 【依頼内容】
私の個人ウェブサイトを作ってください。

## 【目的】
私はイラストレーターであり、私の描くイラスト、料金、依頼方法などをまとめる。仕事を獲得するため。
## 【見てほしい人】
SNSアイコンを探している人、ゲーム製作者
## 【載せたい内容】
名前：さとう
料金表：キャラクター1人 5000円、2人目から+4000円、小物1つ1000円、背景あり10000円
自己紹介：初めまして！個人イラストレーターのさとうです。アイコン作成を得意としています。ペアアイコンや、SNSの利用にぜひご利用ください。
実績：過去に書いたイラストを３枚ほど。画像で載せる。
## 【ホームページの雰囲気、装飾】
グレーを基調とした、フォーマルなデザイン。
## 【出力形式】
HTML
ホームページはAmazon S3でホストする。画像を後から差し替えて挿入できるようにする。

完成したホームページがこちらです。大体指示した通りに作成されると思います。

2.AIに指示してカスタマイズする

ウェブサイトが大体完成したら、イメージと違う部分や実際に入れたい文章を変更していきましょう。変更点は主に装飾と内容の２つです。

装飾

ホームページの背景や見え方を変更することができます。チャットベースでAIに依頼してみましょう。
大切なことは、「どこを」「どのように」変更して「どうしたいか」を明確に伝えることです。

悪い例：「右上の方の文字の色を、もうちょっと濃くして」
良い例：「右上にある、自己紹介、実績、などのページ遷移が書いてある部分の文字の色を濃くして。クリックできることが伝わりやすく、見やすくしたい。」

なんとなく納得いかないけれど、どこをどう変えたらいいかわからない。という場合はそのまま相談してもOKです。

内容

中身の細かい文章を変えていきましょう。1つずつAIに指示していきます。ITの知識がある方は、もらったhtmlファイルをダウンロードして自身で書き換えても良いですね。

例：下記の文章を修正して。
自己紹介の「初めまして！」を「はじめまして」に。
トップページの「個人イラストレーター」を削除して
実績の「画像は差し替えてご利用ください。」を削除して。

金色の細かい装飾が加わり、猫のイラストが得意なことがよくわかる、フォーマルかつ高級感のあるウェブサイトに変更できました。

完成したファイルをダウンロードして、この手順は完了です。

3.AWSで公開設定をする

Webページを公開するための設定をしていきます。一般的にウェブサイトを公開するためには、「サーバー」が必要になります。サーバーは、Webサイトのデータを置いておく「インターネット上の土地」のような役割を果たします。

AWS（Amazon Web Services）を使うことで、簡単にサーバーを借りることができます。AWSとは、ITリソースをインターネット経由で柔軟・迅速に利用できるサービスです。データベース、サーバー、ストレージなど、使える機能は200種類以上あります。

3-1. AWSに会員登録する

こちらにメールアドレスとアカウント名を入力します。プラン設定の画面が出てきます。

無料プランは、6ヶ月の間であれば完全に無料。最大200USDのクレジット（登録時100+条件達成で+100）付与。6ヶ月後にアカウントが自動で閉鎖され、有料プランに切り替える必要がある。
右側の有料プランは、最初から支払い方法を登録する必要がある。最大200USDのクレジット（登録時100+条件達成で+100）6ヶ月後も有料プランに切り替える必要はなく、継続して利用できる。

Webサイトを公開することだけが目的であれば、初めから有料プランに登録する方がおすすめです。
「無料じゃないの！？」と思われた方がいるかもしれませんが、無料です。クレジットは、作成したWebページの容量と、アクセスされた回数（通信量）に応じてかかります。ただし、月に一定量のアクセスまでは無料です。
これを計算すると、ウェブサイトに1日100回アクセスされたとして、200USDを使い切るには100年以上かかる計算です。実質無料ということですね。
選択後、連絡先や請求情報の入力を進めます。

3-2.バケット（Webサイトを入れておく入れ物）を作る

1.AWSコンソールにログインします。
2.左上の検索窓に「S3」と入力し、S3を選択します。

3.右上、赤枠の部分からリージョンを確認します。「アジアパシフィック（東京）」を選択します。

4.オレンジ色の「バケットを作成」を選択します。
5.設定画面が出てくるので、この通りに設定します。赤文字の部分以外は、デフォルト設定のままで大丈夫です。(2026年8月時点。コンソールの内容は変更されることがあります）

6.右下オレンジ色の「バケットを作成」を選択します。バケットが完成しました！

3-3.ウェブサイトをバケットに入れる

1.中央の「アップロード」を選択します。

2.「ファイルを追加」を選択します。

3.AIに作ってもらい、ダウンロードしたファイルを入れます。「xxx-.html」のような形になっていると思います。このようになれば成功です！

3-4.公開設定をする

1.「プロパティ」のタブを選択します。

2.一番下までスクロールし、「静的ウェブサイトホスティング」を見つけます。「編集」を選択します。

3.下記の設定にします。

エラードキュメント、リダイレクトルールはなしでOKです。設定できたら「変更を保存」を選択します。
4. 静的ウェブサイトホスティングの項目に、URLが表示されています。こちらをコピーして、保存しておきます。まだWebサイトは表示できません。
5.スクロールで上まで戻り、「アクセス許可」のタブを開きます。バケットポリシーの欄にある「編集」を選択します。
下記のコードをコピーして貼り付けます。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
  ]
}

6.「YOUR-BUCKET-NAME」の部分を、自身のバケット名にします。画像の赤枠の部分がバケット名です。コピーして置き換えます。末尾の「/*」は必要です。削除してはいけません。

7.編集を終えたら画面を一番下までスクロールして、右下にある「変更を保存」を選択します。
8.先ほど保存した、静的ウェブサイトホスティングのURLをアドレスバーに入力して開きます。

ウェブ上でサイトが表示されました！　URLの最初がバケット名になっています。

うまく行かない場合は、下記を確認してみてください。

• 手順3-4-6　YOUR-BUCKET-NAME を書き換えた時のバケット名が間違っている、末尾の「/*」が消えている。
  →アクセス許可のタブ＞バケットポリシー＞編集 で修正
• パブリックアクセスブロックがオンになっている
  →アクセス許可のタブ＞ブロックパブリックアクセス＞「パブリックアクセスをすべて ブロック」をオフにする
• 手順3-4-3　インデックスドキュメントに書いたファイルの名前が間違っている。
  →プロパティのタブ＞静的ウェブサイトホスティング＞インデックスドキュメント で修正

4.挿入する画像を準備する

1.画像の名前を確認する
挿入したい画像を準備します。「画像をここに表示する」というコードは、冒頭でAIが作成したWebサイトの中に書かれています。画像の名前を、このウェブサイトの中にコードと同じ名前にしないとうまく反映されません。AIに、どの画像をなんという名前で用意するべきか聞いてみましょう。
「画像を準備します。どの画像がなんという名前で挿入されているか、全て教えてください」と聞いたところ、こんなふうに教えてくれました。

1. 画像をアップロードしていきます。手順３で使っていたAWSの画面に戻ります。自分のバケットの画面から、「アップロード」を選択します。
   

3.「ファイルを追加」を選択して、ウェブサイトに挿入したい画像を選択、右下のボタンからアップロードします。

4.バケットのトップ画面に戻り、先ほどアップロードした画像を1つ選択します。画像にチェックを入れて、「アクション」から「オブジェクトの名前変更」を選択します。

5.先ほどAIに確認したファイルの名前の通りに付け直します。この手順を全ての画像に行います。
以上で終了です。もう一度自身のWebページを開いてみましょう。
URLをなくしてしまった方は、プロパティのタブ＞一番下にスクロールして、静的ウェブサイトホスティングの欄にあるURLから開くことができます。

画像が挿入されたウェブサイトが完成しました！

ウェブサイトを更新するには

ウェブサイトの中身を変えたい、内容を増やしたいときはAIに相談して変更してもらいます。変更後は、S3のバケットの中身を入れ直す必要があります。

1.S3から、自身のバケットを開きます。
2.「xxx.html」と書いてある、更新前のウェブサイトを選択し、削除します。

3.「アップロード」を選択し、新しくAIが変更したファイルをアップロードします。
4.名前を確認し、「xxx.html(1)」のようになっていたら「xxx.html」の形へ戻します。手順3-4-3で設定した名前と同じでないと、うまく動かなくなってしまいます。
以上で完了です。

 まとめ

いかがだったでしょうか。AIの力とクラウドサービスであるAWSを使えば、エンジニアでなくても簡単に自身のウェブサイトを作成することができます。
今回取り扱ったAWSですが、アプリケーションを作成したり、AIの音声読み上げ機能があったりと様々なサービスが用意されています。興味のある方は、無料枠の制限に気をつけながら使用してみてください。

最後まで読んでくださりありがとうございました。今回の方法はバケットの中身を全てインターネットに公開することになります。個人のウェブサイトで問題になる可能性は低いですが、実務では推奨されません。
より安全にウェブサイトを公開したい方は、「【AWS】S3＋CloudFrontで静的サイトを安全に公開する方法」をご覧ください。