「Astroって誰？」からのスタート。非エンジニアの私がAIエージェントと自社HPを作ってみてわかったこと。

こんにちは、アンドブライトの岡本です。

現在、私たちは自社のWebサイトリニューアルや、生成AIを組み込んだ「SNS投稿自動分析システム」の開発を自分たちの手で進めています。

こう言うと「岡本さんはエンジニアなんですか？」と聞かれることがありますが、私はまったくの非エンジニアです。HTMLやCSSの知識もありません。

「経営者なんだから、技術的なことは現場に任せて、自分はやらなくていいんじゃないか」

そう思われる方もいるかもしれません。実際にそう言われたこともあります。しかし、私はそうは思いません。世の中のテクノロジーが今どこまで進んでいて、自分に何ができるのか。それを身をもって知っておかなければ、社内の優秀なエンジニアと本当の意味で深い会話ができないと考えているからです。というカッコつけたことを書く前に、前提として「なんでも自分でやってみたい」という私の性分であることも先にお伝えしておきます（笑）

そんな私が、なぜAIエージェントを相棒にして「自分の手で開発してみる」という領域にチャレンジしているのか。きっかけは、昨年末のちょっとした経験にありました。

12月24日、Google Antigravityを知る

昨年の12月24日。コンサルティングで入っているお客様の案件で「どうしてもWebページを急ぎで作らなければならない」というシチュエーションが発生したんです。でも、そこまでこってりしたページでもないのですが、年末のタイミングなので、急ぎご依頼する先も見つけにくい状況でした。

どうしようかと考えていた時、知り合いのシステム会社の社長さんからGoogleが新しく出したエージェント開発プラットフォーム「Antigravity（アンチグラビティ）」の存在を教えてもらいました。私は「もしかしたら、これを使えば自分でも作れるかもしれない」と思い、12月26日から手探りで使い始めてみたのです。

そこから「やったことないけど、Webページを作ってみる」というチャレンジ週間が始まりました。家族が実家に帰省していたこともあり、私は帰省をやめて一日中Antigravityと向き合いました。HTMLもCSSも分からない状態からのスタートでしたが、AIに指示を出し、修正を繰り返していくうちに、ページが少しずつ形になっていきました。

1月1日。アプリの設定マニュアルページやFAQページなど、4〜5つのページを自分で完成させることができたんです。この時、私の中で「AIで何かを調べる」から「AIで何かを作る」への小さなシフトチェンジが起きました。

準備：Geminiとサイトの骨組み・設計思想を整理する

この小さな成功体験をベースに、次に取り組んだのが自社HPのリニューアルです。今回のリニューアルは、単なるWeb制作ではなく、「AIエージェントを実務でどう活用できるか」を検証する最初の実験場としての意味合いを持っています。

この実験を通じて、将来的にお客様のLP（ランディングページ）制作にも応用できるような「開発の型」を模索したいと考え、コードを書き始める前に、まずはGeminiと相談しながら詳細な設計定義書をあらかじめ作り込みました。

具体的には、以下の要素は一部ですが、この準備段階で設計・ルール化しています。

• 全体および各ページの構成整理：構成順序、各ブロックの内容、テキスト情報、ヘッダー・フッターに配置するメニュー項目などの確定。
• ビジュアル素材の作成と管理ルールの策定：ChatGPT（image2.0）を使用したイメージ画像の作成と、アセットの命名規則の定義。
• デザイントークン（変数化）の設計：固有の色やフォントを一元管理し、値を差し替えるだけで別ブランドのデザインへ転換できる仕組みの定義。
  • 例：メインの文字色（#1F2937）、ロゴやボタンに使うアクセントカラー（#19A5C0）、見出しのPC/SPサイズなど
• テキストの折り返し制御規則の共通化：スマホ画面で見た際に文字が不自然な位置で改行されないための実装ルールの策定。
  • 例：見出しのバランス配置（text-wrap: balance）や、特定見出しへのSP用改行タグ（<br class="md:hidden" />）の挿入規則など

この事前準備によってサイトの骨組みと「開発の型」のベースを完全に固めてから、実際の開発環境の構築へと移りました。

環境構築：Claude Codeが「自律して動く」環境を作る

今回、自社HPを作るにあたり、まずはAIが最も働きやすい環境を整えることから始めました。Claude Codeのブラウザ版の利用ではなく、ローカル環境に「Claude Code」をインストールし、VS Codeのターミナル上で動かすことにしました。これにより、AIは私のパソコン内にあるファイルを自ら読み込み、直接コードを修正してくれるようになります。

さらに、コードの履歴管理を行う「GitHub」とも連携させました。手探りの開発では「デザインが崩れて元に戻せなくなる」といったトラブルが多発しますが、GitHubがあればゲームのセーブポイントのように、いつでも直前の安全な状態に巻き戻せます。

「AIがコードを書き換え、上手くいったら自動でコミット（保存）していく」
この安全網があるからこそ、素人の私でもリスクを恐れずにAIへ指示を出し、高速でトライ＆エラーを繰り返すことができています。

実践：Geminiを翻訳・指示係として挟んでのAIエージェントとのやり取り

環境構築の初期段階で提案された仕様は以下です。

• 技術スタックの選定（Astro + Tailwind CSS）
  将来的なLP量産を見据え、ヘッダーやフッターなどのパーツをコンポーネント化（部品化）して管理する構成。動的なサーバー処理を排除した静的HTML（ゼロJS）にすることで、圧倒的な表示速度とSEOの優位性を確保できる「ようです」。
• フォームのバックエンド運用仕様
  自社で問い合わせ用のサーバーやデータベースを構築・維持管理しない「サーバーレス構成（Formspreeなどの外部サービス活用）」を採用。フロントのデザイン自由度を100%活かしつつ、安全にデータを処理するための設計の「ようです」。

このような提案があり、セカンドオピニオンとしてGeminiに聞いても「全くもってOK」とのことだったのでこれで進めましたが、正直なところ私は一ミリも分かっていません。「Astroって誰ですか？」というレベルからのスタートでした（笑）。

さらに開発が進むと、AIから「どっちの実装がいいですか？」といった専門的な質問が飛んできます。質問の意味すら分からないため、私はGeminiを「AIの翻訳・指示係」として間に挟み、Geminiとやり取りしながら翻訳して指示を作ってもらってパス、という形をとっていました。

実はこのプロセスの途中で、ちょっとしたトラブルもありました。てっきり「Claude Code」で開発していると思い込んで進めていたのですが、実際には「GitHub Copilot」の無料枠を使って作っていたんです。無料枠を使い切った段階で、初めてその事実に気付きました。

何度もGeminiに画面キャプチャを見せて会話していたにもかかわらず、「Claude Code」を使っていないことを教えてくれなかったGeminiに対し、思わず「なぜ何度もキャプチャを見せていたのに教えてくれないの！どうして！」と平謝りするGeminiをド詰めしまくりました。これ、完全なるAIハラスメントです（笑）。今後はGoogle社から訴えられないよう、AIへの言葉遣いには気をつけたいと思います^^

気づき：優秀なClaudeと、私の不完全な設計書

GitHub Copilotの無料枠を使い切ったあと、本命である「Claude Code」でのページ制作へ移行しました。

実際に動かしてみて驚いたのは、Claudeが想像以上に優秀だったことです。そのため、開発におけるストレスはさほどありませんでした。唯一てこずったことと言えば、お問い合わせフォームの「チェックボックスの位置の調整」くらいです。

道中で多少のエラーはありましたが、それはAIの不具合というよりも、私が事前にGeminiと作った設計自体が不完全だったことが原因です。不完全な設計図であるにもかかわらず、Claudeはなんとかそれを汲み取り、こちらの意図を踏襲しようと奮闘してくれていた結果でした。

ここで痛感したのは、「作られたコードそのものはブラックボックスでも、全体のファイル構成や構造といった『プロセス』だけは、人間が絶対に把握しておいたほうがいい」ということです。

基本のプロセスさえ自分が理解していれば、設計の穴が原因でAIが迷走したとしても、人間が主導権を握り続けて「ここをこう軌道修正して」と正しい指示を出すことができるためです。

現状：形にはなった新サイト、でも改善の余地はあり

そうして進めた結果、今ご覧いただいているこの新しいホームページの大部分を、非エンジニアの私とAIとの協働によって形にすることができました。

ただ、正直にいえば、今の仕上がりに100%満足しているわけではありません。大枠のレイアウトは綺麗に組めているものの、細かな余白のバランスや、スマホで見た際のデザインの微調整など、人間のプロの目から見れば「まだまだ詰められる余地」がたくさん残っていると感じています。

展望：焦らず着実に、知識とノウハウを積みたい

世間を見渡せば、私よりも遥かに高度にAIを使いこなし、驚くようなスピードでシステムやプログラムを作り上げている方々が山ほどいます。当然、私はつい最近自社HPを作ってみただけの、思いっきりの素人です。

しかし、私は焦る必要はないと思っています（いや正直、やりたいことと出来ないことが多すぎてめちゃくちゃ焦っていますが笑）。最先端のトレンドを無理に追いかけるのではなく、ゆっくりと着実に、自分が納得できる形でAIとの付き合い方を自分のものにしていきたいと考えています。

テクノロジーの進化によって、数年後にはWebサイトの「作り方のプロセス」自体がまったく変わってしまっているかもしれません。それでも、現時点で「基本のプロセスを把握している」という事実は重要ではないかと思います。何らかの問題が発生したとき、プロセスという流れや開発作業をブロック単位で分けて知っておくことで、問題の箇所や手順の特定が圧倒的にしやすくなるからです。

よもや、こういう考え方すらAIの進化によって「半年後には不要」となっている可能性は大いにあります。しかし、基本の流れを体感として知っておくこと自体には、必ず意味が残ると考えています。

また、基本がある程度わかっていれば、今後はAIへの依頼時に少し緩いオーダーをして、AIに任せる範囲が広がったとしても、自分で状況をトレース（追跡）することができます。そうなれば、作るスピードも、できることの幅もさらに変わっていくのではと考えています。

だからこそ、今はあえて時間を掛けてでも、プロセスを把握しながら進める今のやり方が自分にとっては正解なのだと思っています。

正しいアウトプットが欲しいなら、インプットを正す

この一連の経験から、私は「英語が全然話せないのに、少し話せるようになった」に似た感覚を覚えました。と同時に、作るプロセスにおいて「AIをマネジメントする」ことの本質が見えてきました。

世間を見渡すと、「AIなんだから雑にオーダーしても、なんか適当にやってくれるでしょ」と、指示がアバウトになっているケースもあるように感じます。私は、それは少しもったいないなと思うのです。人が人に指示を出すのも、人がAIに指示を出すのも、本質的には何も変わりません。欲しい成果（アウトプット）があるなら、まず伝える側が正しい前提条件や意図（インプット）を整理しなければなりません。

面白いことに、AIに対して「雑に扱わず、ちゃんとインプットしてあげないといけない」と意識し始めてから、普段の人間関係やチームとのコミュニケーションにも、より気を配るようになりました。一方たまに、画面の向こうのAIに対して「なんで何度も同じ間違いをするの！？」と怒っちゃうこともあります（笑）。でも、そこで一呼吸置いて「エラー状況に至った背景を聞いてみよう」「私のインプットの仕方が悪かったな」と振り返るようにしていて、自分の「理解力」「伝える力」の質をニュートラルに振り返る良いきっかけを、AIさんから日々いただいています。

とはいえ、本当はもっと良い使い方はきっとあるんだと思います。ただ今は何かを作る速度よりも、自分のプロセス理解の質に重きを置いているので、AIとの対話を通じて、着実に出来ることを増やしていければと考えています。「私はこういう使い方しているよ」、「こうするとうまくいくよ」などありましたら、皆様からぜひ教えていただければと思っています。