Firefoxのレスポンシブデザインビューが便利ですよ

今日は制作者だけじゃなくてサイトの制作を依頼する方にもおすすめのツールとしてFirefoxのレスポンシブデザインビューを紹介します。
Firefoxのレスポンシブデザインビューは最新版のFirefoxにアップデートするとついてきます。
制作者にはもちろんおすすめで、めちゃ便利なので開発スピードアップするのは間違いないのですが僕としてはこのツールは制作者だけじゃなくてWeb担当者にこそ使ってもらいたいツールだと思うんです。
というのも今はブラウザの幅を手で切り替えたりして変わっていく様子を見て満足しちゃってる人もいるんではないかなと思うんですよね。
でもレスポンシブデザインは動きの変化を楽しむ事が目的ではなくて、デバイスごとに最適な表示・ユーザーにとって使いやすい、見やすい環境を実現する為の手段な訳なので。
なので変化していく部分とかは僕は割とどうでもよくて各デバイス毎にどういう表示をされているのかを切り替えてくれるツールの方がよけいな情報がないので客観的な判断ができると思うんです。
Firefoxであればタブでの切り替えもしやすいので解像度毎にタブを作っておいて比較をしながら本当にこの構成でよいのかの判断もしやすいと思うんです。
という訳でまずはFirefoxのアップデートを行って最新版にしましょう。
まだインストールしていない人はインストールしましょう。
そして実際にさわってみて自分のサイトを見てみましょう。きっとこれまで見えなかった問題点が見えてくると思います。
ではサンプルとして実際の画面を。
起動はツール→Web開発→レスポンシブデザインビューから行います。

起動後の画面がこんな感じ。ブラウザの表示域に黒い枠と解像度を切り替えるメニューが表示されます。

このブログで実際にどう変化するのかをやってみます。
解像度をPC版でわりとよく使われている横幅1280にします。

次にiPhoneの古い世代の解像度横幅320にします。

こうやって比べるとPCとモバイルと表示させた時にもっとここの部分はこうした方がいいんじゃないのか？という意見が出しやすいと思います。
打ち合わせの時とかにも便利だと思います。
という事でまずは触ってみる事をおすすめします。