コレクション要素を使用した動的グリッドレイアウトの作成

公開日: 2024年11月13日更新日: 2026年10月20日

ストアのすべての商品を手軽に紹介したり、コースモジュールのすべてのレッスンを一覧表示したり、最新のブログ投稿を特集したりする方法を考えたことはありませんか？そこで役立つのがコレクション要素です。これらの強力なコンテナ要素は、商品、ブログ、レッスンなどのグループ化されたコンテンツをグリッドに動的に表示し、コレクションから直接データを取得します。ClickFunnels ストアでストアフロントを設定する場合でも、コースモジュールでレッスンを整理する場合でも、サイトのホームページにすべてのブログ投稿を表示する場合でも、コレクション要素を使えば動的で魅力的なページを簡単に作成できます。この記事では、コレクション要素を使ってページを充実させる方法と、この機能を効果的に活用するための実用的な例を紹介します。

必要条件

有効な ClickFunnels アカウント
ワークスペースで作成済みのページ

コレクション要素を理解する

フォトアルバムを整理していると想像してください。アルバムがコレクション要素で、個々の写真を収めて表示するコンテナです。アルバムの各写真は、商品、ブログ投稿、レッスンなど、コレクション内のアイテムを表します。

次に、アルバムの並べ方を考えてみましょう。

写真は各ページに行と列で並べられます（コレクション要素のグリッドレイアウトと同じです）。たとえば、1 行に 3 枚の写真を並べ、1 ページに 4 行配置するといった具合です。
1 ページに収まりきらないほど写真が多い場合は、ページ番号を付けて次のページをめくれるようにします。これは、ClickFunnels で大きなコレクションにページネーションが機能する仕組みと似ています。

ClickFunnels のコレクション要素は、コンテンツのコレクションを動的に表示するために設計されたコンテナです。コレクションは、商品、ブログ投稿、コースモジュール、レッスンなど、グループ化されたアイテムで構成されます。ページにコレクション要素を追加すると、これらのアイテムを整理された見栄えのよい形で紹介できます。各コンテナには、商品名、説明、画像、価格、リンクなどの動的コンテンツ要素を挿入して、コレクション内の関連データを表示できます。

コレクション要素は内部で CSS グリッドレイアウト（display: grid プロパティ）を使用してコンテンツを整理します。このレイアウトはコンテナを行と列に分割し、すべてのアイテムが均等な間隔で整列するようにします。グリッドレイアウトの構造は柔軟性が高く、要素の数、指定した列数、利用可能な画面サイズに応じてアイテムの配置を自動的に調整します。

例:

訪問者がストアを閲覧するときに、商品コレクション要素を使用して、名前、価格、説明などの主要な情報とともにすべての商品を表示できます。
ブログ投稿 コレクション要素を使用すると、ブログの最新の投稿や注目の投稿を紹介できます。
コースレッスン コレクション要素はモジュールテンプレートページ内のすべてのレッスンを表示するのに最適で、コースモジュール コレクション要素はコースのホームページですべてのコースモジュールを一覧表示できます。

ページエディターでコレクション要素を追加する

ページエディター内で、要素を配置したい場所に セクション を追加します。
そのセクション内に行を追加します。
または、セクションと行の代わりに フレックス コンテナを挿入します。
行内にあるオレンジ色の +（プラス）ボタンまたは 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
コレクション カテゴリから、適切なコレクション要素（例: 商品、ブログ投稿、コースレッスン）を選択します。
コレクション要素を挿入したら、1 行に表示するアイテムの数を設定します。デフォルトでは、要素は 1 行に 3 つのアイテムを表示します。この設定を変更してレイアウトを調整できます。たとえば、行あたりのアイテム数 を 4、ページあたりのアイテム数 を 8 に設定すると、4 つのアイテムが 2 行に表示されます。
- 行あたりのアイテム数 は 1 から 20 まで設定でき、デスクトップに適用されます。モバイルでは、アイテムは常に 1 行に 1 つずつ表示されます。
- ページあたりのアイテム数 のデフォルトは 16 で、1 から 100 まで設定できます。ページネーションを隠す をオンにするとページ番号が非表示になります。また、ページネーションの色の設定を使用してページ番号のスタイルを設定することもできます。ページネーションを隠しても表示されるアイテムは増えません。コレクションには ページあたりのアイテム数 で設定した数だけが表示されるため、すべてのアイテムを 1 ページに表示したい場合は、先にこの数を増やしてください。
コレクション要素の各グリッド内に、関連するコンテンツ要素を挿入します。たとえば、「商品」コレクション要素の場合は、「商品」コレクション要素にデータを動的に表示するために特別に設計された名前、説明、価格、画像、リンクの各要素を挿入できます。

関連するコレクション要素を追加するとき、ClickFunnels は追加できる要素をオレンジ色の枠線で強調表示するため、互換性のあるアイテムだけを追加できます。
関連する要素を追加すると、その要素はすべてのグリッド列に複製されます。これらの要素内の Liquid 構文がコレクションからデータを動的に取得するため、各アイテムはそれぞれ異なる内容になります。たとえば、「商品」コレクション要素では、コレクション内で利用可能なすべての商品が表示され、各グリッド列に商品の名前、価格、画像が表示されます。

コレクション要素を使用できる場所

コレクション要素には、コレクションの種類やデザインするページに応じた用途があります。たとえば、ストアフロントで販売しているすべての商品を表示できます。

各種類のコレクション要素をどこでどのように使用できるかを以下にまとめます。

商品

ユースケース: ストア、サイト、カスタマーセンター、コースページですべての商品を紹介します。
動的コンテンツ: 名前、画像、説明、価格、リンクなどの商品の詳細を表示します。

「商品」コレクション要素について詳しくは、(コレクション)商品: ページで商品を紹介するの記事をご覧ください。

商品コレクション

ユースケース: 季節限定のオファーや厳選した商品バンドルなど、複数の関連商品をまとめた商品コレクションを紹介します。商品コレクション要素と同様に、「商品コレクション」コレクション要素もストア、サイト、カスタマーセンター、コースページで使用できます。
動的コンテンツ: コレクション名、説明、コレクション画像、リンクを表示します。

「商品コレクション」コレクション要素について詳しくは、(コレクション)商品コレクション: ページで商品コレクションを紹介するの記事をご覧ください。

ブログ投稿

ユースケース: サイト、ランディングページ、ファネル、カスタマーセンター、ストア、コースページですべてのブログ投稿を紹介します。
動的コンテンツ: ブログのタイトル、要約、アイキャッチ画像、公開日、カテゴリ、著者名を一覧表示します。

「ブログ投稿」コレクション要素について詳しくは、(コレクション)ブログ投稿: ブログ投稿の表示と整理の記事をご覧ください。

ブログカテゴリ

ユースケース: すべてのブログカテゴリを一覧表示して、ユーザーがカテゴリページでコンテンツを探しやすくします。
動的コンテンツ: カテゴリ名とリンクを表示します。

「ブログ投稿」コレクション要素について詳しくは、(コレクション)ブログ投稿: ブログ投稿の表示と整理の記事をご覧ください。

付与された資産

ユースケース: コースページとカスタマーセンターで、コンタクトに付与されたすべての資産を表示します。
動的コンテンツ: 資産名、説明、関連するダウンロードリンクまたはアクセスリンクを一覧表示します。

「付与された資産」コレクション要素について詳しくは、(コレクション)付与された資産: ユーザーに付与された資産を表示の記事をご覧ください。

コース

ユースケース: カスタマーセンター、サイト、ストア、ランディングページ、ファネルページで、利用可能なすべてのコースを紹介します。
動的コンテンツ: コレクション要素内に、コースのタイトル、公開日、ポッドキャストリンク、進捗状況、説明、画像、リンクを表示します。

「コース」コレクション要素について詳しくは、(コレクション)コース: 利用可能なコースを配置して表示するの記事をご覧ください。

モジュール

ユースケース: コースページですべてのコースモジュールを紹介します。
動的コンテンツ: コレクション要素内に、モジュール名、説明、リンク、画像、ポッドキャストリンク、公開日を一覧表示します。

詳しくは、(コレクション)モジュール: コースモジュールの配置と表示の記事をご覧ください。

レッスン

ユースケース: コースモジュールテンプレートページ内のすべてのレッスンを表示して、受講者がコースコンテンツに簡単にアクセスできるようにします。
動的コンテンツ: コレクション要素内に、レッスン名、説明、リンク、画像、音声、動画、公開日、レッスンのステータスを一覧表示します。

詳しくは、(コレクション)レッスン: コースレッスンの配置と表示の記事をご覧ください。