motoyamayuki.com

Blog

手書きワイヤーフレームのすすめ(PDFファイル付き)

2011.03.08

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • このブログをはてなブックマークに追加

Contact

お仕事のご依頼、面白いことのお誘い、一度お話してみたい!などなど、完山祐毅へのお問い合わせは、下記のフォームよりお願いします。送信後、 info@motoyamayuki.com より確認のメールが届きます。
※多くのご相談・ご依頼をいただき誠にありがとうございます。当面のスケジュールが決まっているため、直近での作業が必要なご依頼についてはお請けいたしかねます。大変恐縮ではありますが、あらかじめご了承くださいませ。

お問い合わせフォーム
お名前
メールアドレス
メールアドレス(確認用)
内容
Treble