再利用性が高まるブロック機能の活用方法

ブロックについて

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

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

ではまずはブロックを作成していきましょう。

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

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

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

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

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

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

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

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

NILTOのブロックを利用してどのようなことが出来るのかいくつか活用例をあげてみます！

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

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

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

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

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

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

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

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

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

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

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

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

-----

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

引き続きNILTOをよろしくお願いいたします。

tanaka

カスタマーサポート/CS

NILTOのカスタマーサポートを担当しています。
画像や映像を作ったりするのが趣味。
ご不明な点は公式サイト、またはX(旧Twitter)からお気軽にお問い合わせください。

NILTOは無料でお試しいただけます。
製品の使い方や、手続きなど、ご不明な点は
お気軽にお問い合わせください。