
ContentfulのContent modelとは?デモ環境の構成を確認してみた
こんにちは、豊島です。
はじめに
DevelopersIOでも利用しているヘッドレスCMS ContentfulのContent model
について紹介します
そもそもContent modelとは?という方は以下ブログを参照ください
コンテンツモデル(Content model) って何?
引用)コンテンツモデルとは 「記事に何を入力してもらうか」を定義する場所で、記事を投稿する前に行なっておく必要があります。実際には小要素となるエントリーフィールドをまとめる役割です。
上記の通りContentfulでは記事を投稿する前にContent model
を定義し、管理したいコンテンツをモデル化します
しかし、
- 定義するといっても、具体的になにを定義すればよいのか
- Content modelにはどういった値が指定できるのか
という予備知識を前提としているため、少しハードルが高く感じました
そのためデモ環境に定義されているContent modelを例に構成を見ていきます
デモ環境のContent modelをみていく
デモ環境には3つのContent modelがあり、それぞれにどのような値を設定するかを決めるFieldsが用意されています
- component - SEO
- page - Landing
- page - Product
各Content modelのFieldsの内容を見ていきます
component - SEO
component - SEOは名の通り、SEO関連のメタタグの情報を管理しているようです
Page title
, Canonical URL
, nofollow
, noindex
を定義しているあたり、コンテンツに共通して利用したいモデルが定義されています
このモデルの主な目的は以下の通りです
- SEO対策に関係するメタタグの情報を一元管理
page - Landing
page - Landingではランディングページを管理していそうですね
SEO fieldsでは先ほどのSEOモデルを参照し、Products
で製品情報を参照 (References, many) していそうです
Hero
から始まるFieldは名前から察するに各ページのトップに表示される情報を管理し、色や画像などを変えるためですね
このモデルの主な目的は以下の通りです
- メインのランディングページとして利用
- ランディングページごとのビジュアルを変える
Hero Banner - Headline
、Hero Banner - Headline color
、Hero Banner - Image
の3つのフィールドを利用し、各ページの表現を管理
- 製品情報の関連付け
- 複数の製品(Products)を関連可能にする
- SEO対策に関係するメタタグの情報を設定
component - SEO
モデルから参照
page - Product
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内の機能でそれぞれのモデルを可視化して関係性を見ることができます
このような構造をイメージし、定義していくことが重要です
まとめ
Content model
を定義する際のポイントを整理します
- 何を定義すればよいのか
- SEO対策、ランディングページ、製品情報など管理したい
コンテンツの種類と目的
を明確にする
- SEO対策、ランディングページ、製品情報など管理したい
- Content modelのFieldsには何を設定すべきか
- 各モデルの目的に沿った情報を設定する
- Content model同士の関係性はどうやって構成するべきか
- モデル間の関連付けを明確にし、
コンテンツの再利用性
を意識する(ここもまたContentfulを利用するにあたって重要なポイントのため、今後解説予定です)
- モデル間の関連付けを明確にし、
最後に
クラスメソッドでは Contentful の契約に関するご相談や構築支援を行っています。
Contentful にご興味のある方や、すでに活用されていて実装面でお困りの方はぜひ一度弊社までお問い合わせください。