見出し画像

【自己アウトプット】レスポンシブ対応が楽になる！使ってみた4つの レスポンシブ確認方法（Chrome拡張機能含む）

ぺー

このnoteは #アウトプットリレー です。

昨日の投稿は お嬢👉️こちら（https://note.com/clear_toucan7213/n/n03b176ef1fa7）
明日の投稿は やま さかなさん（https://note.com/ymzkn）です！
お楽しみに！

はじめに

こんにちは🌻　RUNTEQ71期　ペー　です。

最近個人開発をしていると、

  • 「スマホ表示、あとでまとめて確認しよう」

  • 「とりあえずPC表示でリリースしてレスポンシブは後で…」

となりがちですが、
“手軽に・何度も・迷わず確認できる環境” を知っていると、
開発スピードも上げやすいと感じました。

今回は、私が実際に使ってみた4つの レスポンシブ確認方法について、

  • 導入方法

  • それぞれ何ができて、何が違うのか

  • どう使い分けると良さそうか

をまとめます。


Chrome検証ツール（DevTools）とは？

Chromeに標準で入っている
画面サイズ・要素・CSS・挙動を確認するための開発者向けツール です。

拡張機能を入れなくても、
今すぐスマホ表示を再現できる のが強みです。

検証ツールでスマホ表示を確認する手順

1. 検証ツール（DevTools）を開く

以下のどれかでOKです。

  • 右クリック → 検証

  • Mac：Command + Option + I

  • Windows：Ctrl + Shift + I

画面右 or 下に、検証ツールが表示されます。

2. デバイスツールバーをONにする

検証ツール左上にある📱💻 のようなアイコン
（デバイスツールバー）をクリックすると、
画面がスマホ風の表示に切り替わります。

3. 端末を選択する

画面上部のプルダウンから端末を選びます。

  • iPhone SE

  • iPhone 14 / 15

  • Pixel

  • iPad など

または
「Responsive」 を選ぶと、
自由に横幅を変更できます。

4. 画面サイズを調整する

  • ドラッグで横幅を変更

  • ブレイクポイント（CSSの切り替え）確認

  • 横向き / 縦向きの切り替え

ここで

  • レイアウト崩れ

  • 文字サイズ

  • 余白

  • ボタンの位置

などを確認します。

Chromeの検証ツール（DevTools）が向いている場面

  • 画面幅を自由に変えながら、レスポンシブの切り替わりを細かく確認できる

  • 要素を選択してCSSを一時的に変更し、余白や文字サイズをその場で調整できる

  • JavaScriptやモーダルの挙動など、表示だけでなく動きも合わせて確認できる

レスポンシブビュアーとは？

複数の画面サイズを同時に並べて確認できる拡張機能 です。

PC / タブレット / スマホなど、
異なる画面幅を一度に表示できるため、

  • レイアウト崩れ

  • 余白の違和感

  • 要素の並び順

を 一瞬で比較 できます。

導入方法（レスポンシブビュアー）

  1. Chromeウェブストアで
    「Responsive Viewer」 を検索

  2. 「Chromeに追加」をクリック

  3. ブラウザ右上の拡張機能アイコンから起動

  4. 表示したいURLを入力

  5. デバイスサイズ（iPhone / iPad / PCなど）を選択

設定はほぼ不要で、入れたその日から使える のが魅力です。

レスポンシブビュアーが向いている場面

  • PC・タブレット・スマホなど、複数端末の表示を同時に比較したいとき

  • CSS修正後に「全体のレイアウトが崩れていないか」を一気に確認したいとき

  • 画面サイズごとの差分を直感的に把握したいとき

モバイル電話シミュレーターとは？

こちらは、スマートフォンを1台そのまま再現するタイプ の拡張機能です。

  • 実際の端末に近い画面サイズ

  • スマホっぽい枠

  • タップ前提のUI確認

ができるのが特徴です。

導入方法（モバイル電話シミュレーター）

  1. Chromeウェブストアで
    「Mobile Phone Emulator」 や
    「Mobile Simulator」 を検索

  2. Chromeに追加

  3. 拡張機能を起動

  4. 使用したい端末（iPhone / Androidなど）を選択

  5. URLを入力

こちらも難しい設定はなく、
スマホ専用画面をすぐ再現 できます。

モバイル電話シミュレーターが向いている場面

  • 実際のスマホに近い見た目で、UI全体の印象を確認したいとき

  • ボタンの大きさや間隔など、指で操作する前提の画面を見たいとき

  • フォームやモーダルなど、スマホ操作時の体験を確認したいとき

実機確認とは？

実機確認 とは、
自分のスマートフォン（iPhone / Android）を実際に使って、
アプリやWebページの表示・操作感を確認することです。

検証ツールやシミュレーターでは再現しきれない、

  • 指でのタップ感覚

  • スクロールの重さ

  • フォントや余白の見え方

などを ユーザー目線で確認できる のが最大の特徴です。

実機確認でスマホ表示を確認する手順

  1. PCでローカルサーバーを起動する
    　（例：rails s、npm run dev など）

  2. PCとスマホを同じWi-Fiに接続する

  3. PCのIPアドレスを確認する
    　（Macの場合：システム設定 → ネットワーク）

  4. スマホのブラウザでアクセスする
    　http://○○○.○○○.○.○○○（PCのIPアドレス）:3000（ポート番号）

  5. 実際に操作して確認する
    　タップ・スクロール・入力・画面遷移をチェック

※ デプロイ済みの場合は、
URLを直接スマホで開くだけでもOKです。

私の確認フロー（個人開発の場合）

1. 検証ツール（DevTools）

実装しながら、
まずはChromeの検証ツールでスマホ表示を確認します。

画面幅を動かしながら
レスポンシブの切り替わりやCSSの違和感をチェックし、
「おかしい」と思ったところはその場で微調整します。

2. レスポンシブビュアー

CSS修正が一段落したら、
レスポンシブビュアーで複数端末をまとめて確認します。

PC・タブレット・スマホを並べて見ることで、
「このサイズだけ崩れている」といった見落としを防げました。

3. モバイル電話シミュレーター

見た目がだいたい整ったら、
スマホに近い見え方で操作感を確認します。

ボタンの押しやすさや
フォーム・モーダルの表示など、
実際に使う場面を想像しながらチェックします。

4. 実機確認

最後に、1ページ完成したときの最終確認など、
余裕があるときだけ実機で確認します。

タップやスクロールの感覚、フォントや余白の印象など、
「使っていて気持ちいいか」「使いづらいアプリではないか」を最終確認します。

まずはこれだけでOK

「全部やらなきゃ」と思うと大変なので、
最初はこの2つだけ でも十分だと思っています。

  • 検証ツール（DevTools）
    　→ 実装しながらスマホ表示を確認する

  • レスポンシブビュアー
    　→ レイアウトが崩れていないかをまとめて確認する

この2つだけでも、

  • スマホ表示を後回しにしない

  • 「完成後に崩れて気づく」を減らせる

という効果がありました。

余裕が出てきたら

  • 操作感が気になったら → モバイル電話シミュレーター

  • 公開前に安心したいとき → 実機確認

と、少しずつ足していけばOKです。

＊補足＊

拡張機能が表示されないときは

Chromeの拡張機能を導入する際は、拡張機能の設定画面を開き、

「このサイトでの実行」を許可しておきましょう。

導入後楽に使用するために

「詳細」を開き、「ツールバーに固定する」設定をしておくことで
画面右上あたりに以下の画像のようなアイコンが出てくるので
localhostの画面などレスポンシブ確認したい画面で
アイコンをクリックするだけで使用することができます。

まとめ

PCのみでの利用を想定したアプリももちろんあると思いますが、
日記などのアプリは外出時などにも使用できると便利です。

どのようなユーザーを想定して、どのようなアプリを制作しているのかを考え、
携帯端末でも使用できる方が良さそうであれば、ぜひレスポンシブ対応をしてみてください 👀

どちらも無料で導入できるので、
まだ使ったことがない方はぜひ試してみてください。

ぺ

いいなと思ったら応援しよう！