はじめてのワイヤーフレーム

Web制作

初めまして。新入社員の山本です。

最近、はじめてワイヤーフレーム(以下WF)を書く機会がありました。

今までWFなんて書く機会がなかったので、手探り状態での作業でしたが、
自分なりに調べたり、周りの方々にアドバイスをいただいたりしながら、なんとか作り上げました。
諸事情により、使用はされないことになりましたが。

そこで今回、”WFという概念は知っているが、はじめてWFを作る人間”が悩むポイントから
それに対する個人的解決策(苦肉の策)、趣味、好きな食べ物まで、
赤裸々に生々しく明かしていこうかと思います。

では、さっそく見てみましょう!

苦悩1:何をすればいいかわからない

いきなり根本的な悩みですが、はじめての○○ってそういうものですよね。
そういうものでした。

さあWF書くぞ!って意気込んでみたのはいいものの、なかなか手が動かない。
何を使って書けばいいの!? ペイント!? ペイントなの!? 状態です。

とりあえずGoogleさんにて「ワイヤーフレーム」で検索。
検索すると、WFの概念的な説明から書き方、実例までひと通り出てきました。

ワイヤーフレーム:
ワイヤーフレーム (wire frame) とは、
3次元コンピュータグラフィックスにおけるレンダリング手法の1つ。
3次元オブジェクトを竹ひご細工のような線形状のみで表現する。

(引用:Wikipedia)

!?!?

ワイヤーフレーム:
Webページの大まかなコンテンツやレイアウトを示した構成図。
主にレイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に作成する。

(引用:コトバンク)

ということです。

要するに、Webページ制作の画面の設計図みたいなものということですね。まずWFをきって、それがデザインになりHTMLになり、、、と進めていくらしいです。

● まずはWFを書く上での心構え、意識するポイントを確認

ただ”WFの書き方”などの文章だけを見ていても、ボンヤリしたまま頭に入ってきません。
実例などと見比べながら、なんとなくでも納得してみましょう。
全てを意識する必要もありません。たぶん。はじめてだし。
ちなみに僕は、「ファーストビュー」と「導線」を意識する方針にしました。

我らがCMS比較.comのファーストビュー
ファーストビュー:一番初めに目に飛び込んでくる画面の範囲

● 実例の書式を真似ながら自分なりに手書きで書いてみた

自分だけかもしれませんが、自分で書いたWFってすごいチープに見えるんですよね。
もちろん構造や書き方が無茶苦茶になってしまっていることもあるんですが、
字とか線がヘタすぎることも相まって、瓦礫の山になってるんです。
しかし、ここで挫けずに書き続けましょう。一つでも完成させてしまえばこちらのものです。

さて、ヘタクソなりにWFを書き、自信をつけたところで、次のクエスチョンです。

苦悩2:手書き!? デジタル!?

ここからは自分の提案するWFを書いていくわけですが、
何を使って書くか悩みました。

先ほどのように手書きだと、手軽に書けて注釈なども簡単に追加できるが、
各パーツの配置の正確さに欠けるのと、書き直しがし辛い面がありました。
あと自分の字の下手さにヘコむ。

一方デジタルは、高速で正確な線が引け、ピクセル単位での位置合わせも可能。
なんか違うなと思った部分は簡単に配置変更可能!字もキレイ!
あれ!?めっちゃええやん!

しかし、簡単に色々なことが出来すぎて、デザイン要素まで踏み込んでしまうことも多々…
細かいところまで調節し出したらキリがない…等の悩みも。
結果、出来上がるペースがすごく遅くなりました。
これは完全に経験と精神力の問題です。

以上を踏まえたうえで、納得のいく構造になるまでは手書き、
いくつか候補が挙がってからデジタルに落とし込んでいこうという結論に。

ちなみにツールはFireworksを使用しました。
ペイントが一番好きなんですけどね。

字がクッソヘタ
マジで字が下手。線も下手。

さて、手書きでの量産体制に入ったわけですが、
自分の理想のサイトをイメージしながらWFを書き始めると、

(;`◉◞౪◟◉).。○(どこまで詳しく書いたらええんやろ…)

ってなります。なりました。
次はそんな感じのお悩み相談です。

趣味

趣味はマインスイーパーです。

苦悩3:どこからがデザイン要素?

先ほどの汚いWFを書いていたとき、
コンテンツの縁取りやアイコン、文言をどこまで詳しく書いていいのか不安でした。

ヘッダ・メニュー・コンテンツ・フッタのブロックのみにしてやろうかとも考えました。
それもアリだと思います。

protowf2
フッタでかくね?しかも字が下手。線も下手。

しかし、作るサイトの内容がある程度決まっているなら、文字にしちゃうべきかなと。
まずはロゴ。そしてグローバルナビゲーション。
サービス内容もある程度決まっているため、アイコンまで書いちゃってイメージしやすく。

protowf3
ちなみに上のWFとこちらの構造は別物です。

ただ、”意味もなく”コンテンツブロックの枠を丸くしてみたり、
遊び心を入れてみたりするのは良くなさそうです。

WFはあくまで要素と構造をわかりやすく共有するためのものなので、
デザインに繋がる部分は極力デザイナーさんに任せましょう。
どうしてもここはこうしたい!という場合は引き渡すときにそれを伝えましょう。

ってどこかに書いてありました。

僕は少しデザインに踏み込まないと作ってる物のイメージが出来ない、
イマジネーション浅男なんで苦労します…

なんか文章が長くなってきましたね。
あとは納得のいく手書きをデジタルにバシュッと落とすだけなので、
ツールの説明書を読んで頑張るしかないです。

注釈などは、デジタルで書いたワイヤーを印刷して、手で書き加えるのが楽です。

完成したら、ドヤ顔で提案しにいきましょう。

おまけ:システムを考慮したWF

自分の理想のWebサイトを追い求めても、
制作や運用が困難な仕様になると元も子もありません。

その辺も含めてCMSなどを意識した設計に

したかったんです。
ほんとは。

そんなこと考えてる余裕ありませんでした。
はじめてだし。

すんまへん!

まとめ

適当にまとめます。

● 未知のものは検索!

● マネして自分の手でカタチを作る!

● 自らを奮い立たせる

● 自分の想いを(WFに)ぶつける!

● ドヤ顔の練習( ・´ー・`)

● 好きな食べ物はカツ丼

きれいにまとまりましたね。

これからは、こういう初心者ならではの記事や、
ちゃんと技術的なことも書いていきたいと思います。
よろしくお願いします。