withComputer

nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜

数年前に「日本語でケアナビ」プロジェクトに加わったことをきっかけに、「カテゴリとタグというナビゲーション要素をどう扱うか」は僕の問題意識のひとつになっています。で、1月ちょっと前に公開され話題になったライフレシピ提供サイト nanapi [ナナピ] のナビゲーションは、この問題に対するひとつの解を示しているように思いました。せっかくなので考えたことを以下まとめてみます。

nanapiトップ

カテゴリという(階層構造も含む)分類の仕方は、サイト利用者の多くがスムーズに理解できる一般的な概念といえるのですが、タグという概念の認知度はまだまだ「Webに詳しい人は知っている」の域を出ていないのではないかと思います。タグという属性のラベルを使い、複数のタグを使って「AかつB」という条件でモノを絞り込んでいく手法は、とても便利で面白いものです。でも知らない人にとっては、タグを用いたナビゲーションは難しいものに映るのが現状でしょう。

nanapiは、カテゴリとキーワードという2つの異なる軸によって記事(レシピ)を絞り込めるようになっています。カテゴリは、1記事には1カテゴリのみが付けられているようです。いっぽうキーワードは、1記事に複数付けることができ、キーワードを複数選択することで記事を絞り込めるようになっています。おそらく分かりやすさを優先してのことだと思いますが、これはタグと呼んで差し支えない概念かな、と僕は思います。実際URLでは「tag」と表記されていますし。なのでこの記事では、僕の問題意識に合わせて、キーワードをタグと呼ぶことにします。

カテゴリとタグ(nanapiでいうキーワード)を使った記事の絞り込みの経路は、以下の4つが考えられます。カテゴリはいずれか1つ、タグは複数選択できます。

(1)カテゴリを選んで絞る(2)カテゴリを選び、さらにタグを選んで絞り込む(3)タグを選んで絞る(4)タグを選び、さらにカテゴリを選んで絞り込む

可能性としてはこの4つがあるんですが、nanapiでは4の経路は用意されていないようです。さらに3の経路も限定的です(後述)。カテゴリとタグの2つの軸を縦横無尽に使える方が便利に感じますが、インターフェースの形からは「まずカテゴリを選択してね」と促している印象を受けます。

カテゴリは、全部で7種類でそれぞれ色が割り当てられ、画面上部に横並びで常時表示されます。グローバルナビゲーションのような印象です。

nanapiカテゴリのナビ

カテゴリを選ぶと記事のリストが表示されますが、その上に「絞り込みのためのキーワードリスト」が表示されます。これがいわゆるタグなのですが、数も多いので小さめの表示、タグを使って絞り込まなくても記事の一覧は見ていけますから、タグはあくまで補助的な役割だと感じます。タグは複数選択でき、カテゴリ+タグで絞られるわけですが、タグは1つ選ぶと記事の数はかなり減るようなので、実際は「カテゴリ+タグ1++タグ2」というような絞り込みまでは行われなさそうです。ユーザーがタギングするので、タグの数や付け具合などコントロールできない部分ではありますが。

nanapiタグ

タグはカテゴリとは別の軸で自由に付けられていますから、3の経路、まずタグから選ぶインターフェースはどうなっているのでしょうか。どうもnanapiには、タグクラウドのような全タグ一覧はありません。トップページに表示されているタグは「人気のキーワード」の7つのみで、ここから選ぶとタグから絞り込みをスタートすることができます。

nanapi人気のキーワード

4の経路はないと最初に書いたように、同時選択したいタグはクリックで増やしていけますが、上部ナビゲーションのカテゴリを押すと、そのカテゴリだけが選択された状態になります(選択中のタグは消えてしまう)。記事の属するカテゴリを示すアイコンはリンクが切れてしまっているのですが、恐らく上部ナビゲーションと同じ動作をさせたいのだと思います。

nanapiカテゴリーへのリンク

各記事の個別画面には「このライフレシピのキーワード」として、記事に付けられたタグがリストになっています。このタグを押すと、そのタグだけが選択された状態の記事リストの画面に遷移します。トップページの「人気キーワード」に上がっていないタグから絞り込みをスタートしたい場合、このように各記事の画面から始めるか、タグを複数選択していく過程で一度付けたタグを外してみるなど、ちょっとした工夫が必要になってきます。

nanapiこのレシピのキーワード

トップページなどにタグクラウドを用意すれば、このような経路の工夫は必要とされず便利なはずですが、そうしないのはきっと「ナビゲーションが分かりにくくなる」ことへの配慮ではないかと思います。

一般に馴染みのない概念であるタグのこと。大量のキーワードリストとして一度に表示されれば、どれを選んだらいいのかユーザーを迷わせるかもしれません。タグクラウドの横にカテゴリリストがあると、分類の違いがわかりにくくなるかもしれません。カテゴリの方は複数選択できないなら、なおさらその違いが混乱を招く恐れがあります。

nanapiはギークな人たちだけがターゲットではないでしょうから、インターフェースのわかりやすさは最重要項目でしょう。レシピという言葉中心のコンテンツですから、どうしても画面内の文字の量は多くなります。インターフェースも文字まみれになるのは避けたいところ。それならば、まずはカテゴリから選んでもらう流れを徹底し、タグはオプション的な位置づけであることを明確にする。そんな判断があったのではないかと思います。

2009.10.10 追記:タグはデフォルトで非表示で「キーワードをクリックで絞り込みができます」リンクを押さないと展開しない形に変更になったようです。こうなるとますますタグはオプション的扱いという印象を受けますね。

僕がそう考える理由は他にもあって、例えば各記事表示時のパンくずリスト。カテゴリだけ、あるいはタグだけを選んでいる場合は「***に関するライフレシピ」となっていますが、カテゴリとタグを使って絞り込んでいる場合、「**カテゴリーで@@に関するライフレシピ」というように、カテゴリには「カテゴリー」という言葉を付けることで、タグとの分類軸の違いをやんわりと示しています。パンくずリストのタグのリンクが、そのタグのみ選択時のリストにリンクされていないのはちょっと変ですが(同じパンくずのカテゴリのリンクは、カテゴリ選択時のリストにリンクされてるので)。

2009.10.10 追記:パンくずリストのタグのリンクは、今のページのURLに変更されたようです。確かに「パンくずの右端は現在地を示す」と考えるとリンク先はもっともですが、カテゴリとタグは階層構造を作るものでは必ずしもないので微妙なところですね。

nanapiパンくず(カテゴリやタグのみ)

nanapiパンくずリスト(タグとカテゴリ)

カテゴリは7つ7色。トップページは、グローバルナビゲーション、その下のカテゴリ紹介、注目のライフレシピも7つそれぞれを表示、と表現を変えながらそのことを強調しています。フッターにもカテゴリだけを載せているところもそう。ユーザーに用意する経路をシンプルにして、カテゴリとタグという2つの分類軸の存在による混乱を避けたい思いがある気がします。

そう言えば、フリーワード検索の機能もないですよね。これも利用スタイルを意識してのことかなと思います。特定の言葉が含まれるレシピを探すユーザーは、nanapiのヘビーユーザーでしょう。初めて訪れるユーザーは、ライフレシピという何だかよくわからないものを見るわけですから、とにかく具体的にどんなものがあるか把握したい思いが強いはず。ならばタグよりカテゴリの方が分類が大きくて明快で、選びやすい。カテゴリを縦断するような抽出のニーズへの対応は、優先度としては低いというか、二兎追うものは・・・な感じのサイトになってしまってはダメという意識があってのことじゃないでしょうか。

開発サイドとしては、つい汎用性が高く柔軟で美しいシステムに魅かれてしまいますが、ユーザーが乗りこなせない車は意味がありません。時に機能性を制限してでも「わかりやすさ」を優先するというのは、現実的で、考え抜かれた決断だと思います。もちろん、これはひとつの解にすぎませんが、いろいろと勉強になるお手本サイトだな、という話をクライアントとした今日の会議でした。