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

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

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

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 マルチサイト機能