Vibe Codingでサイトを構築した全工程：設計から公開まで、AIとどう進めたか
この記事について
AIと一緒にWebサイトをゼロから構築した経験を、工程順に整理します。「AIとサイトを作るとはどういうことか」を技術知識のない方にもイメージしてもらえるよう、具体的な場面と判断を記録しています。
工程1：目的と構成を決める
最初に行ったのは、サイトの目的と必要なページ構成の整理です。この段階はAIに任せるのではなく、自分で考えました。「何のためのサイトか」「誰に向けたものか」「どのページが必要か」という問いに自分が答えられないと、AIへの指示が曖昧になります。
構成が決まった後、AIに「このような構成のサイトを作りたい。どういうフォルダ構造が適切か」と問いました。AIはいくつかの構成パターンを提案してくれました。私はそのうち一つを選びましたが、提案の理由を理解した上で選んでいます。AIが提案した理由が自分のサイトの目的と合っているかどうかを判断するのは自分の役割です。
工程2：フレームワークと公開環境の選定
次に、サイトを動かす技術的な仕組み（フレームワーク）と、インターネットに公開するためのサービスを選びました。
AIに「学習コンテンツを掲載する多言語サイトに適したフレームワークを教えてほしい」と伝えると、複数の選択肢と、それぞれの特徴を説明してくれました。私はその説明を読んで判断しましたが、「どれを選ぶか」の最終決定は私が行いました。技術の細部は理解できなくても、「自分のサイトにとって何が重要か」という軸で選ぶことはできます。
工程3：デザインの方向性を決める
デザインについては、AIに3パターンの方向性を出してもらいました。「シンプルで読みやすいもの」「視覚的に情報が整理されたもの」「技術系サイトらしい落ち着いた配色のもの」という形で、言葉で特徴を説明してもらい、自分で選びました。
具体的な配色や文字サイズ、余白の設定はAIに提案させ、その結果を自分でブラウザで確認しながら調整しました。「もう少し文字を大きく」「この部分の色を白にして」という指示を繰り返しながら、目的の状態に近づけていきました。
工程4：コンテンツの追加と設定ファイルの記述
サイトの骨格ができた後、コンテンツを追加しながら各種設定を行いました。設定ファイルの記述（サイトのタイトルや言語、ナビゲーションの構成など）はAIに書いてもらいましたが、書いてもらった内容の意味は確認しました。
意味を理解しないまま設定を適用すると、後でトラブルが起きたときに原因を調べられません。AIが書いた設定ファイルを見て「この行は何をしているのか」を聞き、説明を受けてから適用するという手順を取りました。
工程5：公開と動作確認
サイトの公開作業はAIの指示に従って設定しましたが、実際に公開されたURLをブラウザで開いて確認するのは自分で行いました。「AIが設定したから動いているはずだ」と確認を省略することはしませんでした。
公開後、スマートフォンで見たときの表示崩れを発見し、修正を依頼する場面もありました。動作確認は必ず自分の目で行う作業です。
振り返り
全体を通じて、AIに任せた作業は「具体的な実装（コードを書くこと）」と「複数の選択肢の提示」です。自分が担った作業は「目的の設定」「選択肢の選択」「結果の確認」「次の指示の作成」です。
AIは指示した内容を実装しますが、「何を作るか」「作ったものが意図どおりか」の判断は、一貫して自分が持つ必要がありました。