構築のスピードとクオリティをあげる、本気のワイヤーフレームの書き方

要素を洗い出して、書き出す。

まずは、サイトの特長や企画特性に合わせて、各サイトの要素を洗い出します。コンテンツマップとは別に考える、いわゆる「パーツ」の部分も含まれるので、かなり量は膨大になりますが、しっかりやります。

んで、かならず「誰が読んでも何の事を言っているのかわかる一般用語で名称をつけます。」

例1:ECサイトの場合
・ロゴ
・電話番号
・SSLについての注釈
・利用ガイド
・検索窓
・買い物かご
・サジェストエリア
・商品画像
・カテゴリーリスト
・TOPイメージ  etc・・・

コンテンツマップを作成し、各コンテンツにも優先度をつける。

上記の要素リストとは別に、コンテンツマップも作成したほうがいいです。

要素リストとは異なり、おおざっぱに言うとサイトの中にページとして存在させたい内容を洗い出します。

洗い出し終わったら、その内容を優先順位順に並び替え、一緒にできそうなところは一緒にして、分けた方がよさそうなところは分けて・・・といった調整をザックリ行ってしまいます。

コンテンツに優先度をつけたコンテンツマップのサンプル
パワポファイルをダウンロードして見る。


とりあえずワイヤー案を手で書いてみる。

上記まで完了すると、だいぶ頭の中身が整理されて、「何が重要で何が重要でないのか?その根拠はなにか?」くらいは余裕でしゃべれるようになっているはず。

ここまで来たら後一歩です。とにかくその頭の中身を共有できる形に変えて、デザイナーなりクライアントなりと共有していきます。

んで、まずはきったなくてもOKなので、手書きでワイヤー案をまとめてしまいます。

右の画像がナカムラの書いた手書きワイヤー案。
なにこれひどい・・・w


パワポで清書してみる。

別にソフトは何でもいいのですが、僕的にはクライアントとも共有しやすいパワーポイントが大のお気に入りです。

ページ設定は、35×65くらいで、ベースとなるサイトイメージを貼り付けた状態で作ることが多いです。

フォントサイズなんかも実際のサイトとそろえるように注意します。


可能な限り原稿も入れ込んで、テンプレートパターン、および想定する全てのレイアウトパターンをワイヤー化

TOPページ、一覧ページ(カテゴリーパターンがある場合その全て)、動的生成ページ、静的に作る独自レイアウトページ、検索結果、特殊な機能を持っているページなどなど、全てのレイアウトパターンを、可能な限り書き出して、その全てのページのワイヤー化を行います。

正直、ここからいきなり手をつけてしまうディレクターさんが多く、そのせいで要素やコンテンツごとの洗い出しが悪くなり、「え?何このページ?クラス新しくつくらなきゃじゃん!」と悲しい叫びを上げるデザイナーさんが多いような気がします。

ここでコンテンツの洗い出しをミスったら、それはディレクターの責任。 ちゃんと抜けなく洗い出せるように、上述の要素リスト、およびコンテンツマップ、そして手書き段階での共有をしっかりしておきましょう。

実際のECサイトのワイヤーフレームサンプル
パワポファイルをダウンロードして見る。