ホームページの絞り込み機能とは？その場で切り替わる一覧を動画で解説
ホームページの施工事例やメニューが増えてきて、お客様が探しにくくなっていませんか？
はい、キッチンの事例だけ見たいのに、全部並んでいると言われました。絞り込み機能というのを付ければよいのでしょうか。
そうです。「キッチン」「浴室」などのボタンを押すと、その種類だけを見せる仕組みです。作り方は2通りあって、使い心地がかなり違います。
2通りもあるんですね。どう違うのか、見て比べられますか？
ホームページの絞り込み機能は、事例やメニューを種類ごとに見せる仕組みです。押すたびにページを読み込み直す形と、見ている位置のまま一覧だけが切り替わる形があり、後者は1つ50,000円（税抜）で付けられます。掲載が20件を超え、スマホで見比べる方が多いサイトほど、切り替わる形の効果がはっきり出ます。
はじめに
ホームページを続けていると、施工事例やメニュー、お知らせが少しずつ増えていきます。せっかく増やした実績なのに、一覧が長くなって「探しにくい」と言われてしまうのは、もったいないことです。
そこで役に立つのが、種類ごとに一覧を分けて見せる「絞り込み機能」です。ただ、絞り込み機能にも作り方が2通りあり、見る人の使い心地は大きく変わります。文章だけでは違いが伝わりにくいため、本記事では当方が作った工務店のサンプルサイトで、2つの形を動画で並べました。
絞り込み機能でできること、2つの形の違い、どんなサイトに向いているか、費用の目安までを順にお伝えします。自分のホームページに付けるべきかどうかを、判断できるようになります。
ホームページの絞り込み機能とは
絞り込み機能は、たくさん並んだ情報の中から、見たい種類だけを取り出して見せる仕組みです。お店でいえば、商品棚に「キッチン用品」「浴室用品」と札を付けて、目当ての棚へまっすぐ案内するようなものです。
絞り込み機能でできること
ホームページでよく使われるのは、次のような場面です。
- 工務店・リフォーム会社の施工事例を「キッチン」「浴室」「外壁」など場所で分ける
- 飲食店や美容室のメニューを「ランチ」「カット」など種類で分ける
- お知らせやブログを「イベント」「休業のお知らせ」などで分ける
- 一覧の下に置く「もっと見る」ボタンも、同じ仲間です。最初は数件だけ見せ、押すと続きが下に足されていく仕組みで、長い一覧を少しずつ見せたいときに使います。
どの場合も目的は1つで、見る人が「自分に関係のある情報」に早くたどり着けるようにすることです。
「読み込み直す形」と「その場で切り替わる形」
絞り込みの作り方は、大きく2つに分かれます。
1つ目は、ボタンを押すたびにページ全体を読み込み直す形です。WordPressの標準の分類機能でも作れる、昔からある作りです。仕組みが単純なので作る手間が少なく、費用を抑えられるのが良いところです。件数が少ないうちは、この形で困ることはほとんどありません。
2つ目は、ページを読み込み直さず、一覧の部分だけを入れ替える形です。専門用語では「Ajax（エイジャックス）」と呼ばれる技術を使います。家にたとえると、1つ目は部屋を移るたびに玄関から入り直す作り、2つ目は今いる部屋の家具だけを入れ替える作りです。同じ「絞り込み」でも、見る人が感じる手間はまったく違います。
動画で比べる、2つの絞り込みの違い
ここからは、当方が作った業種別のサンプルサイト「いえなおし舎」（架空の工務店・自主制作）の施工事例の一覧で比べます。どちらの動画も、「外壁と屋根」「内装」「すべて」の順にボタンを押しています。
読み込み直す場合：押すたびにページの先頭へ戻る
ボタンを押すと、画面が一瞬切り替わり、ページの一番上にある「施工事例」の見出しまで戻されます。見たい一覧は画面の下に隠れてしまうため、もう一度スクロールして探し直さなければなりません。
パソコンなら少しの手間ですが、スマホでは画面が小さい分、スクロールの距離が長くなります。いくつかの種類を見比べたい方ほど、この往復が負担になります。見比べるたびに画面が先頭へ飛ぶと、比べること自体が面倒になってしまいます。
その場で切り替わる場合：見ている位置のまま一覧だけ変わる
同じボタンを押しても、画面の位置は動きません。前の一覧が横へ抜け、選んだ種類の一覧が反対側から入ってきます。ボタンと一覧が見えたままなので、「外壁はこう、内装はこう」と続けて見比べられます。
サンプルでは、押してから動き出すまで0.1秒もかかりません。指やマウスがボタンに乗った時点で、次の一覧と写真を先に読み込んでおくためです。
実際に触って確かめたい方は、サンプルサイトの施工事例の一覧（https://wp585946.wpx.jp/sample-builder/works/)でお試しください。
その場で切り替わる絞り込みが向いているサイト
その場で切り替わる形は便利ですが、どのサイトにも必要なわけではありません。向いているサイトと、まだ必要ないサイトを分けてお伝えします。
向いているサイト
次のようなサイトでは、効果がはっきり出ます。
- 施工事例・作品・商品など、掲載が20件を超えている、またはこれから増やしていく
- 見る人が「どれにしようか」と複数の種類を見比べる
- スマホから見る方が多い
工務店であれば、キッチンの事例を見たあとに浴室の事例も見て、費用感を比べる方が多いはずです。見比べる回数が多いサイトほど、1回ごとの手間の差が積み重なります。
ほかの業種でも、考え方は同じです。美容室なら「カット」「カラー」「パーマ」のスタイル写真、飲食店なら「ランチ」「ディナー」「テイクアウト」のメニュー、教室なら「子ども向け」「大人向け」のコースの一覧が当てはまります。写真を眺めながら「これもいいな」と行き来する一覧ほど、画面が先頭へ飛ばない心地よさが伝わります。
まだ必要ないサイト
反対に、掲載が10件ほどまでなら、全部を1ページに並べたほうが見やすいこともあります。種類が2〜3個しかない場合も、ボタンを置くより見出しで区切るほうが分かりやすいでしょう。
当方では、今の件数と、これからどれくらい増やす予定かをお伺いしてから、付けるかどうかをご提案しています。最初は読み込み直す形で始め、件数が増えてから切り替わる形に変えることもできます。
作るときに気をつけていること
その場で切り替わる絞り込みは、見た目の動きよりも、見えない部分の作り込みで使い心地が決まります。当方が作るときに守っていることを3つお伝えします。
種類ごとのページとアドレスを残す
一覧だけを入れ替えても、種類ごとのページそのものは残しています。「キッチン」を選ぶとアドレスも「キッチンの事例」のページに変わるため、そのアドレスを家族に送ったり、ブックマークしたりできます。
検索エンジンも種類ごとのページを読み取れるので、「地域名＋キッチンリフォーム」のような検索から直接たどり着いてもらう道も残ります。動きのために、検索からの入口を減らさない作りにしています。
戻るボタン・スマホ・古いブラウザでも困らない
スマホの「戻る」ボタンを押すと、ひとつ前に見ていた種類の一覧に戻ります。ページを読み込み直さない作りでは、戻るボタンで前の画面に戻れなくなるものもあるため、ここは必ず確かめています。
また、古いブラウザなどで仕組みが動かない場合は、自動的に「読み込み直す形」で動きます。どんな環境でも、絞り込みそのものが使えなくなることはありません。
動きは目にやさしく
切り替えの動きは、一度画面を消してから次を出す形にはしていません。消えた瞬間に背景が見えて、画面がチカチカと点滅したように感じられるためです。前後の一覧が重ならず、明るさが急に変わらない「横に入れ替わる」動きにしています。
スマホの「視差効果を減らす」などの設定で動きを控えている方には、動かさずにすぐ切り替えます。誰にとっても見やすいことを、動きの派手さより優先しています。
費用と頼み方
最後に、費用の目安と、ご依頼から完成までの流れをお伝えします。
費用の目安
その場で切り替わる仕組みは、1つにつき50,000円（税抜）です。ホームページ制作のどのプランにも追加できます。
「1つ」とは、1か所の一覧に付ける仕組みのことです。たとえば施工事例の絞り込みで1つ、お知らせの「もっと見る」で1つと数えます。読み込み直す形の絞り込みで十分な場合や、すでにあるホームページに後から付けたい場合は、内容をお伺いしてお見積もりをお出しします。
ご依頼から完成までの流れ
ご依頼から完成までは、次の流れで進めます。
- どの一覧に付けたいか、今の件数とこれからの予定をお伺いする
- 分類の名前と並び順を一緒に決める（「場所」で分けるか「工事の内容」で分けるか、など）
- 作って、確認用のページでパソコンとスマホの両方を触っていただく
- 直したい点を反映して公開する
分類の名前は、見る人が普段使う言葉にするのがコツです。社内の呼び名ではなく、お客様が問い合わせのときに使う言葉で分けると、迷わず押してもらえます。
まとめ
ホームページの絞り込み機能は、増えてきた事例やメニューを、見る人が探しやすくするための仕組みです。押すたびにページを読み込み直す形と、見ている位置のまま一覧だけが切り替わる形があり、使い心地は動画のとおり大きく違います。
掲載が20件を超え、スマホで見比べる方が多いサイトなら、その場で切り替わる形を検討する価値があります。反対に、件数が少ないうちは、全部を並べるか、読み込み直す形で十分なこともあります。
まずはサンプルサイトで実際に触ってみて、自分のホームページの一覧に合いそうか確かめてみてください。付けるかどうか迷う場合は、今の件数と予定をお聞かせいただければ、合う形をご提案します。
よくある質問
- 絞り込み機能を付けると、ホームページの表示が遅くなりますか？
-
最初にページを開く速さは、ほとんど変わりません。一覧を入れ替えるための仕組みは小さく、施工事例の一覧のページだけで読み込むようにしています。2回目以降の切り替えは、ページ全体を読み込み直さない分、かえって早く感じられます。
- 自分で事例を追加したとき、絞り込みにも自動で反映されますか？
-
反映されます。事例を追加するときに「キッチン」「浴室」などの分類を選んでおけば、絞り込みの一覧にも自動で並びます。事例が1件もない分類のボタンは表示しないように作れるため、空っぽの一覧が出ることもありません。
- 今あるWordPressのホームページに、後から付けられますか？
-
多くの場合は付けられます。ただし、今のテーマ（デザインの土台）や一覧の作り方によって作業の量が変わるため、まずサイトを拝見してからお見積もりをお出しします。分類がまだ無い場合は、分類を作るところからお手伝いします。
- 「もっと見る」ボタンとページ番号は、どちらがよいですか？
-
スマホで続けて眺めてもらいたい一覧なら「もっと見る」、何ページ目に何があるかを覚えてもらいたい一覧ならページ番号が向いています。施工事例のように写真を眺める一覧は「もっと見る」、お知らせのように日付で探す一覧はページ番号が合うことが多いです。
事例が20件を超えて、スマホで見比べる方が多いなら、その場で切り替わる絞り込みがおすすめです。少ないうちは全部並べるだけでも十分ですよ。
まずはサンプルで触ってみて、うちの事例の数で合うか考えてみます。
ぜひ触ってみてください。迷ったら、今の件数と予定を教えていただければ、合う形をご提案します。
ありがとうございます。キッチンと浴室の事例が増えてきたので、相談してみますね。
