WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： トレンド >サービス紹介

今回は、ブラウザのレスポンシブモードで小さなパソコン画面を再現したいのにうまくいかない…という問題を解決する拡張機能をご紹介します！

小さなパソコン画面での閲覧イメージがうまく表示されない…

デザインの参考としてWebサイトを見ている時、1920pxなどの大きなスクリーンで見ていて「これをノートパソコンで見たらどう縮小するんだろう」と気になることがあります。

そんな時はブラウザの「レスポンシブモード」で1200px、1400pxなどのサイズに調整すると、疑似的にノートパソコンサイズの見た目にすることができます。

↑ブラウザの「レスポンシブモード」イメージ

とても便利なのですが、Webサイトによってはこれがうまくいかないことがあります。
画面幅をノートパソコンのサイズに設定したら、その画面幅に合わせてうまく縮小したり組み替えられたりしてほしいのですが、なぜかスマートフォンでの見た目が無理やり拡大されたような状態になってしまうことがあるのです。

原因

これは、Webサイトの構造に問題があるのではなく、ブラウザのレスポンシブモードの性質によるものです。

ブラウザのレスポンシブモードは本来、『スマートフォンでの見た目を検証する』ための機能なので、この機能を使ってサイトを閲覧すると「スマートフォン用の見た目」を表示しようとします。

幅を縮小するだけでなく、スマートフォンに最適化しようとするため、ノートパソコンのサイズに設定してしまうと「スマートフォンに最適化された状態をノートパソコンサイズで無理やり表示する」状態になってしまい、うまくいかないことがあるのです。

Webサイトの構造として、単純に画面の横幅に合わせて調整するように作られているサイトはブラウザのレスポンシブモードでも綺麗に表示されますが、Javascriptなどを使用して、よりスマートフォンに最適化されるように設計されているサイトの場合は、レスポンシブモードでは崩れてしまうことがあります。

もちろんそうしたサイトに問題があるわけではありません。スマートフォンでの閲覧の多いサイトでは、そうした構造にしたほうがユーザーが快適に利用できることもあります。
ブラウザのレスポンシブモードとなぜか相性が悪いだけです(笑)

拡張機能「Window Resizer」を使ってみよう

ここで、レスポンシブモードよりも「小さな画面で閲覧したときの見た目」を再現しやすい拡張機能をご紹介します！「Window Resizer」という機能です。

レスポンシブモードでうまく最適化できない場合、ウィンドウサイズ自体を縮めるという方法もありますが、手動で正確なサイズにウィンドウを縮小するのはかなり難しいです。

そこで、Window Resizerを使うと好きな数値を設定してウィンドウを縮小することができます。例えば、横幅1400pxの画面で見たイメージを再現したい場合は、この拡張機能で「1400pxに縮めたイメージ」を作ることができるのです。

Window Resizerは、Firefox、Chrome、Edgeのそれぞれに対応したものがあるため、普段よく使用するブラウザで取り入れることができます。

Firefox用はこちら

Chrome用はこちら

Edge用はこちら

拡張機能を追加する

今回はFirefoxに導入します。Window Resizerのページから「追加」します。

↑FirefoxのWindow Resizer取得ページ

↑「追加」ボタンでFirefoxに追加

Window Resizerが追加されました。よく使いそうな場合は「拡張機能をツールバーに追加する」にチェックを入れた状態で「OK」をしておくと、ツールバーに常にアイコンが表示されるようになるので、便利です。

↑「拡張機能をツールバーに追加する」にチェックされた状態で「OK」

使ってみる

デフォルトサイズがたくさんあるので、お好きなものをクリックするとウィンドウが縮みます！

↑Window Resizerのサイズ選択ポップ

ほぼ正確なサイズでウィンドウが縮小されますので、例えば「1280×800」を選択すると、小さなノートパソコンで閲覧するのとほぼ同じ見た目を確認することができます。

↑サイズを選択すると、そのサイズにウィンドウが縮小される

カスタマイズする

サイズがたくさん用意されていますが、不要なものは各サイズの左上の「×」をクリックして削除することができます。たくさんありすぎても選ぶのに時間がかかるので、使わないサイズのものは整理しておくと使いやすくなります。

そして、もちろんお好きなサイズを追加することもできます。
Window Resizerのポップの左上にある「＋」をクリックします。

↑サイズ追加ボタン

すると、縮小するウィンドウの位置とサイズを設定する画面になります。下記のように設定します。

↑ウィンドウの位置とサイズの設定画面

試しに「Top：40、Left：40、Width：1366、height：768」と入力して保存すると、Window Resizerのポップ内にそのサイズが追加されます。これをクリックすると「スクリーンの上端から40px、左端から40pxの位置に、横幅1366px×高さ768pxのウィンドウがある」状態にすることができます。

↑設定するとサイズが追加される

小さな画面も想定してデザイン・コーディングを行おう

あらゆるサイズの画面で快適に閲覧できるサイトを構築するのが当たり前となった現在、こうした便利な機能を使ってさまざまなサイトを閲覧して調整方法の参考にし、この機能でチェックをしながら良いものを作っていきましょう。