Webサイト（ホームページ）の見え方は、どのデバイス（PC・タブレット・スマホ）で見るかによって異なります。レスポンシブデザインのサイトであれば、デバイスに合わせて表示が最適化されるからです。
そのため、Webサイト制作時にはできるだけ多くのデバイスで見え方を確認する必要があります。
でも普通は、そんなに色々なデバイスを持っていませんよね。そこで便利なのが、Chromeの拡張機能「Responsive Viewer」です。複数のデバイスでの見え方を1画面でサクサク確認できます。
「Responsive Viewer」でできること
Webサイトの見え方を複数のデバイスごとに確認できるシンプルな拡張機能です。複数のデバイスの仮想環境をすぐに用意してくれます。
- デバイスの追加・削除。
- 全デバイスでクリックやスクロールの連動。
- ズームイン・アウトでの見え方の調整。
- 実機に近づけるモックアップの表示。
- 各デバイスでスクショ撮影（フルページや一括撮影も可）。
などの機能が備わっています。使ってみて思ったのは、操作しやすく何よりサクサク動く点です。
過去にご紹介した「Responsively App」は、動作が重たい点がデメリットでしたが、「Responsive Viewer」ならその心配は一切不要です。
インストール
Chromeウェブストアの「Chromeに追加」から、Responsive Viewerをインストールできます。
使い方
複数のデバイスで確認したいサイトを開いて、Responsive Viewerのアイコンを押すだけです。
WordPressテーマ「ARTISAN」のデモサイトで確認している例です。
アイコンを押すとすぐに複数のデバイスの仮想環境が開かれます。
あらかじめ複数のデバイスが用意されているので、すぐ確認可能です。必要に応じてデバイスの追加・削除を行なってください。
デバイスの追加
下記箇所からデバイスを追加可能です。
確認したいデバイスをここから追加してください。ただ、必ずしも実機と同じ見え方をするとは限りません。あくまで仮想環境であることは頭に入れておきましょう。
クリックやスクロール連動のON/OFF
初期状態では、スクロールやクリックが全デバイスで連動します。連動オプションのON/OFFは、下記箇所で切り替えます。
左側のアイコンでクリック、右側でスクロールの連動を切り替えられます。
拡大率の調整
画面のサイズや拡大率は右上の「％」から変更できます。
複数のデバイスを1画面内で見やすいように調整してください。
モックアップの表示
実機に近づけるモックアップを表示するには、下記箇所をクリックしてみてください。
スマホデバイスは、モックアップが表示されます。
iPhoneの場合、ヘッダーやフッターのツールバーの動きや時刻も再現されていて芸が細かいです。
スクリーンショット
スクリーンショットは、右上のカメラアイコンから撮影できます。
右上のアイコンから撮影した場合は、全デバイスのスクリーンショットが一括撮影されます。
- Capture visible page：見えてる範囲を撮影
- Capture full page：フルページを撮影
というオプションを選べます。
デバイス個別に撮影したい場合は、そのデバイスの右上にある「歯車アイコン」を押します。
上記箇所から操作すれば、そのデバイスのスクリーンショットのみを撮影できます。
まとめ
デバイスごとの見え方を確認するのに便利な拡張機能「Responsive Viewer」をご紹介しました。
Chromeの拡張機能なので、追加すればすぐに使えます。直感的に操作できて、動作も軽いのでおすすめです。Webサイトの見え方を複数のデバイスで確認したい際にぜひご活用ください。
モバイルデザインの確認に特化した拡張機能ならこんなものもあります。よろしければご覧ください。
ホームページやWebサイトは、スマホやタブレットなど、様々なデバイスで閲覧されることを考える必要があります。 Chromeのデベロッパーツールでもモバイルデザインのシミュレーションはできますが、多機能な反面、操作画面は少し煩雑な印象です。Webサイトの資料やプレゼンとして見せたいときにはあまり...
コメント