【徹底解説】StudioのCMS動的フィルターの使い方｜URLクエリで条件絞り込み

この記事の要点

• 動的フィルターは、ページ遷移なしにCMSコンテンツを条件で出し分けられるStudioの機能です。
• URLクエリフィルターを使うと、URLの後ろに条件を持たせて「同じページのまま」絞り込み結果を表示できます。
• カテゴリ別の実績一覧やお知らせの絞り込みなど、これまで複数ページで作っていた仕組みを1ページにまとめられます。

「実績をカテゴリごとに絞り込ませたいけれど、カテゴリの数だけページを作るのは大変」「タブを切り替えるたびにページが遷移して、表示が一瞬途切れるのが気になる」——CMSで一覧を作り込むと、こうした絞り込みまわりの悩みが出てきます。Studioに実装された「動的フィルター」と「URLクエリフィルター」を使えば、ページ遷移なしに、同じページのままコンテンツを条件で出し分けられます。この記事では、動的フィルターの基本的な使い方と、URLクエリを使った複合条件での絞り込み方を解説します。なお本記事の内容は、150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場の知見をもとに、実務でつまずきやすい箇所を優先して整理しています。

結論：ページ遷移なしの絞り込みは動的フィルターで作れる

動的フィルターは、CMSから取得したコンテンツを、条件に応じてその場で出し分けられる機能です。従来はカテゴリごとにページを分けて作っていた絞り込みを、1つのページの中でページ遷移なしに切り替えられるようになりました。これにより、ユーザーは表示が途切れることなく、見たいカテゴリだけをスムーズに確認できます。

CMSの基本的なモデル設計ができている前提の機能なので、まだCMSに不慣れな方はStudioのCMSモデルの作り方やCMSでカテゴリ分けする方法を先に押さえておくと、動的フィルターの理解がスムーズになります。

動的フィルターを設定する手順

絞り込みの仕組みは、次の流れで作ります。

手順1：絞り込みの軸になるプロパティを用意する

CMSモデルに、絞り込みの軸となるプロパティ（カテゴリ、タグなど）を用意します。この軸が、そのままフィルターの選択肢になります。まずはどの切り口で絞り込ませたいかを決めることが出発点です。

手順2：一覧リストにフィルターを設定する

実績やお知らせを表示している動的リストに対して、フィルター条件を設定します。ボタンやタブに「このカテゴリで絞り込む」という条件を割り当てることで、クリックするだけで表示が切り替わるようになります。

手順3：URLクエリで条件を持たせる

URLクエリフィルターを使うと、URLの後ろに「?key=value」の形で条件を持たせられます。これにより、特定の絞り込み状態のURLを直接共有したり、複数の条件を組み合わせたりできます。同じページのまま、条件だけを変えた表示を作れるのが強みです。

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

URLクエリフィルターは、地味に見えて実務インパクトの大きいアップデートです。URLに条件を持たせられることで、次のような使い方ができます。

• 「実績一覧の中で、業種がコーポレートのものだけ」を表示したURLを共有する
• カテゴリとタグなど、複数の条件を組み合わせて絞り込む
• 同じページのまま、外部リンクから特定の絞り込み状態に直接飛ばす

複合条件の検索に対応できることで、CMSを使った一覧ページの表現力が一段上がります。件数の多い実績サイトや、条件で探させたいサービス一覧に特に向いています。

よくあるつまずきと対処

• 絞り込みが効かない：フィルター条件とCMSプロパティの値が一致していない
• 全件表示に戻せない：「すべて表示」の条件（フィルター解除）を用意していない
• スマホでボタンが崩れる：フィルターボタンのレスポンシブを調整していない

絞り込みが効かないときは、まずボタンに設定した条件の値と、CMS側のプロパティの値が完全に一致しているかを確認しましょう。表記ゆれ（全角・半角、スペースの有無）が原因になっていることが多いです。

動的フィルターが活きるサイト例

動的フィルターは、コンテンツの数が多く、訪問者が条件で絞り込んで探すサイトで特に効果を発揮します。実績が数十件あるコーポレートサイトや、業種・目的で探させたいサービス一覧、エリアや価格で絞り込ませたい店舗紹介などが典型的な活用場面です。件数が少なく一目で見渡せる一覧では、フィルターを付けても効果は限定的です。

実績・制作事例の一覧

業種やデザインの傾向で絞り込めるようにすると、訪問者は自分に近い事例をすぐ見つけられます。問い合わせにつなげたい制作会社のサイトでは、探しやすさがそのまま成果に直結します。件数が増えても管理が破綻しないのも利点です。

サービス・商品の紹介

目的や対象者で絞り込めるようにすると、訪問者は自分に合った選択肢に早くたどり着けます。ページを分けずに一覧の中で出し分けられるため、更新の手間も抑えられます。ノーコードサロンでも、フィルターの導入で回遊性が上がった事例が共有されており、「探させる」設計はコンバージョンにも寄与します。まずは絞り込みの軸を1つに絞って導入し、効果を見ながら条件を増やしていくのがおすすめです。

よくある質問

よくある質問1. 動的フィルターはページ遷移しますか？

動的フィルターの基本は、ページ遷移なしでその場でコンテンツを出し分ける仕組みです。タブを切り替えても表示が途切れないため、ユーザーはストレスなく絞り込みできます。URLクエリフィルターを使えば、絞り込み状態をURLとして共有することも可能です。

よくある質問2. カテゴリごとのページは作らなくてよいのですか？

SEO上、カテゴリごとに固有のページ（URL）を持たせたい場合は、従来どおりカテゴリページを用意する選択もあります。一方、あくまで一覧の中で絞り込ませたいだけなら、動的フィルターで1ページにまとめるほうが管理は楽です。目的に応じて使い分けましょう。詳しくはCMSのカテゴリ分けもあわせてご確認ください。

よくある質問3. 複数の条件を組み合わせて絞り込めますか？

URLクエリフィルターを使えば、複数の条件を組み合わせた絞り込みに対応できます。カテゴリと業種、タグと年度など、複合条件で表示を出し分けたい一覧に向いています。条件が増えるほど設定は複雑になるため、まずは1軸から作り、動作を確認しながら条件を足していくのがおすすめです。

よくある質問4. 動的フィルターはSEOに影響しますか？

ページ遷移なしで絞り込む仕組みのため、絞り込み結果ごとに固有のページ（URL）が生まれるわけではありません。そのため、カテゴリごとにSEOで集客したい場合は、別途カテゴリページを用意する設計を検討します。一方で、一覧内での使い勝手や回遊性の向上は、訪問者の滞在時間や離脱率に良い影響を与えます。集客の入り口はカテゴリページ、一覧内の絞り込みは動的フィルター、というように役割を分けて考えるとよいでしょう。

まとめ

動的フィルターとURLクエリフィルターを使えば、ページ遷移なしにCMSコンテンツを条件で絞り込み、複合条件にも対応した一覧ページを作れます。カテゴリごとにページを量産する必要がなくなり、運用も一段楽になります。絞り込みが効かないときは、条件の値とCMSプロパティの値が一致しているかをまず確認しましょう。CMSをさらに使いこなしたい方は、CMSモデルの作り方やマルチセレクトプロパティの活用もあわせて確認すると、一覧づくりの引き出しが増えます。