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

asahi.comの開閉パネルをJavaScriptで再現

2008年09月16日 16時00分更新

文● 古籏一浩、ASCII.jp

　お昼休みのちょとした息抜きに。あるいは出勤前に朝食のパンとコーヒーを片手に。インターネットを日常的に使っている人なら、「新聞ではなくニュースサイトを眺めるのが日課」という方も多いと思います。

　非常に多くのユーザーが利用し、日々の生活になじみ深いニュースサイトのデザインは、“見やすさ”と“分かりやすさ”が追求されています。また、毎日、大量のコンテンツが追加されることから、構成要素の整理の仕方といった点でも参考になる部分が少なくありません。今回は、代表的なニュースサイトである「asahi.com」をお手本にさせてもらいましょう。

今回のお手本サイト：『asahi.com』

朝日新聞社が運営する日本有数のニュースサイト。政治経済などの報道記事から、エンターテインメントや生活情報まで幅広いコンテンツが充実している。最近ではマイクロソフトのSilverlightを使い、ハイビジョン動画を配信するなど、動画にも力を入れている。

http://www.asahi.com/

シンプルなAjax活用で使いやすくする

　asahi.comのトップページは、ほとんどの方が一度は目にしたことがあるデザインだと思いますが、毎年のように大規模なリニューアルとマイナーチェンジを繰り返しており、そのたびに使い勝手の向上が図られています。

　現在のトップページはAjaxを取り込むことで、限られたスペースに大量のコンテンツを整理しながら、かつ魅力的に見せる工夫がなされています。一例が、「ニュース」「ビジネス」「マイタウン」「スポーツ」……といったカテゴリごとの新着情報リストです。

　asahi.comのようなカテゴリが多いサイトでは、すべての新着情報を常時表示させておくとスクロールが面倒ですし、見出しが埋もれてしまい必要な情報が拾いにくくなってしまいます。そこで、asahi.comではカテゴリ名の見出し横にあるボタンをクリックして、新着情報リストを折り畳めるようにしています。最近では他のサイトでも比較的よく見かけるよう機能ですが、シンプルで便利な機能です。