on:2013年3月18日sponsorsブラウザ上で、さまざまなスクリーンの幅に合わせたレスポンシブ用のワイヤーフレームを作成できるオープンソースのオンラインツールを紹介します。-GitHub使い方の前に、レスポンシブに対応している一番の売りから。Wireframesはレスポンシブ用のワイヤーフレームということで、配置した各エレメントをさまざまなデバイス用にサイズやレイアウトを変更して管理できます。スマフォとタブレットのワイヤーフレーム使い方は簡単で、ロゴ・ナビゲーション・コンテンツ・サイドバーなどの各エレメントをダブルクリックすると編集ができます。編集モードとりあえず、日本語に変更してみました。日本語表示も文字化け無しです各エレメントはドラッグ&ドロップで移動やサイズ変更が可能です。Elements」をクリックしドラッグして作成します。配置されている各エレメントは右の「Elements」でPhotoshopのレイヤーパネルのように確認できます。最初に紹介した各デバイス用のワイヤーフレームを作成するには、上部バーを使用します。480pxでスマフォ用の定義をします。480pxでの表示タブレット用の準備をします。上部のバーの767pxをクリックし、背景を拡大させます。767pxの準備あとは、拡大したピンクの背景に合わせて、エレメントを配置します。Viewports」で変更できます。