ワイヤーフレームとは、簡単に説明するとコンテンツやレイアウトなどを示した設計図や構成図のことを言い、これをしっかり作っておくことでデザインやコーディングといったその後の作業をスムーズに進めることができます。
単にワイヤーフレームと言っても「ツールやソフトを使用する」「基本的に全て手書きで行う」など人によって作り方は違うと思いますが、個人的にワイヤーフレーム作成時に便利だなと感じたツールや素材を紹介します。
また、専門ギャラリーや参考になるショーケースなども併せて紹介するので、あまりワイヤーフレームを見たことないという人はそちらも参考にしてみてください。

便利ツール

インストールしたりソフトへの拡張機能として使うものなどもありますが、今回はオンラインで使用するツールを紹介します。
中には使用する為には登録が必要なものや場合によっては有料になるツールもありますが、ほとんどフリーで作成も保存もできるものです。

Cacoo

Cacoo

ワイヤーフレームだけでなくサイトマップやマインドマップ、フローチャートといった図の作成にも適しています。
チームメンバーやクライアントと作成したものを共有したり、1つの図を複数人が同時に編集するリアルタイムコラボレーションの機能などもあります。
使用にはアカウント登録(無料)が必要で、PDFやPPTでのエクスポートやユーザー管理なども行いたい場合は有料プランを契約する必要があります。

Mockup Designer

Mockup Designer

シンプルな見た目で、操作も直感的にできるのが特徴なオンラインツールです。
画面左に各パーツがあるので、使いたいパーツをドラッグ&ドロップで移動させて使います。
テキストは日本語も問題なく使用でき、作成したものは画像でエクスポートも可能です。

wireframe.cc

wireframe.cc

こちらも同じくシンプルな見た目のツールですが機能が豊富で、フレームのサイズ変更も容易にできたり、左上にあるアイコンでiPhoneやiPad向けのフレームに変更することもできます。
また、右クリックやショートカットキーでコピー&ペーストといった機能を使用したりもでき(Winでのみ確認)、テキストは日本語も問題なく使用できます。
作成したものを保存するのも簡単で、画面上部にある「Save」ボタンを押すとURLが発行されるので、作成したものを共有するなども簡単に行えます。

Website wireframes: Mockingbird

Website wireframes: Mockingbird

検索ボックス、タブコンテンツ、ボタン、リストなど、フレーム作りに便利なパーツが多数揃っているのが特徴で、他にもマップ、グラフ、ソーシャルアイコンなども珍しいものも多数あります。
簡単な操作で使用可能で、日本語も問題なく使用できます。
作成したワイヤーフレームの保存やシェアは登録が必要になります。

Quick Introduction to Moqups · Moqups

Quick Introduction to Moqups · Moqups

こちらも先程と同様でフレーム作りに便利なパーツが多数揃っているのが特徴のツールですが、全体的にこちらのパーツの方が見栄えがいいものが多いです。
ショートカットキーなどの機能も使用でき(Winでのみ確認)、テキストは日本語も問題なく使用できます。
同じく作成したワイヤーフレームの保存やシェアは登録が必要になります。

テンプレート素材

基本的にワイヤーフレームは手書きでという人向けの素材で、形式はPDFで用意されています。
PCだけでなくiPhoneやiPadなどそれぞれのデバイス向けのものやグリッドラインがあるものなど種類も多くあり、テンプレートによってはA4やA3といったサイズも豊富に用意されています。

Wireframe Sketch Sheets

Wireframe Sketch Sheets

種類多数

Sneakpeekit

Sneakpeekit

種類多数

iPhone Application Sketch Template v1.3

iPhone Application Sketch Template v1.3

iPad Application Sketch Template v1

iPad Application Sketch Template v1

iPhone App Wireframe Template

iPhone App Wireframe Template

Wireframe template

Wireframe template

Concept7 sketching paper A4・A3

Concept7 sketching paper A4・A3

Paper Browser

Paper Browser

960 Grid System

960 Grid System

INTERFACE SKETCH

INTERFACE SKETCH

ワイヤーフレーム素材

PhotoshopやIllustratorなどのソフトを使って作成する人向きの素材です。
シンプルなものから手書き風なものまでいろいろあり、中には簡単なサイトであれば少し色付けなど手を加えればそのままデザインカンプとしても使用できるようなキットもあります。

Wireframe Kit

Wireframe Kit

The Ultimate Wireframe UI Kit

The Ultimate Wireframe UI Kit

Webpage Wireframe Stencil

Webpage Wireframe Stencil

Free Photoshop Wireframe Kit

Free Photoshop Wireframe Kit

Mini wireframing kit

Mini wireframing kit

Wireframe / Blueprint Kit

Wireframe / Blueprint Kit

iPad Sketch Elements AI

iPad Sketch Elements AI

WireKit

WireKit

iPhone Wireframe UI Kit

iPhone Wireframe UI Kit

配布終了したようです。

Sqetch, an Illustrator Wireframe Toolkit

Sqetch, an Illustrator Wireframe Toolkit

iOS 7 Wireframe Kit

iOS 7 Wireframe Kit

Sketching Android’s Gingerbread

Sketching Android’s Gingerbread

ブラウザフレーム素材

いらないと言えばいらないんですが、クライアントなどに見せる際により近い形で見せたいときなどに。
最近流行りのフラットデザインなものや通常のブラウザの見栄えをそのまま再現しているものなどあります。

Flat Chrome

Flat Chrome

Flat Firefox

Flat Firefox

Chrome UI Kit

Chrome UI Kit

chrome—960.gs

chrome—960.gs

7 Free Web Browser Frames

7 Free Web Browser Frames

Web Browser PSD’s

Web Browser PSD’s

フォント素材

ワイヤーフレーム向けに作成されたフォント素材です。
普段原稿がない時などに「テキストテキストテキスト」とか「この文章はダミーです」とかのように一時的なダミーを入れることがある人は多いと思いますが、それの代わりになるフォント素材です。
正直文字間だとか全体のバランスを考えるとダミーとはいえ特に日本語の場合は何か入れといたほうが良いと思いますが、発想が面白いと思ったので紹介します。

BLOKK fontBLOKK font

BLOKK fontBLOKK font

Redacted-Font

Redacted-Font

全4タイプ

参考になるショーケース

ワイヤーフレームばかりを集めた専門ギャラリーや参考になるショーケースをまとめたエントリーです。
ツールなどを使用してしっかり作られたものから全て手書きなものまで様々なタイプがあります。

その他 参考サイト

それぞれワイヤーフレームについてのエントリーで、関連するリソースをまとめたものやこのエントリーでは紹介していないツールの紹介などあります。
特に「Webクリエイターボックス」さんのエントリーでは「Cacoo」と「iPlotz」を実際に使用しての説明もあるので、これらのツールを使用しようと考えている場合は参考になるかと思います。