これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes

ブラウザ上で、さまざまなスクリーンの幅に合わせたレスポンシブ用のワイヤーフレームを作成できるオープンソースのオンラインツールを紹介します。

RWD Wireframes
RWD Wireframes -GitHub

使い方の前に、レスポンシブに対応している一番の売りから。
RWD Wireframesはレスポンシブ用のワイヤーフレームということで、配置した各エレメントをさまざまなデバイス用にサイズやレイアウトを変更して管理できます。

スマフォとタブレットのワイヤーフレーム

使い方は簡単で、ロゴ・ナビゲーション・コンテンツ・サイドバーなどの各エレメントをダブルクリックすると編集ができます。

編集モード

とりあえず、日本語に変更してみました。

日本語表示も文字化け無しです

各エレメントはドラッグ&ドロップで移動やサイズ変更が可能です。

サイドバー・コンテンツを移動

新しいエレメントを加える時は、上部の「New Elements」をクリックしドラッグして作成します。

新しいエレメントを追加

配置されている各エレメントは右の「Elements」でPhotoshopのレイヤーパネルのように確認できます。

エレメントの確認

最初に紹介した各デバイス用のワイヤーフレームを作成するには、上部バーを使用します。
まずは、480pxでスマフォ用の定義をします。

480pxでの表示

タブレット用の準備をします。
上部のバーの767pxをクリックし、背景を拡大させます。

767pxの準備

あとは、拡大したピンクの背景に合わせて、エレメントを配置します。

767pxでの表示

ビューポートのパターンは上部の「Edit Viewports」で変更できます。