Astro + Starlight + Vercel構成をAIと設定した記録：どこをAIに任せ、どこを自分で確認したか

2026年6月22日

Shiori

この記事について

このサイトは、Astro・Starlight・Vercelという3つのツールを組み合わせて構築されています。この記事では、その設定作業をAIと一緒に進めた体験を記録します。技術に詳しくない方でも状況をイメージできるよう、まず各ツールの役割を簡単に説明します。

Astroは、Webサイトを構築するためのフレームワークです。サイトの「骨格」にあたります。コードやコンテンツを組み合わせてWebページを生成する仕組みを提供します。

Starlightは、Astroの上で動くドキュメントサイト用のテーマです。ナビゲーション、検索、多言語対応などの機能があらかじめ用意されており、ゼロから設計しなくても一定の構造を持ったサイトを始められます。

Vercelは、作ったサイトをインターネットに公開するためのサービスです。コードを更新するたびに自動でサイトを公開してくれる機能（デプロイ）も持っています。

Astroの設定ファイル（astro.config.mjs）とStarlightの設定は、AIに記述してもらいました。設定項目が多く、正確な構文で書く必要があるため、自分で一から書くより、AIに「このような構成にしたい」と伝えて生成してもらう方が効率的でした。

ただし、生成された設定ファイルをそのまま適用することはせず、主要な設定項目について「この行は何をしているのか」をAIに説明してもらいました。意味を理解してから適用することで、後でエラーが起きたときに原因を調べられます。

設定作業中にエラーが発生した場面では、エラーメッセージをそのままAIに渡して「何が起きているか」「どう対処するか」を聞きました。エラーメッセージは英語で書かれていることが多く、自分では意味を読み取りにくかったため、この使い方は作業効率を大きく改善しました。

多言語対応の設定方法については、AIに「方法Aと方法Bがある。自分のサイトではどちらが適切か」と問いながら比較しました。AIはそれぞれの方法の特徴を説明してくれたので、自分で判断するための材料として使いました。

Vercelへのデプロイが完了した後、実際にブラウザでURLを開いて表示を確認しました。AIはデプロイの設定を行いますが、サイトが正しく表示されているかどうかの確認は自分の目で行う必要があります。

特にスマートフォンでの表示は、デスクトップとは異なる場合があるため、デバイスを変えて確認しました。

日本語と英語のページが正しく切り替わるか、ナビゲーションが意図した順序で表示されているかは、ブラウザで実際にクリックしながら確認しました。設定ファイルで正しく書かれていても、表示される結果が意図と違う場合があるためです。

VercelとGitHubリポジトリを接続する設定は、AIの指示に従って行いましたが、どのリポジトリを指定するか、どのブランチを本番環境として設定するかは自分で判断しました。これらは後から変更すると影響範囲が大きい設定のため、慎重に確認しました。

この3つのツールの設定は、すべての手順を自分で調べながら行うと相当な時間がかかる作業でした。AIに設定ファイルの生成とエラーの解読を担当させることで、作業の全体量を減らせました。

一方で、設定の意味を確認せずに進めた部分は、後になって問題の原因が分からない場面を生みました。効率を追いすぎて理解を省略しないことが、後の作業に影響すると感じています。