でぃべろっぱーず・さいど

Google のパーソナライズド・ホームが、名前を iGoogle に変えてリニューアルしました。

今回のリリースで、ホームページの「テーマ」が選択できて、ビーチやシティなどちょっとこじゃれた雰囲気の画面にすることができます。

デザインもかわいいものが多く、これまでのGoogleのイメージとは違った印象をうけます。

僕は早速「シティ」にしてみました。

このテーマは、表示する時間帯によって、画像イメージが変化するようになっていて、朝・昼・夕・夜と画面の中で時間の経過を感じることができます。

ということで、firebugs を使って、どういう風にテーマで時間帯を表現しているのかを解析してみます。

firebugs の Net タブで iGoogle の画面を表示させると↓こんな感じになります。

ここで画面下に表示されている各画像を見てみると、その中に以下のリンクを見つけることができます。

http://www.google.co.jp/ig/images/skins/cityscape/8pm/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/8pm/header_bg.gif
http://www.google.co.jp/ig/images/skins/cityscape/8pm/mt_back.gif

8pmなんてパスが怪しいので、ためしにここを、9pm、10pmと数字を変更してみると、以下のリンクが見つかりました。

http://www.google.co.jp/ig/images/skins/cityscape/8pm/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/10pm/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/2am/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/4am/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/6am/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/8am/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/10am/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/2pm/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/4pm/header_tile.jpg
http://www.google.co.jp/ig/images/skins/cityscape/6pm/header_tile.jpg

表示する時間帯によって読み込むCSSを変更し、ヘッダー部分の背景画像を切り替えているんですね。

まあ、ここまでなら良くある手法なんですが、この画像をよく見ると、テクニックで画像を有効利用しているのが分かります。

まず画像サイズ。

幅が620pxとなっています。

「Web資料館-ウィンドウサイズのシェア調査」を見ると、画面の横幅は大体 1280px 以下となっているので、この画像2つ分表示することでウィンドウの中を埋めることができます。

さて、↓この画像をよーく見て下さい。

この画像がセンタリングで繰り返し表示されます。

真ん中のスライムが乗っかったような建物がアクセントになっています。

で、このアクセントになっている建物は、真ん中に表示されたっきり繰り返し表示されにくくなっているんですね。1280pxの横幅の画面サイズでも右端に表示されるので、「あ、繰り返されてる」と気づきにくくなっています。

さらに、真ん中の画像だけ↓こんな画像をオーバラップして表示しているので、ますます「繰り返し」に気づきにくくなっています。

さて、↓これが表示される画像なんですが、これを見ると星の位置も工夫されていることに気づかされます。

（クリックでポップアップ）

気づきました？

左側はiGoogle のロゴで、右上はメールアドレスなどのメニュー表示で、星が微妙に隠れるようになっているんですね。

こうして繰り返しを気づきにくくすることで、幅が1240pxの画像ではなく、半分のサイズの画像で、素敵なデザインを実現しています。

これで、転送される画像サイズが小さくなり、ユーザ側も表示が早くなるし、Google としてもデータ転送料が半分程度に抑えることができるんですね。

Google くらいのトラフィックがあるサイトだと、こういう細かなテクニックで劇的に転送量に影響がでてきますから（と言っても、YouTubeのような動画サイトを運営していれば、転送量は比べものにならないんですが）。

というわけで、なんか iGoogle の見た目は Google らしくないのですが、その実現テクニックはしっかりと技術集団である Google らしい作り込みになっていることが分かりました。

今度ホームページのデザインを考えるときに活用してみようかな。

＜関連ニュース＞
グーグル、「Personalized Home Page」の名称を変更へ--新機能も追加 - CNET Japan
ITmedia Biz.ID：Googleパーソナライズドホームが「iGoogle」に
"Google"が"iGoogle"に! パーソナライズドホームが大幅リニューアル | ネット | マイコミジャーナル