レスポンシブWebデザインを作る時のレイアウト確認ツールとデザイン参考サイト

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

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

レスポンシブWebデザイン確認ツール

Codebomber // Resizer

Codebomber // Resizer

作成中のサイトだけでなく、閲覧中の気になったサイトもサクッと様々なサイズで確認できるブックマークレットです。サイトで配布されているブックマークレットをブックマークバーにドラッグして使用します。

確認したいサイト(ローカルでも大丈夫です)を表示して、ブックマークをクリックして右上に現れるボタンのサイズをクリックするとそのサイズで表示してくれます。右上の”+-”か”Mobile”の所で横幅を変更できます。
右上の”+-”か”Mobile”の所で横幅を変更
例えば、Mobileサイズ(320px)に変更するとオーバーレイで下の画像のように表示してくれます。
オーバーレイで表示
“Reset”ボタンで元に戻り、”Reload”で再読み込みできます。
サクサク動くのでちょこちょことレイアウトを変更して確認する時に便利です。Jsは動きませんのでCSSの調整の確認に便利です。

Responsive Design Testing

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

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

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

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

Media Queries

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

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

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

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

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

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ seo Photoshop Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG API query_posts WP使い方 RSS iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能