【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブWebデザイン制作時必見のブラウザチェックツール10選

レスポンシブWebデザイン制作時必見のブラウザチェックツール10選

レスポンシブWebデザインチェックツールまとめ

レスポンシブWebデザインに限らず、Webサイト制作時にはブラウザでのチェックは必要です。

しかしレスポンシブWebデザインでの制作を進めるにあたり、サイトコンテンツの動作や配置のチェックなど通常のサイトチェック以上に柔軟かつ簡単にできればより便利になります。

以前の記事、「Web制作者必見!ブラウザの横幅を簡単に確認できるChrome拡張機能」ではブラウザの横幅サイズの確認ができる拡張機能をご紹介しましたが、今回はブラウザ上でより便利にチェックができるツールをご紹介します。

 

Demonstrating Responsive Design

Demonstrating Responsive Design

URLを入れれば、デバイス毎の表示を簡単に切り替えることができます。チェックできるのは、iPhone(縦、横)、iPad(縦、横)、PCと少なめですが、動作も軽くUIが個人的には好みです。

Demonstrating Responsive Design

 

Resizer

Resizer

こちらはブラウザのツールバーにインストールをして使うブックマークレット。ブックマークレットを起動してサイズを選択すれば、指定したサイズにリサイズされます。

Resizer

 

Responsivator

RESPONSIVATOR

こちらはブラウザサイズをカスタマイズ指定することができる優れものです。iOSだけでなく、Android端末などのチェックにも便利。

Responsivator

 

The Responsinator

The Responsinator

シンプルなUIが特徴的なチェックツール。iPhoneだけでなく、GalaxyやGalaxy tab、Kindleなど様々な端末でのチェックが一覧で確認することができます。欲を言えばブラウザサイズのカスタマイズができれば尚良しといったところです。

The Responsinator

 

screenfly

screenfly

こちらは上記のThe Responsinatorをさらにグレードアップしたもの。デスクトップのサイズ、タブレット、スマートフォン(MotorolaやBlackBerryまで!)のスクリーンサイズがあらかじめ設定されています。もちろん、カスタマイズで好きなサイズへの変更も可能となっています。

screenfly

 

Responsive Design Testing

Responsive Design Testing

5つのサイズのブラウザサイズで確認が可能。横スクロールなので環境によっては使いにくいかもしれません。

Responsive Design Testing

 

resizeMyBrowser

resizeMyBrowser

あらかじめ設定されているブラウザサイズのボタンをクリックすれば、別ウィンドウで指定したサイズのブラウザが立ち上がります。URLを入力して動作をチェック。自分の指定したサイズも追加することができます。

resizeMyBrowser

 

RWDTT:レスポンシブ・ウェブデザイン テスト・ツール

RWDTT:レスポンシブ・ウェブデザイン テスト・ツール

日本の方が作られたツールです。基本的な機能は他のチェックツールと変わりはありませんが、ブラウザの中でさらにウィンドウを移動させたりすることができるので、同時に別のサイズのウィンドウを横並びにして確認したりすることができます。

ブックマークレットでも起動することができるので、そこも便利かもしれません。

RWDTT:レスポンシブ・ウェブデザイン テスト・ツール

 

(おまけ1)ガラケーでの動作チェック拡張機能

FireMobileSimulator

利用者数が激減しているとはいえ、まだ一定数は残っているガラケーユーザー。ガラケーブラウザのチェックツールとして、ブラウザ上でガラケー表示の確認をすることができる拡張機能です。

ボタン1つでドコモやSoftBankのガラケーのユーザーエージェントに切り替えることが可能。

 

(おまけ2)Aptus

Aptus

Macのアプリです(有料)

ブラウザのユーザーエージェントを指定したり、サイズのカスタマイズや、固定幅だけでなく◯◯px〜◯◯pxなどの幅広いカスタマイズが可能となっています。フルサイズのスクリーンショットもボタンひとつで撮ることができ、とても便利です。

Aptus App
カテゴリ: 開発ツール
価格: ¥250

 

まとめ

このようにブラウザ上でレスポンシブWebデザインの動作を確認するツールはたくさんありますが、一番大事なのは必ず実機(iPhone、Android、各種タブレット端末)で実際に確認することです。

ブラウザ上ではコンテンツ配置や動作は確認することができますが、タップしやすいボタンの大きさ、読みやすい文字のサイズなどは必ず実際の端末でないと確認することができません。

おおまかにブラウザで確認→詳細は実機での確認という流れで制作を進めることをオススメします。

上林

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+