Web制作実務役立ち

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】
本ページにはプロモーションが含まれています。

Chromeの拡張機能を以前に紹介したことがあります。

web制作におすすめの拡張機能トップ10【生産性アップ】

今回は新たに「Responsive Viewer」という、レスポンシブ確認がめちゃくちゃ楽になる拡張機能を紹介します。

正直これを使わないでレスポンシブ確認をしているのは効率が悪すぎるので、必ず導入してください。

私もコーディング課題のレビューをする時は、カンプ幅は「Perfect Pixel」で確認して、その後この拡張機能を使ってざっとカンプ外のレスポンシブ表示を確認しています。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

Responsive Viewerでできること

Responsive Viewer」を使えば複数画面サイズの表示を一括で確認することができます。

以下の画像がわかりやすいかと。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

いちいちレスポンシブ確認するときに、PC表示とタブレット、スマホ表示を一個一個見ていると、めちゃくちゃ時間がかかります。

Responsive Viewerの使い方

❶Responsive Viewerを導入

まずはChrome拡張機能一覧から「Responsive Viewer」をダウンロードします。

https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=ja

その後、ブラウザ右上の拡張機能一覧に表示させます。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

Responsive Viewerのマークをクリックしてください。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

すると、以下のように各画面サイズの表示が出てきます。

これとは表示が異なりスマホサイズが並んでるかと思います。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

ただデフォルトだと少し見にくいので、ここからは私が使っている画面サイズを並べていきます。

❷Responsive Viewerのカスタマイズ

一旦デフォルトで表示されているものは消します。

各表示の右上の歯車マークを押して、一つずつDELETEするか、または以下の表と同じサイズに変更してください。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

その後、下の画像と同じ画面サイズのものを画面左のサイドバーより選択してください。

Medium Screen1024*800
iPad768*1024
iPad Pro834*1112
iPhone 6.7.8375*667
iPhone XR414*896
Laptop11440*900
Laptop21920*1080
Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

デフォルトの中には1920pxが無いので、その場合は既存のものをカスタマイズして画面幅を調整してください。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】
なぜこの画面サイズなのか?多くない?

疑問があると思うのでお答えすると、よく表示崩れが起こるのがこのあたりのサイズだからです。

375pxや1440pxを確認するのはまあ当然として、414pxとか834pxとかこのあたりは無頓着な方が多かったり(スマホレスポンシブを375pxで設定している人がいたり)

また、1920pxという大画面もちゃんと確認するべきでしょう。

デフォルトだと画面内に収まる数が少ないです。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

そこで、上のバーを操作し縮尺を変えることで、

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

このように画面内に収めることが可能です。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

Responsive Viewerのその他の機能

画面の並びやスクリーンショットは以下の場所から行えます。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

また、デフォルトでは全画面一緒にスクロール、クリックしていると思いますが、ここは変えられます。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

ただ、基本的にはデフォルトのままでいいかなと思います。

Responsive Viewerを使った品質管理の方法

ここからはこの「Responsive Viewer」をどう業務に活かすかを簡単に。

私の場合、手順としては以下です。

Responsive Viewerの使い方
  1. デザインカンプ幅でまず「PerfectPixel」で合わせる
  2. カンプ幅以外の大画面、PCインナー幅、タブレット付近、スマホを「Responsive Viewer」で確認

この順番です。

実際に確認する際は、あまり表示が小さくても細かいミスに気づきにくいので、

拡大率を80~90%ぐらいにして、2つずつ確認するようにしています。

Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】
Responsive Viewerの使い方【レスポンシブ確認に必須の拡張機能】

Responsive Viewerとセットで使いたいPerfectPixel

今回紹介した「Responsive Viewer」はあくまでレスポンシブをざっと確認したいときに使います。

より厳密に、デザインカンプ通りかを確認するには「PerfectPixel」を使いますから、そちらも使えるようにしておきましょう。

Web制作コーディングの品質チェックについて

Web制作コーディングに関しては、もう少し確認するべき項目が多くなります。

Responsive Viewer」と「PerfectPixel」を含めた全ての品質チェック項目を学びたい場合は、以下の記事がおすすめです。

模擬案件チャレンジ開催のお知らせ

超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!【学習沼からあなたを卒業させます】

最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか?

この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、

  1. 見積書提出
  2. 実装→初稿提出
  3. レビュー→修正
  4. 再修正→納品
  5. 請求書

この流れを実践していただき、最後にzoomであなたに全体レビューを行います。

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!【学習沼からあなたを卒業させます】
  • 学習はだいたい終わったけど、納期までに納品できるか不安
  • 中々継続と紹介で案件が回らない

このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。

しょーご

あなたの挑戦を待っています!!

\レビューを受けて圧倒的な自信を身につける!/

あなたに是非読んでほしい記事です!