使用技術とこだわり
このポートフォリオサイトは、モダンなウェブ技術を活用して構築されています。
パフォーマンス、保守性、ユーザーエクスペリエンスを重視し、最新のベストプラクティスに基づいて開発しました。
技術スタック
フレームワーク
Next.js 16
React ベースのフルスタックフレームワーク。App Router を採用し、サーバーコンポーネントとクライアントコンポーネントを適切に使い分けています。
React 19.2
最新の React を使用し、コンポーネントベースの UI を構築。パフォーマンスとメンテナンス性を両立しています。
スタイリング
Tailwind CSS v4
ユーティリティファーストの CSS フレームワーク。OKLCH カラースペースを使用した洗練された色彩設計を実現しています。
カスタムアニメーション
CSS keyframes を使用した、スムーズで洗練されたアニメーション効果。タイピングアニメーションやフェードイン効果など。
開発言語
TypeScript 5
型安全性を確保し、開発効率を向上。インターフェースと型定義により、バグを未然に防ぎます。
AI機能
OpenAI API
GPT-4.1-nano モデルを使用したインタラクティブなチャットボット。ページコンテキストを認識し、適切な情報を提供します。
react-markdown
チャットボットの応答を Markdown 形式でレンダリング。remark-gfm により GitHub Flavored Markdown にも対応。
デプロイ・分析
Vercel
Next.js との統合が最適化されたホスティングプラットフォーム。CI/CD パイプラインにより、迅速なデプロイを実現。
Vercel Analytics
サイトのパフォーマンスとユーザー行動を分析。データに基づいた改善を継続的に実施しています。
設計時のこだわり
パフォーマンス最適化
Next.js 16 の Cache Components 機能を活用し、静的コンポーネントをキャッシュ。ページロード時間を大幅に短縮しています。
- •Server Components と Client Components の適切な使い分け
- •動的コンテンツと静的コンテンツの最適な配分
- •画像の最適化とレスポンシブ対応
アクセシビリティ
すべてのユーザーが快適に利用できるよう、アクセシビリティを重視しています。
- •セマンティックな HTML の使用
- •ARIA ラベルによるスクリーンリーダー対応
- •キーボードナビゲーションの完全サポート
- •視覚的なフォーカスインジケーター
- •モーション設定の尊重 (prefers-reduced-motion)
レスポンシブデザイン
モバイルファーストのアプローチで、あらゆるデバイスで最適な表示を実現。
- •ブレークポイント (sm, md, lg) による段階的な UI 調整
- •タッチターゲットのサイズ最適化 (44px 以上)
- •モバイルメニューとデスクトップメニューの適切な切り替え
保守性とスケーラビリティ
コードの可読性と拡張性を考慮した設計により、長期的なメンテナンスを容易にしています。
- •JSON ベースのコンテンツ管理で更新が容易
- •コンポーネントの再利用性を最大化
- •TypeScript による型安全性の確保
- •Context API による効率的な状態管理
ユーザーエクスペリエンス
直感的で快適な操作感を提供するため、細部まで配慮しています。
- •スムーズなアニメーションとトランジション
- •インタラクティブな UI フィードバック
- •ローディング状態の視覚的な表示
- •AI チャットボットによる即時サポート
AI チャットボットについて
このサイトには、訪問者の質問に答える AI アシスタントが組み込まれています。OpenAI の GPT-4.1-nano モデルを使用し、ページコンテキストを理解して適切な情報を提供します。
主な機能
コンテキスト認識
現在閲覧中のページ (Home、About、Projects、Contact) を認識し、そのページに関連する情報を優先的に提供します。
動的データ統合
about.json、projects.json、contact.json から最新のデータを読み込み、正確な情報を提供します。
Markdown サポート
応答は Markdown 形式でフォーマットされ、箇条書きやリンクを含む読みやすい形式で表示されます。
温かみのある応対
親しみやすくプロフェッショナルな口調で、採用担当者や訪問者とのコミュニケーションをサポートします。
システムプロンプト
AI チャットボットには詳細なシステムプロンプトが設定されており、以下の役割を果たします：
- •ポートフォリオサイトの AI アシスタントとして、採用担当者や訪問者をサポート
- •現在のページコンテキストを理解し、適切な情報源 (about.json, projects.json, contact.json) から回答を生成
- •作成者 (志村滉太 / shimura kouta) のスキル、経歴、プロジェクトに関する質問に回答
- •温かく親しみやすい口調を保ちながら、プロフェッショナルな対応を維持
- •簡潔で有益な回答 (通常2〜3文) を提供し、必要に応じて詳細情報へ誘導
- •日本語での質問に日本語で応答、Markdown 形式で箇条書きを含めた回答を生成
技術詳細
Next.js API Routes (/app/api/chat/route.ts) で実装され、OpenAI API と統合されています。