【ホームページ制作】レスポンシブ確認方法。

レスポンシブの確認って、正直めちゃめちゃ大変。
サイズは色々あるし、キリがない、、、

PCで確認して、
次はスマホ、
タブレットもチェックして…

👉「これ、どうやるのが正解なんだろう？」

そんなふうに悩んだことがある方に向けて、
今回は作業が一気に楽になる方法をご紹介します。

まずはレスポンシブとは？

レスポンシブとは一言でいうと

画面サイズに合わせてデザインが変わる仕組み

です。

例えば…

・PCでは横並び
・スマホでは縦並び
・タブレットでは中間サイズ

このように、デバイスごとに見やすく変わる設計のことを指します。

Responsively Appとは？

「Responsively App」は
複数デバイスの表示を同時に確認できるツールです。完全無料です。
今まではデベロッパーツールで確認していたんだけど「Responsively App」だったら並んで見えるので便利！！

https://responsively.app/

URLを1つ入力するだけで

・PC
・スマホ
・タブレット

すべての画面を同時に表示できます。

■ 使い方（超かんたん）

① サイトURLをコピー
② アプリを起動
③ URLを貼る

■ 何がすごいのか？

① 一瞬で全デバイス確認できる

通常は、Chromeの検証ツールで
デバイスを切り替えながら確認しますよね。

👉 これ、めちゃくちゃ時間かかります

でもこのツールなら
👉 1画面で全部チェック可能

② スクロール・操作が同期される

1つの画面をスクロールすると
👉 他のデバイスも全部同じ動き

つまり

・崩れている箇所
・余白ズレ
・フォントサイズ違和感

👉 一発で気づける

③ 完全無料で使える

これだけ高機能なのに
👉 完全無料（しかも軽い）

カスタムサイズ追加方法

　一覧でデバイスサイズがない場合はカスタムサイズにて追加も可能！！

👉 デバイス一覧（Devices）を開く
2. 「＋（Add Device）」をクリック
3. 以下を入力👇

コード確認方法

Responsively Appは
見た目の確認だけでなく

👉 コードの確認・デバッグも可能です

開発者ツール（DevTools）と連携しており

・HTML構造の確認
・CSSの調整
・レイアウト崩れの原因特定

なども、その場でチェックできます。

つまり👇

👉 デザイン確認 + コード確認を同時にできる

ということ。

まとめ

作業効率を上げるツールを知っているかどうかで、Web制作のスピードは大きく変わります。まずは色々試してみてください😃