2018年12月20日カテゴリ:Webデザイン

Webデザインと「ケチャップ問題」

Webデザインと「ケチャップ問題」

Webサイトのコンテンツをどうやって分類して並べ、メニューやナビゲーションを設定していくかを考える(いわゆる情報設計)時に、悩ましい問題があります。ここではそれを名付けて「ケチャップ問題」とします。

「ケチャップ問題」の背景

とあるスーパーで、ケチャップをどこに陳列するかを考えてみましょう。お米や肉、魚といった大分類がある時に、ケチャップはどこに配置するべきか、という問題です。具体的に、陳列棚が次のように分かれているとしましょう。(実在のスーパーの棚構成を参考にしました)

野菜 乳製品 日配品 砂糖・塩 味噌・醤油
乾物・缶詰 パン・ピザ

さて、ケチャップをどこに置いたらいいでしょうか?

調味料として考えた時に、「味噌・醤油」棚に配置すべきか、調味の必需品と考えて「砂糖・塩」の棚に置くべきか。あるいはパスタとの相性を考えると、この分類なら「乾物・缶詰」棚が良さそうです。チーズとの相性を考えると、「乳製品」棚も捨てがたいところです。

一方で、どれも座りが悪いのも確かです。ここは一つ「イタリアン」というコーナーを作って、そこに置いてはどうでしょうか?あるいは「ソース類」を独立させて、そこに置くという手もありそうです。

仮に「イタリアン」と「ソース類」を新設したとして、買い物に来たお客様にとって、ケチャップは「ソース類」と「イタリアン」のどちらに棚に置いてあると考えるかはそれぞれでしょう。
お客様がハンバーグソースにケチャップを入れようと思って探していれば「ソース類」にありそうと思うでしょうし、パスタの味付けに使おうとしていたら「イタリアン」の棚にあることを期待するでしょう。
これを「行動文脈」といいます。

商品の分類を排他的にツリー状に管理しようとしたら、ケチャップは「ソース」か「イタリアン」のどちらかにしか置けないことになります。

ケチャップとは何か?

頑固な店長が、

「ウチの店では『ケチャップはソースの一種』!」

と決めてしまったら、そのお店の店員さんは、一日に何回かスパゲッティを手にしたお客様にケチャップの在りかを尋ねられてしまいます。

一方で、この道30年のベテランが

「ケチャップは『イタリアン』に置くべき」

と決めたお店では、合挽き肉を手にしたお客さんがケチャップのありかを尋ねてくることでしょう。お客様は文脈を伴って行動しますが、どこか一箇所にしか置けないとすると、お客様の行動文脈ごとに異なる、「あるはずの場所」に見つからないということが発生します。これを防ぐには、可能な限り多くの棚にケチャップを陳列すべきでしょう。それでも、「肉棚」や「魚棚」に陳列するのはやりすぎかもしれません。

仮に「ソース類」と「イタリアン」の両方に置くとすると、「ケチャップ」は「ソース類」と「イタリアン」という二つの属性を持つことになります。

そして、構造的にその上位に位置する概念として「調味料」という属性を持ち、それは肉魚野菜などの「生鮮食品」やビール酒ジュースなどの「飲料品」とは排他的な属性になります。ケチャップを「肉棚」に置きづらい違和感は、まさにこの排他性にあります。

調味料とか生鮮食品の分類は概念的な大分類であり、イタリアンやソース類は具体的な中分類のような役割になります。

これらの分類をルール化することを【タクソノミーの設計】と呼んでいます。

タクソノミーってなんですか?

ブログ用CMSのWordPressの機能として「タクソノミー」という言葉が出てくるので、最近は企業のWeb担当者も知っている方は多いのですが、ときどき「タクソノミー?って、そもそもなんですか??」という質問をいただくことがあります。

タクソノミーは、簡単に言えば「分類法」のことです。
例えば、図書館の書籍分類基準として有名な日本図書分類の十進分類法とか、生物の分類の( 界<門<綱<目<科<属<種)などが有名なタクソノミーのひとつです。

動物の場合はすべての階層を表現せずに、例えば「カピバラ
カピバラ
は、

ネズミ目テンジクネズミ科カピバラ属に分類される齧歯類

みたいな言い方をされることが多いと思いますが、Wikipediaによると詳しい分類は以下のようになります。

界  : 動物界 Animalia
門  : 脊索動物門 Chordata
亜門 : 脊椎動物亜門 Vertebrata
綱  : 哺乳綱 Mammalia
目  : ネズミ目 Rodentia
亜目 : ヤマアラシ亜目 Hystricomorpha
下目 : ヤマアラシ顎下目 Hystricognathi
科  : テンジクネズミ科 Caviidae
亜科 : カピバラ亜科 Hydrochoerinae
属  : カピバラ属 Hydrochoerus
種  : カピバラ H. hydrochoerus

こういう分類はツリー状で、隣りの枝とは排他的なので分類法としてイメージしやすいと思います。

冒頭の「ケチャップ」の例で言えば、【排他的にする】とは、「調味料」の大分類の中で、「ソース類」「しょうゆ・みそ」「サラダ油・マヨネーズ」「のり・削り節・ごま」「イタリアン」「中華調味料」「有機調味料」「調味料そのほか」のどれか択一で格納することです。

文脈をともなうユーザーのニーズ

ユーザーは個別に単体のニーズを持っているのではなく、生活の中で時間の中で「文脈」をともなってニーズを持ちます。例えば、以下のようになります。

  • 休日のランチに家族で食べるオムライスを作ろうとしているけど、冷蔵庫の在庫のケチャップでは残量が不足しそう
    →このユーザーは、「ソース類」としてケチャップを探すか?
  • 給料日前だがパスタはある、ソーセージもたまねぎもある、ピーマンはないけど嫌いだからいらない、そしてケチャップがない。
    →このユーザーは。「イタリアン」でケチャップを探すか?
  • 生野菜を食べたい。料理はしたくない。そうだ「オーロラソースだ」
    →このユーザーは、「マヨネーズ類」の近くでケチャップを探すかも?いや、ウスターソースの近くにおいていて欲しいかも。それとも「ドレッシング類」の近くか?
    • 可能性の話をたらればで考え出したらキリがありません。「文脈」は掛け算になるため、端的なニーズとはその量が桁違いで多いものなのです。

      情報設計の自由度とタクソノミー

      現実世界には物理的な限界がありますが、Webサイトは物理的な制約が無いため情報設計において棚のスペースは問題になりません。
      そのためタクソノミーは、ナビゲーション構造や、カテゴリやタグのインデックス(一覧)だけでなく、関連付けやレコメンドなど、さまざまなところで密かに活躍しています。

      「ケチャップ」には、「ソース類」と「イタリアン」だけでなく、「オムレツ」や「ホットドッグ」といった属性を持たせて、卵やソーセージと関連付けて表示させることもできるのです。

      Webサイトには、サービスや製品、記事など様々な種類の情報がありますが、それらの分類法(タクソノミー)を、ユーザーの行動要求に合わせて設計することで、求める情報にたどり着きやすいサイトを作ることができるのです。逆に言えば、情報にたどり着く経路が一つしか無いようなサイトだと、行動文脈の大部分に置いて違和感を発生させることになります。

      タクソノミーの設計とは、最終的にユーザーに提示したい情報をどういった切り口で探せるようにするかを設計するプロセスに他なりません。

      高すぎる自由度は不自由

      棚のスペースが問題にならないからといって、すべての棚にケチャップを置くことは考えものです。同じことがマヨネーズにも茶碗にもトイレットペーパーにも言えるわけで、結局「どこにも全てある」、逆に言えば「どこに行っても何があるかわからない」ことになってしまいます。

      ある程度ツリー状の構造で排他的に分類するとして、複数の場所に同じ情報への到達経路が用意されているのが望ましいのですが、置きすぎると混乱してしまいます。そして、このバランスを取るのが情報設計の重要なポイントなのです。グローバルメニューとして固定的に配置するのも一つの方法ですが、情報ページに誘導リンクを設置することも有効な手段です。

      どんな情報を提示するのか、それをどう見せ、どう見つけられるようにするのか。Webサイトをデザイン(=情報設計)する時、これらに心を砕くことで、結果としてサイトを閲覧するユーザーの負担は激減します。ストレスが少なく探しやすいことは、使いやすさがあがるということです。ぜひとも次回のリニューアル時にはご検討ください。

Getting Betterとは

企業の忙しいWeb担当者(Web担当者)の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。

日々のサイト運営のご参考になれば幸いです。

IMAGICA Lab.のWebサイト構築サービスについてはこちら
https://www.imagica-imageworks.co.jp/web/

「株式会社IMAGICAイメージワークス」は、2018年10月1日に「株式会社IMAGICA Lab.」となりました。

トップへ