レスポンシブを確認する際に、いちいちタブレットやスマホ表示を確認するのは手間、一気に確認できたら、と思ったことはありませんか？それ、Responsive Viewerを使えば解決できます。
今回は「Responsive Viewer」という、レスポンシブ確認がめちゃくちゃ楽になるChrome拡張機能を紹介しますが、正直これを使わないでレスポンシブ確認をしているのは効率が悪すぎるので、必ず導入してください。
私もコーディング課題のレビューをする時は、カンプ幅は「Perfect Pixel」で確認して、その後この拡張機能を使ってざっとカンプ外のレスポンシブ表示を確認しています。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Responsive Viewerでできること
「Responsive Viewer」を使えば複数画面サイズの表示を一括で確認することができます。
以下の画像がわかりやすいかと。
いちいちレスポンシブ確認するときに、PC表示とタブレット、スマホ表示を一個一個見ていると、めちゃくちゃ時間がかかります。
Responsive Viewerの使い方
以下の手順に沿って解説します。
- Responsive Viewerを導入
- Responsive Viewerのカスタマイズ
❶Responsive Viewerを導入
まずはChrome拡張機能一覧から「Responsive Viewer」をダウンロードします。
その後、ブラウザ右上の拡張機能一覧に表示させます。
Responsive Viewerのマークをクリックしてください。
すると、以下のように各画面サイズの表示が出てきます。
ただデフォルトだと少し見にくいので、ここからは私が使っている画面サイズを並べていきます。
❷Responsive Viewerの画面幅を揃える
一旦デフォルトで表示されているものは消します。
各表示の右上の歯車マークを押して「Settings」以降から一つずつ「Delete」するか、または以下の表と同じサイズに変更してください。
その後、下の表と同じ画面サイズのものを画面右上のサイドバー「New screen」より入力して追加してください。
| Medium Screen | 1024*800 |
| iPad | 768*1024 |
| iPad Pro | 834*1112 |
| iPhone 6.7.8 | 375*667 |
| iPhone XR | 414*896 |
| Laptop1 | 1440*900 |
| Laptop2 | 1920*1080 |
疑問があると思うのでお答えすると、よく表示崩れが起こるのがこのあたりのサイズだからです。
375pxや1440pxを確認するのはまあ当然として、414pxとか834pxとかこのあたりは無頓着な方が多かったり（スマホレスポンシブを375pxで設定している人がいたり）
また、1920pxという大画面もちゃんと確認するべきでしょう。
❸見やすくする
デフォルトだと画面内に収まる数が少ないです。
そこで、上のメニューよりバーを操作し縮尺を変えることで、
このように画面内に収めることが可能です。
Responsive Viewerのその他の機能
画面の並びやスクリーンショットは以下の場所から行えます。
また、デフォルトでは全画面一緒にスクロール、クリックしていると思いますが、ここは変えられます。
ただ、基本的にはデフォルトのままでいいかなと思います。
Responsive Viewerを使った品質管理の方法
ここからはこの「Responsive Viewer」をどう業務に活かすかを簡単に。
私の場合、手順としては以下です。
- デザインカンプ幅でまず「PerfectPixel」で合わせる
- カンプ幅以外の大画面、PCインナー幅、タブレット付近、スマホを「Responsive Viewer」で確認
この順番です。
実際に確認する際は、あまり表示が小さくても細かいミスに気づきにくいので、
拡大率を80~90%ぐらいにして、２つずつ確認するようにしています。
デイトラWeb制作コースなどプログラミングスクールに通われている方も、Web制作を独学している方も、ぜひ積極的に使って生産性を高めてください。
もし画面が小さい！と感じた場合
モニターの導入がおすすめで、私は常に画面は2つで作業をしています。
おすすめは以下の記事に記載しているので、お好きなものをどうぞ☺️
もし横スクロールが起きた場合
以下のスクリプトを検証ツールのconsoleから実行することで、原因箇所が分かります。
// ウェブページの幅を取得
var w = document.documentElement.clientWidth;
// 全ての要素を取得
var elements = document.querySelectorAll("*");
// 要素をループして、指定の条件を満たすものを探す
elements.forEach(function(v) {
v.style.outline = '1px solid red';
if (w < v.clientWidth) {
console.log(v);
}
});詳しい使い方は以下の記事で解説しています。
Responsive Viewerとセットで使いたいPerfectPixel
今回紹介した「Responsive Viewer」はあくまでレスポンシブをざっと確認したいときに使います。
より厳密に、デザインカンプ通りかを確認するには「PerfectPixel」を使いますから、そちらも使えるようにしておきましょう。
Web制作コーディングの品質チェックについて
Web制作コーディングに関しては、もう少し確認するべき項目が多くなります。
「Responsive Viewer」と「PerfectPixel」を含めた全ての品質チェック項目を学びたい場合は、以下の記事がおすすめです。
超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。
最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」
この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、
- 見積書提出
- 実装→初稿提出
- レビュー→修正
- 再修正→納品
- 請求書
この流れを実践していただき、最後にzoomであなたに全体レビューを行います。
- 学習はだいたい終わったけど、納期までに納品できるか不安
- 中々継続と紹介で案件が回らない
このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。
あなたの挑戦を待っています！！
＼レビューを受けて圧倒的な自信を身につける！／
ご寄付を頂けると今後の更新の励みになります！
