iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス

この記事のURLとタイトルをコピーする

最近、レスポンシブウェブデザインのサイトも増えてきましたね。このブログもレスポンシブ対応していて、色んなデバイスで閲覧できるようになっています。

ただ、制作会社のディレクターとしては、作ったレスポンシブのページをデバイス確認するのが非常に面倒なのです。

PCのウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは “どのデバイスで、どんな風に見えているか” が分からない。サイズ感が掴みにくいのです。

かと言って、検証機を5台も6台も並べて確認するのは非常に時間がかかってしまいます。

そこで私が利用しているのが「Responsive Checker」というウェブサービス。

URLを入力するだけで、擬似的に様々なデバイスでサイトを確認できます。また、任意のサイズに変更することもできるので、使い勝手も良い。オススメのウェブサービスです。

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス

レスポンシブなサイトを一発確認

冒頭でお話しした通り、レスポンシブウェブデザインで設計されているサイトを確認するのに超便利なウェブサービスをご紹介します。

その名も「Responsive Checker」。

アクセスをすると、真っ白なiPhoneのデザインが表示されます。左上に「URLをご入力ください」とあるので、試しに当ブログのURLを入れてみます。

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス 1

すると、iPhoneの中でページが表示されました。ページをスクロールしていくと、様々なデバイスでの見え方を確認できます。ミニタブレットもタブレットも、これ1つでOKという便利さ。

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス 2

左のナビゲーションに、対応しているデバイスサイズが表示されています。これを選択すれば、ページ内リンクによって、そのデバイスでの見え方が確認できます。

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス 3

各デバイスに表示されたページは、もちろん普通に操作できます。クリックやスクロールもでき、ページの遷移も可能です。

また、「確認したいデバイスがない!」という方は「手動サイズ調整」をしましょうこれを使えば、自分の好きなようにウインドウサイズを調整できます。

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス 4

もちろん、それぞれ実機で確認する方が良いに決まっています。ですが、ちょっとした確認のためだけに検証機を持ち出すのは、非常に手間がかかります。

「とりあえずサクッと見てみたいんだ」って時に非常に便利なウェブサービス。ぜひ利用してみてください。

あとがき

この「Responsive Checker」のもう一つの強みは、ウェブサービスだということ。

アプリケーションだと「Windowsで使えない!」なんて問題が出てきます。ですがウェブサービスであれば、そんな心配も要りませんからね。

これからまた新しいiPhoneが出てきたら、またレスポンシブ対応ページの確認が大変になります。ぜひこうしたサービスを使って “楽” をしましょう。

それでは、今日はこの辺りで。

今日も来てくれて、ありがとうございます!

記事への感想や質問Twitterでいただけると喜びます。返信します。フォローはしなくてもいいけど、してくれたらもっと嬉しいです!

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。 管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。 各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする