モリソン公式サイトの技術スタック解説

はじめに

合同会社モリソンの公式ウェブサイトは、最新のフロントエンド技術を活用して構築されています。本記事では、採用している技術スタックとその選定理由、実装のポイントについて解説します。

技術スタック一覧

Next.js 16 と静的エクスポート

なぜNext.jsを選んだか

Next.jsは、Reactベースのフルスタックフレームワークとして圧倒的な人気を誇ります。本サイトでNext.jsを採用した主な理由は以下の通りです：

• 静的サイト生成（SSG） - コーポレートサイトに最適
• 優れたSEO対応 - メタデータAPIによる柔軟なSEO設定
• 高速なビルド - Turbopackによる高速ビルド
• App Router - 最新のルーティングシステム

静的エクスポートの設定

本サイトは output: "export" を指定して完全な静的サイトとして出力しています。これにより、任意のホスティングサービスで高速に配信できます。

// next.config.ts
const nextConfig: NextConfig = {
  output: "export",
  trailingSlash: true,
  compress: true,
};

静的エクスポートのメリットは以下の通りです：

1. 高速な配信 - CDNとの相性が良い
2. 低コスト - サーバーレス運用が可能
3. 高いセキュリティ - 動的な処理がないため攻撃面が少ない
4. シンプルなデプロイ - 静的ファイルをアップロードするだけ

React 19 の新機能活用

React 19では多くの改善が行われましたが、本サイトでは特に以下の機能を活用しています：

Server Components

App Routerと組み合わせることで、デフォルトでServer Componentsとして動作します。クライアントサイドのJavaScriptを最小限に抑え、初期ロードを高速化しています。

// Server Component（デフォルト）
export default function BlogPage() {
  const posts = getAllBlogPosts(); // サーバーサイドで実行
  return <PostList posts={posts} />;
}

Client Components

インタラクティブな機能が必要な部分のみ "use client" ディレクティブを使用しています。

"use client";

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  // クライアントサイドのインタラクション
}

Tailwind CSS 4 によるスタイリング

CSS-in-JSからの脱却

Tailwind CSS 4を採用することで、以下のメリットを得ています：

• ゼロランタイム - ビルド時にCSSが生成される
• 小さなバンドルサイズ - 使用したクラスのみが出力される
• 一貫したデザインシステム - カスタムテーマによる統一感

カスタムテーマの設定

本サイトでは @theme ディレクティブを使用してカラーパレットを定義しています：

@theme {
  --color-primary: #222222;
  --color-secondary: #FA5D29;
  --color-accent: #FA5D29;
  --color-background: #F8F8F8;
}

レスポンシブデザイン

Tailwindのユーティリティクラスを活用し、モバイルファーストでレスポンシブ対応しています：

<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
  {/* モバイル: 1列、タブレット: 2列、デスクトップ: 3列 */}
</div>

TypeScriptによる型安全性

厳格な型チェック

TypeScriptを採用することで、開発時のバグを大幅に削減しています。特にブログ機能では、frontmatterの型を明確に定義しています：

// src/types/blog.ts
export interface BlogPost {
  slug: string;
  title: string;
  date: string;
  category: string;
  description: string;
  thumbnail?: string;
  tags?: string[];
  draft?: boolean;
  content: string;
}

型定義により、以下のメリットがあります：

• エディタでの自動補完
• コンパイル時のエラー検出
• コードの自己文書化

MDXによるブログ機能

なぜMDXを選んだか

MDXは、Markdownの中でJSXコンポーネントを使用できる形式です。以下の理由から採用しました：

• Markdownの手軽さ - 記事執筆が容易
• コンポーネントの埋め込み - リッチなコンテンツが作成可能
• GitHub Flavored Markdown - テーブルやタスクリストに対応

next-mdx-remoteの活用

静的エクスポート環境でMDXを扱うため、next-mdx-remote を使用しています：

import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";

<MDXRemote
  source={post.content}
  components={mdxComponents}
  options={{
    mdxOptions: {
      remarkPlugins: [remarkGfm],
    },
  }}
/>

カスタムコンポーネント

MDXのHTML要素をカスタムコンポーネントで上書きし、統一されたスタイルを適用しています：

export const mdxComponents: MDXComponents = {
  h2: ({ children }) => (
    <h2 className="text-2xl font-bold mt-10 mb-4 text-primary">
      {children}
    </h2>
  ),
  a: ({ href, children }) => (
    <Link href={href} className="text-accent hover:underline">
      {children}
    </Link>
  ),
};

SEO対策

メタデータAPI

Next.jsのメタデータAPIを活用し、各ページに最適なメタ情報を設定しています：

export const metadata: Metadata = {
  title: "ブログ",
  description: "技術情報やお知らせを発信しています。",
  openGraph: {
    title: "ブログ | 合同会社モリソン",
    type: "website",
  },
};

動的メタデータ

ブログ記事ページでは、記事の内容に応じて動的にメタデータを生成しています：

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = getBlogPost(params.slug);
  return {
    title: post.title,
    description: post.description,
  };
}

サイトマップの自動生成

sitemap.ts でサイトマップを自動生成し、検索エンジンへのインデックスを促進しています。ブログ記事が追加されると、自動的にサイトマップに反映されます。

パフォーマンス最適化

画像の最適化

Next.jsの Image コンポーネントを使用し、以下の最適化を行っています：

• WebP/AVIF形式への自動変換対応
• 遅延読み込み（Lazy Loading）
• レスポンシブ画像の自動生成

フォントの最適化

next/font を使用してGoogle Fontsを最適化しています：

const montserrat = Montserrat({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-montserrat",
});

これにより、フォントのCLS（Cumulative Layout Shift）を防ぎ、パフォーマンススコアを向上させています。

まとめ

本サイトでは、最新のフロントエンド技術を組み合わせることで、高速で保守性の高いウェブサイトを実現しています。

技術選定に迷われている方や、同様の構成を検討されている方の参考になれば幸いです。ご質問やご相談があれば、お気軽にお問い合わせください。