Wixで「複合検索」は作れる？Veloを使った「サクサク動く検索フォーム」実装事例を紹介します

こんにちは。

Wix／Veloを用いたサイトカスタマイズを行っている、渡部です。

「WixでCMSを使っているけど、検索機能が弱くて困っている…」

そんなご相談をいただくことが増えてきました。

例えば、

・間取り × 家賃 × キーワード検索をしたい
・求人を「職種 × 地域 × フリーワード」で絞り込みたい
・商品をカテゴリ別にリアルタイム検索したい
・店舗一覧を条件付きで検索したい

といった、「複数条件を組み合わせた検索」です。

実は、Wix標準機能だけだと、このあたりにはかなり制限があります。

そこで今回は、Wixの開発機能「Velo」を使って、

・複数条件検索
・リアルタイム絞り込み
・サクサク動く検索UI

を実装した事例をご紹介します。

---

実際に作った検索機能

今回は、不動産サイトを想定した検索機能を構築しました。

実装した内容はこちらです。

【実装内容】
・間取りの絞り込み
・家賃スライダー検索
・キーワード検索
・検索結果件数表示
・リアルタイム更新
・リピーター連携

例えば、

「2LDKで、10万円以下で、“駅近”を含む物件だけ見たい」

といった検索にも対応できます。

実際のデモ動画

文章だけだと伝わりにくいと思うので、デモサイトの動画をお見せいたします。

Wix標準機能だけでは難しい理由

WixのCMSは便利ですが、標準検索だけだと、

・複数条件の組み合わせ

・リアルタイム検索

・高速なフィルタリング

・柔軟な条件分岐

に限界があります。

特に、

「入力するたびに検索結果が変わる」

ような、今どきの検索UIは標準機能だけだとかなり厳しいです。

Veloを使うと何ができる？

Veloを使うことで、

・CMSデータをコードで検索

・条件ごとの絞り込み

・部分一致検索

・動的なリピーター更新

などが可能になります。

今回の実装では、検索負荷対策として「Debounce処理」も実装しています。

これにより、

・スライダー連打

・高速タイピング

でも処理が重くなりにくい構成にしています。

実務では、この「快適さ」がかなり重要です。

実は、不動産以外にも応用できます

今回のサンプルは不動産ですが、実際には様々なサイトに応用できます。

例えば…

・求人検索サイト
・商品検索
・FAQ検索
・店舗検索
・補助金データベース
・施工事例一覧
・導入事例検索

など。

Wixでも、工夫すればかなり本格的な検索システムが作れます。

よくあるご相談

最近特に多いのが、こんなご相談です。

「制作会社に“Wixでは無理”と言われた」

「検索機能を入れたらサイトが重くなった」

「CMSまでは作れたけど検索で詰まった」

「Veloコードを書いたらエラーだらけになった」

実際、Veloは自由度が高い分、設計次第でかなり差が出ます。

特に、

・データ構造

・フィルター設計

・イベント処理

・レスポンス速度

は、実務経験が重要になりやすい部分です。

「自分でやるのは難しそう…」という方へ

もちろん、

・既存サイトへの後付け

・デザインを維持した実装

・検索条件追加

・表示速度改善

・CMS設計

なども対応可能です。

「こういう検索って作れる？」

くらいの段階でも大丈夫ですので、お気軽にご相談ください。

Wix初心者の方にも、できるだけ専門用語を使わずご説明しています。

まとめ

Wixでも、Veloを活用すれば、

・複合検索

・高速フィルタリング

・実務レベルの検索UI

を実装できます。

「Wixだから限界がある」

ではなく、

「Wixでどこまで実現するか」

が重要だったりします。

今後も、

・Wixカスタマイズ

・Velo活用

・CMS構築

・実案件ベースの改善事例

などを発信していく予定です。