自分で作るホームページ:ワイヤーフレームを描こう!

  • URLをコピーしました!

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

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

目次

ワイヤーフレームとは?

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

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

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

  • ヘッダーは、ホームページの最上部にあるロゴやメニューがよく置かれるところ
  • コンテンツは、その名の通り「内容」であり、ページで一番メインのところ
  • フッターは、会社の著作権表示(コピーライト)などがよく置かれるところ

こんな感じです。

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

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

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

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

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

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

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

上段のメニューは、

  • トップページに戻るためのリンクとして「ホーム」が必要そう
  • あと2つくらい入るだろうけどここでは一旦空けておこう
  • あと「会社」についてもページがいるかな

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

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

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

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

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

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

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

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

それではまた!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

塩川まことのアバター 塩川まこと デザイナー

デザイナー/プログラマー/クリエイター/コンサルタント。経験15年超のフリーランス。専門分野はUX、xR、人型インターフェース、キャラクターデザイン、アプリUI、空間UI、Web制作など。強みは現実×デジタル×仮想空間の融合や、ユーザー体験を軸とした改善提案。フルリモートワーク

コメント

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.

目次