Windows Internet Explorer 9

MicrosoftはIE9でパフォーマンスの抜本的な改善とHTML5など標準規約への準拠を実現する。これはIE8と比べて大きな変化だ。これを表現するために新しいロゴがデザインされた。User Experiences: Evolving the blue “e” - IEBlogにおいて、どういった議論を通じて新しいIE9のロゴがデザインされたのか、そのロゴが意味するところはなんなのかが紹介されている。IE 1.0から15年に渡るログデザインの変遷も紹介されており興味深い。

IE 1.0、IE 2.0、IE 3.0のロゴデザイン - User Experiences: Evolving the blue “e” - IEBlogより抜粋

IE 4.0、IE 5.0、IE 6.0のロゴデザイン - User Experiences: Evolving the blue “e” - IEBlogより抜粋

IE 7.0、IE 8.0のロゴデザイン - User Experiences: Evolving the blue “e” - IEBlogより抜粋

紹介されている内容を大雑把にまとめると、IEのロゴは次のように変わってきたことになる。

  • IE 1.0 - 世界をつなぐというメタファーを込めてデザインには世界を採用。Windowsシンボルが丸いアイコンに入っているが、これが世界を表現している。
  • IE 3.0 - スピードと探索と表現するために人工衛星を導入。eの周りを廻っている線がそれだ。アイコンをWindowsシンボルからeへ変更。eのデザインはHelveticaブラックタイプフェースがベースになっている。
  • IE 7.0 - Vistaのデザインに合わせるためにロゴを変更。ブルーグラステクスチャを採用するとともに、より立体的なデザインへ変更。

言ってしまえばIEのロゴはeと人工衛星の2つで構成されている。この2つを工夫して高性能、高速、モダンさ、軽量さ、バランスの良さ、明瞭さ、読みやすさなどを考慮したIE9のロゴをデザインする必要がある。これを実現するため、eと人工衛星は次のように変更が実施されたという。

IE 8.0のロゴ - User Experiences: Evolving the blue “e” - IEBlogより抜粋

IE 9.0のロゴ - User Experiences: Evolving the blue “e” - IEBlogより抜粋

  • e - まず、明瞭さや読みやすさを実現するための真円のデザインを採用。従来のロゴよりも軽量であることを示すためにeの枠線をより小さいものへ変更。アイコンが小さくなっても存在感が出るように中央部分の空白を広げる。
  • 人工衛星 - より生き生きした雰囲気をだすために、従来よりも透過を増やすとともに、枠線の強さや影を減らす。また、接続感を出すために右上の衛星の起動をeまで伸ばす。また、eのロゴそのものを強調するために従来のデザインと比較して人工衛星のサイズを小さく変更。

IE 9.0のロゴ - User Experiences: Evolving the blue “e” - IEBlogより抜粋

IE7やIE8の重厚なデザインと比較して、IE9のデザインは軽量で明るく仕上がっていることを確認できる。IEに限らず、機能やUIなどで大きな変更があった場合、ブラウザのアイコンデザインも大きく変更されることがある。たとえばFirefoxはFirefox 3.5で新しいアイコンデザインを採用。表現すべき内容を定め、試行錯誤しながら新しいデザインが決定されていた。