ブログ
Web サイト構築の舞台裏
Next.js (App Router) と Tailwind CSS v4 を用いたWebサイト構築事例
1. はじめに
本記事では、Next.js (App Router) をはじめとする現代的な技術スタックを用いて構築したWebサイトの事例について、その技術選定、開発プロセス、および直面した課題と解決策について報告します。
---
2. 使用技術スタック
本サイトの構築にあたり、以下の技術を採用しました。
Next.js (App Router): フレームワークとして採用。
React: UIライブラリ。
TypeScript: 開発言語。
Tailwind CSS: スタイリング。v4 を採用。
shadcn/ui & tailwindplus: UIコンポーネントライブラリ。
---
3. 利用した API・サービス
バックエンドおよび外部連携には、以下のサービスを利用しています。
microCMS: ブログコンテンツ管理（Headless CMS）。
SendGrid: メール配信（お問い合わせフォーム用）。
---
4. 開発プロセスにおける課題
開発中に直面した主な技術的課題は以下の通りです。
4.1. tailwindcss v4 への対応
開発当時、tailwindcss v4 は比較的新しいバージョンであり、v3 以前の知見がそのままでは通用しない場面がありました。特に設定ファイル（`tailwind.config.js`）の扱いや一部のクラス名の変更点について、公式ドキュメントを参照しながらのキャッチアップが必要となり、初期段階での学習コストが発生しました。
4.2. microCMS のデータに対する型定義
microCMS から API 経由で取得するデータに対し、TypeScript による厳密な型定義を適用する過程で、多くのコンパイルエラーに直面しました。特に動的なコンテンツ構造やオプショナルなフィールドに対し、網羅的かつ正確な型定義を整備・維持することが課題となりました。
4.3. レスポンシブデザインの実装順序
開発初期段階で PC 版のレイアウトを優先して実装した結果、その後のモバイルデバイス対応時に、多くの箇所でレイアウト崩れ（CSS の競合やオーバーフロー）が発生しました。Tailwind CSS のブレイクポイントを用いて個別に修正を行いましたが、開発効率の観点から、当初よりモバイルファーストのアプローチを採用すべきであったと考察しています。
---
5. 主な実装の工夫点
課題解決と品質向上のために、以下の点に注力しました。
5.1. デザインの忠実な再現
デザイナーが作成したデザインカンプ（UI デザイン）を、Web サイトとして忠実に再現することに注力しました。特に、サイト全体の温かみのあるデザインコンセプトを損なわないよう、コンポーネント間のマージンやフォントサイズ、配色について、ピクセル単位での微調整を徹底しました。
5.2. React コンポーネントの再利用性向上
ボタン、カード、モーダルなど、サイト全体で共通して使用される UI 要素を、再利用可能な React コンポーネントとして設計・分離しました。DRY (Don't Repeat Yourself) の原則に基づきコードの冗長性を排除することで、可読性の向上と、将来的な修正コストの低減（メンテナンス性の向上）を図りました。
5.3. パフォーマンスの最適化
ユーザー体験の向上を目的として、表示速度の最適化に取り組みました。
画像最適化: Next.js の next/image コンポーネントを全面的に採用しました。これにより、画像の遅延読み込み（Lazy Loading）および WebP 形式への自動変換が実装され、初期ロード時のデータ転送量を大幅に削減しました。
データフェッチの最適化: ページの特性（更新頻度やコンテンツ内容）に応じて、SSG (Static Site Generation) と SSR (Server-Side Rendering) を適切に使い分けました。不要なデータ取得を抑制し、サーバー負荷とレスポンスタイムの改善を図っています。
---
6. まとめ
以上のプロセスを経て、Webサイト（v1.0）をリリースしました。本プロジェクトで得られた知見は、特に Next.js (App Router) や tailwindcss v4 の実践的な導入事例として有益であったと考えています。
今後は、ユーザーからのフィードバックを収集しつつ、継続的なリファクタリングと機能改善を進めていく所存です。本サイトが、訪れるユーザーにとって快適な情報アクセスの場となることを願っています。