Hygraph（GraphCMS）開発

Hygraphが他のヘッドレスCMSと異なる理由

Hygraph（旧GraphCMS）は、GraphQLをゼロから中心に設計された唯一のヘッドレスCMSです。これは単なるマーケティング上の謳い文句ではありません。コンテンツAPIがネイティブで型付けされており、高い精度でクエリを実行でき、複数のソースからコンテンツを統合して単一の統一APIとして提供できることを意味します。

私たちはGraphCMS時代からHygraphを使って本番アプリケーションを構築してきました。Hygraphが得意とする領域、課題のある部分、そしてメンテナンスの悪夢に陥らずにスケールするコンテンツモデルの設計方法を熟知しています。

HygraphをCMSとして選ぶ理由

後付けではないネイティブGraphQL

ほとんどのヘッドレスCMSプラットフォームはREST APIを主軸とし、GraphQLは後から追加された機能にすぎません。Hygraphはその逆です。すべてのコンテンツタイプ、すべてのリレーション、すべてのアセットに対して、完全に型付けされたGraphQLスキーマが自動的に生成されます。必要なフィールドだけをクエリできるため、オーバーフェッチもアンダーフェッチも、複数のAPI呼び出しの連鎖も不要です。

これはパフォーマンスに直結します。単一のHygraphクエリで、ネストされたコンテンツ、ローカライズされたバリアント、関連エントリを1回のラウンドトリップで解決できます。RESTベースのCMSで同じことをしようとすれば、ページが読み込まれる前にレートリミットを使い果たしてしまうでしょう。

コンテンツフェデレーション

HygraphのRemote Sources機能を使えば、外部のRESTおよびGraphQL APIからデータを取り込み、ネイティブコンテンツとして扱えます。Shopifyの商品データ、バックエンドのユーザープロフィール、Stripeの価格情報——これらすべてに単一の統合GraphQLエンドポイントからアクセスできます。

私たちはこの機能をフル活用し、コンテンツ編集者がHygraphで作業しながら、フロントエンドがデータの所在を意識することなく複数のデータソースから取得するアプリケーションを構築しています。

細かな権限設定とワークフロー

Hygraphには、ステージベースのコンテンツワークフロー（下書き→レビュー→公開）と、エンタープライズチームでも実用的に機能するロールベースのアクセス制御が標準搭載されています。コンテンツ編集者は必要な情報だけを参照でき、開発者はスキーマ変更をロックし、レビュー担当者は本番環境に触れることなく承認できます。

私たちのHygraph開発アプローチ

壊れないコンテンツモデリング

CMSプロジェクトで最も重要な決断は、フロントエンドのコードを1行書く前に行われます——それがコンテンツモデルです。ここで失敗すれば、6か月後にリファクタリングを強いられます。

私たちは以下の原則に基づいてHygraphスキーマを設計します：

• コンポーネント駆動のモデル — コンテンツタイプはフロントエンドコンポーネントに直接対応します。編集者はモノリシックなページタイプではなく、モジュール式のブロックからページを組み立てます。
• リレーションアーキテクチャ — 1対多、多対多、ポリモーフィックなリレーションを事前に計画します。Hygraphのユニオン型を活用することで、汎用的な「何でも入れる」フィールドに頼ることなく、柔軟なコンテンツ構造を実現します。
• 初日からローカライゼーション — Hygraphはフィールドレベルのローカライゼーションをサポートしています。これは後付けではなく、初期のスキーマ設計時に設定します。
• フリーテキストより列挙型フィールド — 可能な限り入力をenumに制限します。これによりデータ品質の問題を防ぎ、フィルタリングの動作を予測可能にします。

フロントエンド統合

私たちはHygraphを使ったフロントエンドを主にNext.jsとAstroで構築しています。典型的な構成は以下のとおりです：

Next.js + Hygraph： Next.jsのApp RouterとサーバーコンポーネントをLして、ビルド時またはリクエスト時にHygraphをクエリします。GraphQLクエリはサーバーサイドで実行されるため、APIトークンがブラウザに渡ることはありません。HygraphのWebhookと連携したISR（インクリメンタル静的再生成）を実装し、コンテンツが変更されたときに特定のページだけを再検証します——フルリビルドは不要です。

Astro + Hygraph： インタラクティビティが最小限のコンテンツ重視のサイトでは、Astroのスタティックファーストなアプローチとhygraphを組み合わせることで卓越したパフォーマンスを発揮します。.astroファイルにGraphQLクエリを記述し、デフォルトではJavaScriptをゼロ出力し、必要な箇所にのみインタラクティブなアイランドをハイドレートします。

どちらのケースでも、GraphQL Code GeneratorをってHygraphのGraphQLスキーマからTypeScriptの型を生成します。すべてのクエリは型安全であり、すべてのコンポーネントは期待するデータの形を正確に把握しています。

Webhook駆動のワークフロー

HygraphのWebhookはコンテンツのライフサイクルイベント——作成、更新、公開、非公開、削除——に応じてトリガーされます。私たちはこれを以下に接続します：

• フルデプロイなしで即時コンテンツ更新を行うNext.jsのオンデマンドISR
• コンテンツ変更時のAlgoliaまたはMeilisearchへの検索インデックス更新
• 編集ワークフロー向けのSlackまたはメールによる通知パイプライン
• グローバル分散サイト向けのCDNレイヤーでのキャッシュ無効化

プレビューとドラフトモード

編集者は公開前に未公開のコンテンツを確認する必要があります。私たちはHygraphのDraftステージをNext.jsのDraft ModeまたはAstroのサーバーレンダリングプレビュールートと組み合わせて実装します。コンテンツ編集者がHygraphのプレビューリンクをクリックすると、実際のフロントエンドで変更内容がレンダリングされ、何が公開中かを一目で分かるよう「プレビュー」バナーが表示されます。

私たちと協力することで得られるもの

ディスカバリーとスキーマ設計

コンテンツ要件を精査し、コンテンツタイプとリレーションをマッピングし、編集の使いやすさとクエリパフォーマンスの両方に最適化されたHygraphスキーマを設計します。開発開始前にドキュメント化されたコンテンツモデルをお渡しします。

フロントエンド構築

Next.jsまたはAstroで構築し、Hygraphと完全に統合された本番対応のフロントエンドを提供します。型安全なGraphQLクエリ、Hygraphのアセットパイプラインによる最適化された画像処理、そしてお客様のデザインシステムに基づいたレスポンシブレイアウトを実現します。

編集体験のセットアップ

カスタムサイドバーウィジェット、ステージと権限の設定、プレビュー環境、そしてドキュメント化された編集ワークフローを提供します。コンテンツチームには、開発者視点ではなく、自分たちの思考に沿って動くCMSが提供されます。

パフォーマンス最適化

クエリバッチング、対応している場合はパーシステッドクエリ、CDNキャッシュ戦略、そしてHygraphの組み込み変換機能とnext/imageまたはAstroのimageコンポーネントによる画像最適化を実装します。Core Web Vitalsは後から考えるものではなく、設計上の制約として最初から織り込みます。

デプロイとインフラ

Vercel、Netlify、またはCloudflare Pagesへのデプロイを、型チェックの実行、HygraphスキーマへのGraphQLクエリのLint、および破壊的変更が本番環境に到達するのを防ぐCI/CDパイプラインとともに提供します。

HygraphがFitするケース

Hygraphは以下のような場合に最適です：

• チームがすでにGraphQLで考えているか、そうしたいと思っている
• 複数の外部ソースからコンテンツをフェデレートする必要がある
• 多言語コンテンツが「あると良い機能」ではなく、コアな要件である
• ステージベースの公開を伴う細かな編集ワークフローが必要
• フロントエンドがGraphQLを効率的に活用できるモダンなフレームワークで構築されている

シンプルなブログや、RESTのシンプルさが好まれるサイトには適していません。そのような場合は事前にお伝えし、より適切な代替案をご提案します。

私たちのHygraphビルドを支える技術

プロジェクトによって異なりますが、私たちのHygraphスタックは通常、フロントエンドにNext.jsまたはAstro、型安全性のためにGraphQL Code Generator、ホスティングにVercelまたはNetlify、そして規模が求める場合はモノリポ管理にTurborepoを採用しています。GraphQLクライアントには軽量なurqlまたはgraphql-requestを使用しています——Apolloはほとんどのコンテンツ主導のフロントエンドには過剰です。

マーケティングサイト、ドキュメンテーションプラットフォーム、マルチブランドコンテンツハブ、そしてECストアフロントなど、様々なHygraphプロジェクトを本番環境に届けてきました。パターンは実証済みであり、ツールは成熟しており、編集体験についてはクライアントから常に最高の評価をいただいています。