ContentfulのContent modelとは?デモ環境の構成を確認してみた

ContentfulのContent modelとは?デモ環境の構成を確認してみた

こんにちは、豊島です。

はじめに

DevelopersIOでも利用しているヘッドレスCMS ContentfulのContent modelについて紹介します
そもそもContent modelとは?という方は以下ブログを参照ください
コンテンツモデル(Content model) って何?

引用)コンテンツモデルとは 「記事に何を入力してもらうか」を定義する場所で、記事を投稿する前に行なっておく必要があります。実際には小要素となるエントリーフィールドをまとめる役割です。

上記の通りContentfulでは記事を投稿する前にContent modelを定義し、管理したいコンテンツをモデル化します
しかし、

  • 定義するといっても、具体的になにを定義すればよいのか
  • Content modelにはどういった値が指定できるのか

という予備知識を前提としているため、少しハードルが高く感じました
そのためデモ環境に定義されているContent modelを例に構成を見ていきます

デモ環境のContent modelをみていく

Google Chrome-2025-02-14 at 14.37.51
デモ環境には3つのContent modelがあり、それぞれにどのような値を設定するかを決めるFieldsが用意されています

  • component - SEO
  • page - Landing
  • page - Product

各Content modelのFieldsの内容を見ていきます

component - SEO

Google Chrome-2025-02-14 at 14.41.13

component - SEOは名の通り、SEO関連のメタタグの情報を管理しているようです
Page title, Canonical URL, nofollow, noindexを定義しているあたり、コンテンツに共通して利用したいモデルが定義されています

このモデルの主な目的は以下の通りです

  • SEO対策に関係するメタタグの情報を一元管理

page - Landing

Google Chrome-2025-02-14 at 14.44.43

page - Landingではランディングページを管理していそうですね
SEO fieldsでは先ほどのSEOモデルを参照し、Productsで製品情報を参照 (References, many) していそうです
Heroから始まるFieldは名前から察するに各ページのトップに表示される情報を管理し、色や画像などを変えるためですね

このモデルの主な目的は以下の通りです

  • メインのランディングページとして利用
  • ランディングページごとのビジュアルを変える
    • Hero Banner - HeadlineHero Banner - Headline colorHero Banner - Imageの3つのフィールドを利用し、各ページの表現を管理
  • 製品情報の関連付け
    • 複数の製品(Products)を関連可能にする
  • SEO対策に関係するメタタグの情報を設定
    • component - SEO モデルから参照

page - Product

Google Chrome-2025-02-14 at 14.46.27

page - Productではname, Description, Price, Product Imagesなど、予想した通り製品情報を管理しています

このモデルの主な目的は以下の通りです

  • 製品情報の一元管理
    • name(製品名)、Description(説明)、Price(価格)、Product Images(製品画像)など、製品に関する基本情報を管理
  • ランディングページへの製品情報の紐付け
    • page - Landing モデルの Products フィールド(References, many)を通じて、特定のランディングページに関連付ける
  • 関連する製品情報を定義
    • Related productsフィールドを活用し、関連製品を紐付ける
  • SEO対策に関係するメタタグの情報を設定
    • component - SEO モデルから参照

モデルを可視化して確認する

これまでに出てきたモデルと目的を整理してみます

Content model 目的
component - SEO SEO対策のメタタグの情報を管理
page - Landing メインのランディングページとして利用
ページごとのビジュアルを管理
複数の製品情報を関連付け
SEO対策を実施
page - Product 製品情報の一元管理
複数のランディングページで利用する
関連する製品情報を管理
SEO対策を実施

またContentful内の機能でそれぞれのモデルを可視化して関係性を見ることができます

Google Chrome-2025-02-17 at 15.34.40

このような構造をイメージし、定義していくことが重要です

まとめ

Content modelを定義する際のポイントを整理します

  • 何を定義すればよいのか
    • SEO対策、ランディングページ、製品情報など管理したいコンテンツの種類と目的を明確にする
  • Content modelのFieldsには何を設定すべきか
    • 各モデルの目的に沿った情報を設定する
  • Content model同士の関係性はどうやって構成するべきか
    • モデル間の関連付けを明確にし、コンテンツの再利用性を意識する(ここもまたContentfulを利用するにあたって重要なポイントのため、今後解説予定です)

最後に

クラスメソッドでは Contentful の契約に関するご相談や構築支援を行っています。
Contentful にご興味のある方や、すでに活用されていて実装面でお困りの方はぜひ一度弊社までお問い合わせください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.