ワイヤーフレームを作ってみよう！設計図をイメージ

前回は「ワイヤーフレーム」とは何か、について谷宜樹が解説しました。
今回は、具体的にどうやって作成していくかお話ししていきます。
作ってみたいWEBデザインがある人は、ぜひ一緒にワイヤーフレームを作成してみてくださいね。

■「サイトマップ」を作ろう！全体像をイメージ

いきなりページ内のテキスト・画像の位置を決めようとしても上手くいきません。
まずは、どのようなものが必要になるかイメージしてみましょう。
例えば、企業説明のページを作る場合は、何が必要でしょうか。
企業のロゴ、本社の画像、事業内容が分かるテキスト・・・他にもたくさんの要素があります。
ホームページであれば、トップページの他に複数の子ページを作ることが多いですよね。
どのページに何を表示するか、全体像を把握する「サイトマップ」を作りましょう。
サイトマップは、エクセルで作成するのが谷宜樹のおすすめです。
トップページから子ページまでどのようにつながっていくか、1ページずつ書き表してみてください。

■トップページはワイヤーフレームが必須！あとは臨機応変に

サイトに必要なページが出揃ったら、どのページにワイヤーフレームを作るか決めましょう。
トップページはサイトの顔なので、必ずワイヤーフレームを作成する必要があります。
しかし、子ページの場合は画像とテキストのみの簡単な配置になっている場合もあるので、絶対に作らなくてはいけないというわけではありません。
サイトの中で重要だと考えられるページのみ、ワイヤーフレームを作っても良いでしょう。

■レイアウトを決めよう！アイディアはメモしておく

ワイヤーフレーム化するものが決まったら、レイアウトを考えながら作成していきます。
レイアウトには列状になっているもの、タイル状になっているものがあり、それぞれイメージが異なります。
どれを選べば良いか、また後日谷宜樹が解説していきますね。
自由に配置しても良いですが、まずは代表的なレイアウトから選ぶのがおすすめです。
テキストや画像の位置とともに、
「ここはこの色を使う」
「○○という内容をポイントとして表示する」
というメモも入力しておくと便利です。

■効果的なコンテンツに仕上げる

テキストと画像を貼り付けるだけでなく、ヘッダー・フッターを印象的にしたり、「グローバルナビゲーション」というメニューを表示させたりすると魅力的なページになります。
内容によって、ヘッダーに入力するべきもの、メニューバーに取り入れるべきものがあるので、よく考えてみましょう。
詳しい方法については、また後日解説していきます。

ワイヤーフレームが完成したら、それをもとにデザインカンプを作成してみてください。
デザインカンプを作っていてつまづいたら、またワイヤーフレームを見直すと忘れていたことや新たなアイディアに気付けるでしょう。