非技術者がAIコーディングエージェントで趣味サイトを作ってみた
営業の平田です。
はじめに
今日は、非技術者である私がAIコーディングエージェントを使って、趣味のサイトを作るというやりたかったことを実現した話を書きたいと思います。技術に対して、新たな情報をキャッチアップする場というより、非技術者でもこのようなものを作れるということ、そしてその際に学んだこと等を中心に伝えられたらと思っています。また、同じような境遇・思いを持っている人の参考情報になったら嬉しいです。
前提
こちらのブログでは、AI-StarterやGemini、KiroやClaude（Claude Code）（※）等様々なAIが出てきます。曖昧に伝わらないように、自分の体験のままに各AIの名前やキャプチャを記載しますが、伝えたいことは各AIに関しての詳細のあれこれではありません。AI-StarterやGeminiといったチャット形式のAI（Claudeでもチャット形式を利用することは出来るものの、自身が使っていないため一旦ここには含めないものとします。）ではなかなか難しいことを、KiroやClaudeといったAIコーディングエージェントを使うことで、実現できたということです。
※ 各AIについて
- チャット形式のAI
- AI-Starter：Claude・GPT・Geminiなど複数モデル選択を1画面で操作できる、企業向け生成AIサービス。※弊社のサービスです。
- Gemini：Googleが開発したマルチモーダルAIモデル。テキスト・画像・音声などを統合処理し、Google製品に幅広く統合されている。
- AIコーディングエージェント
- Kiro：AWSが開発したAgentic IDE。AWS公式の説明によると、「仕様駆動開発」で要件→設計→実装を自動化し、プロトタイプをプロダクション品質へ引き上げることが可能。 ※より本格的に着手し始めた頃のチャプターで参照URLを載せています。
- Claude（Claude Code）：AnthropicのClaude AIを搭載したコマンドラインのコーディングエージェント。ターミナル上でコードの作成・編集・デバッグをAIが自律的にサポートすることが可能。
- ※Claudeは、コーディングだけではなく上記のAI-StarterやGeminiと同様の使い方も可能です。
背景
私はお菓子作りやパン作りを趣味としています。そこで憧れる人がもっぱらご自身のサイトを持っていたので、私もまねてお菓子作りやパン作りに関して発信するサイトを作ってみたいという思いがありました。しかし、完全に趣味であるためなかなか優先度が上がらず、プログラミング知識を習得するための労力を割けないという状況で諦めていました。
AIコーディングエージェントを使うようになるまでの助走期間に関して
このパートでは、"Claudeをこんな感じで利用した"というより、"このサイト作りはこうして始まった！"ということを伝えられればと思います。今考えるとこの段階からClaudeを契約していたら、（黒い画面で会話したくなかったので一旦はClaude Codeを除いて）ブラウザ版やデスクトップ版などのチャット形式のUIで軽く会話しただろうなと振り返って思います。
やはり近年この業界で仕事をしているとAIコーディングエージェントの話題は本当に尽きることがありません。そんな中、私もあるお客様とClaude Codeが中心の議題になる打ち合わせがあり、その準備のために自社サービスのAI-StarterでClaudeのモデルを選択し、Claudeとはどのようなものかと試してみることにしました。
アウトプットしてくれるコードを確認するにあたって、思い浮かんだのが自分の趣味のサイトを作ることでした。まずは、正直Claudeのすごさを分かっていなかったので、雑にやりたいことを伝えました。
このようにAIがしてくれた質問に対して答えていくと、思いのほかするすると自分が想像しているものが出来ました。こんなに粗い指示でも、枠組みを概ねくみとって作ってくれて、感動しました。
より本格的に着手し始めた頃 〜チャット形式の限界とAIコーディングエージェントへの移行〜
正直、上記でClaudeってすごい！となったものの、ちゃんとサイト作りをやっていこうとなるとチャット形式（Geminiも試しました）だと限界があると感じました。ざっくり浮かぶ理由は下記の通りです。
- コードを書いてくれるものの、ファイルを作ることは出来ない。
- コードの修正は自力で行う必要がある。
- それにより下記のキャプチャのように、AIに指摘をもらっても、”既存のコードの〇〇より後、XXより後に追記をするか教えて”等を都度質問をする必要があり手間がかかった。
- 複数のファイルを横断して見ることが出来ない。
- 過去の会話を踏まえて会話することには限界がある。
そのような理由から、またしても頓挫していましたが、ある日エンジニアさんとの雑談の中でKiroやClaude CodeといったAIコーディングエージェントの存在をちゃんと認識しました。上記の段階で、チャットベースのAIのモデル選択としてのClaudeは知っていても、AIコーディングエージェントとしての役割を果たしてもらうような使い方をしていませんでした。Kiroは無料のクレジットがあったため早速DLし、まずKiroへの解像度を上げるべく下記を見ました。
- Introducing Kiro
- Kiroweeeeeeek in Japan Day 1 Implementation Guide
- あと、Youtubeでも初心者向けの動画をいくつか閲覧してイメージをしました。
使える状態こそ整ったものの、非技術者あるあるかもしれないですが、まず黒い画面への抵抗感がありました。そして、どこで何をすれば良いのかが変わらないという状況だったので、とにかくKiroのキャプチャをチャット形式のAIに貼って、こういうことをしたい場合どこを操作すれば良いのかを聞くことから始まりました。そして概ね分かったら、Kiroのチャット欄でサイト作りを進行するべく下記を聞くということを繰り返しました。
- 今どのような状態なのか
- 何が出来ていて何が出来ていないのか
- 私は～といったことをしたいがどのようなステップを踏めば良いのか
すると自分の質問に対しての回答をしつつ、次のアクションを提示してくれるので、身を委ねました。AIコーディングエージェントを利用することにより、チャット形式のAI（Ai-StarterやGemini）では出してくれたコードやその後の助言をもとにどこに追加するか等を都度会話しながら自分で行っていたものが、修正の提案および実行もやってくれるという点で作業が楽になりました。
この後、私はKiroの無料のクレジットを使い切ったものの作業を進めたかったので、興味のあったClaudeの契約をし拡張機能として追加しました。順序は下記の通りです。
※こちらはVS Code等のエディタで、同様にClaude Code for VS Codeを拡張機能として追加する場合でも同じように出来ると思うので、Kiroであることがマストではございません。
そして、ようやく公開しても良いかなというレベルに達したので、S3とCloudfrontでサイト公開に至りました。ざっくりやっていることは下記のブログの通りです。
しかし、参照したブログが1年半前のものでその後にアップデートがかかっていたみたいです。CloudFrontの手順を追おうとしたら、ステップ1でブログにはキャプチャが載っていない選択項目があり、迷いました。
こちらの定額プランという選択肢が登場したのは、昨年11月とのことで、このブログが執筆された後のものでした。今回のように静的ウェブサイトを公開する等よくあるユースケースは様々なブログがあがっていると思うのですが、この後にアップデートがかかっている可能性があるということを念頭に置いてみる必要があるのだと痛感しました。
CloudFrontの料金形態につきましては、こちらのブログをご覧ください。
感じたこと、学び
エンジニアの方からしたら超初歩的なことかもしれないのですが、コードが全く分からない人間からしたら、すごいの一言に尽きる体験でした。ここまでささっと書きましたが、私がこちらのサイト作りで初めてKiroやClaude CodeといったAIコーディングエージェントを使用して、感じたことや学びを3つ書いてみます。
1. AIはあくまでアシスタントである
KiroやClaude Codeを使っていると数えきれないほど「これで進めて良いのか？」とAIに質問をされるので、判断しなければならない場面があり、毎度困りました。なんせ何が起きているのか分かっていないのだから是非の判断がつかないというのが本音です。こういうときに、AIコーディングエージェントは何も知らない人間がイメージを形にするために利用するものというよりは、基礎知識がある人が楽をするためのものだなと感じました。AIは主導ではなく、補佐であるということを強く実感する体験でした。
主に苦戦したこととしては、HTMLのファイルが多数あり、こちらを修正するとCSSとの整合性が悪くなってしまい、どうしても画像の枠等の部分がうまくいきませんでした。具体的に言うと、画像の上部は丸みがあるのに下は角である点です（下記にキャプチャ有）。一時的にここを思い通りに出来たときもあったのですが、他のセクションの画像に関して修正をしたらこちらも崩れてしまいました。どうにもうまく行かなかった点です。
↓右側の会話により、この時点では思い通りになっている。
↓しかし、他のセクションの画像に関して修正をしたらこちらも崩れた。
2. AIへの伝え方を工夫する
HTMLやCSSなど専門用語を知らない場合、自分のやりたいことを言語化することが出来ずKiroやClaudeを混乱させてしまうことがありました。そこで試してみたのが、KiroやClaude Codeに投げる前に、まず別のAIにプロンプト相談をするという方法です。私の場合はAI-StarterやGeminiに「こういうことを実現したいが、どのように伝えるのが適切か」と相談してから、KiroやClaude Codeに依頼するようにしたことで円滑に進むようになりました。
例えば「もともと自己紹介のセクションから自身のSNSに飛べるようにしていたものの、削除をしたいです。それを適切に伝えるプロンプトのアイディアをください。」という依頼を伝えると、2つのアプローチを考えて提示してくれました。このように質問をすると多くの場合複数の選択肢を提示してくれるので、自分のイメージに沿うものを採用しそのままコピペをしました。
3. 分からないならば、とりあえずキャプチャを貼ってみる
言葉でうまく説明できないときは、画面のスクリーンショットをそのままAIに貼り、「これはどういう状態ですか？次に何をすれば良いですか？」等と聞く、という方法が有効だったと感じます。もちろんセキュリティ的に問題がありそうなところは控える必要があると思うのですが、概ねキャプチャを貼って質問をすると解決しました。自分の乏しい知識と語彙の中でやるには、これが的確かつ迅速に進められると感じました。先日、他の企業の非技術者の代表の方がお話されている非技術者のClaude Codeの活用を題材にした講義に関しても同様のことを仰っていました。
このような流れでサイトが完成しました。リンクを貼ったらそのURLに飛べること、サイトに画像を入れられたこと、左サイドバーにメニューのようなタブを作れたこと等全部自然言語で伝えたことをくみ取り、コードに落とし込んでくれるということに感動しました。
AIで作った感のあるビジュアルと言われればその通りではあるのですが、今の私のスキルセットを前提とすると結構良いものが出来たのでは無いかと思っています。最近は、様々な記事を見るなかでAIぽさがないビジュアルに仕上げるのもそう難しくないのではないかと思っているので、それもやってみたいと考えています。
