今やサイト設計の際に必ずと言っていいほど考慮しなくてはならないレスポンシブWebデザイン。
実装する際には通常のPCサイトを制作するのに比べて
設計部分でいろいろと考慮しなくてはいけない部分が多くなりますが
そんなレスポンシブWebデザインのサイト設計の際に役立つWebサイトを2つほど紹介してみます。

This Is Responsive.


This Is Responsive | Tips, Resources and Patterns for Responsive Web Design

レスポンシブWebデザインを設計する上での
ナビゲーション・フォーム関連・画像配置などを踏まえたレイアウトパターンから
各種リソース集などの役立つ情報やツールも紹介しているサイトです。

メニューは
—————————–
・Patterns
・Resources
・News
—————————–
と分かれており、「Patterns」のコンテンツではレスポンシブWebデザインのパターンとして
複数カラムに分かれたレイアウト設計から、表組み、ナビゲーション関連、
画像配置、動画設置、フォーム関連、カルーセル、アコーディオンなどなど
あらゆる種類のレスポンシブ設計方法を確認することが出来ます。

レスポンシブWebデザインで設計する際には、
ここのパターンを確認すれば、だいたいの設置方法は見つかるのではないかと
感じてしまうほど豊富に用意されています。

続いて、レスポンシブWebデザインのチェックツール。

Responsivator


Responsivator

レスポンシブWebデザインで構築したサイトを
複数の画面サイズ表示でのレイアウト状況を
一度に確認することが出来るサービスです。

サイト上部に設置されている入力フォームに
確認するサイトのURLを入れることで
———————————————
320 × 480 Phone (portrait)
480 × 320 Phone (landscape)
480 × 800 Small Tablet (portrait)
800 × 480 Small Tablet (landscape)
768 × 1024 Large Tablet (portrait)
1024 × 768 Large Tablet (landscape)
1280 × 800 Desktop
———————————————
これらの画面サイズでのレイアウトパターンを
一画面で確認することが出来ます。

ブラウザのウィンドウサイズも変えることなく
各画面サイズでの表示を一度に確認できるので
とても便利に活用できそうです。

以上、レスポンシブWebデザインでサイトを構築する際に
便利に活用できそうなWebサイトツール2種でした。

レスポンシブWebデザインでのサイト設計の際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

レスポンシブWebデザインを構築する際に役立つ「This Is Responsive.」&「RESPONSIVATOR」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner