札幌すごいAI会【ビギナー回】「未経験でOK! AIでゼロからWebサイト構築」手順
はじめに
未経験でOK!AIでゼロからWebサイト構築
AIを利用して「コーディング」、「アプリケーションの開発」を体験いただく会になっています。
今回は未経験者向けなので裁量は全てAIに委ねています。
運もあるので、うまく動かすことができない場合があることはご了承ください。
進め方
事前準備
1.Googleアカウントの登録準備
Gemini cliを利用します。Googleアカウントの用意をお願いいたします。
1.任意の場所に新規フォルを作成
まず、任意の場所にbeginner_handsonフォルダを作ります。
cdでそのフォルダに移動します。
Windows / Mac / Linux
mkdir beginner_handson
cd beginner_handson
2.Geminiで要件定義書を作成
作成したいWEBサイトの要件定義書を作成してもらいます。
※Gemini推奨ではありません。他の生成AIモデルを利用したい方はそちらを使用いただいて結構です。
今回使用するGemini cliは複雑な処理や大きなシステムの実装はあまり向いていないと感じています。
なので基本的で簡単なものにした方が成功率上がると思います。
指示がさっぱりわからないという方は下記参考にしてみて下さい。
サンプルプロンプト
最も基本的なECサイトの要件定義書を作成して下さい。
最も簡単にローカル環境で開発可能な技術スタックで。
◼︎参考：モデルごとの結果比較
・Gemini -2.5Pro
・ChatGPT -o3
・Claude -Claude Sonnet4
3.requirements.mdを新規作成
beginner_handsonの配下にrequirements.mdファイルを作成します。
Windows
type nul > requirements.md
Mac / Linux
touch requirements.md
requirements.mdに２で生成した要件定義書をコピー＆ペーストして下さい。
4.Gemini cliを実行
beginner_handsonディレクトリでGemini cliを起動します。
npx https://github.com/google-gemini/gemini-cli
初回起動時には、いくつかの設定が必要です。
- テーマの選択: まず、CLIの見た目のテーマを選択します。お好みのものを選んでください。
- 認証: ブラウザが開きGoogleアカウントでのログインを求められます。指示に従って認証を完了してください。
5.TODO.mdを作成
requirements.mdからTODO.mdを作成してもらいましょう。
@requirements.md からTODO.mdを作成して下さい。
6.編集・実行許可の承認
TODOを実施して下さい。実装後はTODOの更新も忘れずに実施して下さい。
あとは編集・実行許可の承認をしながらTODOが片付くまで待ちます。
7.完了
おわりに
Gemini cliは決してコーディングに優れているとは言えないものの、完全無料でGemini 2.5 Proとその広大な100万トークンのコンテキストウィンドウを、毎分60リクエスト・毎日1,000リクエストまで利用できるのはAIとの開発を体験するには十分な機能かと思います。
似たようなものにClaude Codeがあり、そちらは優れたコーディング力を発揮してくれるので、今回を機に本格的にアプリケーションを作成したいと思った方は是非Claude Codeを試してみることを推奨します（有料：最低Proプラン加入の必要あり）。
未経験でも開発ができる、開発を通して学習できる、学習していくうちにAIとの共同開発とプログラミングについて詳しくなる、といったように自身の所持スキルで諦めることなくチャレンジしてスキルの向上を目指していただければと思います！
Discussion