ポートフォリオを作り直したよ
ポートフォリオ、ずっと放置してた問題
フリーランスやってると「ポートフォリオちゃんとしなきゃな〜」って思いつつ、気づいたら何ヶ月も放置しがちじゃないですか。私もそうでした。
前のポートフォリオは Laravel + Vue3（Inertia.js）で作っていたんですが、バグもあるし作り直さなきゃと思いつつ、ずるずると。途中まで Nuxt3 で作っていたものもあったんだけど、Nuxt4 が出たり、他の用事が忙しくなったりでモチベが見事に消滅。あるあるですなぁ。
で、2026年になって「今年はちゃんとしよう」と一念発起。どうせ作り直すなら、しばらく触れてなかった Next.js を改めて試してみようと。普段の業務では Nuxt3 を使っているので、Next.js は v12 くらいで止まっていたんですよね。気づいたら v16 になってて、App Router も随分成熟してきたみたいだし、ちょうどいい機会だなと。
技術構成
今回の構成はこんな感じです。
- Next.js 16（App Router / Turbopack）
- React 19 / TypeScript 5
- Tailwind CSS v4
- microCMS（コンテンツ管理）
- Vercel（ホスティング）
- Zod 4 + React Hook Form 7（お問い合わせフォーム）
CMS は、Xサーバーをレンタルしているので WordPress をヘッドレス CMS にする選択肢もあったんだけど、まぁ microCMS 使った方が楽だよねってことで。Hobby プランなら無料で使えるし、管理画面も直感的でサクッとスキーマ組めるのがいい。WordPress を使った何かはまた別で作る予定です。
レトロゲーム × モダン Web というデザイン
デザインのコンセプトはある程度最初から決めていました。RPG のメニュー画面みたいな UI、ピクセルフォント、CRT スキャンライン風のオーバーレイ。ダークテーマをベースに、遊び心のある画面を目指しました。
堅苦しい感じよりポップで遊び心がある UI が好きなんですよね。エンジニアのポートフォリオって、ミニマルでクリーンなデザインが多い印象だけど、自分はそこにあんまり惹かれなくて。最近のトレンドと逆を行ってる気はするけどｗ
プロフィールページは RPG のステータス画面風にしたり、キャリアはタイムライン形式にしたり。作りながら何だかワクワクして楽しめました。
Next.js 16 で躓いたポイント
params が Promise 型になってた
動的ルート（[slug]）の params が Promise 型に変更されていたのは最初ちょっと戸惑いました。前まではそのままオブジェクトとして使えていたのが、v16 では await が必要に。
// Next.js 16 では params は Promise
type Props = { params: Promise<{ slug: string }> };
export default async function Page({ params }: Props) {
const { slug } = await params;
// ...
}型をちゃんと見れば気づくんだけど、AI生成のコードをそのまま使うとハマるやつですね。
microCMS セレクトフィールドが配列を返す
これが地味にハマった。microCMS のセレクトフィールド、API のレスポンスが string じゃなくて string[]（配列）で返ってくるんですよね。お問い合わせフォームの送信でも、セレクトフィールドに文字列をそのまま渡したら 'subject' has unexpected data type. って怒られて。配列で包んであげる必要がありました。
// NG: subject: "general"
// OK: subject: ["general"]ドキュメントにちゃんと書いてあるのかもしれないけど、実際にエラー出るまで気づかなかったなぁ。
Claude Code で AI 駆動開発してみた
GitHub Copilot との違い
元々、今の現場でも AI バイブコーディングはしていて、GitHub Copilot を使っていました。Copilot にはプレミアムリクエストの上限があって、コンテキスト量ではなくリクエストの度にカウントされるので、Claude Code のコンテキストエンジニアリングとはちょっと経路が違う感じがしていたんですよね。
今回 Claude Code（と Antigravity）を使った開発をしてみて、自分はこっちの方が好きだなと感じました。コンテキストをしっかり積んで、プロジェクト全体を理解した上でコードを書いてくれる感覚が心地いい。
要件決め含めて1週間
開発期間は要件決めから含めて約1週間。6ページ + API ルート + microCMS 連携 + SEO 対策 + セキュリティヘッダーまで。AI と一緒だとこのスピード感で作れるのは本当にありがたい。
AI 開発で学んだこと
AI は楽をするために使うものだけど、使い方を誤ると大きな手戻りが発生したり、思い通りにしてくれなかったりします。「とりあえず AI に丸投げ」だとうまくいかない場面は結構あって、プロンプトエンジニアリングがとても重要だなと改めて感じました。
あと、Claude Code Skillsをちゃんと理解してなかったので、今回はちゃんと調べながらセットアップして、色んな業務を自動化してみました。こういうのもちゃんとキャッチアップしていかないと、どんどん遅れをとるなーという危機感はありますね。
作ったサイト
ソースコードも公開しています。何かの参考になれば。
https://github.com/silmo-yokohama/silmo
まだまだ改善したいところはあるので、引き続きアップデートしていく予定です。