結論：Web制作未経験でも1日・費用0円で公開までできた
私はWeb制作経験もプログラミング経験もありません。
HTMLやCSSという言葉は知っていましたが、自分でコードを書いてWebサイトを作った経験は0でした。
そんな私が今回、AIを使いながら友人のカメラ活動用Webサイトを制作しました。
実際の結果がこちらです。
| 項目 | 今回の結果 |
|---|---|
| Web制作経験 | なし |
| プログラミング経験 | なし |
| 制作期間 | 1日 |
| 制作費 | 0円 |
| 使用ツール | ChatGPT・Codex・GitHub |
| 公開方法 | GitHub Pages |
| サイト | 公開済み |
| 制作報酬 | 0円（友人のため無料制作） |
作ったのは練習用サイトではありません。
実際に友人がカメラ活動で使用するためのWebサイトです。
今回は、Web制作未経験の会社員がどのようにAIを使って公開まで進めたのかを、実際に行った手順に沿って紹介します。
なぜWebサイトを作ることになったのか
今回サイトを作った友人は、長年カメラを趣味として続けています。
知人などから依頼を受け、
- 家族写真
- 子どもの写真
- 七五三
- お宮参り
- カップル撮影
- イベント撮影
などをすることがあります。
Instagramでも写真を公開していましたが、撮影内容や料金、対応エリア、問い合わせ方法などを一つにまとめられる場所がありませんでした。
そこで、
「写真撮影の依頼につなげるためのWebサイトを作ってみよう」
という話になりました。
問題は、私自身にWeb制作経験がなかったことです。
そこで今回は、分からない部分をAIに相談しながら、どこまで作れるのか試してみることにしました。
制作前の私のWebスキル
最初に、制作前の知識レベルを書いておきます。
Web制作経験：0
プログラミング経験：0
です。
HTMLやCSSという言葉を聞いたことはありました。
HTMLはWebページの文章や構造を作るための言語、CSSはレイアウトや色などの見た目を調整するために使われます。
ただし、自分でHTMLやCSSを書いてサイトを完成させた経験はありません。
今回はWeb制作を一から勉強してから作ったのではなく、
分からないことが出る → AIに聞く → 実際に試す
という方法で進めました。
今回使った4つのツール
今回の制作では、主に4つのサービスを利用しました。
| サービス | 今回の用途 |
|---|---|
| ChatGPT | サイト企画・構成・相談 |
| Codex | コード作成・修正 |
| GitHub | 作成したコードの管理 |
| GitHub Pages | Webサイトの公開 |
それぞれを何となく使ったのではなく、役割を分けました。
まずChatGPTで「何を掲載するサイトにするのか」を整理。
その内容をもとにCodexで実際のサイトを制作し、GitHubで管理。
最後にGitHub Pagesを使ってWeb上へ公開しました。
今回の条件では、サイト公開までにかかった費用は0円でした。
※各サービスの料金体系や無料利用条件は変更される可能性があります。利用する時点の公式情報を確認してください。
STEP1：最初にChatGPTで必要な情報を整理した
いきなりサイトを作り始めたわけではありません。
まずChatGPTと一緒に、サイトに必要な情報を整理しました。
具体的には、
「誰に見てもらいたいのか」
「どんな撮影を受けたいのか」
「料金はいくらなのか」
「対応エリアはどこなのか」
「問い合わせ方法はどうするのか」
「どんなデザインにするのか」
などです。
今回のサイトでは、家族写真や子どもの撮影、七五三、お宮参り、カップル撮影などの依頼につなげることを想定しました。
デザインは白を基調にして、写真が目立つシンプルな構成にしました。
友人の活動名に合わせて、「栗」をイメージできる要素も入れています。
ここで感じたのは、AIを使う場合でも最初に目的を決める必要があるということです。
「いい感じのサイトを作って」だけでは、こちらが欲しいサイトをAIに伝えられません。
STEP2：必要なページと掲載内容を決めた
次に、実際に何を掲載するのか決めました。
今回必要だと考えたのは、
- カメラマンの紹介
- 撮影した写真
- 撮影メニュー
- 料金
- 対応エリア
- 問い合わせ方法
などです。
特に重視したのは、初めてサイトを見る人が、
「どんな写真を撮ってくれるのか」
「いくらなのか」
「自分の地域まで来てもらえるのか」
「どうやって依頼すればいいのか」
を確認できることです。
見た目だけではなく、撮影を依頼する人が必要とする情報を掲載することを意識しました。
STEP3：Codexに日本語で指示してサイトを作った
構成が決まったら、Codexを使って実際の制作に入りました。
私はコードを書けないので、
「この場所に写真を配置したい」
「料金を分かりやすく表示したい」
「スマートフォンでも見やすくしたい」
など、日本語で希望を伝えながら作業しました。
基本的な流れは、
日本語で指示する
↓
コードが作成される
↓
実際の画面を確認する
↓
気になる部分を日本語で伝える
↓
修正する
の繰り返しでした。
コードの意味をすべて理解してから進めたわけではありません。
完成した画面を確認しながら、「ここを変更したい」と伝えて少しずつ形にしていきました。
STEP4：うまくいかない部分もAIに聞いた
Web制作未経験なので、当然分からないことも出てきました。
通常なら、
「どのコードを修正すればいいのか分からない」
というところで止まっていたと思います。
今回は、その分からない状態自体をAIに伝えました。
例えば、
「この部分をもう少し大きくしたい」
「スマホで見ると、この部分が見づらい」
などです。
コードそのものではなく、画面を見て感じた問題を日本語で伝えることで修正を進めました。
これは未経験者の私にとって非常に助かりました。
一方で、AIが出した内容が必ず希望通りになるわけではないため、最終的には自分で画面を確認する必要がありました。
STEP5：GitHub Pagesを使って公開した
サイトが完成したら、GitHubでコードを管理し、GitHub Pagesを使ってインターネット上へ公開しました。
今回制作したのが、友人のカメラ活動用サイトです。
「焦げたくり」
という名前で公開しています。
ここにはぜひ、実際の完成サイトへのリンクを掲載します。
さらに、その直下に完成したトップページのスクリーンショットを入れます。
※実際にAIを活用して制作し、公開した友人のカメラ活動用Webサイトです。
練習用のサンプルではなく、実際に公開したものなので、この記事では完成物そのものも公開します。
本当に1日で完成したのか？
今回、制作を始めてから公開するまでにかかった期間は1日でした。
ただし、ここは誤解されないように条件も書いておきます。
今回制作したのは、大規模な企業サイトではありません。
複雑な会員登録機能や予約システム、ネットショップなどを実装したわけでもありません。
友人の写真、プロフィール、料金、対応エリア、問い合わせ方法などを掲載する、比較的シンプルなサイトです。
その条件で、
Web制作未経験の私が、1日で公開まで進められた
というのが今回の結果です。
「AIならどんなWebサイトでも1日で作れる」という意味ではありません。
費用0円でどこまでできた？
今回、サイトを公開するまでに私が支払った制作費用は0円でした。
独自ドメインを新しく購入したわけではなく、今回利用した環境の範囲で公開したためです。
また、友人のために作ったので、私自身も制作料金を受け取っていません。
つまり今回の収支は、
制作費：0円
制作報酬：0円
です。
副業としてはまだ1円も稼げていません。
ただし、「Web制作未経験者がAIを使って実際のサイトを公開できるのか」という検証については、公開まで進めることができました。
実際にやって分かったメリット
今回、特に大きいと感じたのは3点です。
1．コードを書けなくても制作を始められた
HTMLやCSSを一から勉強してからではなく、AIに相談しながら制作を進められました。
2．分からないところで止まりにくかった
「何が分からないのか分からない」という状態でも、そのままAIに質問できました。
3．公開までが速かった
今回は1日で制作から公開まで進められました。
本業があり、副業に使える時間が限られている私には大きなメリットでした。
AIを使っても難しいと感じたところ
一方、実際に作ってみて、
「AIが全部やってくれるわけではない」
ことも分かりました。
特に必要だったのは、
何を作りたいのか決めることです。
写真サイトなのに料金や対応エリアが分からなければ、AIがコードを書いても使いやすいサイトにはなりません。
また、AIが作った画面について、
「これは見やすいのか」
「友人の雰囲気に合っているのか」
「必要な情報が抜けていないか」
などを判断するのは人間です。
コードを書く作業はAIにかなり助けてもらいましたが、サイトの目的を決める部分まで完全に任せることはできませんでした。
Web制作未経験者でも副業にできる？
今回の経験だけで、
「AI Web制作なら稼げる」
とはまだ言えません。
なぜなら今回の制作報酬は0円だからです。
サイトを作るところまではできました。
しかし、お金をいただく仕事にするなら、
- お客さんを見つける
- 要望を聞く
- 見積もりを出す
- 修正に対応する
- 納期を守る
- 公開後の対応範囲を決める
- 個人情報やセキュリティにも配慮する
といった作業も必要になります。
この部分については、私はまだ実際の有料案件を経験していません。
そのため現時点で確認できたのは、
「未経験でもAIを使いながらシンプルなWebサイトを作り、公開まで進めることはできた」
というところまでです。
次は「Web制作で初報酬」を検証する
今回のサイトは友人のために無料で作りました。
次に検証したいのは、
「この経験を実際の副業収入につなげられるのか」
です。
例えば、
個人で活動しているカメラマンや、小規模な事業者など、「大規模なサイトは必要ないけれど、シンプルなホームページが欲しい」という人へのWeb制作です。
ただし、需要があるのか、いくらなら依頼されるのか、未経験者でも仕事として対応できるのかは、まだ確認できていません。
ここは想像で「稼げる」と書かず、実際に挑戦してから結果を記事にします。
まとめ｜未経験でも公開まではできた。ただし収益はまだ0円
今回、Web制作・プログラミングともに未経験の私が、AIを活用して友人のWebサイトを制作しました。
結果は、
| 項目 | 結果 |
|---|---|
| Web制作経験 | なし |
| プログラミング経験 | なし |
| 制作期間 | 1日 |
| 制作費 | 0円 |
| 制作報酬 | 0円 |
| 使用ツール | ChatGPT・Codex・GitHub |
| Web公開 | 完了 |
| 集客効果 | 今後検証 |
AIを使えば簡単に副業で稼げる、とまでは言えません。
実際、今回の収益は0円です。
しかし、
「自分にはWeb制作なんてできない」
と思っていた状態から、実際に友人が使うWebサイトを公開するところまでは進めました。
次はこれを有料の仕事として受注できるのかを試します。
うまくいっても、失敗しても、実際にやった結果をこのブログで公開していきます。実際に挑戦し、その結果もこのブログで公開していきたいと思います。
コメント