【Studio初心者ガイド】URLクエリフィルターの使い方｜複合条件でCMSリストを絞り込める

記事数やコンテンツが増えてくると、「目的の情報が探しにくい」と感じることはありませんか。

Studio CMSでは、URLクエリフィルターを使うことで、カテゴリーやタグなどの条件を組み合わせて、表示内容を絞り込めるようになります。

本記事では、URLクエリフィルターの仕組みから設定方法まで、初心者でも迷わず使えるように手順を整理して解説します。

URLクエリフィルターとは

URLクエリフィルターとは、WebページのURLに含まれるクエリパラメーターを使って、CMSリストの表示内容を切り替える機能です。

たとえば、サイト訪問者がカテゴリーやタグを選択すると、URLの末尾に次のような情報が追加されます。

/page?key=value

このURLクエリに応じて、CMSリストに表示されるアイテムが自動で絞り込まれます。

これにより、ページを複数作成しなくても、1つのページ内で複数の条件に対応した検索・絞り込みができます。

CMSリストとの関係

URLクエリフィルターは、CMSリストと組み合わせて使う機能です。

CMSリストとは、Studio CMSの内部コンテンツデータをサイト上に表示する動的なリストのことです。

あらかじめ設定したCMSプロパティをもとに、リストの表示内容を動的に変更できます。

URLクエリフィルターでは、このCMSプロパティのうち、他のCMSモデルを参照する参照プロパティを検索条件として使用します。

URLクエリフィルターでできること

URLクエリフィルターを使うと、次のようなことができます。

複合条件でCMSリストを絞り込める

カテゴリーやタグなどを組み合わせて、CMSリストの表示アイテムを絞り込めます。

たとえば、メディアサイトで「カテゴリー」と「タグ」（赤四角)を選んで記事を探すことができます。

他には、ポートフォリオサイトなどで「ジャンル」を選んで実績を探したりできます。

検索条件付きのURLを共有できる

サイト訪問者がURLクエリフィルターで条件を選択すると、URLに検索条件が反映されます。

そのURLを共有すれば、絞り込み条件を適用した状態のページリンクをシェアできます。

プリセットパーツから簡単に設置できる

左パネルの「接続」から使えるCMSタブには、検索・絞り込み用のリンクメニューを反映したプリセットパーツがあります。

プリセットパーツを配置するだけで、URLクエリフィルターをすぐに設置できます。

URLクエリフィルターを設置できる条件

URLクエリフィルターは、次の条件を満たす場合に設置できます。

対象モデルに参照プロパティがある

URLクエリフィルターの対象モデルに、他のCMSモデルを参照するプロパティが設定されている必要があります。

つまり、絞り込みに使う「条件」が必要です。

たとえば、次のようなものです。

• カテゴリー

• タグ

これらは、他のCMSデータを参照する「参照プロパティ」として設定します。この参照プロパティをもとに、検索条件が表示されます。

同じCMSモデルのCMSリストが同一サイト内にある

URLクエリフィルターの対象モデルと同じCMSモデルが紐付いたCMSリストが、同一サイト内に配置されている必要があります。

フィルターだけでは絞り込みはできません。絞り込み結果を表示するCMSリストも必要です。

つまり、絞り込み結果を表示する「場所」が必要です。

これは、CMSリストと呼ばれる一覧表示のことです。

• 記事一覧

• 実績一覧

などが該当します。

URLクエリフィルターの設置前に準備すること

URLクエリフィルターを使用する前に、一覧ページとCMS設定を用意します。

一覧ページを作成する

まず、通常の「ページ」を作成し、CMSリストとフィルターを配置します。

この一覧ページが、URLクエリフィルターで絞り込み検索を行うページになります。

作成手順

1.画面右上の「＋」ボタン、またはページパネルの「＋」ボタンをクリックします。

2.ページタイプで「ページ」を選択します。

詳細ページを作成する

必要に応じて、CMSの詳細ページとして「動的ページ」を作成します。

動的ページを作成することで、一覧ページから記事詳細ページへ遷移できるようになります。

たとえば、

• ブログ記事の詳細ページ

• カテゴリーごとのページ

• タグごとのページ

などを作成できます。

作成手順

1.画面右上の「＋」ボタン、またはページパネルの「＋」ボタンをクリックします。

2.ページタイプ選択で「＞」をクリックし、「動的ページ」を選択します。

3.CMSモデルを選択します。

4.「作成」をクリックします。

作成後は、選択したCMSモデルをもとに詳細ページが生成されます。

URLクエリフィルターを設置する方法

URLクエリフィルターは、主に次の方法で設置できます。

プリセットパーツを使用する

接続パネルのCMSタブには、URLクエリフィルター用のプリセットパーツが用意されています。

プリセットパーツは、次のどちらかを選べます。

• フィルターのみ

• リスト＋フィルター

設置手順

1.接続パネル（赤四角）を開きます。

2.「CMS」タブ（赤四角）を選択します。

3.表示されたCMSプリセットから、対象のCMSモデルが紐付いた「フィルター」または「リスト＋フィルター」を選び、スクリーンに配置します。

プリセットを使うと、検索・絞り込み機能の立ち上げがスムーズです。

検索ページを追加する

検索ページを追加する方法もあります。

追加手順

1.スクリーン右上の「＋」ボタン（右側赤四角）、またはページパネルの「＋」ボタン（左側赤四角）をクリックします。

ページタイプ選択画面で「＞」（赤四角）をクリックし、「検索ページ」を選択します。

検索ページ（以下画像）には、あらかじめ次の要素が配置されています。

• 検索フィールド

• URLクエリフィルター

• CMSリスト

ただし、URLクエリフィルターは参照プロパティが設定されている場合のみ配置されます。

検索ページを使えば、サイト訪問者が検索ワードや検索条件をもとに、リストの表示アイテムを絞り込めるページを短時間で作成できます。

CMSリストを設定する方法

URLクエリフィルターを設置したら、CMSリストのフィルター条件をURLクエリに設定し、表示内容やレイアウト、外観などを調整します。

設定手順

1.絞り込み検索をしたいCMSリストをスクリーン上で選択（赤四角）します。
※リストアイテム単体ではなく、CMSリスト全体を選択してください。

2.右パネルの「データ」タブ（赤四角）を開き、「フィルター設定」メニューを表示します。※右パネルが閉じている場合は、先にパネルを開きます。

3.「フィルター」の「＋」をクリックし、フィルターを追加します。

4.プルダウンリスト（赤四角）の「モデル」配下から、フィルター条件に使用する参照プロパティを選択します。

5.フィルター条件が「URLクエリ設定中」（赤四角）になっていることを確認します。※URLクエリはデフォルトで有効化されています。

6.参照プロパティを使用している場合には、検索条件を設定します。

• すべてに一致（AND条件）

• いずれかに一致（OR条件）

7.必要に応じてCMSリストの表示設定（赤四角）を調整します。

たとえば、以下の設定が可能です。

• 表示数
  → リストに表示する最大件数を設定できます。設定した件数を超えるアイテムは表示されません。

• 0件時の表示
  → 表示するアイテムが0件の場合に表示するデザインを調整できます。
  「0件の表示」を有効にすると、プレビューを確認しながら編集できます。

• もっと見るボタン（Read more）
  → 表示件数の上限を超えた場合、リスト下部に「もっと見る」ボタンが自動表示されます。
  クリックすると、指定件数分のアイテムが追加表示されます。

表示数は最大50件まで設定可能です。また、読み込むアイテムがない場合はボタンは表示されません。

ボタンデザインは、スクリーン上で確認しながら調整できます。※CMSコレクションを紐付けたCMSリストでは利用できません。

また、レイアウトや外観の調整もできます。

たとえば、ボックスのレイアウト設定では、以下の調整が可能です。

• サイズ（幅・高さ）

• マージン・パディング・ギャップ（余白）

• 配列方向と配置

• 位置・重ね順・はみ出し

• 位置設定（相対・固定・絶対・追従）

• はみ出し設定

• ボックスを重ねる（ネガティブマージン）

• 複数ボックスの高さを揃える

• 固定位置のボックスを画面下部・右端へ配置する

• 変形・回転・傾き

さらに、ボックスの外観設定では、次のようなデザイン調整も行えます。

• フィルター設定

• 背景色設定

• 枠線設定

• 角丸設定

• 影（シャドウ）設定

• 不透明度設定

• 背景を斜めに塗る・斜め背景の作成

検索しやすさだけでなく、見やすいデザインになるよう調整しましょう。

URLクエリフィルター本体の設定方法

最後に、URLクエリフィルター側の設定を行います。

フィルター項目や検索条件を設定することで、サイト訪問者がカテゴリーやタグなどで絞り込み検索できるようになります。

設定手順

1.スクリーン上で、フィルター（赤四角）を選択します。

2.右パネルの「データ」タブ（赤四角）を開き、「フィルター設定」メニューを表示します。※右パネルが閉じている場合は、先にパネルを開きます。

3.「対象モデル」（赤四角）を確認します。

デフォルトのCMSモデルから変更する場合は、CMSリスト側のモデルも同じものに変更する必要があります。

フィルターとCMSリストのモデルが一致していない場合、正しく絞り込みできません。

4.必要に応じて「表示項目」横の「＋」（赤四角）をクリックし、検索条件を追加します。

5.ラベルを設定します。

設定済みの参照プロパティから、検索条件として使用したいプロパティを表示項目として選択します。プルダウン（赤四角）で表示されます。

ラベルは、サイト訪問者に表示されるフィルター名です。

たとえば、

• カテゴリー

• タグ

• 制作ジャンル

など、わかりやすい名称を設定します。

6.必要に応じて「フィルター解除ラベル」を設定します。

条件解除ボタンの表示名を変更できます。

7.不要なフィルター項目がある場合は、「項目を削除」から削除します。

表示項目を増やしすぎると、検索しづらくなる場合があるため注意しましょう。

他のページに検索結果を表示する場合

URLクエリフィルターと検索結果を表示するCMSリストを、別のページに配置することもできます。

その場合は、「他のページに遷移する」（赤四角）をオンにします。

フィルターを設置しているページとは別のページに検索結果を表示したい場合に使います。

URLクエリフィルターをモーダルに配置し、検索結果をモーダルのリンク元ページに表示する場合も、「他のページに遷移する」をオンにしてください。

フィルターの動作確認をする

設定が完了したら、ライブプレビューで動作を確認します。

URLクエリフィルターを操作して、CMSリストの表示アイテムが正しく絞り込まれるか確認してください。

公開済みのサイトを編集している場合は、公開パネルでサイトを更新します。

設定しただけでは公開サイトに反映されない場合があるため、更新作業を忘れないようにしましょう。

URLクエリフィルターの注意点・制限

URLクエリフィルターには、いくつかの制限があります。

表示項目は最大5件まで

1つのCMSリストに追加できるフィルターの表示項目は、最大5件までです。

条件を増やしすぎると管理も複雑になるため、サイト訪問者が使いやすい項目に絞りましょう。

複数の表示項目ではAND条件のみ対応

表示項目を複数設定した場合、使用できる検索条件はAND条件のみです。

OR検索には対応していません。

複数条件を設定する場合は、「すべての条件に一致したアイテムだけが表示される」と理解しておくと安心です。

Beta版の新基盤には未対応

URLクエリフィルターは、Beta版の新基盤には対応していません。

使用する場合は、新基盤へ切り替えていないプロジェクトで利用してください。

活用メリット

URLクエリフィルターを活用すると、サイト訪問者が目的の情報にたどり着きやすくなります。

特に、次のようなサイトと相性がよい機能です。

• 記事数が多いメディアサイト

• 制作実績が多いポートフォリオサイト

• カテゴリーやタグで情報を整理したいサイト

• 検索条件付きのURLを共有したいサイト

• 条件ごとにページを分けず、1ページで管理したいサイト

複数条件の絞り込みを用意することで、ユーザーの検索体験を高められます。

関連する機能・ヘルプ

URLクエリフィルターを理解するうえで、次の機能も関係します。

• フィルター：CMSリストの表示アイテムを絞り込む

• ダイナミックフィルター（Dynamic）

• ページタイプ：検索ページ

• 公開サイト新基盤の未対応機能・互換性対応中の問題一覧

URLクエリフィルターは、CMSリストの絞り込み機能の一つです。
通常のフィルターや検索ページとの関係を理解しておくと、より使いやすい検索導線を作れます。

まとめ

URLクエリフィルターを使うと、Studio CMSのリストをカテゴリーやタグなどの条件で動的に絞り込めます。

1つのページで複数条件に対応でき、条件付きのURL共有も可能です。

設定は、CMSの参照プロパティを用意し、フィルターとCMSリストを配置して行います。
プリセットパーツや検索ページを使えば、初心者でも検索・絞り込み機能を作りやすくなります。

情報量の多いサイトを運営している場合は、URLクエリフィルターを活用して、訪問者が目的のコンテンツを見つけやすいページを作りましょう。