Web担当者必見！ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選

ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。

ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。
プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。

そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。
ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。

参考：
新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方｜ferret

ワイヤーフレーム作成の注意ポイント9個

1. アイデア出しは個人でしっかりと行う

http://mindmap.jp/000093.html

アイデア出しは初めからチームメンバーとするのではなく、まずは個人で行ってみましょう。
個人でやるべき理由の一つは、ほかの人を交えると色々な話題になりまとまりにくいためです。
マインドマップを使えば芋づる式にアイデアを絞り出すことができるので、ぜひ活用してみてください。
　　

2. サイトマップ作成は競合サイトを参考にしてみる

http://miraiyanet.com/lecture/third/sitemap.html

ホームページはリンクをたどって移動しますが、慣れないうちは構成がイマイチわからなかったりするものです。
そこで、サイトマップを作成する時は、競合サイト、類似サイトを参考にしてみてください。
似たような業界、ジャンルの場合構成も似たり寄ったりの場合が多く、参考になります。
　　

3. 目指しているホームページデザイン、UIデザインを参考にすると早い

http://muuuuu.org/category/industry/technology

ワイヤーフレームをいざ作ろうと思った時、何も参考にするものがないよりも参考にするほうが作業がスムーズです。
他社のホームページで目指しているデザインに近い物があれば参考にしてみます。
　　

4. ワイヤーフレームの時点で上手くビジュアル化までもっていく

http://websae.net/wireframe-20150303/

ワイヤーフレーム作成では全体のレイアウトを考えますが、この時点でビジュアル化までもっていければその後のデザイン作業がスムーズに進みます。
　　

5. スマホ版・PC版のワイヤーフレーム作成はわけて考える

http://sokutaku.jp/column/2016/02/wireframe-2.php

近年ホームページといえばレスポンシブという位にスマホ対応が当たり前になっています。
しかし、ワイヤーフレームの時点でスマホ版、PC版を両方作ろうとするとコンテンツが足りなくなるなど問題が生じがちです。
ワイヤーフレームの段階では、PCとスマホは別物として作成しましょう。
　　

6. 外観確認時は、デザイン全体と詳細どちらも見れるようにする

http://miraiyanet.com/lecture/third/wireframe.html

ワイヤーフレーム作成が済み外観を確認する際には、ページをプリントアウトし、ホワイトボードに貼って、全体・詳細が両方確認できるようにします。
サイトマップの構成で貼付けるとわかりやすいです。
　　

7. チームで議論をする前に各自に意見を出してもらう

http://hatenanews.com/articles/201103/1679

全体を確認してもらったら、チームで話し出す前に、まずは各自に意見も出してもらう時間を設けましょう。
その際に、ポストイットにコメントを書いてもらい、ホワイトボードに貼付けてもらうと、その後の議論が進めやすくなります。
　　

8. 写真で撮影すれば簡単に議事録がとれる

http://blog2.tkp.co.jp/oyakudachi/2012/04/1264.html

議事録をわざわざとらずとも、会議後のホワイトボード全体を撮影すれば議事録がとれます。
必要があれば残しておきましょう。
　　

9. コーディング担当もブレストに参加するとスムーズに進む

https://someiyoshino.biz/service/html.php

ワイヤーフレーム作成時点ではコーディングは関係ないと思いがちですが、コーディングへとスムーズに移行するためにもコーディング担当もブレストに参加してみてください。