MENU
この記事を書いた人↓
プロフィール

このサイトの管理人「akasatina」です。
プロフィール:車、バイク好きなバブル世代のサラリーマンです。副収入を得ようと日々奮闘中!
職業:一般企業でWEB関連の仕事をやってます
好きな事:散歩、瞑想、読書、音楽鑑賞、車・バイク


無料で使えるレスポンシブデザインチェックツールのご紹介

レスポンシブデザインを確認する為の無料ツールが登場しましたので紹介します。スマホ、タブレット、ノートPC、等、閲覧する側のデバイスも多用化してきました。

折角、WebデザイナーがクールなWebサイトをデザインしても、デバイスによっては崩れてしまったり、表示が切れてしまったり。。。そんな時、あらゆるデバイスでどのように表示がされているのか?収まりはどうか?を簡単にチェック出来るツールが登場しました。

ツール名は「Responsivize」です。Win、Mac、Linux版がリリースされています。

ダウンロード先URLはコチラ↓

あわせて読みたい
Responsivize A must-have tool to develop responsive websites!

使い方は簡単!チェックしたいデバイスを選択し、対象のサイトURLを入力するだけでOK!

デバイス選択
デバイス選択画面

試しに私のサイトのTOPページをチェックしてみました。

レスポンシブ(スマホ)
スマホ
レスポンシブ(タブレット)
タブレット
レスポンシブ(ラップトップ)
ノートPC
レスポンシブ(カスタムサイズ)
カスタムサイズ

私の場合、blogの記事を作成する時はCF-SZ6というノートPCを使っています。このノートPCはパッと見、普通のモニタ比率のように感じますが、実際にはpixel数的に少し変則で1920×1200となっています。カスタムサイズで入力してみました。(上図右下)

※ブラウザの選択は出来ませんでした。

目次

まとめ

今回はレスポンシブデザインをチェックする為のツールを紹介しました。新たなWebサイトを作成した時や閲覧される方のデバイスがリプレースになった時等、Webデザイナーにとって強力なツールになりそうなのでオススメします。

また、昨今「BYOD」なんて言葉もよく聞くようになりましたよね。より、多種多様なデバイスで閲覧される機会が増えてきました。作り手側も色々と気を使わないといけない時代になりましたね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

はじめまして。アカサティナです。今はサラリーマンです。定年まで続けたいとは思っていません。色々第二の人生を考えてます。最近ブログを始めました。70年代生まれ、昭和の人です。ブログはWordPress、テーマは「Swell」を使ってます。

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次