2024.04.02
CMS
日本語を扱うCMSシェア 2024年4月版
UX向上の鍵「タグ絞り込み検索」の実装とその利点
コンテンツ量の多いメディアサイトや商品情報の多いカタログサイトなどでの目的のコンテンツを探すこと考えるとタイトルにある「タグ絞り込み検索機能」がオススメである。今回は、この機能について深掘りして紹介していきます。
Instagram や X の ハッシュタグ 検索が一般的になったことから「タグ検索」という言葉も SNS を利用している多くの人にも「そのコンテンツに関するキーワード検索」ということが伝わるようになったのではないでしょうか。
そんなタグを一覧で表示する手法として「タグクラウド」というものがあります。 今回紹介する タグ絞り込み検索機能 の出発点となる UI がタグクラウドです。
タグ絞り込み検索機能の出発点、タグクラウドとは？
タグクラウドは、ウェブサイトのコンテンツや記事に関連付けられたタグ（キーワード）を視覚的に表示する手法です。これらのタグは、通常、ウェブページ上で雲のように散らばって表示され、各タグの文字サイズはそのタグの関連コンテンツの量や人気度を示します。つまり、より多くのコンテンツに関連付けられたタグや、より頻繁に検索されるタグは、他のタグよりも大きなサイズで表示されることが一般的です。
タグクラウドは、ユーザーがサイト内の情報を探索する際のガイドとして機能します。ユーザーはタグクラウドを見ることで、サイト上で特に注目されているトピックや、自分が興味を持ちそうなコンテンツを素早く見つけることができます。また、タグをクリックすることで、そのタグに関連するコンテンツのリストやページに直接アクセスできるため、サイトのナビゲーションを助ける役割も果たします。
タグクラウドは、ブログ、ニュースサイト、オンラインショッピングサイトなど、さまざまな種類のウェブサイトで利用されています。このツールは、サイトの使いやすさを向上させると同時に、コンテンツの豊富さや多様性を訪問者に伝える視覚的な方法としても有効です。
関連するタグを検索する UI タグフィルター
そして貴方は、この タグクラウド から、一番大きなタグ（キーワード）をクリックしてみます。タグクラウドで大きく表示されているタグは、サイト内で一番扱っている専門的なキーワードという事になります。一番大きなタグをクリックした場合には、もちろん検索結果の一覧には多くの記事がヒットしている事になります。
次の出番は「タグフィルター」という UI を用意します。このタグフィルターは、タグクラウドで選択した1つのタグをもとに検索した記事に設定されているタグを一覧で表示させます。2つ目の選択肢になるタグという事になります。このタグフィルターの最大のメリットは、どのタグを選んでも必ず次の検索結果を表示させることができる点にあります。
もし、2つ目でも件数が多すぎる場合には、2つのタグを含む記事にあるタグが、次のタグフィルターには設定されています。ここからタグを選択する度に、検索結果が減っていく事になり、最終的には目視できる件数になったところで詳細のコンテンツを読み進めてもらうという事になります。
重要な点は、タグを絞り込み検索を何度繰り返しても「見つかりませんでした」という結果にならない事になります。
タグを2つ同時に選んで検索する場合の問題点
この記事を執筆するにあたり、最初は「マルチタグ検索」という用語を用いていました。多くのサイトでのマルチタグ検索のUIは、複数のキーワードをチェックボックスで選択する形式を取っているようです。しかし、複数のタグを同時に選択して検索すると、タグの絞り込み検索とは異なり、「見つかりませんでした」という結果になる可能性が高まります。
以下に実際に動作するフォームを用意しています。
例えば #Zoho と #イベント にチェックをつけて検索すると、検索結果としてはヒットしません。「見つかりませんでした」という体験になってしまいます。
解決のためには、実装が複雑になりますが、チェックボックスにチェックが入ったタイミングで、JavaScript を利用して検索し、検索させたくないタグに disabled属性を設定するなどして対応することが必要となります。
このように、チェックボックスを用いた複数選択UIの設計にあたっては、ユーザーに「見つかりませんでした」という体験をさせないように細心の注意を払うことが推奨されます。
タグ絞り込み検索における検索タグ数の制限
タグ絞り込み検索において、ユーザーが一度に選択できるタグの数に制限を設けることが推奨されます。特に、サイトのコンテンツ量がまだ多くない初期段階では、この制限を気にする必要はありません。しかし、サイトが成長しコンテンツ量が増えるにつれ、選択可能なタグの数に制限を設けない場合、パーマリンクのURLの数が急増し、それが検索エンジンにインデックスされると、サーバーへの負荷が増大する原因となります。
そのため、マルチタグ検索の結果ページは、<meta name="robots" content="noindex">タグを<head>タグ内に追加することで、検索エンジンによるインデックスから除外することをおすすめします。これにより、日々のクロール量の増加を抑え、サーバーへの不要な負荷を防ぐことができます。
このような措置は、サイトの健全な成長と持続可能な運営を支援する上で重要です。タグの数に制限を設け、適切なメタタグの使用によって、ユーザビリティとサーバーのパフォーマンスのバランスを保つことができます。
タグ絞り込み検索機能の実装事例
アップルップル スタッフブログ
まずは、このブログ自身です。以下のタグクラウドが 1つ目の検索用のタグになります。
弊社の a-blog cms では、標準的に上記に書かれている機能を標準的に搭載しており、コンテンツの絞り込み検索をしっかりできるように作られており、タグクラウド・タグフィルターの UI や、検索機能についてもあらかじめ用意されたスニペットをテンプレートに配置するだけで利用が可能です。
三菱UFJニコスチケットサービス：公演情報
a-blog cms で構築されたサイトで弊社の制作事例「外部システムと連携して自動化。管理のしやすさにこだわったチケットサービスサイト」にも掲載されていますが、こちらのタグ検索については、タグだけではなく、カテゴリー（公演種類）やカスタムフィールド（地域）の値も含めての絞り込み検索を行っています。
公演種類がカテゴリー・地域がカスタムフィールドに
全てのキーワードを表示をクリックで表示されます
最後に
タグ絞り込み検索は、情報が溢れるデジタル時代において、私たちが求める情報やコンテンツを迅速かつ効率的に見つけるための重要なツールです。この記事を通して明らかにしたように、複数のタグを用いた絞り込みには、いくつかの課題や難点が伴います。これらの課題に対して深い理解を持ち、適切な解決策を見出すことは、ユーザーエクスペリエンス（UX）を大幅に向上させる上で不可欠です。
この記事が、タグ絞り込み検索のタグフィルター機能のメリットと、そこで得られる体験を理解する一助となれば幸いです。最終目的は、多くのウェブサイトのサイト内検索で、キーワード検索ではなく、タグ絞り込み検索が採用されるようになることです。
