<第20回>ちょっと寄り道：ワイヤーフレームを作ってみよう

さて、今日も引き続きちょっと寄り道シリーズです。ホームページの目的が固まり、どういったコンテンツを載せたいかが大体まとまったら、レイアウトを考える際に、まずは「ワイヤーフレーム」というものを作成することをおススメします。

ワイヤーフレームとは、ホームページ内のどこに何のコンテンツを配置するかのレイアウトを簡単に書き表す手法です。 

 なぜわざわざこんなものを作るのかと思われるかもしれませんが、これをやっておくかどうかで、手戻りを大幅に減らすことができます。重要な書類を書く際に、まずは鉛筆で下書きをして、それからボールペン等で清書するといった経験をお持ちの方もいらっしゃるかもしれませんが、イメージはそれに近いです。

これまでにも説明した通り、デザインはコストに対する影響が大きくなっています。その為、何度も何度も清書したデザインを作り直すとコストがどんどん膨らむ為、まずは簡易的にでも良いので、大枠のイメージ合わせをした上で、デザインを練り込んでいく方が結果的にトータルでの作業時間やコストを抑えられることが多いです。

また、実際に作成が始まった後に「やっぱりここは～にしたい」と思っても、修正に追加費用が発生したり、場合によっては応じてもらえない場合もあります。ではこんな大事なワイヤーフレームの作成作業。業者が作るものじゃないの？と思われるかもしれませんが、基本的にはその通りです。

ただ、せっかく自身のホームページを作るのであれば、考えをまとめる中で作ってみても良いと思います。きれいに作る必要も、正しいやり方などを調べる必要もありません。（全くイメージが湧かないようなら、調べてもらってもOKです）

ワイヤーフレームの作り方

大まかな流れは下記です。

1. まずは他社のホームページを見るなどして、自身のホームページのレイアウトを想像しましょう。
2. 自身のホームページに載せたいコンテンツを箇条書きで書き出します。
3. 次にパソコンが苦手な方はコピー用紙に手書きで良いので、どこに何を置きたいかを記載していきましょう。

この時、無理に細かく書く必要はありません。上の写真にもあるように、四角で枠を作り、その中にどういったことを書きたいのかを箇条書きで書きましょう。

例えばトップページの上の方に画像をスライドショーで表示したいと思った場合は、四角の枠を一つ作り、「トップページのメイン画像。3枚くらいをスライドで。

• 社屋
• 社員の集合写真
• 商品一覧」

というようなメモ書き程度でも良いので、とりあえずその時点でのイメージを書き出しておきましょう。繰り返しますが、あまり難しく考える必要も、手間をかけてきれいに作る必要もありません。あくまでメモ書きレベルで構いませんので、まずはイメージを形にしてみると、業者との打合せがより短時間で効果的なものになると思います。

副産物として、「おっこの人結構考えてるな、分かっている人かも」と思わせられれば、最後の価格交渉などで優位に立てるかもしれません(笑)