PR
矢野りん
矢野りん  北海道生まれ。女子美術大学芸術学部芸術学科卒。サイトデザインのトレーニングを様々な講義活動を通して行うかたわら、執筆活動を行う。おもな監修書に『ウェブデザインの教科書』(日経BP社)。著書に『Webレイアウト見本帳』『WEBレイアウト・セオリー・ブック』(エムディエヌコーポレーション)がある。『デザインする技術』(エムディエヌコーポレーション)も発売中。身長152.1cm。

 2008年7月1日,ここITproサイトのデザインが新しくなった。リニューアル最大の目的はページの軽量化と使い勝手の向上だという。目的は本当に達成できたのか? フリーライターである筆者はこのリニューアルに際して,サイトのユーザビリティ向上作業部会にゲスト参加し,意見を述べたことがあるので完全な部外者というわけではないのだが,できるだけ第3者的な立場からレビューしてみたいと思う(編集部注:この記事は2008年7月9日時点の情報に基づいて作成されています)。

ページのサイズを大幅にダイエット

図1●リニューアル前とリニューアル後のページの長さの違い。ほぼ半分程度になった。それにしてもリニューアル前は長い
図1●リニューアル前とリニューアル後のページの長さの違い。ほぼ半分程度になった。それにしてもリニューアル前は長い
[画像のクリックで拡大表示]

 トップページが重い。これがリニューアル前のITproサイトに対して常に感じていた率直な気持ちだった。

 それもそのはず。ITproの旧トップページは情報量があまりにも多く,ページの長さは全長6346ピクセルにも及ぶこともあった。1024×768のディスプレイでは,10回以上スクロールしないと上から下まで閲覧できない長さである。

 掲載している画像などの素材も多く,あるときトップページ全体を画像ごとスクラップしてみると1.7メガバイトにも達した。回線状況よっては情報がブラウザ上にすべて表示されるまで数秒の時間を要することもあった。

 そんなトップページが今回,様々な工夫により約半分の長さに収められた(図1)。

 まず,ページの長大化を招いていた原因の一つである「特番サイト」のバナー群(図2)を,3つのカテゴリに分割し,それぞれタブ・インタフェースで切り替える方式を採用した(図3)。横方向の幅は変わらないので,単純に考えると,バナーを並べる領域の縦方向の長さを約3分の1程度にできる計算だ。さらに,一度にバナーをすべて読み込む必要がなくなり,ページの容量が軽くなった。

図2●リニューアル前の「特番サイト」のバナー群
図2●リニューアル前の「特番サイト」のバナー群
[画像のクリックで拡大表示]
図3●リニューアル後の「特番サイト」のバナー群。タブ・インタフェースを採用して縦の長さを短縮すると同時に,使いやすくなった
図3●リニューアル後の「特番サイト」のバナー群。タブ・インタフェースを採用して縦の長さを短縮すると同時に,使いやすくなった
[画像のクリックで拡大表示]

 「今週の特集」も省スペース化に成功した部分だ。これまですべての特集を一覧表示していたの(図4)を,自動スクロールと強制スクロールできるインタフェース付きのボックスに入れた(図5)。表示可能なサイズは特集1つ分なので,やはり面積を節約できる。スクロールが始まると,ほかの部分よりも目に付きやすいというメリットもある。

図4●リニューアル前の「今週の特集ボックス」。かなりの面積を必要とするデザインで,かつ画像の要素を多く含んでいた
図4●リニューアル前の「今週の特集ボックス」。かなりの面積を必要とするデザインで,かつ画像の要素を多く含んでいた
[画像のクリックで拡大表示]
図5●画像を軽減してスクロール機能を付けたリニューアル後の「今週の特集ボックス」
図5●画像を軽減してスクロール機能を付けたリニューアル後の「今週の特集ボックス」
[画像のクリックで拡大表示]

 リニューアル版のトップページにおける工夫として,これまで見出しの表示などに使っていた画像素材を大幅に削減したことがある。見出しのデザインは記事の魅力を伝えるための大切な要素だ。見栄えを重視して画像の見出しを使ってきたITproだが,掲載する情報量やトラフィックの増加には少しでも容量を削ることで対処するしかない。そこで,ほとんどの見出しはプレーンテキストに切り替えられた。外観は見出しの背景に色を付けるなどして保っている。

 しかしこの案については,「プレーンテキストはWindowsの環境で見栄えを大きく損なう恐れがある」と懸念の声もあったという。結果的には背景に付けたグラデーションパターンが,見出しテキスト(前景)と背景のコントラストを少し抑えているため,テキスト周囲のジャギーがさほど気にならない程度にまで抑えられている。

 数キロバイト程度の違いではあるが,大規模サイトでは素材の数キロが大きくレンダリングの体感速度に反映するもの。細かい部分の工夫は必須だ。

 こうしたダイエット作戦が効を奏して1ページあたりのデータ容量は縮小された。トップページをスクラップしたら,総容量は700キロバイトとリニューアル前より1メガバイトも軽くなっていた。