みなさんは、あるブログで「この前読んだ、あの記事をもう一度読みたい」と思ったのに、どこにあるか分からず探しあぐねた、という経験はないでしょうか。せっかく良い記事があるのに、たどり着けない。これは、読む側にとって地味に大きなストレスです。

毎度恒例となってきた自作ブログサイトのDIYシリーズですが､今回はサイト内検索機能を導入してみました。検索バーにキーワードを打ち込むだけで、読みたい記事へ素早くたどり着ける。そんな仕組みです。

この記事では、なぜ検索機能が必要だと考えたのか、何を作ったのか、そして裏側でどんな技術を使ったのかを、なるべく分かりやすくお伝えしていきます。

なぜ検索機能が必要なのか ―― 「受け身の導線」から「自分で探す」へ

これまでのカテゴリーやシリーズという仕組みは、いわば「ブログ側が整理した棚」でした。読者が自分の言葉で、自由に記事を探せる仕組みではなかったのです。そして記事数が増えるほど、この棚の限界がはっきりと見えてきます。

ある日、私は「迷子」になった

きっかけは、祖父母の終活や相続まわりを手伝う機会でした。

そのとき、必要に迫られて社会保険の各種制度について調べることになりました。最近はAIに質問することも多いのですが、こういう「お金」にまつわる話だけは、信頼できるブログ記事を手元に置いておきたい。そんな気持ちがありました。

そこで私が開いたのが、両学長（リベラルアーツ大学）のサイトです。お金まわりの知識では、これまで何度も助けられてきました。だからこそ、今回も自然と足が向いたのです。

ところが、サイトを開いた瞬間、私は記事の多さに圧倒されてしまいました。とにかくとんでもない量だったのです。ざっと700記事ほど｡

それに､カテゴリーを眺めてみても、「社会保険」という都合のいいタブがあるわけではありません。どのシリーズをたどれば目当ての記事に行き着くのか、まったく見当がつかない。かといって、全記事をローラー作戦で一本ずつ確認していくのは、どう考えても現実的ではありません。

「これだけ良質なコンテンツがあるのに、たどり着けないのか…」。そんなもどかしさが、じわじわと込み上げてきました。

そこで私は、検索バーに試しに「社会保険」と入力してみました。するとどうでしょう。関連する記事が、すぐにずらりと出てきたのです。結局、10分もかからずに必要な知識を補強でき、その後の場面でしっかり役立てることができました。

ブログの論理に読者を当てはめない

この体験を、もう少し一般的な言葉に置き換えてみます。

カテゴリーやシリーズは、あくまで 「ブログ側の論理」 で並んでいます。私の勝手な都合､というように換言できましょうか｡読者一人ひとりの「知りたいこと」と、いつも一致するとはかぎりません。そして記事が20本、30本と増えるほど、「探す」という行為そのものが、だんだん負担になっていきます。

だからこそ、目指したのはこういう状態でした。 読者が「知りたいキーワード」を打ち込むだけで、シリーズや連載の壁を越えて、記事を横断的に探せること。受け身で棚を眺めるのではなく、自分の言葉で能動的に探しに行ける。 そんな仕組みです。

実際に作ったもの

では、具体的に何を作ったのか。ひとことで言えば、個別記事のページ右側や､記事一覧ページに検索バーを設置しました。ここに読みたい記事のワードを打ち込むだけで、関連度の高い記事が、その場でリアルタイムに表示される仕組みです。

使い方は、たったの2ステップです。

①キーワードを打ち込む

画像のように､個別記事ページの右側に検索バーを新設しました。まずは探したいキーワードをここに入力します｡

② 記事が自動で表示される

キーワードを入力すると、検索バーの下に関連度の高い記事がリアルタイムで並びます。あとは記事タイトルと概要を見て、気になったものをそのままタップ、あるいはクリックするだけ。目当ての記事へ、すっと読みに行けます。

技術的な補足（興味のない方は読み飛ばし推奨）

ここからは、裏側の技術の話をしていきます。本筋とは直接関係ありませんので、興味のない方は読み飛ばしていただいて構いません。

今回の検索機能は、「Pagefind」というツールを使って実装しました。Pagefindとは、静的サイト向けに作られた全文検索ライブラリのことです。サーバーを用意しなくても、サイトを組み上げる「ビルド」のときに全記事の索引を自動でつくり、高速な検索を実現してくれるという優れもの｡

なぜ、このPagefindを選んだのか。理由は、いくつかあります。

最大の理由は、サーバーがなくても動く点です。通常のサイト内検索は、検索のたびにサーバーが「どの記事にこの言葉があるか」を調べに行きます。

一方Pagefindは、ビルドの段階で、あらかじめ全記事の「索引（インデックス）」を作っておきます。だから検索のときは、サーバーに問い合わせる必要がありません。サーバーレスで検索を実現できるということもさることながら､出来上がった索引ファイルを読むだけなので、速度にもメリットがあります。

この特徴は、私のブログ運営の方針ともぴたりと噛み合いました。私はセキュリティの知識が不足しているため､現時点では静的なサイトを運営しています。サーバーで動く処理が少なければ、それだけ攻撃される入口も減るからです。Pagefindは、まさにこのスタンスにうってつけでした。

ほかにも、外部サービスに依存せず費用もかからないこと、日本語検索にきちんと対応していることなどもPagefindを選んだ理由です。

そして個人的に一番助かったのが、関連度を自動でランク付けしてくれることでした。

たとえば「勉強」と入力したとき、このブログには「勉強」を含む記事がいくつもあります。どれを上位に表示するか、そのロジックを自分で組むのは、なかなか骨が折れます。

ところがPagefindは、タイトルへの出現や本文中の出現回数などをもとにスコアを付け、記事を関連度順に並べてくれるのです。読者の使い勝手を高める仕組みを、ほとんど手間なく用意できた。これは、思いのほか大きな収穫でした。私のような個人開発者にとってはありがたい限りです｡

おわりに

今回の変更は「シリーズや連載の壁を越えて、読みたい記事に、自分の言葉でたどり着けるようにした」。これに尽きます。

きっかけは、両学長のサイトで“迷子”になった、私自身のささやかな体験でした。あのもどかしさを味わったからこそ、検索機能が読者にとってとても役立つものであると、心から思えるようになりました。

このブログに来てくださる方が、少しでも快適に過ごせるように､これからも、こつこつと手を入れ続けます。
直近では、ツイートの自動埋め込み機能の実装を検討しています。これからの更新もぜひご期待ください！