いま、とあるWebサイトのお手伝いをしているんですが(そのサイトについては、オープンしたら紹介します)、その中で、IE6の話題が上がりました。

Internet Explorer6(IE6)はバグ(表示崩れなど)が多く、Webデザイナーの中では困ったちゃんとして有名な存在です。
でも、どんなにバグがひどくてもWebデザイナーがバグ修正をしたあとの結果が人の目に触れるので、バグは見えない ⇒「何がそんなに問題なの?」という感じだと思います。

そこんところの解説をリクエストされたので、軽くまとめてみました。


はじめに

リクエストに返答するための伝達手段としてブログを使っているようなもので、他の誰かが役に立つのか?とかはあまり考えずに書きました。ご了承ください(^^;)

Webデザイン、ブラウザ、IE6等がなんなのかという話は、理解できているという前提で書いてます(それを書き始めるとすんごく長くなる)。

ただ、Webデザインは専門外!という人でも理解しやすいように書いているので、専門的な話はなるべく避け、

  • 実例の紹介(こんな感じのことが起きるんですよ〜)
  • 今後の対応(IE6とはこんなふうに付き合っていくのがいいと思ってます〜)

というまとめです。正確性の無い表現もありますが、フィーリングで読んでください。

(あ、あと僕はプロのWebデザイナーじゃないです…いちおう本業は家具製作のつもり)

Acid2テストで見るIE6のバグり度

Webデザインで使うコード(HTMLとかCSSというもの)には、書き方・読み方の標準規格というものが決められていて、最近は、「コードを書く人もブラウザもそれに従いましょう」という流れになっています。

そして、ブラウザ側のWeb標準適合度をチェックするのが、Acid2テストです。テストに合格すると上の画像のようなスマイリーが表示されるという仕掛けです。

※Acidテストは、試したいブラウザでURLにアクセスするだけで結果が表示されるので、興味があれば自分のブラウザーもテストしてみてください。また、Acid1Acid3という別のバージョンもありそれぞれ役目が違うのですが、IE6のバグを見た時にAcid2が絵的にインパクトがあるので(笑)紹介しました。

さて、本題のIE6は、はっきり言ってWeb標準を完全無視しているブラウザの代表です。
そんな、IE6がAcid2テストを受けるとどうなるでしょうか。

超怖い…
スマイリーはバラバラにされ、血の海です。

これ、どいうことかというと、スマイリーを表示するために、Webデザインのコードを使っているんです(しかも、バグが発生しやすい書き方で)。なので、バグが多いブラウザほど表示が崩れていくというわけです。

WikipediaのAcid2のページに、様々なブラウザのテスト結果が載っているのでそれを見ると違いがわかりやすいと思います。

実例で見るIE6のバグ

Acid2テストでどれだけ崩れるか(ちょっと誇張してますけど)というのはわかったと思いますが、実際のWebデザインで対策を施さないとどうなるでしょうか。

ちょうど、このサイトがIE6非対応なので見てみましょう。

トップページ

Aboutが下に落っこちて、上のギャラリーサムネールがなぜか、割り込んできてます。

検索フォーム

何故か検索ボタンが、すごい下の方に…

IE6のバグに怯え、デザインに制約が…

このサイトは、意外と崩れなかったので、こんなもんですが、酷いときは酷いです。
こういう表示崩れは、直そうと思えば出来るのですが、それにどれだけ時間をかけるかというのが問題となります。

IE6のバグは有名なものは、簡単な解決策が発見されています。しかし、バグリストなどを見るとわかるように、IE6には非常に沢山のバグがあり、複数のバグが重なって起きる表示崩れもあります。運悪く知らないバグ、複雑なバグに当たると…原因解明に半日潰れることもあります。

※実際、このサイトのトップページの崩れも見当がついていたので、ちゃちゃっと直そうと思っていたのですが、なぜか直らず、このまま続けても時間ばかりかかると判断し、放置されています。

IE6を対象としたWebデザインは、このような状態のため、

凝ったデザイン ⇒ 変なバグが出るのではないか

という心理状態になり、「どんなバグが発生するか予測できる範囲内」という妙な制約付きのデザインをつくろうとしてしまいます。WebデザイナーがIE6から解放されたい理由はこんなところではないかと思います(勝手に代弁)。

透明な画像のバグとプログレッシブエンハンスメント

最後にもう一つ紹介します。IE6には「透明な画像(正確には透過PNGという画像)の表示が正しくない」というバグがあって、実例で見るとこんな感じになります。

あのIE6を生み出した、Microsoft社のWebサイト

本当なら文字の後ろが透けて、背景が表示されているのですが、青白い色に置き換えられてしまっています。ってか、MicrosoftもIE6のバグを放置しているんですね…

探してみるとGoogle+など新しいサイトで、同じように放置されていました。
これは、有名なバグなので簡単な解決法もあるのですが…なぜMicrosoftやGoogleは対応しないのか?

プログレッシブエンハンスメントの考え方(独自解釈)

「どのユーザーにも同じように情報コンテンツを提供しますが、環境が整っているユーザー(モダンブラウザ利用者)には、よりリッチな見せ方でコンテンツを提供しましょう」

クロスブラウザはもう古い!
HTML5+CSS3時代の
プログレッシブ・エンハンスメント

最近のWebは新しい技術を取り入れ始めたこともあり、古いブラウザはIE6だけではなくなってきました。また、iPadなどの新しい機器も増えています。

こうなってくると、古くてやっかいなIE6で何とか同じ表示にしようと格闘するより「とりあえず情報は読めて、ブラウザの性能が良ければさらに快適」というプログレッシブエンハンスメント的な対応のほうが効率的です。

先ほどの「透明画像」も昔は、IE6のためにコードを書き加えて修正していましたが、「IE6でも”Microsoft”って文字は読めてるし、わざわざ直す必要ないんじゃない?」ということで放置されているのだと思います。

※ちなみに上記はIE6対応に当てはめた場合。ホントはもっと深い意味があります(汗
プログレッシブエンハンスメント(Progressive Enhancement)という考えかた

まとめ

前半、IE6のバグについて実例を交えての解説(リクエストされた部分)と、後半、今後のブラウザ対応の考え方(ちょっと派生した付け足し)、という流れで書いてみました。

結局、マニアックな話になってしまった。

まとめると、こんな感じです。

  • IE6はWeb標準から外れまくっているので対応が大変
  • それをふまえると、ブラウザ対応は「全部完璧に同じ」を目指さなくていい
    • IE6を含めた古いブラウザは、情報が「読みとれる」程度のぼちぼち対応
    • IE6のバグを修正する時間を、新しいブラウザで快適な閲覧を目指す方向に使う

最後にひとこと。

新しいブラウザを使いましょう!

IE6のユーザーは現在10%程度。上記の理由から、さらに減少する傾向です。

これを読んでいる方は、IE6を使っていない可能性のほうが高いですが、IE6はとりあえず、そろそろ乗り換えをおすすめします。Webデザイナーが助かるというだけでなく、セキュリティーの問題等により、GoogleYahooYoutubeなどからサポート終了宣言が出ていること、さらにMicrosoft自身もIE6撲滅を進めているためです。

ちなみに、Webデザイナー的にはIE9(最新バージョン)以降が嬉しいですね…

その他のブラウザは概ね優秀ですが、やはり、なるべく新しいバージョンに更新していくほうが幸せになれるでしょう。

余談

(じつは、いまだにIE6が残ってるのってWebデザイナーがブラウザチェックのために持っているからなんじゃないか?と密かに疑ってます…5%くらいはあり得るかと。)