【Studio初心者ガイド】検索ページの作り方|設定・使い方ガイド

Studioでサイトを作っているけれど、検索機能の追加方法がわからない…そんな方に向けて、検索ページの作り方や基本の設定手順を詳しく解説します。

初めての方でもすぐ使えるように丁寧にご紹介していきます。

Studio CMS 検索ページとは?

Studioには、CMSと組み合わせて「検索ページ」という機能を使うことで、サイト訪問者が欲しい情報をすぐに見つけられるようにすることができます。

検索ページは、訪問者がキーワードを入力すると、その内容に合致するCMSアイテムを絞り込んで表示する機能です。

たとえば、ブログサイトで「SEO」と検索すれば、「SEO」に関する記事だけが表示されるといった具合です。

情報量が多いサイトにとっては、検索ページがあるかどうかで、使いやすさに大きな差が出てきます。

Studio CMS 検索ページを作成する手順

Studioで検索ページを作成する際は、専用のページを追加するだけで基本的な構成が自動でセットアップされるため、初心者の方でも比較的簡単に導入できます。

このセクションでは、検索ページを作るために必要なパーツと、その設置・設定方法について順を追って解説していきます。

検索ページに必要な2つの要素とは?

検索ページを正しく機能させるためには、次の2つの要素が欠かせません。

Studioでは、検索ページを新しく追加するとこれらの要素が自動で含まれた状態になりますが、それぞれの役割を知っておくと、後々の調整もスムーズです。

検索フォーム（検索キーワードの入力欄）

検索フォームは、ユーザーがキーワードを入力するための入力欄です。

サイト上のどこにでも設置することが可能で、たとえばトップページのヘッダーやサイドバーに配置すれば、訪問者はどのページからでも検索できるようになります。

フォームのデザインや文言は自由に調整でき、検索ボックスに表示されるプレースホルダー（例：「キーワードを入力」など）や、検索ボタンの色・文言も変更可能です。

動的（CMS）リスト（検索対象のリスト）

動的リストは、検索結果を表示するためのエリアです。

ここには、検索フォームで入力されたキーワードに一致するCMSアイテムが一覧で表示されます。

たとえば、記事や製品情報などをCMSで管理している場合、その中から該当するタイトルや本文を持つアイテムが自動的に絞り込まれて表示されます。

リストの見た目もカスタマイズ可能で、カード型・リスト型などサイトの雰囲気に合わせてデザインできます。

Studio CMS 検索ページの設置方法

Studioで検索フォームを設置する方法はとてもシンプルです。

検索機能を使いたいページに、キーワード入力欄（検索フォーム）を追加することで、ユーザーが自由にサイト内を検索できるようになります。

新規作成する場合

まずは、検索結果を表示するための「検索ページ」を作成しましょう。

1）　デザインエディタの左側にある「ページ追加」（ピンク四角）ボタンをクリックして、表示された詳細を見るボタン（黄色四角）をクリックします。

2）　次に出現した「検索ページ」（ピンク四角）をクリックします。

3）　すると、
・検索フォーム（キーワード入力欄）
・動的リスト（CMSモデルと紐付いた検索結果リスト）

この2つの要素を含んだ検索ページが自動で作成されます。

既存ページに追加する場合

検索フォームは、トップページやヘッダー、サイドバーなど、すでにあるページにも追加することができます。

1）　デザインエディタの左側パネルの追加パネル（ピンク四角）内、パーツ一覧の中から「Search」フォーム（黄色四角）を探し、任意の場所へドラッグ＆ドロップで配置します。※CMS作成前では「Search」フォームは出現しません。

配置した検索フォームをクリックし、右側の設定パネルから「検索ページ（遷移先）」を選択します。

ページを選択するには、右にある「×」ボタンをクリックすれば変更できます。

検索対象となるCMSデータの範囲

検索の対象になるデータには、いくつかのルールがあります。

記事タイプのモデルでは、タイトルと本文の両方が検索対象になりますが、それ以外のCMSモデルではタイトルのみが対象となります。

また、CMSのプロパティ内にあるテキストデータや、コレクション内アイテムなどは検索対象外になるため、重要なキーワードを必ずタイトルや本文に含めておくと安心です。

このルールを理解しておくことで、検索ページを導入した際に「なぜこのコンテンツがヒットしないのか?」といった疑問を避けることができます。

デザインの調整について

検索フォームのデザインは、テキストの文言やフォント、ボタンの色・形などをサイトの雰囲気に合わせて自由にカスタマイズできます。

たとえば、検索ボックスに表示されるプレースホルダーの内容や、検索ボタンのスタイルを変えることで、ユーザーが直感的に使いやすくなるよう工夫できます。

検索結果が0件のとき

たとえば、「該当する記事が見つかりませんでした」や「別のキーワードで再検索してみてください」といった案内文を表示しておくと、ユーザーの離脱を防ぐ効果があります。

この「0件の表示」は、レイヤーパネル（ピンク四角）で有効化したうえで、デザインエディタ上でプレビューしながら調整できます。※「0件の表示」（黄色四角）内で表示プレビューをONにしてください

検索結果やリスト表示が多くなる場合

CMSリストには表示件数の上限（最大50件）を設けることができ、件数を超える場合にはリストの下部に「もっと見るボタン」が自動で表示されます。

このボタンをクリックすると、追加でアイテムを読み込んで表示できます。

ただし、読み込む対象がない場合は、ライブプレビューや公開サイトではボタン自体が表示されない仕組みになっています。

また、「もっと見るボタン」はCMSリストにのみ対応しており、APIリストやRSSリストなどでは利用できませんので、その点は注意が必要です。

「検索ワード」フィルターの設定

動的リストにフィルターを追加する際は、「検索文字列」（ピンク四角）で、「検索ワード」という条件を選択します。

これは、検索フォームに入力された内容を元にCMSアイテムを絞り込むためのフィルターです。

設定画面では、「フィルターの条件」として「検索ワードを含む」「一致する」などの選択肢があり、どのように検索結果を表示させるかを細かく制御できます。

Studio CMS 検索ページの動作確認方法

Studioには編集画面内での確認方法だけでなく、公開前にチェックできるプレビュー機能や、本番環境での検証方法も用意されています。

ここでは、検索ページが正しく動作しているかどうかを確認する3つの方法について、それぞれの特徴や注意点を交えて紹介します。

エディタ上で行う場合

Studioのデザインエディタ内には、検索機能をシンプルに確認できる「検索ワードでプレビュー」機能があります。

これは、検索ページを開いたときに画面左上に表示される入力欄（ピンク四角）で、任意のキーワードを入力すると、動的リストの検索結果が即座に反映されるというものです。

ライブプレビューで行う場合

より本番に近いかたちで検索動作を確認したい場合は、「ライブプレビュー」機能（ピンク四角）を使うのがおすすめです。

こちらはStudioのプレビュー公開機能で、URLを発行して誰でも確認できる状態にすることができます。

また、実際にフォームにキーワードを入力して、検索ページに遷移する操作を試せるので、検索フォームと検索結果ページの連携状態も合わせてチェックできます。

公開サイトで行う場合

サイトを正式に公開したあとも、検索機能が正しく動作しているかを本番環境で確認しておくことはとても大切です。

公開後の検索では、「公開済み」のCMSアイテムのみが検索対象となる点に注意が必要です。

たとえば、下書きのままのコンテンツや、公開予約中のものは検索にヒットしません。

そのため、検索テストを行う際は、対象となるアイテムがすべて「公開状態」になっているかを事前に確認しておきましょう。

検索ページがうまく表示されないときの対処法

Studioで検索ページを設定しても、うまく検索結果が表示されない場合があります。

ここでは、検索が正しく動作しないときに確認したい内容と、それでも解決できない場合の問い合わせ方法についてご紹介します。

検索結果が表示されない主な原因

検索結果が出てこない場合、次のような点に注意してみましょう。

まず確認すべきなのは、CMSアイテムの公開状態です。

検索ページは「公開中」のアイテムのみを対象に検索するため、「下書き」や「公開予約中」のままになっていると、検索結果に反映されません。

エディタやライブプレビューでは表示されても、本番サイトでは表示されないことがあります。

次に、検索ワードとCMSデータの関係を見直しましょう。

Studioの検索機能は、記事タイプ以外では「タイトル」のみが検索対象です。「本文」や「補足説明」、「カテゴリー名」などにしかキーワードが含まれていない場合、検索ではヒットしません。

また、検索フォームと検索ページの連携が正しく設定されているかも要確認です。

検索フォームの設定パネルで、検索結果を表示する検索ページが正しく選ばれていないと、検索後に何も表示されないことがあります。

チャットサポートへの問い合わせ方法

設定を見直しても解決しない場合は、Studioのサポートに相談するのが安心です。エディタの画面右下にある「？」マークをクリックすると、サポートメニューが開きます。

まとめ

検索機能は、訪問者にとって「見たい情報にすぐたどり着ける安心の道しるべ」です。

検索フォームの設置や検索結果の見せ方を工夫することで、サイト全体の使いやすさがぐっと向上します。

もし途中で迷ったときは、この記事をご参考にしながら、焦らず少しずつ取り組んでみてください。