はじめに

こんにちは、kocidenです。
このたび開業届を提出し、個人事業主として独立いたしました。
その第一歩として、自身のスキルセットをまとめたポートフォリオサイトを作成しましたので、その制作過程を共有します。

今回は、Web制作の新たなスタンダードとなりつつあるGoogle AI Studioを活用しました。
ほぼすべての機能を無料で試すことができる強力なツールです。
この記事を見ると、こんなサイトが作れます。

Google AI Studioでの構築プロセス

開発画面を開き、左メニューの「Build」を選択します。

モデルには最新の「Gemini 3 Pro Preview」を採用しました。
ここからは、作りたいWebサイトの要件をチャット形式で入力していきます。

Geminiのような「エージェントAI」の特長は、単なるコード生成にとどまらず、要件定義からタスク管理、コードの検証・修正までを自律的に行ってくれる点です。
要件が曖昧な場合でも、AIと対話しながら仕様を固めていくことが可能です。

数回のラリーを経て、ベースとなるサイトが完成しました。

デプロイ（公開設定）

Webサイトをインターネット上で閲覧可能にするため、デプロイを行います。

Google AI StudioにはGoogle Cloudへの「ワンクリックデプロイ機能」（右上のロケットアイコン）が実装されており、非常に強力です。
企業サイトや検証環境などでは、この機能を使うのが最短ルートでしょう。

ただし今回は、ランニングコストを抑えるために「GitHub Pages」を選択しました。
Google AI StudioからGitHubへコードを連携し、ローカル環境でビルドを実行。その後リポジトリへコミットすることで、完全無料でホスティングが可能です。
（参考：GitHub Pagesの使い方）

完成したWebサイト

1日で完成

制作時間は1日未満。これほどのクオリティのサイトが短時間で構築できるとは、凄まじい時代になったものです。

一方で、課題も残ります。
PCのダークモード表示時の違和感や、モバイル端末での改行ズレなど、UI/UXの細部には調整が必要です。
AIが80点までのものを爆速で作ってくれる時代だからこそ、残りの20点のディティールを詰め、品質を担保することが、これからのエンジニアに求められる役割だと感じています。

さいごに

Google AI Studioの進化は驚異的ですが、サーバーサイドの連携や、既存システムへの組み込みなど、専門的な知識が必要な場面は依然として多く存在します。

「AIでプロトタイプは作ったが、本番環境への展開で詰まっている」
「サーバー構築やドメイン設定まで丸ごとお願いしたい」

そういったお悩みがあれば、ぜひ私にご相談ください。
レンタルサーバーやVPS、クラウド環境への構築も含め、柔軟に対応可能です。

なんでも屋のエンジニアとして、皆様のビジネスを技術面からサポートいたします。
お問い合わせをお待ちしております。