こんにちは、 NILTO でカスタマーサポートをしている田中です。

今回はNILTOの特徴の１つでもある「フィールドセット」の活用方法を紹介します。
フィールドセットを組み合わせることで複雑な構造のページでも簡単に量産することができるので、是非とも取り入れていただきたいです。

フィールドセットについて

そもそもフィールドセットとは、複数の入力フィールドを組み合わせてテンプレート化したコンポーネントです。

このフィールドセットによって、コンテンツ編集時にページのセクション構成をUI 上で簡単に組み替えることができます。
また、フィールドセットはスペース内で共有もできるほか、複数のページに適用することもできます。これにより、さまざまなレイアウトのページをUI 上で量産することも可能です。

フィールドセットの作り方

ではまずはフィールドセットを作成していきましょう。

フィールドセット管理画面右上の[＋フィールドセット作成]から新規作成します。
初回作成時は画面中央の[＋フィールドセットを新規作成]からも可能です。
また左側のサイドバーの[＋]からも作成が可能です。

その際にフィールドセット名の設定が必要になりますが、サムネイルはこの場では任意です。後から設定することも可能です。

作成できたら右側のフィールドエリアから配置したいフィールドをドラッグ&ドロップすることで追加することができます。
ドロップ後に追加されたフィールドをクリックすることで詳細を設定することができます。任意のフィールドが挿入出来たら右上の[保存]を行ってください。

次に、先程作成したフィールドセットをモデルに入れていきます。
モデルを作成し、任意のフィールドとフィールドセットを追加します。

また、組み合わせフィールドを活用することで、フィールドセットを複数選択し、好きな順序で組み合わせてまとめることが可能です。

入れた後のイメージはこのような感じです。

実際にコンテンツ内での挙動を見ていきましょう。

先ほど設定した組み合わせフィールドは、コンテンツ編集画面では追加したフィールドセットが表示されています。
コンテンツ内でクリックして追加することで、好きな数だけ必要なフィールドセットを追加することができますので、何度も何度もモデルを編集する必要はありません。

活用例

NILTOのフィールドセットを利用してどのようなことが出来るのかいくつか活用例をあげてみます！

また近いうちに、個々の内容の詳細に関して別のブログで紹介していきます。

①ランディングページの迅速な構築

目的: 特定のキャンペーンやプロモーションに合わせたカスタマイズが可能なページを迅速に作成する。

方法: ヘッダー、フッター、製品紹介セクション、顧客の声、コールトゥアクション（CTA）ボタンなどのフィールドセットを事前に設定します。
これらのフィールドセットを組み合わせることで、異なるキャンペーンに対応したランディングページを素早く構築できます。

②ブログやニュース記事を一貫したフォーマットで公開する

目的: 一貫したフォーマットのブログやニュース記事を効率よく公開する。

方法: 記事のタイトル、本文、画像、著者情報などを含むフィールドセットを作成します。
新しい記事を追加する際には、これらのフィールドセットを使って素早くフォーマットを整えることができます。

③UIコンポーネントの再利用

目的: ウェブサイト全体にわたるUIコンポーネントの一貫性を維持する。

方法: ボタン、フォーム、画像ギャラリー、テキストブロックなどのUI要素をフィールドセットとして設定します。
これらのフィールドセットを異なるページで再利用し、デザインの一貫性を保ちつつ開発の効率化を図ることができます。

④マーケティングキャンペーン

目的: 特定のマーケティングキャンペーンに合わせたカスタマイズ可能なコンテンツを提供する。

方法: キャンペーン特有のバナー、特別オファーの詳細、製品の特長を紹介するセクションなどをフィールドセットとして作成します。
これらのフィールドセットを様々なページに簡単に組み込むことで、特定のキャンペーンを強調できます。

⑤eコマースサイトでの製品表示

目的: 製品の特徴や価格情報を効果的に表示し、顧客の購買体験を向上させる。

方法: 製品画像、説明、価格、購入ボタンなどを含むフィールドセットを作成します。
これを使って製品ページを構築し、顧客が情報を簡単に理解し、購入に至りやすいレイアウトを提供することができます。

終わりに

この記事では再利用性が高まるフィールドセット機能の活用術を紹介しました。
フィールドセットを組み合わせることで複雑な構造のページでも簡単に量産することができるので、是非ともご活用ください。
この記事を見て、皆さんのやりたいを叶えるための助けになれば嬉しいです。

-----

NILTOは皆さんがワクワクできるよう日々開発に取り組んでおります。
ご意見・ご要望がありましたらお問い合わせ、または公式X(旧Twitter)からお気軽にご連絡ください。
引き続きNILTOをよろしくお願いいたします。