Blog

皆さんワイヤーフレームは何で書かれてますか？
私は最近、手書きでだいたいの枠組みだけ仕上げています。
以前は「絵も字も苦手やし、最終的にＰＣで制作するんやから最初からＰＣの方が早い」と考えていました。実際、手書きでワイヤーフレーム書いてもなんやよ～分からん箱の集まりになるだけでイメージできなかったんです。

そんな時、たまたまＰＣの無いところでイメージが浮かんで、たまたま目の前にあった紙が方眼紙でちょっと書いてみたろかいなと思ったところ、何とまぁスラスラ書けたんですね。それからはサイトデザインする前にワイヤーフレームを紙に書いています。書くと言っても上の写真に載せているような段階までです。おおまかなデザインまで仕上げる方もいらっしゃいますが、私の場合は枠組みだけです。

ではイラストが苦手な私がなぜ手書きのワイヤーフレームなのか？

理由をいくつか挙げてみます。

• 複数パターンを書き出したときに見比べしやすい
• 写真や文字はそもそも入らないと割り切れるので配置に集中しやすい
• 丸っこさやとがってる感が出しやすい
• 頭で描いているイメージはマウスではなくペンの方が具現化しやすい

最も大きな理由は、やはり最後です。
マウスでＰＣのツールを操るより、やっぱり手で直接書き出した方がよりダイレクトにアウトプットできると思うんです。でも今まではそれが出来ませんでした。なぜか？絵と字が苦手だから(笑) というより苦手意識ですかね。

しかし、たった２つのツールを使うだけで、劇的に手書きワイヤーフレームが便利にそして見やすくなりました。そのツールとは

• グリッド付きの紙
• 鉛筆

これだけです。
グリッド付きの紙で書くと直線が書きやすいのと文字がまっすぐ書けます。これは手書きワイヤーフレームにとって非常に重要です。鉛筆は何度も書き直せることと、濃淡、太さが出せること。なるべく柔らかい芯がよいと思います（私は２Ｂを使っています）。

ただ、方眼紙ではwebサイトというイメージが視覚的に捉えにくいので、ブラウザの枠を印刷して使用しています。この中に書くだけで一気にwebデザインっぽくなる不思議(笑)

思いっきりsafariですね(笑) 理由はUIがシンプルで一番書きやすかったからってだけです。（ちなみにFF派）
状況に合わせてＡ４の用紙に1つか２つ印刷して書いていきます。

いつも印刷に使っているpdfを公開いたしますので、もし良ければお使いください。
A4にブラウザが１つのページと２つのページがあります。

Download → ワイヤーフレーム用紙（グリッド付きブラウザ）

今までワイヤーフレームもＰＣ上で書かれていた方。1度手書きで作ってみてください。
絵が苦手でも大丈夫！僕らにはグリッドがついている！