Kumono社のコーポレートサイト技術スタック紹介

株式会社Kumonoのコーポレートサイトを、技術的な観点から解説いたします。

技術スタック

Astro 5.3.0

Astroは、高速かつSEOに優れた静的サイトジェネレーター(SSG)です。当社がAstroを採用している主な理由は主に以下の4つです

パフォーマンス重視の設計: 「Zero JavaScript by default」というアプローチにより、本当に必要な部分だけにJavaScriptを適用
アイランドアーキテクチャ: 静的コンテンツとインタラクティブ要素を効率的に組み合わせ
柔軟なコンポーネント統合: さまざまなフレームワークのコンポーネントを混在して利用可能
ビルド時最適化: 画像やアセットの圧縮をビルド時に自動実行

TypeScript

型安全性と開発効率向上のために、TypeScriptを導入しています

コード品質の向上と保守性の確保
エディタの自動補完機能による開発効率の向上
バグの早期発見とリファクタリングの容易さ

Tailwind CSS

ユーザーインターフェースの構築には、Tailwind CSSを使用しています

ユーティリティファーストのアプローチによる高速なUI開発
カスタマイズ性の高さと一貫したデザインシステムの構築
ビルド時の最適化によるCSSファイルサイズの削減

Three.js

WebGLベースの3Dグラフィックスライブラリを使用して、ファーストビューにアニメーションを実装しました

microCMS

コンテンツ管理には、日本発のヘッドレスCMS「microCMS」を利用しています

日本語対応で馴染みやすい
APIベースの柔軟なコンテンツ配信
カスタムフィールドによる多様なコンテンツ構造の実現
シンプルなブログ機能であれば無料のプランでカバーできたこと

Docker

コンテナ化技術としてDockerを採用し、開発環境と本番環境の一貫性を確保しています

環境依存のない一貫した動作
Nginx Alpineをベースイメージとした軽量コンテナ
マルチステージビルドによる最適化

Google Cloud Platform

インフラストラクチャとしてGCPを活用しています

Cloud Run: サーバーレスコンテナ実行環境によるスケーラブルなホスティング
Artifact Registry: Dockerイメージの安全な保管と管理

CI/CD

継続的インテグレーション/デリバリー(CI/CD)には、GitHub Actionsを使用しています

コードプッシュ時の自動ビルドとテスト
環境別(本番/テスト)のデプロイワークフロー
シークレット管理による安全な環境変数の取り扱い

サイト構成

フロントエンド

静的ページ生成: Astroによるビルド時の最適化
レスポンシブデザイン: モバイルファーストのアプローチ
アニメーション: 最小限のJavaScriptで洗練された動きを実現
3Dアニメーション: Three.jsを活用したローポリ山のアニメーションにより、ブランドイメージを視覚的に強化
React Islands: 3Dアニメーションコンポーネントを分離し、パフォーマンスを最適化

バックエンド

API統合: microCMSからのコンテンツ取得
静的サイト生成(SSG): ビルド時にmicroCMSからコンテンツを取得し、完全な静的HTMLを生成
Nginx: 効率的なルーティングと静的ファイル配信

インフラ

コンテナオーケストレーション: Cloud Runによる自動スケーリング
CDN: Cloudflareを利用したグローバルなコンテンツ配信
セキュリティ: HTTPSの強制とモダンなセキュリティヘッダーの実装

サイトの運用

コンテンツ更新

microCMSの管理画面から、ブログ記事やサービス情報を簡単に更新
マークダウン形式でのコンテンツ作成・整形
APIキーによる安全なコンテンツ取得

デプロイ

GitHub Actionsによる自動デプロイ
環境変数による本番/テスト環境の切り替え
ゼロダウンタイムデプロイの実現

モニタリングとパフォーマンス

Google Cloud Monitoringによるパフォーマンス監視
Core Web Vitalsの継続的な測定と改善
エラーログの集中管理と通知設定

パフォーマンス最適化

画像最適化

Astroの機能による自動画像変換
WebPフォーマットの採用
遅延読み込みの実装

JavaScript最小化

Islands Architectureによる必要最小限のJavaScript
コード分割と遅延読み込み
不要なライブラリの排除
SSG（静的サイト生成）の最大活用: 本文コンテンツの即時表示とインタラクティブ要素の分離

CSS最適化

Tailwind CSSのパージ機能による未使用CSSの削除
クリティカルCSSのインライン化
CSSの圧縮と最適化

サーバーサイド最適化

効率的なキャッシュ戦略
Nginxの設定最適化
HTTP/2の活用