こんにちは。小川智也です。
突然ですが、最近自分のポートフォリオサイトである about.ogatomo (https://about.ogtm.dev) を大幅リニューアルしてみました。
自分でもかなり見やすく、読み込みスピードも申し分ないレベルのものが出来たのではないのかなと思います。
しかもこれ、AIを活用することによってコードをほぼ書かずに、6〜8時間で完成しました。
今回は、このサイトを例に挙げ、Vibe Codingでサイト制作をして見た感想と自分の感じた課題についてご紹介していきたいと思います。
小川智也と申します。Webプログラマーな中学3年生です。
このブログでは主にITやガジェット系の情報を発信しています！
▼ おすすめリンク ▼
【 X(旧Twitter)・いえPay・個人事業主・ITパスポート・お問い合わせ 】
そもそもVibe Codingってなんなんだよ！！
まず始めに、今回のテーマであるVibe Codingについて説明していきます。
Vibe Coding（バイブコーディング）は、AIを活用した新しいプログラミングのスタイルを指す、最近注目されているテクノロジー用語です。
人間がプログラミング言語の文法を一行ずつ手打ちするのではなく、AIに対して「こんな感じの機能を作って」と自然言語で指示を出し、AIに実際のコードを書かせる手法を指します。
やりたいことの雰囲気(Vibe)や方向性、アイデアを伝えてAIに書かせるというスタイルなので「Vibe Coding」と呼ばれています
今回の制作コンセプト
まず初めに、今回このサイトをどのようなコンセプトでリニューアルしたのかについて解説していきます。
リニューアル前の元々のサイトはちょうど1年前(2025年)に「阿部寛のホームページくらい軽いページを作りたい！」と思い、ライブラリなども使わず自分で全てのコードを手書きしたものになります。
普通の静的サイト+制作物など更新が必要な部分のみWorkers経由でmicroCMSを叩くという方式で運用していました。
自分ではそこそこは満足した出来だったのですが、色々とデメリットがありました。
デザインセンス皆無のせいでひと昔のサイトっぽくなり単純にダサいというのもありますが、小さい画面で見ると多少デザインが崩壊したり、ダークモード対応してないせいで夜中見ると目が痛くなったり、毎回Workersを叩くせいで余計なところでリソースを食っていたりと、書けば書くほど問題が出てきます。
リニューアルを決意
流石にこれを放置するのはなんか嫌だなということで、リニューアルを決意しました。
自分で作れないことはないとは思いますが、ちょうどxAIがGrok Buildをリリースしたのと、SuperGrokの7日間無料が来ていたこともあり、AIエージェントで作ってみよう！ということにしました。
進め方
自分の中ではある程度デザインや、こういう機能をつけたいというのがまとまっていたので、それを書き出しそのまま投げてみました。
具体的にはこんな感じです。(実際はこれをちょっとずつチマチマ指示した)
- 大幅リニューアルをしたい
- Tailwind CSS v3系統を使ってほしい(v4はiOS16以前のWebKitで正しく表示されないことが多いため)
- ダークモード切り替えの実装
- 多言語対応(日本語/英語)
- 現状のWorkersは廃止し、JSONに記入→ビルド時にDOMを構築するようにして通信の無駄を省く
- Viteを使って静的HTMLにビルドし、Cloudflare Pagesで自動デプロイ
また、使用してほしいブランドカラーもこちらから指示し、ブログやOgaSysと一貫性のあるデザインにしました。
色について何も指示しないとグラデーションだらけのカスみたいなサイトになるので注意！
時間の使い方
今回、コーディングの時間はほぼ無いに等しいくらいになりましたが、自分で一から作るより2倍くらいいいものができたのではないかなと思います。
単に私の技量不足の可能性もありますが、個人的には今までコーディングに当てていた作業時間をまるまる設計や新機能の考案というクリエイティブな作業に使えたというのが大きかったです。
実際これは2日くらいで完成しました
一日3,4時間くらい触っていたと思うので単純な自分の作業時間で言うと6〜8時間くらいですね
AIコーディングの課題
今回のプロジェクトや、これまでの活用を通して、AIコーディングには下記のような課題があるのではないかなと思いました。
- 最低限アプリ（サイト）の骨組みだけは自分で考えて技術スタックの選定を行わないと崩壊する
- ぼんやりとした構想ではなく「ある程度こうしたい」という自分なりのイメージをしっかり言語化して伝えないと最終的にイマイチな出来になる
- 自分でコードを書かないからスクリプトやライブラリの依存関係が実質的にブラックボックス化する
- 作業後に AGENTS.md に構成をまとめさせておかないと自分もわからなくなるしAIもわからなくなる
AGENTS.md にプロジェクトの詳細や構成をまとめておくのはかなりオススメです
複数のAIエージェントを使って作業するときに知識を引き継げるので作業効率がかなり上がりました
まとめ
まとめです。今回は自分の実体験をもとに、Vibe Codingで自分のポートフォリオを一から作り直してみた感想を記事にしてみました。
自分はこれからの時代、コードを書けることや、AIツールの活用スキル・リテラシーなどももちろん重要ですが、システムの設計力や、それをAIに伝えるための文章力というものも非常に重要になっていくのではないかなと思いました。
AIを活用しようと思っている人や、すでに活用している人にとって、他人の活用例として参考にしてもらえれば幸いです。
最後まで見ていただき、ありがとうございました。
この記事がいいと思った方はぜひ他の記事も見ていってください！
SNSでもテクノロジーに関する情報発信を行っているのでご興味を持たれた方は X(旧Twitter) のフォローもぜひよろしくお願いします！
