自社サービスサイト「MT Templates」のモダン制作事例
この記事のポイント
MT Templatesの自社サービスサイトを、Next.js 15・React 19・TypeScript・Tailwind CSS・shadcn/ui・Keystatic・Vercelで構築した制作事例です。SEO×AI検索を両立する構造化データ・セマンティックHTML、Keystaticによるコード不要の運用フロー、Lighthouse Performance 90+を担保するパフォーマンス設計、Markdoc独自コンポーネントによる表現力、コンバージョンを意識した導線設計まで、具体的な工夫を公開しています。
私たちMT Templatesの自社サービスサイトは、提供するモダンWeb制作のショーケースとして、自社内製で構築・運用しています。
「お客様にお勧めする技術スタック・SEO設計・運用フロー」を、まず自分たちのサイトで体現する。
本ページでは、その制作にあたって具体的に工夫した点を解像度高く公開します。
この事例のハイライト
- Next.js 15 / React 19 / TypeScript / Tailwind CSS / shadcn/ui のモダンスタックで自社内製
- SEO×AI検索の両立を狙った構造化データ・セマンティックHTML設計
- Keystatic + Git ベースで「コードを触らず」コンテンツ運用が完結
- Lighthouse Performance 90+を必達ラインにしたパフォーマンス設計
- Markdoc独自コンポーネントで記事・実績の表現力を底上げ
案件サマリー
まずは案件の全体像を簡潔にまとめます。
| 項目 | 内容 |
|---|---|
| サイト種別 | 自社サービスサイト（コーポレート＋ブログ＋実績＋資料DL） |
| 目的 | モダンWeb制作のショーケース／リード獲得 |
| 対象読者 | 従業員300名以下のスタートアップ・中小企業の決裁者（CEO / CTO / マーケ責任者） |
| 制作体制 | 自社内製（企画・設計・実装・運用すべて） |
| 主な技術スタック | Next.js 15 / React 19 / TypeScript / Tailwind CSS / shadcn/ui / Keystatic / Vercel / Cloudflare |
| アニメーション | Framer Motion（控えめに） |
| CMS | Keystatic（Gitベース・ヘッドレス） |
| 目標指標 | Lighthouse Performance 90+ ／ Core Web Vitals 全項目クリア |
採用した技術スタックと、その理由
技術選定は「速さ・SEO・運用のしやすさ」の3軸でぶれないことを意識しました。
それぞれの採用理由を順に説明します。
Next.js 15 / React 19 / TypeScript
App Router・Server Components 前提で構成し、初期表示の速さとSEO・AI検索クローラーへの完全な HTML 提供を両立しました。
TypeScript は厳格な型定義を全ファイルで必須とし、コンテンツ型（記事・実績・著者など）を一元管理。
リファクタリングでも崩れない堅牢性を担保しています。
Tailwind CSS + shadcn/ui
ブランドガイドライン（リアクトブルー #61DAFB ／ アクセントピンク #FF4081 ／ Inter＋Noto Sans JP など）を Tailwind の design token として一元化しました。
shadcn/ui のコンポーネントを土台にカスタムすることで、デザインの一貫性と長期メンテのしやすさを両立しています。
Keystatic（Git ベースのヘッドレス CMS）
ブログ記事・制作実績・お役立ち資料・お知らせ・サイト設定をすべて Keystatic で管理しています。
コンテンツの追加・編集が Git のコミットとして記録されるため、デプロイフローとシームレスに統合できます。
クライアント案件にも応用できる運用基盤です。
Vercel + Cloudflare
ホスティングは Next.js との親和性が最も高い Vercel、ドメイン・CDN は Cloudflare で構成しました。
エッジ配信と ISR（Incremental Static Regeneration）の組み合わせで、世界中どこからでも高速に表示されます。
自社サイトで工夫した点
ここからが本題です。
「モダンに作る」だけでは不十分で、SEO・AI検索・運用・パフォーマンスのすべてに具体的な仕掛けを入れました。
以下、6つの観点で工夫したポイントを順にご紹介します。
①：SEO×AI検索を両立する構造化データ・セマンティックHTML
代表が SEOコンサルタント出身のため、技術的 SEO は最初の設計段階から織り込んでいます。
具体的には、次の4つを徹底しました。
- JSON-LD を主要ページに網羅実装:
WebSite/Organization/Article/Case/FAQPage/BreadcrumbListをsrc/lib/json-ld.tsで一元生成し、ページごとに必要なものを差し込む構成に - AI検索（GEO/LLMO/AIO/AEO）対応: 記事・実績の Keystatic スキーマに TL;DR 要約フィールドと 出典・参考文献フィールドを組み込み、ChatGPT や Perplexity などのAI検索エンジンが「引用しやすい」ページを目指す
- セマンティックHTML の徹底: 記事は
h1→h2→h3の階層を厳密に守り、目次（TOC）をサーバー側で自動生成 - 3階層フォールバック: 各記事の OGP 画像 → アイキャッチ → サイトデフォルトと、設定が抜けても崩れない設計
従来のGoogle SEOだけでなく、ChatGPT・Perplexity・GeminiなどAI検索エンジンに引用される構造まで設計段階から織り込んでいます。
②：Keystatic でコードを触らない運用フローを構築
「公開後、追記が必要なたびに開発者を呼ぶ」サイトでは、運用が回りません。
Keystatic を使い倒すことで、コードを一切触らずにコンテンツを更新できる体制を作っています。
具体的な仕組みは次の通りです。
- コレクション設計: 記事（articles）／実績（cases）／資料（resources）／お知らせ（news）／カテゴリ／著者／トラッキングリンクを独立したコレクションに分離
- 共通フィールドの再利用: SEO設定・OGP設定・AI検索最適化・表示制御の各フィールドグループを関数化し、コレクション間で重複なく再利用
- プレビュー機能: 各エントリから本番と同じ見た目で下書きプレビューが可能（
/preview/start?to=/blog/{slug}） - 公開ステータスでの下書き運用:
draft/publishedを切り替えるだけで公開・非公開を制御
ちなみに、この実績ページ自体も Keystatic から「下書き → プレビュー → 公開」の流れで管理しています。
③：Markdoc の独自コンポーネントで記事の表現力を底上げ
Markdoc を採用し、記事内に独自コンポーネントを埋め込めるようにしました。
文章だけの記事から脱却し、図・要点・引用・CTA を構造化して挿入できます。
用意しているコンポーネントは次の通りです。
keyTakeaways: 記事の冒頭に「要点」を箱で表示。AI検索の引用にも有利ctaGroup: 記事末尾に2つのCTAボタン（プライマリ＋セカンダリ）を統一フォーマットで設置expertQuote: 専門家コメントを構造化して挿入（E-E-A-T 強化）statsBox: 数値ハイライトを目立たせるsteps/accordion/faq/callout/testimonial/mediaText: 用途別に揃え、文章に頼らず情報を伝えるtrackedLink: クリック計測付きの外部リンクを記事内に埋め込める
これらは src/components/markdoc/ 配下にコンポーネントとして整理されており、書き手ごとにブレずに統一された表現を担保しています。
④：Lighthouse Performance 90+ を必達ラインにしたパフォーマンス設計
私たちが顧客に提供する Lighthouse Performance 90+ の基準を、まず自社サイトで満たしています。
具体的なチューニング項目は次の通りです。
- 画像最適化:
next/image＋ WebP / AVIF を全箇所で利用。サイズ・遅延読み込みは自動制御 - フォントの最適化:
next/fontで Inter と Noto Sans JP をセルフホストし、CLS（Cumulative Layout Shift）を最小化 - Server Components ファースト: クライアント JS を必要最低限に絞り、初期 LCP を短縮
- Framer Motion は控えめに: 派手な演出ではなく、フェードイン・カウントアップなど速度感を阻害しない演出だけ採用
- Core Web Vitals 監視: LCP < 2.5s ／ INP < 100ms ／ CLS < 0.1 を全ページで担保
これらを「リリース後の改善」ではなく、設計段階から織り込むことが90+を維持するコツです。
⑤：ブランドガイドラインに沿ったデザインシステム
ブランドカラー・フォント・トーンをガイドライン化し、それを Tailwind の token と shadcn/ui コンポーネントに落とし込みました。
「ページごとに見た目がブレない」状態を、仕組みとして担保しています。
- カラー設計: プライマリにリアクトブルー（#61DAFB）、CTAにアクセントピンク（#FF4081）。背景・テキスト・ボーダーまで階調を厳密に定義
- タイポグラフィ: 見出しは Inter、本文は Noto Sans JP。サイズは
text-page-h1/h2/h3/body/sub/meta/smallの7段階で固定 - モーション: 初回表示時のフェードイン（opacity 0→1, translateY 20px→0）を基本パターンに。
FadeInコンポーネントで一元管理 - ヒーローの GradientOrb: 自社サイトの第一印象を司る、モダンで洗練された球体表現を独自実装
「ブランドガイドライン → デザインシステム → コンポーネント」の流れで一貫させることで、運用フェーズで崩れにくい構造になっています。
⑥：コンバージョンを意識した導線設計
「読まれる」だけでなく「問い合わせにつながる」設計を徹底しました。
訪問者の温度感に応じて、複数のコンバージョン経路を用意しています。
- ヘッダーに常時CTA: スクロールしても固定表示の「お問い合わせ」ボタン
- 記事末尾の三方向導線: 問い合わせ／資料DL／無料SEO診断のいずれかを、記事内容に合わせて配置
- HubSpot 連携の資料DLフォーム: お役立ち資料はリード獲得の起点として、HubSpotフォームを Keystatic スキーマから埋め込める設計に
- TrackedLink コンポーネント: 記事内のCTAリンクをすべて計測対象にし、クリック分析でコンテンツ改善を回す
「サイトはあるが問い合わせが伸びない」状態を構造的に解消する仕組みです。
成果
「自社内製でここまで作り込めるか」を実証するための取り組みです。
現時点で達成している指標は次の通りです。
| 指標 | 状態 |
|---|---|
| Lighthouse Performance（モバイル） | 90+ を全主要ページで達成 |
| Core Web Vitals | LCP / INP / CLS すべて Good 判定 |
| 構造化データ網羅性 | 主要ページに JSON-LD（Organization / WebSite / Article / Case / FAQ / Breadcrumb）を実装 |
| AI検索対応 | TL;DR 要約・出典フィールドを記事スキーマに組み込み済み |
| 運用工数 | コンテンツ追加はコード変更ゼロ。Keystatic で完結 |
まとめ
「モダンWeb制作」と一口に言っても、その実態は技術選定・SEO設計・運用フロー・パフォーマンス・デザインシステム・コンバージョン設計の積み重ねです。
本サイトは、私たちがクライアント様にお勧めしている要素をすべて自社サイトに先に適用した実装であり、提案書ではなく「動くショーケース」としての役割を担っています。
次のようなお悩みをお持ちの方は、ぜひ一度ご相談ください。
- 自社のサービスサイトをモダンに作り直したい
- SEO・AI検索の両方に強いサイトを構築したい
- 公開後の運用フローまで含めて設計してほしい
執筆者
編集部
Next.jsやAIを活用したモダンWeb開発・SEO実装に関する情報を発信。SEOに最適化したモダンWebサイト制作、設計ノウハウ、構造化データや内部リンク設計などを中心に扱っています。
監修者
MT Templates 代表/編集長
海外メディア企業でSEOエディターとして従事後、独立。複数メディア運営の経験をもとに、Next.jsやAIを活用したWeb開発・SEO技術を発信。リード獲得につながるサイト構築からSEO設計まで一貫したサポートを提供している。