未経験者でも可！たった30分で生成AIでWebサイトを作る方法

## 0〜10分｜Webサイト制作は「専門家だけの仕事」ではなくなってきた

最初に、

「自分でWebサイトを作ったことがありますか？」

という質問から始めます。

これまで自分でWebサイトを作るとなると、

HTML
CSS
JavaScript
デザイン
サーバー
ドメイン

など、さまざまな知識が必要でした。

そのため、

「自分のサイトを持ってみたい」

と思っても、制作サービスを使ったり、専門家へ依頼したりするのが一般的でした。

ところが生成AIによって、この技術的なハードルが大きく下がっています。

今は、

「こんなWebサイトが欲しい」

という日本語から制作を始めることができます。

この時間ではWeb制作の専門知識を覚えるのではなく、「技術の進歩によって何が変わったのか」を最初に体感していただきます。

---

## 10〜15分｜今日作る「自分だけのページ」を考えよう

今回作るのは、1ページだけのシンプルな自己紹介サイトです。

例えば、

・名前またはニックネーム
・簡単な自己紹介
・仕事・活動内容
・趣味
・好きなこと
・一言メッセージ

などを掲載します。

立派なホームページを完成させる必要はありません。

「自分について伝えた内容が、本当にWebサイトになる」

ことを体験するための小さな作品です。

この時間で、サイトに載せたい内容を簡単に整理します。

---

## 15〜35分｜Codexにお願いして、自分のWebページを作ってみよう

ここから実際に制作します。

例えば、

「私の自己紹介用の1ページWebサイトを作ってください」

と伝え、

自分のプロフィールや掲載したい内容を追加します。

Codexがファイルを作成したら、実際にブラウザで表示します。

ここでもHTMLやCSSを一行ずつ解説することはしません。

日本語で伝える
↓
AIがWebページを作る
↓
ブラウザで確認する

という流れを体験します。

数分前までは何もなかったフォルダから、自分自身を紹介するWebページが実際に表示される。

この「本当にできた」という瞬間を重視します。

---

## 35〜50分｜AIと会話しながら、自分好みのサイトに変えよう

最初に生成されたWebサイトは完成ではありません。

ここから、

「もっと明るい雰囲気にしてください」

「落ち着いたデザインにしてください」

「名前をもっと大きくしてください」

「プロフィールをカードのようなデザインにしてください」

「趣味の部分を目立たせてください」

など、自分の希望をAIへ伝えます。

Web制作経験がないと、

「この部分を変えたいけれど、どう直せばいいか分からない」

という場面が出てきます。

しかし生成AIを使えば、

「ここをもう少し○○にしたい」

という曖昧な希望からでも修正を始められます。

この時間では、完成されたテンプレートを使うのではなく、「AIとの会話によって自分のサイトが徐々に変わっていく」体験をしていただきます。

---

## 50〜60分｜自分のWebサイトを世界に公開するには？

PC上で作ったページは、この段階では自分自身しか見ることができません。

そこで、

「Webサイトをインターネット上へ公開するとはどういうことなのか」

を説明します。

そのうえで、講師が実際にデプロイする流れを紹介します。

公開すればURLが発行され、それを家族や友人へ送ったり、SNSへ掲載したりできるようになります。

ただし、実際に公開するかどうかは自由です。

本名などを載せたくない方、まだ完成していない方は、PC上だけで保存しておいても問題ありません。

「作るところから公開するところまで、こうつながっている」

という全体像を理解していただきます。

---

## 60〜70分｜自己紹介ページから、もっと大きなものへ

今回作ったのは自己紹介ページ1枚だけです。

しかし同じ考え方を使えば、

・ポートフォリオサイト
・趣味のサイト
・店舗のホームページ
・商品紹介ページ
・イベントページ
・サービス紹介ページ
・ランディングページ
・採用ページ

などへ発展させることができます。

ここでは実際の例をいくつか紹介しながら、

「自分だったら次に何を作ってみたいか？」

を考えていただきます。

重要なのは、今日作ったページを豪華にすることではありません。

「Webサイトは自分には作れない」

という感覚を、

「AIと一緒なら、とりあえず作ってみることはできる」

へ変えることです。

---

## 70〜75分｜質問・振り返り

最後に質問を受け付けます。

そして、この講座で体験した技術進歩を振り返ります。

今日覚えたHTMLや操作方法が数年後も同じとは限りません。

しかし、

「新しい技術が出てきたときに、とりあえず触ってみる」

「自分にできることが増えないか試してみる」

という姿勢は、今後も使えます。

自己紹介ページは、その入口です。

「今まで自分にはできなかったことが、技術の力でできるようになる」

そんな面白さを持ち帰っていただく75分にします。

この講座は、「自分のWebサイトを一度作ってみたい」「生成AIを使うと、どこまでWeb制作ができるのか体験してみたい」という方を対象としています。

Web制作やプログラミングの経験は必要ありません。

むしろ、

「HTMLやCSSと言われてもよく分からない」
「Webサイトは制作会社や詳しい人に作ってもらうものだと思っている」
「自分で作ってみたい気持ちはあるけれど、勉強する時間までは取れない」

という方にこそ参加していただきたい内容です。

この講座では、生成AIを使って、自分自身を紹介するシンプルな1ページのWebサイトを実際に作ります。

名前、プロフィール、仕事、趣味、好きなことなどをもとに、

「この内容で自己紹介ページを作って」

と生成AIへ伝え、実際にブラウザで表示できるWebページへ変えていきます。

そのため、「Web制作を勉強する講座」というより、

「生成AIによって、今まで自分には難しかったものを実際に作ってみる講座」

という位置づけです。

普段ChatGPTを使っている方でも、

「文章を書いてもらう」
「メールを作ってもらう」
「調べものをする」

程度の使い方にとどまっている方は多いと思います。

しかし現在の生成AIは、文章だけではなく、Webサイトのような「形のあるもの」を作るところまで進んできています。

この講座では、その変化を実際に自分の手元で体験していただきます。

さらに、

「もっと明るい雰囲気にしたい」
「プロフィールを目立たせたい」
「ボタンを追加したい」
「この部分を別のデザインにしたい」

といった希望を生成AIへ伝えながら、完成したページを自分好みに変えていきます。

最後には、作ったWebページをインターネット上へ公開する方法も紹介します。実際に公開するかどうかは、ご自身で判断していただいて構いません。

「Webサイトを作る」という一連の流れを知ることが目的です。

この講座は、

「生成AIの新しい使い方を知りたい」
「AIでものづくりをしてみたい」
「自分のプロフィールサイトを作ってみたい」
「プログラミングは苦手だけれどWeb制作には興味がある」
「最新技術によって、何ができるようになっているのか体験したい」
「自分には無理だと思っていたことに挑戦してみたい」

という方におすすめです。

・ 当日はPCをご用意ください。スマートフォン・タブレットのみでの参加は想定していません。
・ 講座開始前までに、案内するChatGPT・Codexの利用環境をご準備ください。インストールやログインでつまずいた場合に備え、事前確認をおすすめします。
・ プログラミング経験は不要です。HTML・CSS・JavaScriptなどのコードを一から学ぶ講座ではありません。
・ 講座内では公開方法（デプロイ）まで紹介しますが、実際にインターネット上へ公開するかどうかは任意です。公開する場合は、氏名・住所・連絡先など公開したくない個人情報を掲載しないようご注意ください。
・ 生成AIは同じ指示でも毎回まったく同じ結果になるとは限りません。完成物を全員同じ形に揃えることより、「AIと会話しながら作り、直していく」体験を重視する講座です。
・オンラインでの講座となります。参加URLをお送りしますので、時間5分前を目安に入室をお願いいたします。
・コミュニケーションをとりながら進めるためまた、zoomの画面オンでのご参加をお願いします。
・当日キャンセルはご遠慮いただいていますため、その際は返金などの対応ができない旨、ご了承ください。
・講座の参加に10分以上遅れた場合は、キャンセルさせていただきます。
・CodextはOpenAI社のツールであり、通信環境や契約プラン、条件によって、生成に30秒以上の時間を要する場合もございますので、ご容赦ください。
・受講者様の質問状況、理解度状況に応じて、提供できる内容が変動する恐れがございます。
・当講座では競合他社やリサーチ目的の参加、ストアカで集客関連の先生のご参加はお断りしておりますので、ご了承いただければと存じます。
・この講座では、決まったカリキュラムに沿って説明をします。個別具体的なご質問・ご相談については、講座の中で、できる範囲でご対応させていただきますが、カリキュラムの内容・受講者様の習熟度に応じて、すべての対応ができかねる場合がございます。
・同様に、受講者様の習熟度に応じて、すべてのスライドの説明が困難な場合もございます。