IKEA港北に行くにあたり…

この週末にIKEA港北に行ってみようと思い立ち、IKEAのHP（http://www.ikea.com/jp/ja/）を訪れました。IKEAが日本でオープン！と話題になった当時に一度だけサイトをチェックしていたのですが、今回改めてサイトを覗くと……

私は普段Firerox（MacOSX）をメインで使用しているのですが、Firefoxの難点であるデフォルトのフォントサイズが小さい、というのが災いして（と、このときは思った）上記IKEAのサイトもフッターなどのフォントサイズが極小になってしまっていて、かなり読みずらかったのでFirefox恒例の [Command（Ctrl）]+[+] キーにて文字サイズの拡大を図りました。
そこで私は偶発的にも驚愕に出会ったわけです。

http://www.ikea.com/jp/ja/を訪れて試していただくのが手っ取り早いと思うのですが、このサイト、ユーザビリティを意識してなのか文字サイズを変更することで、他のすべての要素（たとえば画像なども）共に拡大･縮小が行われるのです！

Webページの「普通の挙動」に慣れすぎてしまっていた私は、はじめ、何が起こったのかわかりませんでした。しかし1拍置いて「スゲー！」と思うと共にソースがどうなっているのか！？という思いに駆られ、まずこの変化で考えられる機能、JavaScriptをオフにしてみました。
が。
相変わらず文字サイズと共に画像がリサイズされます。
むむむ、ならばCSSが何かしているのか！？と思いCSSをすべてオフに切り替えると、案の定画像部分のサイズの変化が起こらなくなりました。
なんでこんな事が起こるのか？と普段の（X）HTMLとCSSの組み方を思い返してもさっぱり予想の付かなかった私はCSSの解読を試みることに。

結論から言うと、何のことはない、画像のサイズを「em（文字サイズ）」にて設定していただけだと一瞬で分かったのですが。
普段画像のサイズと言えば「px指定があたりまえ」という固定観念から私はそのカラクリに気づきませんでしたが、文字サイズにて縦横幅を指定することによって画像ごとサイト内をリサイズするという新技（荒業？）を行っていたのです。PDFならばまだしも、XHTMLにてこんな挙動が起こると言うのは、本当に目からウロコでした。もちろん、TOPページ以外のページで画像のリサイズに対応している部分はロゴ周りくらいのようですが、それでも十二分にこの機能は役目を果たしているように思います。
流れとして同時にHTMLソースも開けてみたのですが、ソースもかなりアクセシビリティに配慮された作りになっていました。

今後のWebというのはWeb対応ゲーム機やデスクトップアプリケーション、ウィジェット等の出現によってユーザーエージェントが今まで以上に限定できなくなっていくことでしょう。そこでこういった画像の処理やソースの対応策というのは、とても面白い試みだ、と実感させられました。

が…
それより先にIKEAサイトに関しては、店舗情報が異常に探しずらい印象が私には有ったので、もうちょっとそういったビジュアル面でのユーザビリティも意識して欲しかったな、とも感じてしまいました。