96NEKO LAB記事一覧が混ざって気持ち悪いので、「AIニュース・レビュー・開発記録」のタブに分けた【96NEKO LAB開発記録 #26】
- #Claude Code
- #AI活用
- #サイト設計
はじめに
前回、商品の紹介記事を8本書きました。
すると、記事の一覧に、AIニュース・開発記録・商品の紹介が全部まざって並ぶようになりました。ジャンルで絞り込むボタンはありましたが、最初に開くと全部が新しい順に出てきます。
「ニュース・開発記録・商品レビューが混在してるの気持ち悪いから、いい感じに分けたいかも」
2つの案から選んだ
AIは、分け方を2つ出してくれました。
- **記事ページの中をタブで分ける**：上のメニューは「記事」1つのまま。記事ページの上に「AIニュース／レビュー／開発記録」のタブを置く
- **メニューごと分ける**：上のメニューを「AIニュース」「レビュー」「開発記録」の3つにする
メニューごと分けると入口ははっきりしますが、メニューが6つに増えて、スマホでは窮屈になります。そこで、タブで分ける案にしました。
できあがった形
記事ページを開くと、上に3つのタブが並びます。
- AIニュース（いちばん更新が多いので、最初に開くページ）
- レビュー（商品の紹介記事。中で「商品レビュー」「道具・ガジェット」に絞り込める）
- 開発記録
「全部まとめて見る」一覧はなくしました。
記事を読み終わったときの「一覧へ戻る」のリンクも、その記事の区分に戻るようにしました。レビュー記事からはレビューの一覧へ、開発記録からは開発記録の一覧へ戻ります。
記事のURLは変えなかった
区分ごとにURLを分け直すこともできますが、記事1本1本のURLは変えていません。
URLを変えると、すでにXやnoteに貼ったリンクや、検索エンジンに登録されたページが、見られなくなってしまうからです。分けたのは「一覧の見せ方」だけです。
これからの記事の置き場所
どのジャンルの記事がどのタブに入るかは、1か所にまとめて決めています。新しいジャンルの記事を書いたら、そこに足すだけでタブに並びます。
今はまだない「読み物」（AI・ITの解説など）のタブも用意していて、記事が入ると自動で出るようにしました。
この決まりは、AIが毎回読む運用ルールのファイルにも書き足しています。前に決めていた「AIニュースは独立したメニューにしない」というルールも、今回の形に合わせて書き換えました。
やってみて感じたこと
「気持ち悪い」というふんわりした頼み方でしたが、AIが2つの案を、良いところと困るところつきで出してくれたので、すぐに選べました。
記事の種類が増えてくると、置き場所の整理も必要になります。URLを変えずに見せ方だけを変える、という考え方は覚えておきたいと思いました。