6サイト一元管理・高速表示・AI運用 — 新コーポレートサイトの技術設計
株式会社インターワークのコーポレートサイトを全面リニューアルしました。デザインの刷新に加え、製品・サービス情報をより分かりやすくお届けできるよう構成を見直しています。
利用技術
新サイトは以下の技術スタックで構築しています。
Next.js 16 + React 19
最新のApp Routerを活用したSSR/SSG対応
Tailwind CSS
ユーティリティファーストのスタイリング
MDX
Markdownベースの柔軟なコンテンツ管理
AWS Amplify
SSR対応のホスティングとCI/CD
AIを活用したエコシステム統合管理
インターワークでは、6つのWebサイトとMauticマーケティングオートメーションを統合管理する独自のエコシステムを構築しています。
| サイト | 技術 | 役割 |
|---|---|---|
| インターワーク公式サイト | Next.js 16 + React 19 | コーポレートサイト（本サイト） |
| InTech Daily News | Hugo + PaperMod | AIニュース配信プラットフォーム |
| SmartWebサイト | Hugo + Gulp + Tailwind | AIカスタマーサポートサービス |
| SmartWebサポートサイト | Hugo + Gulp + Tailwind | SmartWebサポート・ナレッジベース |
| IDRサポートポータル | Hugo + Geekdoc + Pagefind | IDR Solutions製品ドキュメント |
| ニュース作成・MA管理サイト（非公開） | React + Express + SQLite | CTA配信・リードスコアリング・Mautic連携 |
高速表示へのこだわり
すべてのサイトを静的サイトジェネレーター（Hugo / Next.js SSG）で構築し、高速な表示速度を実現しています。Google Lighthouseによるパフォーマンス計測では、各サイトで高いスコアを達成しています。
コーポレートサイト Lighthouse計測結果
IDRサポートポータル Lighthouse計測結果
※ Lighthouseのスコアは計測環境・ネットワーク状況・サーバー負荷等により毎回変動します。上記は特定時点での計測結果であり、スコアの再現性を保証するものではありません。
Claude Codeによる統合運用
エコシステム全体の運用はClaude Code（Anthropic社）をベースとした統合管理システムで一元操作しています。
デプロイ管理
依存順序を自動解決し、安全なデプロイを実行
CTA管理
全サイト横断でのCTA作成・ターゲティング・分析
横断設定変更
CORS、Mautic URL、APIエンドポイント等の一括更新
リードスコアリング
ユーザー行動に基づく自動スコアリングとMautic連携
コンテンツ配信
ニュース・メルマガ・ポッドキャスト・SNSの自動配信
DESIGN.mdによるデザイン統一
エコシステム全体のデザイン一貫性を確保するため、Google Stitch発のDESIGN.mdフォーマットを採用しています。 カラーパレット、タイポグラフィ、スペーシング、コンポーネントパターンをMarkdownで定義し、AIエージェントと人間の両方が参照できるデザイン仕様書として機能します。
共通のDESIGN.mdでエコシステム全体のブランドトークンを定義し、各サイト固有のDESIGN.mdで技術スタック別の拡張を記述する2層構造により、異なるフレームワーク間でも統一されたデザインを維持しています。
今後の展開
今後も継続的に機能追加・改善を行い、お客様により良い情報と体験をお届けしてまいります。製品やサービスに関するご質問は、お問い合わせよりお気軽にご連絡ください。
開発者向けPDF入門ガイド
PDFの仕様や活用方法など、開発者に必要な情報をコンパクトにまとめました。初めてPDFを扱う開発者にも分かりやすく、基礎から応用までカバーしているため、PDFのポテンシャルを最大限に引き出し、アプリケーション開発やドキュメント管理の効率化を図るための手引きとなるでしょう。