Web制作-ブラウザチェック(レスポンシブデザイン)に便利なツール


Web制作-ブラウザチェック(レスポンシブデザイン)に便利なツールとサービス

 

Webサイトを制作したら、対象となるデバイス・ブラウザで正しく表示され動作するかの確認が必要です。

すべてのデバイスで実際にサイトを表示してみるのが一番確実な方法としてありますが、タブレットやスマホなどは種類も多くすべて揃えるのは現実的ではありません。

そこで制作ツールやブラウザの各種シミュレーターやエミュレーターを使い確認するのがもっとも現実的かつ効率的。

もちろん、あくまでも仮想なので表示や動作が保障されているものではありません。

 

ブラウザチェックに最低限知っておきたい日本でのブラウザシェア

シミュレーターやエミュレーターを使かっても、すべてのブラウザ、デバイスのチェックをするとなると相当な時間を要するので、最低限として主要なブラウザでテストを行いたいものです。

では、日本における主要なブラウザを調べてみた。

以下、2015年内(2015年1月~8月)の日本でのブラウザシェア。(StatCounter

 

デスクトップのブラウザシェア
ブラウザシェア2015


タブレット・スマートのフォンブラウザシェア
ブラウザシェア2015


テストすべきブラウザ

  • 日本での主要ブラウザ
  • サイト設計時に決定した対象となる(HTMLやCSSなどのバージョンのより)ブラウザ。
考えれる主要なブラウザ

PC

  • IE9,10,11
  • Google Chrome
  • Firefox
  • Safari

余裕があれば「Opera」、場合により「IE8」。

タブレット・スマートフォン

  • Safari(iOS)
  • Android(アンドロイドデフォルトのブラウザ)
  • Chrome

余裕があれば「Opera」、「Puffin」。

 

ブラウザチェックに便利なツールやWebサービス

さて、本題

デスクトップのブラウザは各種ダウンロードして表示出来るので、ここでは特にレスポンシブデザインのチェックをするのに便利だなと思うものを挙げてみる。

Chrome Developer Tools (クローム・デベロッパーツール) https://www.google.co.jp/chrome/browser/

最も簡単お手軽、使われている方も多いと思われる、ブラウザのGoogle Chromeのツール。

簡単に使い方説明

例:Chrome Developer Toolsを利用して「Apple iPhone 6 Plus」でのテスト画面を出す。

手順1

Google Chromeを起動して、テストしたいサイトを表示→画面上で右クリック→[要素の検証]をクリック。(Ctrl+Shift+i または,F12キーでも可)

chromedevelopertools


するとこの画面。

画面上部「Device」のプルダウンから「Apple iPhone 6 Plus」を選択。

その他デバイスの候補が沢山あってこれは便利。自分で追加も出来る。

chromedevelopertools


縦表示にも出来ます。

chromedevelopertools


ChromeDeveloperToolsはこの他にも制作過程で使える機能が沢山ありますので必須ですね。

Internet Explorer F12開発者ツール

クロームのデベロッパーツールと同様 のInternet Explorer 開発者ツール。

検証したいサイトを表示してF12で起動します。

iedeveloper


簡単な使い方説明。

タブメニューよりエミュレーションを選択。

モード内ドキュメントモードを変更することで描画エンジンを切り替えることができる。(7=IE7の描画エンジン使用)

ディスプレイから解像度の変更もできるのでなにかと便利。

詳しい解説はDeveloper Network(Internet Explorer 開発者ツールを理解する)を参照。

慎重かつ苦労するのがIEでの確認かとおもいますが、

この「IETester」はIE(Internet Explorer)での動作・表示確認ができるソフトウェア。

IE5.5~IE11までのテスト出来る。日本語に対応され、直感的に使うことが出来る。

ietester

Responsive Web Design Testing Tool http://mattkersley.com/responsive/

サーバーにアップしたサイトのレスポンシブを手軽に確認するならこちらのウェブサービスが便利。

画面右上の「Width only」か「Device sizes」のどちらかにチェックを入れて、確認したいサイトのURLを入力。

以下のサイズの画面が見られる。

Width only

240 , 320 , 480 , 768 , 1024

Device sizes

240 x 320 (small phone) , 320 x 480 (iPhone) , 480 x 640 (small tablet) , 768 x 1024 (iPad – Portrait)

ResponsiveDesignTestinTool

その他のテストツールについて

Androidエミュレータ : Android SDK toolsを使用し、 表示確認、機能動作確認、すべてのAndroidに対応したエミュレーター。

Xcode : iOSシミュレータ。Mac用の統合開発環境。

iPhoney : Mac用のiPhoneシミュレータ。

Adobe Edge Inspect CC : モバイルデバイスでWebサイトを表示した時のプレビューや動作確認を行うことが出来るツール。「iOS」「Android」「Kindle Fire」、複数のモバイルデバイスに対応。


まだまだありますがこの辺で。

現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL