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

※本記事は Studioの「Editor 5.0」に対応しています。

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

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

Studio CMS 検索ページとは?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

検索ページ内の各要素を編集する

Studioで検索機能を利用するには、検索ページを作成します。

まず、デザインエディタで、左側パネルの「ページ」にある+ボタン（赤四角）か、エディタ左上の+ボタン（赤四角）をクリックします。

次にページタイプとして「検索ページ」（赤四角）を選択します。

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

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

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

検索フォームは、既存のページにも追加できます。

左側パネルの「追加」を開き、「Search」フォーム（赤四角）を任意の場所に配置します。
※CMSを作成していない場合は、Searchフォームは表示されません。

配置した検索フォームを選択し、設定パネルで遷移先として検索ページを指定します。
指定しているページは変更できます。

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

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

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

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

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

デザインの調整について

検索フォームのデザインは、テキストやボタンなどの各要素を編集して調整できます。

検索ボックスに表示されるプレースホルダーの内容や、ボタンの見た目は、デザインエディタ上で変更できます。

検索結果が0件のとき

検索結果が0件の場合、検索結果がないことを示す表示を設定できます。

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

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

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

CMSリストの表示数は、右側パネルの「データ」内、「表示数」（赤四角）で設定できます。

表示件数を超える検索結果がある場合は、右側パネルの「データ」内、「もっと見るボタン」（赤四角）のON/OFFで、アイテムを表示するための操作を行えます。

CMSリストの設定内容によっては、表示できるアイテムが存在しない場合に、追加表示に関する操作が表示されないことがあります。

なお、これらの表示制御はCMSリストに対して設定するものであり、CMS以外のリストには適用されません。

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

検索ページに配置されているCMSリストには、検索結果を制御するためのフィルター条件があらかじめ設定されています。

CMSリスト全体を選択した状態で、右パネルの［データ］内、「フィルター」（赤四角）で、現在設定されているフィルター条件を確認・編集できます。

このフィルターは、検索フォームに入力された検索ワードをもとに、CMSアイテムを絞り込むために使用されます。

フィルターの条件では、「検索ワードを含む」「一致する」などの設定を選択でき、検索結果の表示方法を調整できます。

フィルター条件の設定方法

フィルター条件を個別に設定する場合は、設定フィールド横に表示される鎖のアイコン（赤四角）をクリックし、URLクエリとの連携を解除したうえで条件を設定します。

フィルターは最大で複数件まで追加できますが、複数の条件を設定した場合はAND条件でのみ絞り込みが行われます。OR条件での絞り込みはできません。

設定後は、デザインエディタやライブプレビューでフィルター条件が正しく機能しているかを確認します。

公開中のサイトを編集している場合は、公開パネルからサイトの更新を行う必要があります。

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

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

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

エディタ上で行う場合

デザインエディタでは、検索ページの動作を確認するために「検索ワードでプレビュー」を使用できます。

検索ページを開いた状態で、エディタ内に表示される「検索ワードでプレビュー」の入力欄（赤四角）にキーワードを入力すると、その内容に応じてCMSリストの表示が更新されます。

この確認方法では、公開ステータスが「下書き」や「公開予約中」のCMSアイテムも含めて表示されます。

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

より本番に近いかたちで検索動作を確認したい場合は、「ライブプレビュー」（赤四角）を使用します。

ライブプレビューでは、プレビュー用のURLを発行し、公開前の状態をブラウザ上で確認できます。

検索フォームにキーワードを入力し、検索ページへ遷移する操作を実際に行うことで、検索フォームと検索結果ページが正しく連携しているかを確認できます。

この方法では、公開ステータスが「下書き」や「公開予約中」のCMSアイテムも含めて表示されます。

公開サイトで行う場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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