レスポンシブ/フルイドレイアウトでサイトをワイヤフレーム化するには、どのようなテクニックを使用できますか？
レスポンシブまたは流動的なレイアウトのワイヤーフレームをどのように作成しますか？典型的なワイヤーフレーミング技術は静的であり、設計のスケーリング方法を示すのにはあまり適していません。レスポンシブ/流体設計の動的な性質を把握するために、どのようなテクニックが存在しますか？
考慮すべき具体的なポイントは、さまざまな種類のデバイスと解像度でのレイアウトの変更を示し、テキスト、画像、および構造が柔軟であるかどうか（およびどの制約内か）を示すことです。
あなたは本当にそのようなもののためのワイヤーフレームを作ることはできません。
作成しようとしているレイアウト/ UIの概念を示す最良の方法は、軽量のHTMLプロトタイプを使用することです。これにより、基本的なCSSを使用するだけで、リキッドレイアウトやさまざまな画面サイズの代替デザインなどの基本的なレスポンシブ機能を実装できます。 HTML/CSSに精通している場合は、さまざまなワイヤーフレームを作成した場合よりも時間がかかりません。その利点は、さまざまなデバイスでのレスポンシブデザインの効果を関係者に直接実証できることです（たとえば、デバイスのブラウザでHTMLプロトタイプにアクセスして、HTMLプロトタイプがどのように見えるかを確認するよう依頼します。
トリガーの幅が2つあるレスポンシブサイトを構築している場合（1つのバージョンのページは1028px、1つは700px、もう1つは320px）（もちろん、これらのトリガーポイント間の幅は柔軟です）ワイヤーフレームの2つのバージョンを使用することをお勧めします。通常どおりの詳細で、レイアウトブロックのみを含むものです。これにより、html/cssを使用せずにレイアウトの大きな変更をすばやくスケッチできます。この簡単な例のように： 
次の2つのリソースがあなたに前進をもたらすと思います。
Wireframe Magazineブログ は最近、レスポンシブレイアウトのグレーボックス処理を示す記事を掲載しました。
The Media Queries Webサイト は、現在取り組んでいる問題にインスピレーションを与えるメディアクエリベースのレイアウト変更の例を紹介しています。
私は通常3つの方法のうちの1つでワイヤーフレームを作成します
忠実度の低いフォトショップデザイン。それらをグレーと白のシンプルなラインとボタンにします。この場合、すべてのシナリオをモックアップする必要があります
balsamiq-ワイヤーフレームより高速かもしれませんが、同じ状況です。
HTMLモックアップ。 Bootstrap http://Twitter.github.com/bootstrap/ のようなものを使用して、液体コンテナを使用してシナリオをすばやくHTML化します。実際にさまざまなデバイスで使用します。時間/予算がある場合に最適です。実際にいくつかを手に入れれば、それほど遅くはありません。さまざまなHTMLプロトタイピングオプションがあります http://net.tutsplus.com/ tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework /
さまざまなメディアタイプについて、そこに少しロジックを配置する必要がある場合があります。
ワイヤーフレーム処理のステップのほかに、デザインがどのように動作するかを示す良い方法は、x軸に画面の幅、y軸にコンテンツの幅を持つ線形グラフを描くことです。このようにして、モバイルからデスクトップまでの各画面幅にどのようなコンテンツサイズを設定するかを示したり、流動的なデザインを計画するときに斜めの線を引くことさえできます。
これは、私が取り組んだレスポンシブサイトで多くの助けとなりました。
私の最後のフリーランスクライアントでは、 Skeleton Framework を使用して、ビューポートのメディアクエリを調べました。これらのサイズを使用して（非常に明確に定義されています。モバイル、モバイルランドスケープ、タブレット、ワイドスクリーンなど）、いくつかの異なるページのモックを作成しました。数個以上をワイヤーフレーム化するのは費用対効果が高くありません。コンテンツが折りたたまれたときにコンテンツがどのように反応するかを彼らに知らせるだけで十分です。
私はアレクサンダーの講演に出席しました。私の要約と見解：画面サイズに応じて拡大する応答性の高いWebサイトを開発することは、個別のWebサイトよりもはるかに費用対効果が高くなります。レスポンシブワイヤーフレームを作成することにも意味があります。
レスポンシブワイヤーフレームを作成する方法：
1/コード化（HTML/CSS）：私の経験から、専門家でない場合は非常に時間がかかる可能性があります。
2/ポストイット：初期のプロトタイプに最適ですが、静かでラフで、柔軟性がないと思います。
3/Dreamweaver：Alexanderは、レスポンシブなワイヤーフレームを作成できると述べました。まだ試していません。
Axureをまだ試していない場合は、ぜひ試してみてください。ただし、デバイスやサイズが異なる場合は、個別のレイアウトを設計する必要があります。トニーが言った線に沿った何か。ただし、シナリオの詳細については、フォントサイズ、画像、その他の要素がどのように変更され、サイズが変更されるかを説明して示す必要があります。
JIM（Just in Mind）を試してみてください。デバイス全体の流動的なレイアウトのアイデアが得られます。
最近、レスポンシブな Foundation UIグリッドワーク を使用して、インタラクティブなクリックスループロトタイプを構築することに成功しました。
これには、ラピッドプロトタイピングに役立つ、箱から出したばかりのシンプルなスタイルがたくさん含まれています。幸運を！