29分でできる！あのサイトの“技”を盗め ― 第19回

Yahoo！の流れるパネルをJSライブラリで再現

2009年03月31日 09時00分更新

文● 古籏一浩、ASCII.jp

　日本最大のポータルサイト「Yahoo！ JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo！に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス（UI）のリッチ化です。新しいYahoo！ JAPANのページには、タブ／アコーディオンパネル／フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。

　こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo！ JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ＆Aサービスの新しいトップページが、今回のお手本です。

今回のお手本サイト：『Yahoo！知恵袋』

時事問題から身の回りの生活ネタまで、ユーザー同士がさまざまな情報を交換できるQ＆A形式の掲示板サイト。米国などで展開している「Yahoo！ Answers」の日本版として2004年にオープンした。同種のサービスとしては後発ながら、Yahoo！の強力な集客力を生かして利用者数を伸ばしている。

http://chiebukuro.yahoo.co.jp/

コンテンツを適切に露出するためのスライド表示パネル

　毎日、大量の質問が分単位で次々と投稿されているYahoo!知恵袋。なるべく多くの質問に対する有効な回答を集め、それらをユーザー間で共有してもらうには、常に読者（訪問者）が気に留めるような質問と回答を適切に露出する必要があります。その役割を担っているのが、新しいトップページです。

　トップページには、さまざまな切り口でピックアップされた質問と回答が掲載されています。たとえば、毎日更新される「デイリーラインキング」。「回答数が多い質問」「評価数が多い質問」「投票数が多い質問」「閲覧数が多い質問」の見出しがそれぞれ3つずつ表示され、いま盛り上がっている話題を一目でチェックできるようになっています。

　ただ、いくら多くの質問を露出するといっても、ただ単純に並べるだけでは、ごちゃごちゃして見づらくなってしまいますし、メリハリのないレイアウトではユーザーの目線が落ち着きません。そこで、Yahoo！知恵袋のトップページでは、ページの上部にJavaScriptを使ったタブパネルを設置しています。


上部のタブをクリックすると、スライド表示でコンテンツが切り替わります

　パネルの上部にあるタブ（ナビゲーション部分）をクリックすると、「特集」「役に立つ質問」などの6種類のコンテンツが、まるで紙芝居をめくるような感覚で切り替わります。少ないページ面積に、より多くの質問と回答を見やすく掲載できる上に、ページ遷移なしでこれらの情報をまとめてチェックできるので便利です。今回は、このスライドするタブパネルを自分のWebサイトに組み込みましょう。

前へ 1 2 3 4 5 次へ

ツイートする