動作&表示チェック用のブラウザを入手しよう

ウェブデザイナーとして表示チェック用に必要な主要ブラウザをご紹介。

独学!未経験からWebデザイナーになる!! > Webデザイナーになる > 学習環境を整えよう > 動作&表示チェック用のブラウザを入手しよう

動作&表示チェック用のブラウザを入手しよう

Webサイトへのアクセスに使われるウェブブラウザは、マイナーなものまで含めると実はかなりたくさんあります。しかも、それらの中には多少クセのあるブラウザも存在し、同じWebページであっても表示のされ方が異なる場合があります。ちょっと文字がずれただけ、、というくらいならまだいいですが、レイアウトが崩れまくってしまう……なんてこともあったりするのです。

Webデザイナーの制作するWebサイトは、金銭のやりとりの上に提供する“商品”です。ですから、その商品に不具合があるのはとてもまずいこと。そうならないためにも様々な環境を用意し、表示チェックをしないといけないのです。

とはいっても全ての環境に完璧に対応するのは、現実的には不可能です。それでも、シェアの多いブラウザでの表示チェックは、Webデザイナーにとっては絶対に欠かすことができません。学習をはじめる際には、メジャーなブラウザだけはあらかじめインストールしておきましょう。

代表的な種類と特徴

それでは、どんな種類があるのかをさっそく見ていきましょう。

Internet Explorer - インターネットエクスプローラ

Windowsが標準で搭載しているブラウザのため最も使っている人が多く、10人中7程はInternet Explorer(以後IEとします)を使っていると言われています。その中でもWindows版のIE6/IE7/IE8というバージョンが執筆時(10/01/13 更新)は最も多く利用されています。そのため、IEの表示チェックはかなり重要と言えるでしょう。

Windowsユーザの方は、すでにIEがインストールされていると思いますので、まずはお使いのIEのバージョンを確認してみてください。確認方法は、IEを立ち上げ、画面上部の右端にある「ヘルプ」→「バージョン情報」にVersion:6.0.29~のように書いてあります(この場合はIE6ですね)。

Windows版IE

まずはIE6以上に対応できるようなレベルになれればいいでしょう。つまり現時点ではIE6, IE7, IE8の環境が必要です。しかし、IEはWindowsのシステムと密に関連しているので、同一のPCに複数のIEをインストールすることはできません。複数のPCをお持ちで全IEを用意できればいいのですが、あまり実用的ではありません。そこで、IE Testerというフリーソフトを使うといいでしょう(私も使っています)。

IE TesterはIE5.5 IE6 IE7 IE8で動作を確認できるソフトです。ただし、そのWindowsにインストールされているIE以上のバージョンはチェックできませんのでご注意ください。例えば、OSがXPで、IE6までしかインストールされていなければIE6までしか確認できません。その場合はまず最新のIEにアップグレードする必要があります。(アップグレードに関してはマイクロソフトのサイトで行えます

Mac版IE

以前はInternet Explorer for Macという名称の、Macのデフォルトブラウザだったのですが、現在はSafariというブラウザに切り替わっています。2005年4月29日にリリースされたMac OS X 10.4 Tigerからは、IEはOSに同梱すらされていないので、今現在は限りなくシェアは低いです。中古のMac OS(v10.3がいいでしょう)を買ってくるか、evolt.orgというサイトでダウンロードできるようですが(もちろんMac専用)、学習用にはもういいんじゃない?と、こそっとぼやいてみます(笑)

ちょっと思い出話ですが、Mac版のIEは挙動がおかしく、問題児的なブラウザでした。人から聞いた話ですが、某有名ウェブデザインの学校で、Mac版のIEは無視していいよと言われたそう(!)です。それくらいやっかいものだったということでしょうね。

IE6もやっかいもの!?

Mac版のIEは置いておき、実は学習中のWebデザイナーにとって時にやっかいになるのはIE6。CSSの実装がおかしいので、コツをつかむまでは結構苦労するのです。しかもIE6は非常に使い勝手が悪いブラウザにもかかわらず、普及度の高いWindows XPに標準でついてきていたので、他に選択肢があることを知らずに使う方が多いのも困った点です。Windowsアップデートでアップデートするように通知されているにも関わらず、2009年12月のデータで未だにIE中で第一位となっています(資料:マイコミジャーナル)。

Firefox - ファイヤーフォックス

登場は後発な方に入りますが、着実にシェアを伸ばしているブラウザです。実用性が高く、タブ機能や、自由に拡張できることからも人気があります。(ちなみに私もFirefoxをメインに利用しています)IEについでシェアが高まってきていますので、IEと同じくらい表示チェックの重要度は高いです。Windows版とMac版がありますので、是非インストールしておきましょう。(Windows&Mac:ダウンロードはこちら

Safari - サファリ

現在MacOSの標準ブラウザになっているのがSafariです。「WindowsにおけるIE」と同じような理由により、Mac OS X v10.3以降にはもともと入っているので、Macユーザ内ではかなりのシェアがあります。しかし、Mac自体のシェアが少ないので、絶対的な数はそれほど多くはありません。それでも近年のMac人気&売り上げ増を考えれば、決して無視できない存在です。

Windows版サファリも!?

実は、マイナーですがWindows版Safariもあったりします(Windows:ダウンロードはこちら)。ただしインストールしている人はかなり少なそうなので、Mac版とは異なり重要度は低いと言えるでしょう。

Google Chrome - グールルクローム

2008年にできたばかりのGoogle社のブラウザです。2009年12月時点では4,63%のシェアを得ています。今後(どこのメーカーかは知りませんが)PCにプリインストール(あらかじめインストール)されて出荷される可能性があるとのことで、もしかするとさらにシェアが伸びる可能性もあります。(Windows&Mac:ダウンロードはこちら)

Opera - オペラ

高速を売りにしているブラウザで、昔からの根強いファンがいるブラウザです。サイトによりますが、2%前後の割合でユーザがいますので、商用サイトではチェックが必要になるかもしれません。……といっても、きちんとしたCSSを書いておけばおかしな表示はあまり発生しない感があるので、私もおまけ的な表示チェックくらいしか行っていません。(Windows&Mac:ダウンロードはこちら

NetScape - ネットスケープ

IEと並んで伝統あるブラウザですので、まだ利用している方もいますが、現在は開発が終了しています。たまーにお使いの方もいますが、よほどの商用サイトでなければ、もういいかもしれません。(Windows&Mac:ダウンロードはこちら)。

インストールするのはどれ?

いろいろな種類をご紹介しましたが、Webデザイナーの学習をするうえでインストールするのはどのブラウザでしょうか?答えは……全部インストールしろとはいいませんが、余力があればいろいろとインストールしてみてください。様々なブラウザで体験&チェックしてみることが学習につながると思います。

しかし、それでは面倒くさい!という方もいるでしょう。それは私も同じ意見です(^^;)。さすがに学習とはいえ、そこまでチェックするのはコストがかかりすぎると思います。 あまり懲りすぎてもきりがないので、まずはIEやFirefox等の主要ブラウザでまともに表示できるようになることを優先するのもいいでしょう。

参考:ブラウザのシェア

2009年12月のブラウザシェア

ブラウザ シェア
Internet Explorer 62.69%
Firefox 24.61%
Chrome 4.63%
Safari 4.46%
Opera 2.40%
Opera Mini 0.53%
(資料:マイコミジャーナル

2008年11月のブラウザシェア

ブラウザ シェア
Internet Explorer 69.77%
Firefox 20.78%
Safari 7.13%
Google Chrome 0.83%
Opera 0.71%
(資料:ITmedia)

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

コメント

ゆみママ さん 2011年06月08日23時20分
馬場様、こんばんは。

IE以外のブラウザのチェックも必要だなーと思って、Firefoxをインストールしました。

今制作中のサイトをFirefoxで確認してみると…あるページのレイアウトが崩れていました。
「え゛~っ」という感じですが、Firefoxでもきちんと見れるように修正頑張ってみます!(←ただ、原因を見つけるのが大変そうなので、かなり時間がかかってしまいそうですが。(^^ゞ

レイアウトの崩れってホントにあるんですね。
ブラウザのチェック、ホントに大切なんだなぁと痛感しました。

超初心者のコメントで大変失礼いたしました。
馬場誠 さん 2011年06月09日20時35分
ゆみママさん、こんばんは。

おっしゃるように、その原因を見つけるのが最初は難しいんですよね。
でも慣れてくると、想定外のレイアウト崩れはだんだんと少なくなってきます。

なかなか表面には出てこないスキルですが、鍛えておくとフリーランスを始めた際に役立ちますよ。

Firefoxの他にも、ChromeやSafari なども、まだ入れていなければインストールしてみられるといいかもですね。

また余談ですが、FirefoxはWeb制作にも便利なアドオンがたくさんあるので、確認用以外にもなかなか使えるブラウザですよ♪
Webデザイナーになる
学習環境を整えよう
用意すべきソフトウェア
Webデザイン用のPC/モニタ
文字表現を豊かにするフォント
├動作&表示チェック用のブラウザを入手しよう
テストサーバーを立てよう
学習前のプランニング
最低限学習しておきたい基本スキル
どんなWebデザイナーになりたいですか!?
独学?学校?学習方法について
目標を明確にし、期限を設定しよう
Webデザイナーの独学学習法
やってはいけないWebデザインの学習法
楽しんでやることが究極の学習法
学習で大切なのは何よりも実践すること
80対20の法則を意識した学習をしよう
Webサイトを作って作って作りまくれ!
情報を発信することで学ぶ
学習TIPS
良いサイトをたくさん見よう
デザインのお手本はWebの中だけじゃない!
Web制作会社で働くことが最強の学習!
一流クリエイターを気にしてはいけない!
学習の効果はすぐには表れない
学習者にとっての強力な教材-本
馬場が読んだWebの学習に役立つ本
上手な本の選び方
上手な本の選び方-ネット編
本の有効活用法
Webデザイナーの就職・転職に役立つ資格