Yahoo!のトップページがリニューアルするみたい
2007年11月16日15:39
Yahoo!のトップページがついにリニューアルするみたいですね。
当サイトのユーザーの方から教えていただいたりして、なんとなくは知っていたんですが、昨日あたりからベータ版として公開されているようです。
現在のトップページと比較してみました。

説明書きを読んでみると、どうやら新しいデザインへは2008年1月1日に移行する模様。
来年新年早々から、やる気ですね。Yahoo!JAPAN！


＜ついに横幅は950px時代へ＞

まずは、今回リニューアルされたトップページの採寸をしてみました。
右サイドバー2カラムから、3カラムデザインへとデザイン変更になっております。



横幅950px、左サイドバー170px、中央カラム410px、右サイドバー350px、それぞれのカラムの間のスペースが10pxとなっております。

色々なデザインの本を眺めて見ても、800x600の解像度のモニターに対応すべく、サイトの横幅は800px以内が望ましいと書いてあるものが多いです。
それを忠実に守っていたのか、Yahoo!のこれまでのトップページの横幅は710pxでした。

ところが今回のデザインは、ついにこの伝統を打ち破るものとなっております。
世界でも有数のアクセス数を誇るYahoo!JAPANのトップページの横幅が950pxとなったということは、

サイトの横幅は950px標準時代へ突入した

と言っても過言では無いでしょう。

これからのサイト作りは950pxを意識して作成したいと思います。

でも待てよ・・・当サイトに来てくださる方の場合はどうなのでしょうか。
アクセス解析で確認してみました。



800x600　・・・　0.9%

もっと早く気づくべきでした。orz。

しかし、2560x1024とかいうモニターもありますね。
どんだけ工ｴｴｪｪ(´д｀)ｪｪｴｴ工！


＜ちょっぴりWeb2.0＞

検索窓の囲いが角丸になり、Yahoo!のタイトル画像横にあるYahoo!BBやMyYahoo!のアイコンも角丸になっています。
やはり印象がだいぶ優しい感じになっていますね。
ついでにアイコンは輝いているようなツヤを持たせてあり、これもWeb2.0チックな仕上がりとなっています。

全体を見ると、淡い色使いで統一してあり、薄い青のグラデーションで落ち着いた雰囲気に仕上がっています。統一感があって、ちょっぴりWeb2.0ぽくって良い感じですね。


＜左サイドバーにカスタマイズ可能領域＞

左サイドバーにお気に入りというものがあって、5個まで自分のお気に入りの項目を加えることが出来るようです。
しかも、デフォルトの状態で表示されている「Yahoo!サービス」と位置を入れ替え出来る模様。
自分好みのトップページを作れるというわけですね。

こういうところもWeb2.0チックな部分ですね。


＜新着情報のアイコンがお蔵入り→オークションのアイコンへ変更＞

Yahoo!のタイトル画像横にあるYahoo!BBやMyYahoo!のアイコンと並んでいた、「新着情報」というアイコンがお蔵入りになっています。
代わりに新着情報は中央カラムのトピックスの部分にタブとして移動したのかな。

「新着情報」のアイコン、Yahoo!かなり期間使ってますが、
確かに1回もクリックしたこと無いですね（＾＾；


＜tableタグが絶滅の危機＞

ソースを眺めてみると、以前のトップページはその構造の根本はtableタグだったのですが、リニューアルしたトップページはほとんどtableタグが無くなっています。
カレンダーの部分にちょこっと使ってあるのみです。

これはW3Cとかを意識したものかなとかいう気もしたのですが、その割りにはDOCTYPEスイッチも入ってないので、よくわかりません（笑）。

時代の流れとしては、tableタグは極力使わない方が良いのかもしれませんね。


＜文字が減った＞

今までのトップページは画像に対する文字の割合が高かったのですが、今回、文字の割合が大きく減った印象があります。

ぎゅうぎゅう詰めぽかったメニュー項目が大幅に減っています。

＝これまでのメニュー項目＝
買う
ショッピング／共同購入／オークション／コミック／チケット／旅行／出張宿泊／保険／宅配／ネットバンク／決済／コンテンツストア
知る
ニュース／天気／スポーツ／ファイナンス／政治
楽しむ
映画／音楽／着メロ／ゲーム／占い／懸賞／本／レンタルDVD／テレビ／動画／投稿動画／ポッドキャスト／ライブトーク
調べる
辞書／翻訳／地域／地図／路線／道路交通／電話帳／自動車／家電、PC／きっず／知恵袋
暮らす
グルメ／クーポン／結婚／出会い／ファッション／ビューティー／健康／不動産／ボランティア／ネット検定／学習／セカンドライフ
求人 : 転職／アルバイト／派遣／適職紹介／新卒／独立
集まる
掲示板／グループ／アバター／ホームページ作成／ブログ／フォト／グリーティング／メルマガ／メッセンジャー／SNS／なんでも交換

＝新しいメニュー項目＝（左サイドバーへ移動）
Yahoo!サービス
ショッピング／オークション／旅行／ニュース／スポーツ／ファイナンス／テレビ／地図／路線／不動産／グルメ／自動車／掲示板／ブログ／ビューティ／パートナー
お気に入り（２〜５個までカスタマイズ可能）
音楽／映画／動画／占い／ゲーム
ピックアップ知恵袋

７０ほどあったメニュー項目が２０ほどに減少しています。
ずいぶんすっきりした印象になっていますね。

ここでデザイン的な用語として、「図版率」と「版面率」という言葉をご紹介させていただきましょう。
痛いくらい知っている、という方もいるかもしれませんが、知らない方のために一応（笑）。

図版率とは、サイト内の文字に対する画像（写真など）の割合です。
図版率が高いと写真やら画像が多いということで、グラフィックによるイメージが重視されるという感じで、文字による情報量は減ります。
図版率が低いと画像や写真などが減り、文字による情報量は増えます。

図版率が低い、高い、どっちが良いというわけではなく、それぞれのサイトにあった図版率があるということみたいです。

Yahoo!の以前のデザインの場合、使ってある画像が少なかった（サイドバー右上の広告と左カラム中央下あたりの画像くらい）ので、図版率は低かったと思います。

今回リニューアルされたトップページでは、右サイドバー広告画像が大きくなったことやトピックス横に画像が表示されるようになったことで、ぱっと見の図版率は上がっているように見えます。
また、メニュー項目が大幅に削減されたことで、文字が減っており、そういう面からも図版率は上がっているとみたいです。
印象的になんかすっきりと落ち着いた感じになっていると思います。


版面率とは、サイト全体に対する、文字や画像などの部分の割合です。
版面率が高いということは、言い換えれば「余白が少ない」ということです。
版面率が高すぎて、余白が少なすぎると、ぎゅうぎゅう詰めで読みにくい感じになってしまいます。
版面率が低すぎて、余白が多すぎると、がら〜んとした感じになってしまいます。

版面率も、それぞれのサイトにあったものがあるということみたいです。

今回のYahoo!のトップページのリニューアルでは、横幅が950pxになり全体の面積が増えた上、メニュー項目がごっそり削られたことで、文字が減り、版面率は減少しています。
行間も意識的に大きくとられているようです。
全体に見やすくなり、落ち着いた良い感じの印象になっています。

各個人が使うメニューは決まっているので、良く使うメニューは「お気に入り」に追加できることで、使わないメニューをごっそり削除するというのは、目のつけどころが良いなあと思います。


そういうわけで、Yahoo!のトップページのリニューアル、色々と考えさせていただいたり、お手本にさせていただきたいなあと思う部分が多くありました。
お暇な方は、リニューアルベータ版、のぞいて見られてはいかが?


当サイトもWeb2.0的なリニューアルを検討しておりますが、全く進みません。
いつになることやら。


│clip! │ウェブ全般 
このBlogのトップへ │前の記事 │次の記事

この記事へのコメント
kurorin＠サラリーマン副業
kurorin＠サラリーマン副業
2007年11月18日 01:26
こんばんは！
yahooだけは、初心者にもやさしい
昔のまんまのHPの方がよさげですが･･･。
でもgoogleにシェアが迫られてる中、
やっぱりWeb2.0を意識しないと
生き残れないのかな〜。

afiliateさんのブログも2.0化するのですか？
あ、ネタふると本当にしちゃいそう♪

あい
2007年11月18日 04:43
おはようございますー！
私もベータ版公開されてすぐくらいに新しいトップページに
変更しましたー。

個人的には新しい方が好きです。
観やすいしｗ

うちのモニターサイズは1024x768ですがお気に入りを表示
しながらでも、良い感じです。

afiliate
2007年11月18日 09:41
どおも〜 kurorinさま。
Yahoo!の新しいトップページは、好みが分かれるところですね。

旧デザインがエネルギッシュな感じでまとまっていて好き、という方と、落ち着いてゆったりした感じの新デザインが好き、という方と。

私の場合、使わないメニュー項目がかなり多かったので、新デザインの方がすっきりしていいかなあ、と思います（最近老眼ぎみなのもあったりしてｗ）。

初心者の方でも、ベータ版はFLASHで優しく説明してありますので、 ちょろちょろっと読むとたぶん、すぐにわかるのではないかという印象でしたよ〜。

儲かんないってばWeb2.0化計画は現在構想段階です。
構想だけで何にも進まないんですけどね〜ｗ。

afiliate
2007年11月18日 09:49
どおも〜あいさま。

新しいデザイン、見やすいというのはありますね。
情報が見つけやすい、というのはページビュー向上に繋がるのかな、と思ったり。
何かと参考になるリニューアルですし、取り入れたいところが結構ありました。

うちも1024x768ですよ。
デスクトップは高解像度化がどんどん進むと思いますが、ノートパソコンでは、ある程度このあたりの解像度がまだまだ主流ではないかな〜と思います。