このポートフォリオサイトの技術スタックを全部公開する

なぜ技術スタックを公開するのか

ポートフォリオサイトを作るとき、「どんな技術を使えばいいか」で悩む人は多いと思います。

私自身、このサイトを作るときにいくつかの選択肢で迷いました。 この記事では、実際に採用した技術とその理由を全部公開します。

同じような構成でサイトを作りたい方の参考になれば嬉しいです。

全体のアーキテクチャ

まずは全体像から。

1. Next.js を選んだ理由

フレームワークの選択肢はいくつかありました。

• Astro → 静的サイトに強いが、インタラクションが複雑になると辛い
• Remix → 良いが、エコシステムがまだ小さい
• Next.js → App Routerが成熟してきて、今が一番使いやすい

// ブログ記事の取得はサーバー側で完結
export default async function BlogPage() {
  const posts = getAllPostsMetadata(); // サーバーで実行
  return <BlogContent posts={posts} />;
}

2. Tailwind CSS × インラインスタイルの使い分け

このサイトでは Tailwind CSS とインラインスタイルを意図的に使い分けています。

最初は全部 Tailwind で統一しようとしていましたが、 動的な値の扱いが複雑になったので途中から使い分けるようにしました。

3. Framer Motion でアニメーションを実装

このサイトで一番こだわった部分がアニメーションです。

実装で一番難しかったのが、スクロール連動アニメーションです。 sticky + height: 300vh の組み合わせでスクロール量を計算し、 その値をアニメーションに反映させる実装は何度も修正しました。

4. MDX でブログを管理する

ブログ記事は MDX（Markdown + JSX）で管理しています。

---
title: '記事タイトル'
category: 'カテゴリ名'
categoryId: 'tech'
categoryColor: '#9333EA'
date: '2026-03-29'
readTime: '10分'
excerpt: '記事の概要'
---

5. サポート記事は TSX で管理

ブログは MDX ですが、サポート記事は TSX ファイルで管理しています。

理由は「デザインの自由度」です。

src/content/support/
  ├── copywriting.tsx
  ├── photo-tips.tsx
  ├── seo-basics.tsx
  └── ai-design.tsx

6. Resend でお問い合わせフォームを実装

お問い合わせフォームのメール送信には Resend を使っています。

SendGrid や Nodemailer も検討しましたが、 設定のシンプルさで Resend を選びました。

7. Vercel + Cloudflare の構成

インフラは Vercel でホスティング、ドメイン管理は Cloudflare です。

実装して大変だったこと

モバイル最適化

スクロール連動アニメーションはPC向けに作っていたため、 モバイルでは全く別のレイアウトに切り替える実装が必要でした。

hidden lg:block / lg:hidden でPC・モバイルを完全に分離する アプローチで解決しましたが、コードの重複が増えるのが課題です。

CSS変数の管理

var(--border) と var(--color-border) が混在するバグが発生。 全ページを見直して統一するのに時間がかかりました。

命名規則を最初に決めておくことの重要性を実感しました。

まとめ

このサイトの技術選定のポイントをまとめます。

• Next.js App Router → パフォーマンスと開発体験のバランス
• Framer Motion → 豊富なアニメーションAPIで表現力が高い
• MDX + TSX の使い分け → コンテンツの特性に合わせて選択
• Vercel + Cloudflare → デプロイと運用がシンプル

技術選定に正解はありませんが、「今のフェーズで必要な機能を、 シンプルに実現できるか」を基準にすると迷いにくくなります。