TechNova株式会社（架空サイト）
架空の企業「TechNova株式会社」のコーポレートサイトを企画・設計・実装したプロジェクトです。 Next.js + microCMS によるJamstack構成で構築し、Tailwind CSSを使用してPC/SP両対応のレスポンシブ設計を行っています。 企業サイトに必要な機能を網羅的に実装し、実務レベルでの開発スキルを証明する作品として制作いたしました。
サイトURL
https://technova-khaki.vercel.app/GitHub URL
https://github.com/kaze-wind-dev/technovaデザインURL
https://www.figma.com/design/0MtRojOlNv57X8bYad5z0X/MyPortfolios?node-id=0-1&t=13OTVsL4v7nKVkhA-1制作期間
2025/05/07 ～ 2025/06/09
制作時間
80時間（設計・デザイン：27時間、実装：44.5時間、その他：8.5時間）時間
制作背景・課題
このプロジェクトは、Jamstack構成による設計力・UI構築力・CMS連携などの実務的なスキルを可視化し、ポートフォリオへの掲載を目的として制作しました。 ■解決したい課題 ・従来のテンプレート的なコーポレートサイトでは企業の専門性が伝わりにくい ・情報発信のしやすさ（CMS導入）も重視したサイト運用の実現 ・採用や営業における「会社の顔」として機能するサイトの構築 ■証明したい技術力 ・Next.js + Tailwind CSS によるコンポーネント設計・実装力 ・microCMSと連携した動的コンテンツの実装・管理の理解 ・レスポンシブ設計・UX配慮を含めた実用的なUIの構築スキル ・Figmaでのワイヤーフレーム設計から実装までの一貫した開発フロー
学んだこと・成果
■Jamstack構築の全体理解 microCMSを使用したJamstack構成の一通りの構築手順を実践し、企画から公開までの全体フローを習得できました。特にヘッドレスCMSとフロントエンドの連携において、API設計やコンテンツ管理の最適化について深く理解できました。 ■Tailwind CSS実装の知見 ユーティリティクラスでの実装は初めてでしたが、開発効率の向上を実感する一方で、クラス名の可読性という課題が浮かび上がりました。 @applyによるCSS再利用の必要性を理解し、開発におけるメンテナンス性の重要さを学びました。 ■実務を意識した開発プロセス ・要件定義から設計、実装、公開まで一貫した開発フロー ・レスポンシブ対応やSEO対策など、実際の案件で求められる品質基準での実装 ・CMS運用を考慮した管理画面での操作性とコンテンツ構造の設計
技術スタック
- Next.js
- microCMS
- TypeScript
- Tailwind.css
- CSS
- GitHub
- Vercel