【ケーススタディ】当ポートフォリオLPの裏側

1. プロジェクト概要

このポートフォリオサイト自体が、私のエンジニアリング能力を示す最良のサンプルです。単なる静的なプロフィールページではなく、最新のエッジテクノロジーを活用した高性能でダイナミックなアプリケーションとして構築しました。

2. 技術スタック（Technology Stack）

Framework: Next.js 14 (App Router)
Deployment & Edge: Vercel Edge Network
Styling: Vanilla CSS (Glassmorphism design) + React Inline Styles
Backend API: Vercel Serverless Functions (Nodemailer)
AI Integration: Built through pair-programming with Google Antigravity (Gemini API)

3. アーキテクチャのハイライト

摩擦ゼロのコンタクトフォーム（サーバーレス）

クライアントにバックエンドサーバーの構築や管理をさせない「摩擦ゼロ」を実現するため、Next.jsのAPI Routes（サーバーレス関数）とNodemailerを採用。Vercelの環境変数にセキュアに保存したGmailアプリパスワードを利用し、完全無料で安全にお問い合わせを処理しています。

App-levelの多言語対応（i18n）

Next.jsのダイナミックルーティング（`[lang]`）を活用し、日本語と英語の多言語対応を実装。言語コンテキストをサーバーコンポーネント間でシームレスに受け渡すことで、クライアントサイドのレンダリング負荷をかけずに瞬時に言語を切り替えることが可能です。

Lighthouse オール100点のパフォーマンス

React Server Components (RSC) を活用し、不要なクライアントサイドJavaScriptを排除することで、Google Lighthouseのパフォーマンス・アクセシビリティ・ベストプラクティス・SEOの全項目において「100点満点」を達成しています。

4. AIとのペアプログラミング

このプロジェクトは、自律型AIエージェント（Google Antigravity）とのペアプログラミングによって超高速で計画・実装されました。AIにビジネスコンテキストや厳格なルールをインプットすることで、従来の大規模なエンジニアチームを凌駕する圧倒的な開発スピードを実現しています。

5. 最新の実装ログ（2026年7月）

Google Cloud連携：3大高級資産の一括自動生成システム

Google Cloudの無料枠をフル活用し、記事の「高品質AIオーディオブック（Text-to-Speech / Neural2）」「英語への完全自動翻訳（Translation API）」「画像のAI視覚解析によるSEO最適化（Vision API）」という3大高級資産を物理ファイルとして自動生成・配備するシステムを実装しました。これにより、完全無料でコンテンツの価値を極限まで高めています。

Instant Indexing APIと高度なSEO（サイロ構造）

新規記事やページを作成した瞬間にGoogleへインデックス申請を送る「Indexing API」を実装し、クロール待ちによる検索反映の遅延をゼロにしました。さらに、専門用語の解説ページを自動的に相互リンクする「サイロ構造」を構築し、サイト全体のトピックオーソリティとE-E-A-Tを劇的に向上させています。

テック層を魅了するGeek向けUI/UXとイースターエッグ

リテラシーの高いクライアント（富裕層・テック層）をターゲットに、サイトの裏側（Server Component構造）を可視化する「Dev Modeトグルスイッチ」や、ブラウザのConsoleを開いた者だけが気づく「アスキーアートと隠しメッセージ（イースターエッグ）」を実装し、技術力と遊び心をアピールしています。

厳格なUIフォーマット管理（アスタリスク完全排除）

AIが生成するテキストやMarkdownレンダリング時に、マークダウン特有のアスタリスク（* や **）が画面に露出してUI/UXを損なう事態を根本から防ぐため、強調や箇条書きには記号（「」や【】、・）を使用するという絶対ルールをハードコーディングレベルで徹底しています。