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

テクノロジー

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

サイトマップ~ホームページ・Webサイト制作に必須のツール
ホームページ、Webサイト制作の現場で、目標やコンセプトなど大枠の企画ができたら、もっと具体的な設計図をかいていきます。今回は、Webサイト制作の設計段階で必ずつくる基本の資料として、「サイトマップ」を紹介します。サイトマップとはサイトマップは、Webサイトの制作で、必ず作成する資料です。作りかたはものす...

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

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

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

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

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

えいちゃんのヒトコト
えいちゃんのヒトコト

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

「ワイヤーフレーム」に入れるもの:画面の要素

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

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

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

ワイヤーフレーム - Google Search

ナビゲーション設計:メニューを考える

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

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

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

トヨタ自動車株式会社 公式企業サイト
企業情報、投資家情報、ニュースルーム、モビリティ、サステナビリティ、採用情報等、トヨタの企業情報全般を提供するトヨタ自動車の公式企業サイトです。

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

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

サイトマップ~ホームページ・Webサイト制作に必須のツール
ホームページ、Webサイト制作の現場で、目標やコンセプトなど大枠の企画ができたら、もっと具体的な設計図をかいていきます。今回は、Webサイト制作の設計段階で必ずつくる基本の資料として、「サイトマップ」を紹介します。サイトマップとはサイトマップは、Webサイトの制作で、必ず作成する資料です。作りかたはものす...

プロトタイピング

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

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

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

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

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

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

  • 例1)紙(つまり、紙芝居)
  • 例2)スライド(パワーポイント、Keynote、Googleスライドなど)
  • 例3)専用サービス(Prott など)

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

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

プロトタイピング・ツールの選びかた~選択基準の手がかり・考え方
「プロトタイプ」つまり、仮組みの製品、あるいは、試作品をすばやく作ってユーザー・お客様に体験させるマーケティング手法が広がっています。今回は、その「プロトタイプ」をつくるためのツールについて、何を考えていくとよいか、選択の基準を紹介します。「プロトタイプ」をつくる理由リーンスタートアップ、デザイン思考、アジャイル...
ペーパープロトタイプのつくりかた~MVP実現手法としての準備と考えておくこと
今回は、「ペーパープロトタイピング」とその準備、つくるときに考えておくべきことをコメントします。「リーン・スタートアップ」あるいは「MVP」の流れの中に位置づける「ペーパープロトタイピング」新製品や新サービスを企画するときに「リーン・スタートアップ」と呼ばれる手法がよく使われるようになりました。「リーン・...

UX:User eXperience

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

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

まとめ

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

お役に立てば幸いです。

コメント