ポートフォリオサイトを公開しました

はじめに

はじめまして、フリーランスエンジニアのおおばりょうです。

この度、自分の活動拠点となるポートフォリオサイト shisoworks を公開しました。ITと不動産の二刀流フリーランスとして、どちらの分野の情報も発信できる場所を作りたいと思い、ゼロから設計・開発しました。

この記事では、サイトの技術的な構成やこだわったポイントについて紹介します。

なぜポートフォリオサイトを作ったのか

フリーランスとして活動する中で、以下の課題を感じていました。

• 自分の実績をまとめて見せる場所がない — SNSやプロフィールサービスだけでは伝わりきらない
• ITと不動産、両方の活動を一つにまとめたい — 別々のサイトを作るのは非効率
• 自分自身の技術力のアウトプットにしたい — ポートフォリオサイト自体が作品になる

特に3つ目が大きなモチベーションでした。クライアントワークでは使えない技術も、自分のサイトなら自由に試せます。

技術スタック

Next.js 16 を選んだ理由

2026年3月時点での最新バージョンである Next.js 16 を採用しました。App Router によるファイルベースルーティングと、Static Export によるパフォーマンスの両立が決め手です。

サーバーサイドの処理が不要なサイトなので、output: "export" で完全な静的サイトとしてビルドしています。これにより、Vercel へのデプロイもシンプルで高速です。

Tailwind CSS v4 + shadcn/ui

Tailwind CSS v4 では CSS ベースの設定になり、tailwind.config.ts が不要になりました。@theme ディレクティブで CSS 変数を定義し、shadcn/ui のコンポーネントと組み合わせることで、統一感のあるデザインシステムを構築しています。

MDX によるコンテンツ管理

ブログ記事やポートフォリオの作品紹介は、すべて MDX ファイルで管理しています。frontmatter にメタ情報（タイトル、説明、タグなど）を記述し、本文は Markdown で自由に書ける仕組みです。

CMS を使わずファイルベースで管理することで、Git でバージョン管理ができ、デプロイフローもシンプルに保てます。

こだわったポイント

IT × 不動産のカラー設計

サイト全体では 緑（#4CAF50） をメインカラーにしつつ、不動産セクションでは 紫（#7C3AED） に切り替わるようにしています。ヘッダーのナビゲーションバーも、不動産ページではアンダーラインが紫になるなど、分野ごとの区別を視覚的に表現しました。

アニメーション

Framer Motion を使い、ページ全体にスクロール連動のアニメーションを実装しています。ただし、パフォーマンスへの影響を考慮して、ヒーローセクションの装飾アニメーションは CSS @keyframes に移行。transform と opacity のみを使い、GPU コンポジットで処理されるようにしています。

prefers-reduced-motion にも対応しており、アニメーションを減らしたいユーザーの設定を尊重します。

アクセシビリティ

• すべてのインタラクティブ要素に cursor-pointer を設定
• フォーカスリング（focus-visible:ring-2）をナビゲーション・ボタンに適用
• カラーコントラスト 4.5:1 以上を確保
• タッチターゲットは最低 44x44px
• 見出しの階層構造を適切に管理

レスポンシブ対応

375px（iPhone SE）から 1440px（デスクトップ）まで、すべてのブレークポイントで崩れないように調整しています。モバイルではフルスクリーンのハンバーガーメニューが展開し、デスクトップでは layoutId アニメーション付きのナビゲーションバーが表示されます。

サイトの構成

今後の予定

• OGP画像の整備 — 各ページ専用のOGP画像を作成予定
• Lighthouse スコアの最適化 — 現状でも良好ですが、さらに詰めたい
• ブログ記事の充実 — 技術記事・不動産コラムを定期的に投稿予定
• ポートフォリオの追加 — 新しいプロジェクトが完成次第、随時追加

おわりに

ポートフォリオサイトは「作って終わり」ではなく、自分の成長とともにアップデートしていくものだと思っています。

新しい技術を試す実験場として、そして IT と不動産の両方の活動を発信する拠点として、これから育てていきます。

IT のご相談も、不動産のご相談も、お気軽に お問い合わせ ください。