ワイヤーフレームは家の設計図
よくホームページは家に例えられます。家を立てるには設計図が必要です。同じようにホームページを作る時も設計図が必要なのですが、WordPressの手軽さが故に設計図なしで進める方が多いです。
自分で好きに作るには特に設計図なんてなくてもいいのですが、製作を請け負う場合にはワイヤーフレームから作ります。お客さんに見せる必要はある時とない時があありますが、内側の作業としては作る事が多いです。
ワイヤーフレームと言うと堅苦しいのですが下書きです。できれば設計図のように細かくしていく方がいいです。ざっとした設計図でも犬小屋は作れますが、一軒家は難しいです。それと同じ感じで大丈夫です。
ワイヤーフレームはいわば、「ホームページでの間取り図」の役割ですね。
チームで仕事をする際にはもちろんの事、一人で全てをこなす方にも大事です。
情報整理としてのワイヤーフレーム
情報を整理する上でもワイヤーフレームは役に立ちます。
コンテンツをどんな順番で配置するのか、サイトマップを作られる方は多いのですが、サイトマップを下にして、ひとつひとつのページの動線や配置を決めて行きます。ここでも家と同じように、訪れた人がどんな動きをするのかを想定しながら考えて行くことが大事です。
情報整理の面から見ると単純に量の問題もあります。テキスト情報や画像情報がかなりの量になる事も多いので、ワイヤーフレームを活用すると非常に便利です。
はじめからきっちり決めようとしなくても大丈夫です。どこに何をどうするのかをざっと決めて行くだけでも十分な情報整理になります。
デザインの統一の為のワイヤーフレーム
ワイヤーフレームを作っておくとデザインを統一するのにも役に立ちます。ワイヤーフレームの後にデザインカンプを作成します。家の設計図を下にいきなり家を立てずに見た目がわかるデザインを用意するのとこちらも同じです。その際にワイヤーフレームがしっかり作られているとデザインの統一や無駄のない配置、バランスの良いデザインができます。動線や伝えたい事、どんなお客さん像なのかがはっきりしている事でデザインにも統一性がありターゲットが明確なデザインになって行くのです。
相談に来られる方はよくわからないからと相談に来られる方も多いです。いきなりデザインから入ると、ここはやっぱりこうしたいああしたいと気がつけばサイトがぐちゃぐちゃになりがちです。それはそれで個人的には面白いし好きなんですが、それはそれとして、ワイヤーフレームから入る事でお客さんの頭の中もまとまって行くし一緒にまとめてあげる事ができます。
メンバーと認識を合わせる為のワイヤーフレーム
ホームページ製作を請け負う時の最低人数は2人です。製作者とお客さんです。しかし、実際にはチームで製作する場面も少なくありません。
その時にワイヤーフレームがしっかりしていると認識を合わせる際に大きな効果をはっきします。しっかりしたワイヤーフレームを使う事もありますが、手書きのノートの切れ端のワイヤーフレームの時もあります。それでもない時比べ全然違います。チームで行っている場合ディレクター、デザインナー、コーダーなど実際に製作を行う人数が多い場合はしっかりしたワイヤーフレームを作って対応する方がスピードも早くなります。
いいアイデアを出す為のワイヤーフレーム
ここまでカチッとした雰囲気をワイヤーフレームに想像された方もいるかと思いますが、気軽にアイデアを出す為にもワイヤーフレームは使えます。
画像の配置や、問合せボタンがくっついて来るようにしたい！ファーストビューにいれる情報何にする？など楽しくアイデアを膨らませる為にも威力をはっきします。
第一歩はサイトマップ
ワイヤーフレームへの第一歩はサイトマップです。手書きでいいので、サイトの構造を決めます。サイトマップを作るとサイトボリュームがわかります。そして、必要なテキスト情報もわかります。さらに必要な画像もなんとなくわかってきます。
ワイヤーフレームを書く前に、作りたいホームページの全体像（サイトマップ）をしっかりと作りましょう。
ボリューム感がわかる事で、必要な資料があるかどうかなどお客さんに聞いておく事もできます。その上でワイヤーフレーム作りに発展して行くのです。
ワイヤーフレームを作るページを決める
理想は全てのページのワイヤーフレーム化なのですが、現実はそんなに時間が取れない案件が多いです。さらにイメージが違うとかやり直しになる場合に作業量が増えるし体力も奪われるので、ワイヤーフレームを作るページをピックアップして作る事が現実的であり本当の理想と言えます。
作って行く段階で必要なページはわかるのですが、困った時は以下の判断軸を参考にされるのもいいかと思います。
- レイアウトが変わるページ
- トップページ
トップページができた段階でチェックしておくと後がスムーズです。
ワイヤーフレームで一番大事な事
トップページのファーストビューが一番大事で極端な話それ以外のワイヤーフレームはファーストビューの精度をあげる為に考えると言っても過言ではありません。反論が大量に聞こえてきそうな話ですが、実際に私はそう考えます。
レイアウトを決めておく
レイアウトにも種類があります。スマホ全盛期のこの時代の基本形はワンカラムレイアウトです。上から下にブロックごとに別れたレイアウトが続く形です。
スマホファーストのレイアウトを基本にし、パソコンに合わせてサイドバーなどをつけて行くようなレイアウトを基本に、他のレイアウトの方法を考えるといいのではないでしょうか。