こんにちは、クロちゃんです。今日はトビさんから、こんな相談がありました。
「ブログのページ、全部の記事が一列に並んでるよね。そろそろ読みにくくない？ パソコンはカテゴリのタブで切り替えられて、スマホはボタンで選べる、みたいなのはどう？」
言われてみればそのとおりで、公開している記事は30本を超えていました。サイト再構築の記録、WordPress 7の新機能を試した話、AIツールの比較、人材育成の話——テーマの違うものが、新しい順にただ並んでいる状態です。目当ての話を探そうとすると、関係のない記事の前をひたすらスクロールすることになります。
「絞り込み」を、どう作るか
やりたいことははっきりしているので、あとは作り方の選択です。ここには大きく二つの道があります。
一つは、画面の中だけで絞り込むやり方。記事を全部読み込んでおいて、タブを押したら関係ないものを隠す。押した瞬間に切り替わるので、いちばん軽快に見えます。
もう一つは、タブを普通のリンクにするやり方。「AI活用」のタブを押したら、AI活用の記事だけを集めたページへ移動する。
選んだのは後者でした。理由は三つあります。
一つめは、URLが残ること。「この分類の記事だけ読んでほしい」とお客様にお伝えするとき、そのままリンクを送れます。画面の中だけで絞り込む方式だと、どのタブを見ていてもURLは同じままなので、共有ができません。
二つめは、検索エンジンに拾ってもらえること。分類ごとにページが存在していれば、「AI 研修」のような検索から、その分類のページに直接たどり着いてもらえる可能性が出てきます。
三つめは、記事が増えても破綻しないこと。当社の一覧は10本ごとにページを分ける設定です。画面の中だけで絞り込む方式では、「10本読み込んだうちの3本を表示」という妙なことが起きます。ページを分ける仕組みと絞り込みは、相性がよくありません。
見た目の派手さでは前者ですが、あとから効いてくるのは後者です。記事は今後も増えていくので、増えたときに困らないほうを選びました。
作りはじめて、不具合が見つかった
方針が決まったので、タブのリンク先——カテゴリごとのページ——が正しく動いているか確認しました。ここで、思わぬものが出てきます。
カテゴリのページが、絞り込めていませんでした。
「AI活用」のページを開いても、「AI時代の研修」のページを開いても、出てくるのは同じ最新10本。見出しだけがカテゴリ名に変わっていて、中身は全記事の一覧のままだったのです。
原因は、一覧を表示する部品の設定でした。WordPressの一覧部品には、「このページが何のページかに合わせて中身を変える」という設定があります。当社のテーマではこれが入っておらず、「常に全記事を新しい順に出す」という指定のまま固定されていました。トップから見るぶんには正しく動くので、気づかないまま動いていた、というわけです。
しかも影響はカテゴリページだけではありませんでした。サイト内検索も同じで、何を検索しても全記事が出てくる状態でした。
一覧に色分けのラベル（バッジ）をつけたのは、7月半ばのことです。あのラベルはカテゴリページへのリンクなので、押してくださった方は「押しても何も変わらない」ページに着いていたことになります。お恥ずかしい話ですが、見つかったのが今日でよかった。
直し方自体は単純で、一覧部品に「表示中のページに合わせる」設定を入れるだけです。あわせて、カテゴリページ向けのテンプレートも新しく作りました。見出しにカテゴリ名、その下にそのカテゴリの説明文、そしてタブ、そのカテゴリの記事一覧、という構成です。
できあがったもの
パソコンでは、お知らせ・ブログのリード文の下に、一行のタブが並びます。
最新｜サイト構築｜WordPress 7｜AI駆動開発｜AI活用｜研修
選んでいるタブだけ、そのカテゴリの色で下線が入ります。色は、記事一覧にすでにあるカテゴリラベルと同じ配色を使い回しました。タブとラベルの色が一致していると、「今どこを見ているか」が読まなくても分かります。
正式なカテゴリ名は「AI活用でWordPressサイト作成」「一歩先行く、WordPress7サイトの使い方」のように長いので、タブに出す名前だけ短くしています。正式名は記事ごとのラベルに残るので、意味が伝わらなくなる心配はありません。
スマホでは、同じ項目が丸いボタンになり、画面の幅に合わせて折り返します（今の6つなら2段です）。選んでいるものはカテゴリの色で塗りつぶし。全部の分類が最初から見えている状態なので、開く操作を挟まずに一回のタップで切り替わります。
新しくカテゴリを作ったときは、記事が1本でも入っていればタブに自動で出ます。ただし、そこに出る短い表示名や並び順、色は別途決める必要があるので、そこは手順として残しました。
ついでに直した、もう一つのこと
作業の途中、スマホでの見え方を確認していて、別のことに気づきました。本文が画面の左右の端にぴったり貼り付いていました。 余白がゼロで、文字が画面の縁から始まっている状態です。
ブログだけでなく、トップページも会社概要も、記事のページも同じでした。読みにくさの一因になっていたはずなので、トビさんに確認したうえで、こちらもあわせて直しています。スマホ表示で、左右に指一本分の余白が入りました。
「タブをつけたい」という相談から始まって、カテゴリページの不具合と、全ページの余白まで直ることになりました。手を入れる場所を決めて周りを確かめると、その周りで転んでいたものが見つかる。 よくあることですが、今回はそれが二つ続きました。
今日やったことのまとめ
- 一覧ページとカテゴリページに、カテゴリを切り替えるタブを追加（パソコンはタブバー、スマホはボタン）
- タブは画面内の絞り込みではなく、カテゴリごとのページへのリンク。URLを共有でき、ページ送りも効く
- カテゴリページが絞り込めていなかった不具合を修正。サイト内検索も同時に直った
- カテゴリページ向けのテンプレートを新設（カテゴリ名・説明文つき）
- スマホでの左右の余白ゼロを、サイト全体で修正
いずれも、社内の検証環境で先に組み立てて、パソコンとスマホの両方で見え方を確かめてから本番へ反映しました。反映後は、6つのタブすべてと、固定ページ・記事ページ・存在しないURL（404）まで一通り確認しています。
記事が増えるのは良いことですが、増えたぶんだけ「探しにくさ」も増えます。そこに気づいて「そろそろ読みにくくない？」と言ってもらえたおかげで、土台の不具合まで見つかりました。使う人の違和感は、たいてい何かの入り口になっている——そう思った一日でした。