ワイヤーフレーム～Webページをつくるための下書きあるいは設計図

ホームページ・Webサイトの制作において、必ずつくる設計図として「サイトマップ」を紹介しました。

今回は、「サイトマップ」とともによく使われる設計資料として「ワイヤーフレーム」を紹介します。

ワイヤーフレームは、下書き

絵や図を描くときに、いきなり完成形を作り出す天才型のやりかたもありますが、たいていはおおまかな下書きをしてアイデアを練り、ある程度具体的な形にしてから、下書きを清書するように完成形を作り出します。

同じように、Webページもざっくりした設計図を書いてから、レイアウトをきちんと決めて色をつけて、本格的なデザインをします。

この「ざっくりした設計図」のことを「ワイヤーフレーム」と呼びます。

えいちゃんのヒトコト

ワイヤーフレームとは、
画面の要素や大まかな配置を表現した資料。

画面の要素とは、たとえば、文字、写真、ロゴ画像、メニュー、ボタン、リンク、などです。

書きたいこと、伝えたいことを整理し、このページにたどりついたユーザーのことを想像しながら、双方のニーズを解決できるように、要素を配置していきます。

例によって、Googleの画像検索で「ワイヤーフレーム」と検索してみてください。

各ページで共通のメニューやボタンを設計することを一般に「ナビゲーション設計」と呼びます。

特にページ数が多く情報が大量にある場合に、この設計は重要です。たくさんのページをみているうちにユーザーが迷子にならないように、見たい情報にできるだけ早くたどり着けるように、気を使います。

しっかりと設計されている代表事例として、トヨタの企業サイトをあげておきます。

トヨタ社のような大規模サイトのPC用ページでは、左側に縦にボタンを並べるWebサイトが増えてきました。パソコンの画面が横長に広くなっているので、画面を効率よく使えるようにという考えが透けて見えます。

このナビゲーション設計は、階層構造を表現する「サイトマップ」とも直結しています。

「ワイヤーフレーム」に似たものとして「プロトタイプ」という言葉があります。

プロトタイプもワイヤーフレームと同じように、文字や画像をざっくりした下書きのような形になっていることが多いです。

「プロトタイプ」あるいは「プロトタイピング」という場合、実際に使ってみることに重点があります。

たとえば、ユーザーインタビューに使ったり、チームメンバーで動作を確かめたりする場合に、プロトタイプと呼びます。

よって、設計図というよりは、できあがりがある程度動作することと、作成するスピードが求められます。

Webサイトやスマホアプリで「プロトタイプ」を作る場合は、次のような手段があります。

スマホ重視になって、小さな画面に何を表示するかが重要となりました。１つの画面で何がどこに配置（レイアウト）されているかというよりは、ユーザーに何を選ばせて、どのような順番で見せるか、を優先して考える必要があり、ワイヤーフレームよりもプロトタイプをつくる流れが出てきています。

「プロトタイプ」「プロトタイピングツールについては、次の記事も参考としてください。

プロトタイピングの流れといっしょに出てきているのが「UX：User eXperience」つまり、ユーザーの体験を重視する考え方です。

画面の細かい色やデザインよりは、お客様が何を体験するのかを先に設計し、それを実現するための画面デザインを行う手法が出てきています。

「ワイヤーフレーム」と、それに関連する設計ツールや考え方を紹介しました。

お役に立てば幸いです。