はじめに

NILTOのモデルでは、

• FAQモデル
• ブログモデル
• ニュースモデル

といった 「ページ単位」や「コンテンツ単位」の構造を考えることが多いと思います。
一方で、実際のデザインやフロントエンドでは、

• CTA
• カード
• バナー
• アラートボックス

などの「部品（セクション）」単位で考えることが当たり前になっています。
この「ページ」と「部品」のギャップを埋めてくれるのが、NILTOのフィールドセットです。

フィールドセットを使うと、ページの中で繰り返し登場する部品を「1つの型」として定義できます。
フィールドセットとして定義された型は、複数のモデルで使い回せることができるといったメリットがあります。

フィールドセットを作成する

この記事ではWebサイトでよく見かける、「ジグザグ型レイアウト」、「カード型レイアウト」、「CTA」を例に、3つのフィールドセットを作成します。

ジグザグ型レイアウト用フィールドセット

ジグザグ型レイアウトとは、左右交互に画像と見出し・文章が入れ替わりながら配置されるレイアウトのことをいいます。

ジグザグ型レイアウトに必要な要素として

• 見出し
• 本文
• 画像

を繰り返しフィールドの中に入れます。

フィールドセットが完成したら保存しましょう。
完成したフィールドセットの入力画面はこちらになります。

繰り返しフィールドのため、「+コンテンツを追加」を選択することでジグザグ型レイアウトを追加することができます。

実際にWebサイトで表示してみたものがこちらになります。

カード型レイアウト用フィールドセット

カード型レイアウトとは、カード型の要素が2カラムや3カラムなどで配置されるレイアウトのことをいいます。

ここではカード型要素に必要なものとして

• 見出し
• サムネイル
• URL

を繰り返しフィールドの中に入れます。

フィールドセットが完成したら保存しましょう。
完成したフィールドセットの入力画面はこちらになります。

繰り返しフィールドのため、「+カードを追加」を選択することでジグザグ型レイアウトを追加することができます。

実際にWebサイトで表示してみたものがこちらになります。

CTA用フィールドセット

CTAとは、ユーザーに「購入」「資料請求」「問い合わせ」などの具体的な行動を促すボタンやテキストリンクを指します。

CTAに必要な要素として

• 見出し
• 本文
• ボタン

のフィールドを設定します。

複数選択フィールドでは以下のように2つのボタンを設定します。

フィールドセットが完成したら保存しましょう。
完成したフィールドセットの入力画面はこちらになります。

実際にWebサイトで表示してみたものがこちらになります。

モデルを作成する

3つのフィールドセットができたら、次はモデルを作成します。

ここで使用するのは組み合わせフィールドです。

組み合わせフィールドとは

組み合わせフィールドとは、フィールドセットのみ追加できる特殊なフィールドとなります。
セットしたフィールドセットは、任意の順番でコンテンツに追加することができます。

実際に試してみましょう。

まず以下のように先ほど作成した3つのフィールドセットを組み合わせフィールドに追加して保存します。

これでモデルが完成しました。

コンテンツを作成する

では作成したモデルで実際にコンテンツを作成してみましょう。

コンテンツを新規作成すると以下のようなフィールドセットが組み込まれた組み合わせフィールドが表示されます。

今回は

ジグザグレイアウト
カード一覧
ジグザグレイアウト
CTA

という構成のページを作成してみます。

設定したい構成の順番にジグザグレイアウト、カード一覧、ジグザグレイアウト、CTAと選択します。

すると以下のように設定したい順番にコンテンツが並びます。

これでそれぞれのフィールドを追加等するだけで柔軟なページ構造に対応できるコンテンツが完成しました。

Webサイトで表示する

実際にWebサイトとして表示するとこのようになります。

さいごに

本記事では、フィールドセットの活用方法をお伝えしました。

フィールドセットでは部品の型を作り、さらに組み合わせフィールドとセットで使うことで「ページ構造そのもの」を柔軟に表現できるようになります。

ぜひあなたのプロジェクト向けにアレンジしてみてください。