プログラマーが周りを驚かせたワイヤーフレームの作り方

センスなんて入りません、そうBalsamiq Wireframes を使えばね！

Balsamiq Wireframes（以降Balsamiq） はWebやアプリのデザインの設計図を描くためのツール
直感的に使えるので学習なしですぐに始められる。

Balsamiq Wireframes for Desktop からダウンロード

サイトマップ作成

ヘッダーメニューからSiteMapを選択してドラッグアンドドロップするとサイトマップが作成される。

サイトマップをダブルクリックすると編集モードになり編集するとサイトマップが更新される。

ワイヤーフレーム作成

ヘッダーメニューからアイテムを選択してドラッグアンドドロップして組み立てる。
WEB、アプリに必要なアイテムは大体揃っている。
下のは一例、かなり直感的に作れるのでガンガントライアンドエラーする。

エクスポート

メニュー -> File -> ExportにてPNG、PDF形式でエクスポートできる。

その他

Balsamiq のデフォルトでは見た目がSketchっぽいレイアウトだが
Project Informationより見た目をスッキリしたものに変更できる。
個人的にはSketchの方が味があって好きだ。