Studio CMSの動的フィルターの使い方｜URLクエリでの絞り込みとカテゴリページの使い分け

「実績をカテゴリごとに絞り込ませたいけれど、カテゴリの数だけページを作るのは大変」「タブを切り替えるたびにページが遷移して、表示が一瞬途切れるのが気になる」——答えを先にお伝えすると、同じページのまま絞り込む仕組みは動的フィルターで作れます。ただしカテゴリ別に検索から人を集めたいなら、フィルターだけでは足りません。この記事では、どちらを選ぶかの切り分けから、設定の手順、URLクエリでの条件の持たせ方、絞り込みが効かないときの直し方までをまとめます。150名以上が参加する国内最大級のStudio学習コミュニティ「ノーコードサロン」を運営していますが、絞り込みの相談でよく出てくるのは「ページを分けるべきか、1ページにまとめるべきか」という迷いです。

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

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

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

まず切り分け：動的フィルターか、カテゴリページか

手を動かす前に決めたいのが、絞り込みを1ページにまとめるか、カテゴリごとにページを用意するかです。この2つは目的が違い、どちらが優れているという話ではありません。違いを表にまとめました。

比べるところ	動的フィルター	カテゴリページ
URL	1つのページ（条件はクエリで持たせる）	カテゴリごとに固有のURL
ページ遷移	起きない。表示が途切れない	クリックごとに読み込みが入る
検索からの集客	絞り込み結果そのものでは狙いにくい	「業種名＋実績」などの語で狙える
カテゴリを増やしたとき	CMS側に値を足すだけ	ページを1枚作って配置する
グローバルナビに並べる	向かない	そのまま置ける
向いている場面	一覧の中で訪問者に探させたい	カテゴリ単位で入り口を作りたい

迷ったときの目安は、そのカテゴリで検索されたいかどうかです。「コーポレートサイト 制作実績」のような語で検索から人を呼びたいなら、カテゴリページを用意する価値があります。一覧にたどり着いた人が自分に近い事例を手早く探せるようにしたいだけなら、動的フィルターで足ります。両方を満たしたい場合は、集客したいカテゴリだけページを作り、残りの細かい絞り込みをフィルターに任せる形が現実的です。

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

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

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

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

ここで値の表記を統一しておくと、あとの作業が一気に楽になります。自由入力のテキストで持たせると「コーポレート」「コーポレートサイト」のような揺れが混ざり、絞り込みから漏れる記事が出ます。選択肢から選ぶ形にしておくのが安全です。1つの記事に複数のタグを持たせたい場合は、マルチセレクトプロパティの活用も検討してください。

手順2：一覧のCMSリストにフィルター条件を割り当てる

実績やお知らせを表示している動的リストに対して、フィルター条件を設定します。ボタンやタブに「このカテゴリで絞り込む」という条件を割り当てることで、クリックするだけで表示が切り替わるようになります。選択中のボタンは、色や下線で見た目をはっきり変えておきます。どの条件で見ているかが分からないと、訪問者は一覧を信用できません。

手順3：「すべて表示」に戻す手段を用意する

作っているうちに忘れやすいのが、全件表示に戻す導線です。条件を外した状態に戻すボタンを1つ置いてください。URLクエリを使う場合は、クエリを付けないURLへのリンクでも戻せます。これが無いと、訪問者は一度絞り込んだあとブラウザの戻るボタンに頼ることになります。

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

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

キーと値は、Studio側で設定したフィルターの条件とそろえる必要があります。思い込みで組み立てず、公開したページで実際にURLを開いて、意図した絞り込みになるかを確かめてから共有してください。

手順5：公開した状態で動きを確認する

絞り込みの動きは、編集画面では意図したとおりに見えないことがあります。組み終わったらプレビューか公開後のページで、PC幅とスマホ幅の両方を確認します。あわせて、1件もヒットしない条件を選んだときに一覧が真っ白にならないか（何も無いことが伝わるか）も見ておくと安心です。

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

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

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

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

よくあるつまずきと対処

うまく動かないときの症状は、だいたい次の4つに分かれます。症状から原因を逆算してください。

絞り込みが効かない

まずボタンに設定した条件の値と、CMS側のプロパティの値が完全に一致しているかを確認しましょう。表記ゆれ（全角・半角、スペースの有無）が原因になっていることが多いです。あわせて、絞り込みの対象が目的のCMSリストになっているかも見てください。同じページに複数のリストがあると、別のリストに条件が付いていることがあります。

全件表示に戻せない

「すべて表示」の条件（フィルター解除）を用意していないケースです。手順3のとおり、条件を外す導線を1つ足せば直ります。

共有したURLでは絞り込まれない

URLのキーや値が、Studio側の条件とずれていないかを確認します。値に日本語や空白を含めていると、URLに載せたときに扱いを誤りやすくなります。URLで条件を渡す前提なら、英数字の値を別に持たせておくほうが安定します。

スマホでフィルターのボタンが崩れる

PCで横一列に収まっていたボタンが、スマホ幅ではみ出す症状です。ボタンの文字を短くする、横スクロールできる並びにする、絞り込みの軸を減らす、のどれかで収まります。カテゴリが6個以上あるなら、ボタンを全部並べるより開閉式の選択に寄せたほうが扱いやすくなります。

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

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

実績・制作事例の一覧

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

サービス・商品の紹介

目的や対象者で絞り込めるようにすると、訪問者は自分に合った選択肢に早くたどり着けます。ページを分けずに一覧の中で出し分けられるため、更新の手間も抑えられます。まずは絞り込みの軸を1つに絞って導入し、使われ方を見ながら条件を増やしていくのがおすすめです。最初から3軸4軸を用意すると、設定も確認も一気に重くなります。

よくある質問

Q1動的フィルターはページ遷移しますか？

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

Q2カテゴリごとのページは作らなくてよいのですか？

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

Q3複数の条件を組み合わせて絞り込めますか？

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

Q4動的フィルターはSEOに影響しますか？

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

Q5タブ切り替えで作るのとどう違いますか？

データベース（CMS）の中身を条件で絞り込むのが動的フィルター、あらかじめ静的に用意したコンテンツを入れ替えるのがタブ切り替えです。料金プランの月額・年額のように中身が固定ならタブ、記事や実績のように件数が増えていくならフィルターが向いています。見た目はどちらもタブ状のボタンになるため、何を切り替えているのかで判断してください。

まとめ

動的フィルターとURLクエリフィルターを使えば、ページ遷移なしにCMSコンテンツを条件で絞り込み、複合条件にも対応した一覧ページを作れます。最初に決めるのは、カテゴリ単位で検索から集客したいか（カテゴリページ）、一覧の中で探させたいか（動的フィルター）です。絞り込みが効かないときは、条件の値とCMSプロパティの値が一致しているかをまず確認しましょう。全件表示に戻す導線を忘れずに置くことも、公開前に見直したい点です。

ノーコードサロンでは、こうしたCMS設計の相談が日々やり取りされています。モデルの画面を見せて聞ける相手がいるだけで、組み直しの手戻りはぐっと減ります。