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

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

サイトのキャプチャ

RWD Wireframes
RWD Wireframes -GitHub

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

サイトのキャプチャ

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

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

サイトのキャプチャ

編集モード

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

新しいエレメントを追加

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

サイトのキャプチャ

エレメントの確認

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

サイトのキャプチャ

480pxでの表示

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

サイトのキャプチャ

767pxの準備

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

サイトのキャプチャ

767pxでの表示

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

top of page

©2017 coliss