ホームページをどんなデザインにするか、悩みますよね。

今回はウェブデザインの中でもホームページ制作初心者、というか社長さんや店舗オーナーさんでもできる、ワイヤーフレームの描き方について書いていきます。

ワイヤーフレームとは?

百聞は一見にしかず。まずはこちらをご覧ください。

View this post on Instagram

A post shared by ソライト (@solight)

ワイヤーフレームとは、線だけで描かれたウェブサイトの構造図です。Wire(線)Frame(枠)という名の通りです。

上の絵をちょっと説明すると、

こんな感じです。

Excelや専用のデザインソフトで綺麗に描かなくても、ホワイトボードとマーカーペン、もしくは紙とエンピツがあれば、誰でもすぐに作れるのがワイヤーフレームの良いところです。

もうちょっと具体的にしてみましょう。例として「オンラインショップ」で考えてみます。

View this post on Instagram

A post shared by ソライト (@solight)

上で書いたように、ロゴ、メニュー、コピーライトを配置しました。

その上で肝心のコンテンツ部に何を置こう?となるわけですが、ここでは一旦「オンラインショップ」を想定しています。

商品がたくさんあるだろうということで、主力商品であるオススメ商品と、最新の商品を見せるエリアをざっくり描いてみました。

もう少し具体的にしてみると、

View this post on Instagram

A post shared by ソライト (@solight)

ホームページっぽくなってきましたね!

上段のメニューは、

中段のイチオシ商品エリアは、欲張りすぎもイチオシ感がなくなるので、3つまでにしてみよう。

下段の最新入荷アイテムエリアは、写真が小さくてもいいからたくさん出して目に触れさせたいということで、縦3列の横5行で15写真ほど出そう!

なんてイメージを起こしてみるとこうなる、というわけです。

こういった簡単なワイヤーフレームは、ホワイトボードとマーカーがあれば、誰でも始められます。

今日から始められます。絵が上手い下手は、ワイヤーフレームでは関係ありません。

だってただの線なんですから笑

気にせずに思うままにホームページのイメージを絵に書いて、それを制作会社やデザイナーさんに伝えていきましょう!

こういった簡単な絵でも、あるとないとでは出来上がるホームページには大きな差がつきますよ!

それではまた!

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください