memocarilog

レスポンシブデザインを作る時に便利だと思った、レイアウトの確認ツールと、レスポンシブデザインの参考になるサイトのメモです。

レスポンシブWebデザインを作る時にレイアウトの確認が大変だと感じましたが、少しでも負担を軽減する為に確認ツールを利用すると便利ですね。

Responsive Design Testing

5通りのデバイスサイズを一覧で確認できるサイトです。

使い方は、サイトの左上の部分に確認したいアドレスを入力しEnterを押すだけです。
1024 x 600 サイズから240 x 320 サイズまでを横並びでザーと確認できます。読み込むのに時間がかかるので、ある程度作り上げて中間確認的に使用しました。Jsも動きますので本番に近いイメージで確認できます。

ただ、実機でないと出てこない”意図しない表示”があるので、こういったツールだけで確認を終わらしてしまうと、思ってもみない事になっているかもしれませんね。(例：私です)

デザインの参考になるサイト

Media Queries

すごく有名だと思いますが、海外のレスポンシブWebデザインのギャラリーサイトです。きれいなデザインのサイトが沢山あるので参考になります。

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたアーカイブサイト

こちらは日本国内のレスポンシブWebデザインのアーカイブサイトです。日本語のサイトは実務的にとても参考になります。

Photoshop VIP ☞ CSS3のメディアクエリを利用したWebサイトデザイン30個まとめ+使い方

こちらの記事では解説付きでレスポンシブデザインサイトが紹介されています。メディアクエリの使い方、テンプレートなどの紹介もされていて参考になりました。