資料：Wireframe Showcase
Web サイトのワイヤーフレームと完成したものを比較できるサービスです。更新頻度は多くないようですが、月に２回程度、新しいサイトの情報が追加されています。
ワイヤーフレームといっても、手書きのものもあればイメージデータのものもあります。また、完成したサイトにどれくらい近いか、という点においても、ばらつきがあることが分かります。
資料：I ♥ wireframes
ワイヤーフレームのインスピレーションとコレクションのための究極の情報集、という和訳になるのでしょうか？ たくさんのワイヤーフレームが記録されています。iPhone サイトや iPad サイトのものもあり、非常に参考になります。
また、ワイヤーフレームだけでなく、ワイヤーフレームを作成するために使うことができるイメージデータ集や、ツールなどの紹介も行っています。「ワイヤーフレームをテーマにしたクリップサイト」といった感じでしょうか。
資料：Wireframes Magazine
I ♥ wireframes と同じく、ワイヤーフレームに関する情報を取り扱っているブログです。英語ですが、何となく意味は分かるんじゃないかと思います。サイト全体のイメージも、手書きっぽくて好きですw
内容は雑多で、ソフトウェアやサービスの紹介から、ワイヤーフレーム向けのツールの紹介まで行っています。記事の更新頻度は高くないので、RSS に追加するのも良いと思います。
資料：25 Examples of Wireframes and Mockups Sketches
by inspirationfeed.com
25の手書きのワイヤーフレームがサンプルとして掲載されています。
当たり前ですが、単なる「ワイヤーフレーム」ではなくて、ページの動きやユーザーの操作感が分かるような資料になっているようです。プレゼンテーションの方法まで想像しながら見ると面白いかもしれません。
ツール：Wirify
かちびと.net さんでも紹介されていますが、今見ている Web サイトを抽象化してワイヤーフレームのような状態にするブックマークレットです。Safari や Google Chrome であれば、ドラッグ＆ドロップでブックマークバーに追加して使えます。簡単に使える＋操作がシンプルなのでとても便利です。
具体的な用途としては、ビジュアル表現やディティールを取り除いた状態を見たい場合、つまり「情報や画像のレイアウト」を確認／分析したい場合に便利です。似ている系統の Web サイトを抽象化して、なぜそのような配置なのか、を考えると面白いかもしれません。
ツール：Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
by Webクリエイターボックス
超有名ブログのエントリなので、イマサラな感じもしますが……。とても分かりやすいので掲載させていただきました。実際にワイヤーフレームを制作する際に参考になるサービスやサイトが、詳しく・丁寧に解説されています。下記のサイトが紹介されています。
ツール：iPhone Mockup
iPhone 向けのワイヤーフレーム作成ツールです。URL を送信するだけで共有できるみたいです。非常にミニマルで便利なツールです。
ただ、iPhone のみに特化したワイヤーフレームって、今時需要あるのかな？ というのが正直な疑問です。Android は持ってないので、どの程度 iPhone と異なるのかわかりません。
ただ、非常に操作しやすいツールなので、iPhone 用のサイトのレイアウトをイメージしたり、クライアントと話しながら要素を並べたり、といったことはしやすいように思います。
線のみと手書き風とが選べるみたいです。
アイディア：Postit wireframe
by Flickr
ポストイットでワイヤーフレームを作ってみよう、というアイディアです。
I like using postits like this as it allows people to quickly become involved in the process and rearrange items on the page without the fear of making mistakes when drawing
訳：ポストイットを使えば、書き損じることを心配せずに、他の人を巻き込んだり要素を並べ替えることができるんだ。
考察：プロジェクトメンバーが幸せになれるワイヤーフレームの作り方
by livedoorブログ
日本語の記事です。livedoor の方が書いたもので、Web サービス向けの内容になっています。複数人でサイトを構築するときのワイヤーフレームの役割と、基本的な注意点が簡潔にまとめられているのではないでしょうか。
単純な Web 制作でも活かせる点が多くあると思います。
考察：Web Site Wireframes – Samples, Examples
by FatPurple
サイトマップとワイヤーフレームを含めた提案書全体のサンプルが見れます。英語ですが、ワイヤーフレームの作り方や用途についての考察も書かれているようです。
ワイヤーフレームのサンプルは数が多いですが、提案書全体が見れるようなサイトはなかなかないので、一度見てみる価値はあると思います。
まとめ
以上です。
私自身、ワイヤーフレームの作り方については試行錯誤を続けています。基本的には手書きで、クライアントさんと打ち合わせをしながら作っていくことが多い気もします。机に向かって一人で作業するときも、やっぱり手書きですね。
手書きにしている理由は、ソフトウェアの制約を受けない状態で作りたいからです。どうしてもスピードは落ちますが、デザイン力がまだまだ未熟なので、このような工夫をしています。個人的には、少しではありますが効果があると感じています。
参考になれば幸いです。
