ユーザーによって閲覧するデバイスは異なりますので、WEBサイトにはレスポンシブデザイン（画面サイズやブラウザに応じて変更されるデザイン）が求められます。なので、制作段階ではさまざなサイズでの検証が必要になるわけです。
Chromeのデベロッパーツールを使って、他のデバイスでの表示を仮検証できますが、本稿ではあらゆるデバイスでの画面表示を同時に確認できる便利なツールをご紹介いたします。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
「Responsively App」とは
複数のデバイスの画面表示例を同時にシミュレーションできるブラウザアプリです。あらかじめ用意されているサイズ以外にも任意で設定できるので、様々な画面サイズで検証できます。
最も優れた点は、各サイズの表示例を同時に確認できる点です。以下のようにスクロールしたり、下層ページへ移動しても全デバイスの画面が同時に動きます。
「Responsively App」のダウンロード
下記ボタンからダウンロードできます。リンク先の下記箇所からお使いのOSに合わせてダウンロードリンクをクリックして、ファイルを開いてアプリを起動します。下記は、2020年9月現在のキャプチャですが、今後のバージョンアップにより、数字は変更されます（0.12.0の部分）。
「Responsively App」の使い方
「Responsively App」を起動すると以下のような画面が開きます。上部のURL入力欄に比較したいページのURLを入力して使います。便利な機能をこの章でご紹介いたします。
比較する画面サイズを設定する
左に表示されている「customize」をクリックすると元々セットされているサイズバリエーション以外にも複数のデバイスサイズに変更できます。
任意のデバイスサイズを右からドラッグアンドドロップしてセットできます。よく使われそうなものをセットしておくといいでしょう。下記は、iPhoneと、iPad、一般的なラップトップ（ノートパソコン）、画面サイズの大きいデスクトップでの見え方を同時に比較できるようにセットした一例です。
また、上記の例では、一番大きなデスクトップでの見え方をオリジナルで設定しています。サイズのバリエーションを選ぶ画面で右上の赤枠のボタンをクリックして設定可能です。
ここでデバイスの名前や縦横のサイズやデバイスのタイプを決めて、「ADD」で追加してください。
【注意点】
元々用意されているサイズもですが、2560pxなどを超えているものは、レティーナディスプレイのサイズ感で再現されないようです（画面サイズと各要素の比率がおかしくなります）。ですので、同比率で半分 or 4分の1に手動で調整して対応しましょう。
当記事の「画面サイズの大きいデスクトップの例」を参考にご覧ください。
見やすい表示形式に変更する
下記箇所で見やすいレイアウトにいつでも変更可能です。
- Horizontal（横並び）
- FlexiGrid（グリッドレイアウト）
- Individual （個別に表示）
比較するデバイスの数がそれほど多く無い限りは、横並びのレイアウトが比較しやすいかもしれませんね。
デベロッパーツールを使って検証する
各デバイスの上記アイコンではChormeベースのデベロッパーツールを活用できます。スマホやPCで異なるCSS（メディアクエリなど）を使用している場合も多いと思いますが、そういった箇所の確認が同一ブラウザ内で画面を切り替えることなく可能です。
レスポンシブデザインに活用できるメディアクエリについては下記記事をご覧ください。
昨今はスマホの普及により、ウェブサイトを制作する上でもモバイルファーストの風潮がどんどん強くなっています。スマホ環境で見られることを想定して制作されたウェブサイトでない限り、PC用のウェブサイトをスマホ用やタブレット用の表示に切り替える必要があります。それがレスポンシブWebデザインと呼ばれる仕様で...
スクリーンショットも簡単に撮れる
上記の各アイコンで「表示しているエリアのキャプチャ」と「フルページのキャプチャ」が簡単に撮影できます。各デバイスサイズごとのアイコンを押して、ワンタッチで撮影完了です。
さらに、手元で使用中の画面サイズでは再現できない比率のキャプチャも簡単に撮ることができます。例えば、このサイズですね。
iMacのretinaモデルの27インチの見え方を再現した画面サイズです。筆者の環境は13インチのMac bookなので、通常は再現できないサイズ感（比率）ですが、上記箇所から簡単にキャプチャを撮ることができます。
上記iMacの実際の解像度は「5120×2880」ですが、レティーナディスプレイの特性とブラウザで閲覧時にWEBサイトが表示される領域に合わせて比率を4分の1にした「1450×1350」に調整して再現しています。
手元に当該デバイスがなくても見え方を確認できたり、ページのキャプチャ撮影もワンタッチで可能です。
共同開発者やお客様との擦り合わせにも活用できるツールです
弊社のようにWordPressテーマを開発している企業の他、ホームページを制作代行されている個人様や企業様にも役立つツールかと思います。全員が同じデバイスで作業しているとは限りませんし、外部の方（共同開発者やお客様）とデザインを擦り合わせる際にも便利です。
ただし、開発段階での活用に留めておき、最終的には実機で確認するのがベターでしょう。OSの種類によって動作が異なる場合があるためです。そういった面にさえ注意しておけば、複数のデバイスでの見え方を同時にチェックできるので、フロントエンド開発の作業効率をUPできます。ぜひご活用ください。
