設計と改善

ツールが増えても、探しやすい一覧へ

作成日：2026年10月24日執筆：ツクノヴァ

公式サイトのツール一覧に、カテゴリ、提供状況、キーワードで探す仕組みを用意しました。製品が増えたときにも目的の情報へ進めるよう、一覧と詳細ページの役割をどう分けたかを紹介します。

製品名だけでは、何を選べばよいか分からない

紹介するツールが少ない間は、名前と画像を並べるだけでも全体を見渡せます。しかし、新しい製品が増えるたびに同じ場所へ追加すると、名前を知らない人が目的の道具を見つけにくくなります。画面を何度も下へ送り、各説明を順に読む必要が出てくるためです。今回の公式サイトでは、ホームページ制作、動画制作、データ整理という用途を入口にしました。製品の名前を覚えていなくても、したい仕事から候補を絞れるようにするためです。カテゴリは会社側の開発事情ではなく、利用する人が探す場面に合わせて分けています。トップページは代表的な製品への入口とし、全体を比較する場所はツール一覧へまとめました。トップに掲載する項目が増え続けて、会社の紹介やほかの案内を押し下げないよう、役割を分けた構成です。

用途と提供状況は、別々に見る

同じ動画制作の道具でも、実際に利用案内を確認できるものと、今後の構想を紹介しているものがあります。用途が合っていることと、現在利用できることを、一つの分類で表そうとすると分かりにくくなります。そこで一覧では、カテゴリとは別に提供状況を表示しました。 2026年10月24日時点の掲載は四つで、提供・利用案内を準備している製品と、構想段階の項目を区別しています。実際の運用段階が変わった場合は、その情報に合わせて表示を更新する前提です。これは、開発の進み具合を細かく見せるためだけの表示ではありません。今すぐ使う道具を探している人と、今後の取り組みを知りたい人が、同じ一覧で判断できるようにするための情報です。状態を曖昧にしたまま、すべてを同じ申込み先へ送る構成にはしていません。

キーワードは、名前と短い説明の両方へつなげる

ツール一覧にはキーワード入力欄を設けています。製品名の一部だけでなく、したい作業の言葉からも探せるよう、カードの短い説明を検索に使っています。「ホームページを作りたい」「動画を扱いたい」といった入口を、製品名の知識だけに頼らせないためです。入力する文字では、全角と半角の英数字、大文字と小文字をそろえて扱います。複数の言葉を入れた場合は、その組み合わせで候補を絞る設計です。カテゴリや提供状況と合わせて使えるため、一覧が増えたときも探す範囲を調整できます。一方、現時点の検索は、入力した言葉の意味を何でも理解する仕組みではありません。別の呼び方で見つからない場合もあります。説明文を分かりやすく書くことと、必要に応じて探し方を改善することが、検索欄を置くことと同じくらい大切だと考えています。

見つからないときにも、次の操作を示す

絞り込みで候補がなくなったとき、画面が空白になるだけでは、読み込みに失敗したのか、条件に合うものがないのか分かりません。今回の一覧には、表示されている件数と、該当がない場合の案内を用意しました。「条件に合うツールが見つかりません」と伝え、キーワードやカテゴリを変えて探す行動へつなげます。選択中のカテゴリも分かるようにし、別の条件へ戻すためにページ全体を開き直す必要がない構成にしています。検索が成功したときの見栄えだけでなく、候補がない場合を考えておくことは、道具の画面でも共通する課題です。できなかったことを知らせるだけで終えず、利用する人が原因を見分け、次の操作を選べるかを確認します。

一覧のカードと、詳しい説明を分ける

カードへすべての説明を入れると、一件ごとの高さが大きくなり、製品を見比べにくくなります。反対に、画像と名前だけでは内容を判断できません。今回のカードには、画像、カテゴリ、提供状況、製品名、短い説明を組み合わせました。詳しい内容は、製品ごとに固定したページへ進んで読む構成です。どのような作業を支援するか、実際の画面があるか、関連する準備は何かを、一覧よりも長い文章で説明できます。新しい製品を追加するときも、この役割分担を使って情報を整理します。一覧から先のリンクは、現在の製品紹介へ進みます。外部の利用先が確定していないものを、見た目だけの申込みボタンで案内しないようにしています。利用方法を公開できる段階になったら、詳細ページで条件と合わせて知らせる方針です。

表示を絞っても、情報そのものは読めるようにする

絞り込み機能は、一覧を見やすくする補助として設けています。製品の説明と詳細へのリンクは、ページを開いたときのHTMLに含めました。検索用の処理が動かない場面でも、一覧を読み、製品ページへ進める構成です。また、製品の追加では、名前や説明、分類、画像、提供状況を共通の台帳で管理します。トップと一覧で異なる説明が残ったり、詳細ページのないカードができたりしないよう、追加時に対応を確認します。実装の都合を利用する人へ押し付けず、表側の案内が揃うための管理です。今回の更新では、既存のガイドを残したまま製品一覧を更新できることも確認しました。製品の情報を増やす作業で、関係のない説明を消してしまわないことも、更新を続けるサイトに必要な条件です。

今回確認したことと、これから見直すこと

一覧の確認では、カテゴリによる絞り込み、提供状況との組み合わせ、キーワード検索、全角英数字、候補がない場合の案内を操作しました。カードから正しい詳細ページへ進めることも確認しています。これらは今回の公式サイトに対する動作確認であり、検索順位や利用者数の改善を示すものではありません。今後製品が増えたときには、カテゴリ名が分かりやすいか、似た製品の違いを説明できているか、説明が古くなっていないかを見直します。数を増やすことだけを優先すると、最初に整えた探しやすさが失われるためです。道具を増やす取り組みと、その道具を見つけられる場所を育てる取り組みを、合わせて続けていきます。現在の掲載内容は、ツール一覧から確認できます。