普段からChatGPTを使っていたところ、今年の頭あたりにいつの間にかCodexのMacデスクトップアプリが登場していたので、久しぶりにバイブコーディングさせてみました。
1年前、多分2025年半ばくらいにChatgptで金融系のBotコーディングをさせようと頑張っていた時期があったのですが、最新のAPIの仕様をきちんと把握できていなかったり、何か１箇所詰まるとそこのバグに固執して、抜け出すことができなかったりで諦めたんですよね。
なのであまり期待してなかったんですが、今回ブログを作ったり、別件でDjangoでShopify関連のAPIを叩くようなサービスのモックを作らせたりでCodexを使ってみたところ、デザイン系の細かいところ以外はほぼ完璧一年前に比べるとだいぶ進化してるな〜と感じました。
プログラミングがっつり触るのが4年ぶりくらいなので、自動で書いてくれるのはありがたい話ですが、たった一年でここまで進化するとコーディングの仕事は本当になくなる気が…
文章書くのは得意ではないので読みづらい記事が多いかもしれないですが、とりあえず何かしら経験を残していきたい気持ちがあるのでIT系の技術ポートフォリオも兼ねてブログにしてみました。
まず決めた技術構成
今回のブログを作る際に決めた技術仕様はCodexではなく、Chatgpt Thinkingで仕様を壁打ちしながら決めて、実装のみCodexにさせる形で進めました。
今回の構成はこんな感じです。
- フロント：Next.js
- バックエンド：Sanity(Freeプラン)
- デプロイ：Netilfy(Freeプラン)
バックエンド周り
今回は、できるだけ無料で作れることを前提に考えました。
今後は音楽制作系の記事も書いていきたいと思っていて、そうなるとスクリーンショットの枚数も多くなりそうだったので、バックエンドにはヘッドレスCMSのSanityを選びました。
WordPressやDjangoなどで自作CMSを組む形も考えたのですが、サーバーを借りると毎月どうしても数百円はかかってきます。
個人で続けるなら、まずは固定費を抑えたいなと思って、無料プランのあるCMSを使う方向にしました。
運用としては、ユーザーがサイトを見るとNetlify 上の Next.js runtime / Function が動いて、Sanity API から最新の記事データを取得する形です。
フロントエンド周り
自分のフロントエンド知識は、かなり長いことjQueryで止まっていたので、「せっかくだし今っぽい構成でやってみよう」という気持ちもあり、Next.jsで実装してもらいました。
CSSについては、勉強も兼ねてTailwind CSSを使ってもらいました。
触ってみた感想としては、「今どきのBootstrapっぽいな」という印象です。便利ではあるんですが、記法が多くて、まだ全然覚えきれていません。
shadcn/uiを使うかどうかも少し迷いました。
ただ今回は、Codexがどれくらい素の状態でCSSを書けるのかも見てみたかったので、あえてTailwindのみで進めてもらいました。
デプロイ周り
広告がたくさん出るタイプの無料ブログはあまり好きではないので、ドメインは独自で取って、広告バナーのクリックで収益化するというよりは、記事内で紹介した商品のアフィリエイトリンクなどで、せめてドメイン代くらい回収できたらいいな……くらいに考えています。
その辺りもあって、cloudflare pages等でなく、商用利用可能なnetlifyを選択しました。
以前働いていた会社ではGitHub Actions使っていて、「CI/CDって便利だな〜」と思っていたのですが、Netlifyもリポジトリを連携しておけば、main や master ブランチにpushするだけでそのままデプロイしてくれます。
プルリクの時点でプレビューが見られるので、わざわざステージング環境を作らなくてもスマホなど実機確認が簡単にできて楽ですね…！
実際にCodexで作ってみた感想
ロジック面は、かなりいい感じでちゃんと動くものをしっかり作ってくれる印象です。
が、やっぱり気になったのはデザイン面で、最初に出てきたものは、いかにも「AIで作りました」という感じで、グラデーション多め、カード多め、ちょっとマテリアルデザインっぽい雰囲気でした。
悪くはないんですが、自分が作りたかったブログの空気感とは少し違ったので、何度か修正をお願いする形に。
OpenAI側もそういう悩みを想定していたのか、公式でデザインさせるための手法が公開されていたので、そこも参考にしました。
https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4
そこをベースにしつつ、「音楽系で、高級感があって、落ち着いた雰囲気」といった感じで、かなりざっくり丸投げ気味にお願いしました。
ただ、あとから知ったのですが、本当はワイヤーフレームを別のデザイン系AIやデザインツールで先に作って、それを元にCodexでコーディングさせるのがわりと普通らしいですね。。。
このブログを作り終わったあたりでClaude DesignとかGPT image2が出てきて、時代の流れの早さを実感しました…笑
デザインの修正でやったこと
結果は下のような感じで、カード感は無くなりましたが、各要素の共通化もできておらず、謎の配置になってるので再度修正を何度か依頼しました。
高級感=青は悪くなかったのですが、ブログとしてはどうなのかと思い、黒ベースに変更を依頼し、ヒーローセクションのグラデーションもAI感があったので外してもらいました。
記事が初期は量が少ないので各カテゴリでのセクションをなくして最新記事の一覧のみにお願いしました。また、各コンポーネントでの共通性を持たせる形で修正をお願いしました。
ある程度揃ってきたのですが、細かいところ、例えば「LATEST NOTES」と記事一覧の記事日時の上辺が揃っていないなど、デザイン的に気になる場所はまだ残っています。
フォントサイズも統一感がなく、ベースサイズも16pxとあまり綺麗めのサイトになっていなかったため、私の方でfont周りも含め、デザイン的な指示をある程度を行いました。
なんだかんだ、デザインに関してはCodexではまだ作成者依存が大きいので、やはり、デザイン専用のツールを使ってデザインカンプを作ってから実装させるのが現状ベストだと思います。
細かい気になる点の改修と合わせて、ヒーローセクションなどがページを開いた際に全画面に出るような形にしたかったので、追加でAT Distributionsさんのサイトを参考に変更を依頼しました。
デザイン的な面での改修は一旦ここで完了としました。まだページローディング時のアニメーションなどやってもいいかなと思うこともあるのですが、やり出すとキリがないのでここまででストップしました。
ポン出しでそのまま使えないところもまだあった
デザイン面以外の細かい点でもポン出しでは使えないところもありました。
・ハンバーガーメニューを開いた際にハンバーガーメニューの外をクリックした際にメニューが閉じない。
・SanityへのログインがID/Passwordでしかログインできず、Google連携などのログインした場合、エラーメッセージも出ずにログイン画面に戻される
Codexしかまだ使ったことがないのでなんとも言えないのですが、例外処理をつかまえてもエラー処理をしていないことが大きい気がします。
つまり、問題が起きていても、見た目上は「なんとなく動いているように見える」ことがあるんですよね。
そう考えると、今のバイブコーディングで一番大事なのは、コードを書くことそのものよりも、どういうテストケースを用意するかなのかもしれません。
まぁ一年経ったらそんな問題もなくなってるかもしれないですが…
テンプレートやUIライブラリはやっぱり強い
ちなみにSanityについては、Blog with Built-in Content Editing（https://www.sanity.io/templates/blog-with-built-in-content-editing）
をベースにしてもらったので、編集画面側のバグはほとんどありませんでした。
また、ハンバーガーメニューのような少し複雑なものでのバグもshadcn/uiのような定番のライブラリを入れていれば、そもそも起きなかった問題だと思います。
これはCodexを使う・使わないに関係なく言えることですが、できるだけフレームワークやプラグインを使って、自作部分を減らすのがやっぱり一番効率がいいです。
そして、バイブコーディングをするならなおさら、その考え方は大事だなと感じました。
今後について
今後は、記事数が増えてきたらカテゴリごとの一覧をトップに出したり、記事に出てきた商品の最安値を検索して表示したり、まだまだやってみたいことがあります。
AIそのものがこの1年でかなり進化していたので、また1年後にバイブコーディングがどれくらい進化しているのかも楽しみです。