ウェブサイト制作でお客様やスタッフ感でサイトのイメージを共有するために絶対必要なワイヤーフレーム。なれないと書く事自体がかなりストレス。でも重要。
必要な要素がきちんと入っていることが大事だけど、何が必要かを考える解像度があってるかどうか。細かすぎても駄目だし、荒すぎてもダメ。
ワイヤーフレームの考え方
今すぐワイヤーの品質UP!ダメワイヤーフレームを改善する4つのポイント | BITA Blog – 株式会社ビットエー
考え方を学ぶのが一番大事。見た目はそのつぎ。
何でワイヤーフレームを書くのか
ワイヤーフレーム作成時に役立ちそうなサイトや記事のまとめ | バンクーバーのうぇぶ屋
よく見るツールがひと通りおさえてあるので、まずはこれを見て途方にくれるといい。
全部無料で試せる!厳選ワイヤーフレーム作成ツール10 | Find Job ! Startup
無料ツールもいっぱい。
でも日本語の扱いを考えると、 cacoo か power point に落ち着くはず。
ちょっと毛色が違うワイヤフレームテンプレート。単純なボックスモデルではなく、もうちょっと要素のイメージが伝わるものにした方がいいんじゃないかっていうアプローチ。手書きに近いニュアンスを伝えられるこういうがいい場面もある。
でもやっぱり手書きが一番いいんだよねぇ・・・修正が大変だけど。
Web Design Sketchbook – Web Design Sketchbook
こちらではワイヤーフレーム専用のスケッチブックも。印刷用のデータは無料ダウンロードできます。
いいものを見てモチベーションを上げる
あとはどんどん作例を見るとワイヤー書きたくなってくる。全部英語だけど、こんなふうに書きたいなぁと思わせてくれる作例がある。
30 Great Examples of Web Design Sketches | Designbeep
いい感じの30サイト。
Alexis Antonelli | User Experience Consulting | Activision.com
実績とワイヤーを並列で紹介。これはナイスアイデア。
I ♥ wireframes – The ultimate source of inspiration and collection of resources for wireframes
ワイヤーフレーム専門サイト2つ。日本のサイトもあって良さそうだけど、あんまり公開されてないのかなぁ。