【2019年版】webデザイナーを目指すならブラウザはコレを使おう!

safari

ブラウザとは、webページを表示するためのソフトのことです。

具体的には、Google ChromeやIE(インターネットエクスプローラー)などのことをブラウザと呼んでいます。

具体的な名前を出したほうが、ピンと来る方が多いかもしれませんね!

今回は、webデザイナーが普段使うべきおすすめブラウザと、サイトのブラウザチェックのためにインストールしておいたほうが良いブラウザをご紹介したいと思います。

また、あわせてGoogle Chromeのおすすめ拡張機能をご紹介いたします!

各ブラウザのダウンロードリンクも貼っておきますので、まだダウンロードしていないブラウザがある方は、ぜひダウンロードしてみてくださいね。

えりー
クライアントに「あの青いEのマークのやつ」と言われたら、
十中八九「IE」のことですね。。。

webデザイナーが普段使うブラウザは「Google Chrome」か「Firefox」の二択です

ほとんどのwebデザイナーは、Google ChromeかFirefoxを使っています。

webページが快適に閲覧できるのはもちろんのこと、便利な拡張機能(アドオン)が多く、開発者向けツールも充実しているからです。

私のイチオシは、Google Chromeです。私がGoogle Chromeをおすすめする理由は次のとおりです。

  • 国内外でシェア率No.1!
    クライアントもGoogle Chromeを使っている可能性が高いです。その場合、クライアントと同じ環境でwebページの確認ができるので便利です。
  • Google系サービスが使いやすい
    GmailやGoogleカレンダー、Googleドライブ等、Google系サービスが好きな方は、迷わずGoogle Chromeにしましょう!
  • Google先生が作っているという謎の安心感
    検索エンジンの王者Google先生の言うことは絶対です。。。

私はGoogle Chrome推しですが、FirefoxもGoogle Chromeに負けず劣らず便利な機能が揃っているので、とりあえず両方使ってみて、使いやすいほうをメインブラウザにすることをおすすめします。

ブラウザチェックのためにインストールしておくブラウザ

webサイト公開前に、色々なブラウザで見え方のチェックを行う必要があります。

ブラウザの仕様によっては表示崩れ等が起こる場合があるためです。

下記のブラウザをインストールしておきましょう。

PCでダウンロードしておくべきブラウザ

スマホ/タブレットでダウンロードしておくべきブラウザ

  • iOS→Safari・Google Chrome
  • Android→Google Chrome

webデザイナーにIEが嫌われる理由は、他のブラウザでは正常に見られるのに、IEだけ何故か崩れている、という現象が起こることが多かったからなんですね。。。

一番新しいバージョンのIEや、Windows10から標準搭載されているEdgeだと、そういったことはかなり減りましたが、それでもあまり好かれてはいない印象です…。

えりー
IEは早く滅びてほしい・・・
にゃーご
そこまで言われるとIEが不憫にゃ…

ただ、まだまだIEのシェアはありますので、念の為IEでのブラウザチェックもしておいたほうが良いでしょう。
*IEでセキュリティホールが発見されているため、あくまでブラウザチェックのためだけに使うことおすすめいたします。

参考までに、2019年のブラウザシェアランキングは次のとおりです。

《Webブラウザシェアランキング(2019年1月):日本国内》

ブラウザ名 バージョン シェア率
1位 Chrome 71.0 40.15 %
2位 IE 11.0 14.1 %
3位 Chrome for Android 11.97 %
4位 Firefox 64.0 7.2 %
5位 Edge 17 5.73 %
6位 Safari 12.0 4.84 %
7位 Chrome 49.0 1.31 %
8位 Safari 11.1 1.29 %
9位 Chrome 70.0 1.08 %
10位 Chrome 63.0 0.73 %

《Webブラウザシェアランキング(2019年1月):世界》

ブラウザ名 バージョン シェア率
1位 Chrome 71.0 52.39 %
2位 Chrome for Android 8.39 %
3位 Firefox 64.0 6.64 %
4位 IE 11.0 4.86 %
5位 Edge 17 3.54 %
6位 Safari 12.0 3.4 %
7位 Opera 57.0 1.85%
8位 Chrome 70.0 1.69 %
9位 Chrome 49.0 1.12 %
10位 Chrome 63.0 0.97 %

出典:https://webrage.jp/techblog/pc_browser_share/

GoogleChromeのおすすめ拡張機能

私が普段よく使っているGoogleChromeのおすすめ拡張機能をご紹介いたします。
もしいいなと思ったものがあれば、ぜひ使ってみてくださいね。

Fireshot

webページのスクリーンショットをボタン一発で取ることができる拡張機能です。画面の一部も取れるので、便利です。

Fireshotをダウンロード

ColorZilla

webページの色を抽出することができる拡張機能です。
「このサイトの色いいな!」と思った時に、参考にするために使います。

ColorZillaをダウンロード

Go Back With Backspace

Backspaceキーで前の画面に戻ることができる拡張機能です。以前は拡張機能を入れなくてもBackspaceキーで戻れたのですが、Google Chromeがアップデートしてから戻れなくなってしまいました。。。

Go Back With Backspaceをダウンロード

にゃーご
正直改悪だにゃ。Google先生にはがっかりにゃ。

Alt & Meta viewer

画像のalt・title・meta keyword・description等をサクッとチェックできる拡張機能です。
webサイト公開前のチェックによく使っています。

Alt & Meta viewerをダウンロード

WhatFont

webサイトで使っているフォントがわかる拡張機能です。ソースコードを見なくて良いので時短になりますね。

WhatFontをダウンロード

まとめ

とりあえず、webデザイナーになりたい方は、GoogleChromeかFirefoxを使いましょう。

便利な拡張機能(アドオン)が多いので、ぜひ色々入れて試してみてくださいね。

また、webサイト公開前のブラウザチェックでは、下記のブラウザを使いましょう。

PCでインストールしておくべきブラウザ

ぜひ、お使いのPCにダウンロードしてみてくださいね。(※IEはブラウザチェックのみに使うようにしましょう。)

ABOUTこの記事をかいた人

猫と気ままに暮らすフリーランスwebデザイナー。
芸術学科卒 → 超ブラック企業のホームページ更新担当(正社員) → 正社員よりも稼ぐフリーター → 制作会社(バイト→正社員) → フリーランス(今ここ)
苦労もたくさんしてきましたが、やっぱりwebデザインは楽しい!これからwebデザイナーを目指す人にもwebの楽しさを伝えたい!そんな気持ちで記事を書いています。