ホームページをどんなデザインにするか、悩みますよね。
今回はウェブデザインの中でもホームページ制作初心者、というか社長さんや店舗オーナーさんでもできる、ワイヤーフレームの描き方について書いていきます。
ワイヤーフレームとは？
百聞は一見にしかず。まずはこちらをご覧ください。
ワイヤーフレームとは、線だけで描かれたウェブサイトの構造図です。Wire（線）Frame（枠）という名の通りです。
上の絵をちょっと説明すると、
- ヘッダーは、ホームページの最上部にあるロゴやメニューがよく置かれるところ
- コンテンツは、その名の通り「内容」であり、ページで一番メインのところ
- フッターは、会社の著作権表示（コピーライト）などがよく置かれるところ
こんな感じです。
Excelや専用のデザインソフトで綺麗に描かなくても、ホワイトボードとマーカーペン、もしくは紙とエンピツがあれば、誰でもすぐに作れるのがワイヤーフレームの良いところです。
もうちょっと具体的にしてみましょう。例として「オンラインショップ」で考えてみます。
上で書いたように、ロゴ、メニュー、コピーライトを配置しました。
その上で肝心のコンテンツ部に何を置こう？となるわけですが、ここでは一旦「オンラインショップ」を想定しています。
商品がたくさんあるだろうということで、主力商品であるオススメ商品と、最新の商品を見せるエリアをざっくり描いてみました。
もう少し具体的にしてみると、
ホームページっぽくなってきましたね！
上段のメニューは、
- トップページに戻るためのリンクとして「ホーム」が必要そう
- あと２つくらい入るだろうけどここでは一旦空けておこう
- あと「会社」についてもページがいるかな
中段のイチオシ商品エリアは、欲張りすぎもイチオシ感がなくなるので、３つまでにしてみよう。
下段の最新入荷アイテムエリアは、写真が小さくてもいいからたくさん出して目に触れさせたいということで、縦３列の横５行で１５写真ほど出そう！
なんてイメージを起こしてみるとこうなる、というわけです。
こういった簡単なワイヤーフレームは、ホワイトボードとマーカーがあれば、誰でも始められます。
今日から始められます。絵が上手い下手は、ワイヤーフレームでは関係ありません。
だってただの線なんですから笑
気にせずに思うままにホームページのイメージを絵に書いて、それを制作会社やデザイナーさんに伝えていきましょう！
こういった簡単な絵でも、あるとないとでは出来上がるホームページには大きな差がつきますよ！
それではまた！
コメント