最低限知っておきたい「ワイヤーフレーム」の目的と作り方5段階まとめ

要素の抜け漏れや機能の過不足がないように画面設計を可視化するワイヤーフレームを作ってみよう
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

サイトを制作する時にディレクターがワイヤーフレームを作ることが多いかと思います。
要素の抜け漏れや機能の過不足がないように画面設計を可視化する事が目的です。
これによりサイト全体の設計が関係者全体で事前に共有できるようになり、ゴールがぶれなくなります。
今回は、ワイヤーフレームの作り方について、カフェのサイトを例に5段階で順を追って、考えてみたいと思います。

#1 最低限あるべき構成要素を洗い出す

ワイヤーフレームを作成する前に以下の2点を考えてみましょう。

1:ページのゴール

WEBサイトはスクロールしていけば無限に要素を配置させることが可能ですが、目標が定まらなくなりユーザーが迷子になってしまいます。
これを回避するためにも、1つのページには1つの目的しか訴求しないことが基本になります。
この訴求点を明確にし、ゴールを定めましょう。

2:ページに必要な要素

1にもとづきページには何が必要なのかを確認します。
「店舗概要」であれば、所在地や席数などでしょうし、「メニュー」であれば、メニュー一覧やそれぞれの写真が必要になるでしょう。

#2 大枠の要素を書き出す

下記の5点はどんなサイトでもある大枠の要素だと思います。

  • ロゴ
  • ヘッダー
  • ナビゲーション
  • ボディ
  • フッター

これをワイヤーフレームに落としてみると下記のようになります。
http://skan.in/wp-content/uploads/2014/10/wireframe1.jpg

サイトの全体感がイメージできてきました。
ここでもナビゲーションは上部なのか、サイドにするのかといった議論が生じるかもしれません。
こういった議論をするためにもワイヤーフレームが必要なことがわかります。

なお、ご覧いただいてもわかるように、ワイヤーフレームはモノクロでデザイン要素を抜くことが標準的となっています。
色やデザインを入れてしまうと、人はそちらにばかり目がいってしまい、本来の目的であるサイト設計への観点が疎かになってしまうからです。

やってはいけないこと

  • 色をつける

やるべきこと

  • ゴールの明確化
  • 要素の洗い出し
  • 順位付け

下記はhttp://skan.in/2014/10/09/howto-make-wireframe/ で。
#3 要素ごとに詳細を掘り下げ
#4 要素に優先順位を付け
#5 色をつけてみる

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

有料検索エンジン登録
検索エンジンに対して料金を支払って、検索結果ページに反映させること。 リスティ ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]