WEBサイトを制作する上で必要なワイヤーフレーム。
ワイヤーフレームは凝って作る事は少ないため、その役割をしっかりと理解している人は少ないのではないでしょうか？
今回は、ワイヤーフレームの目的、気をつけるポイントから作成手順までを解説していきます。
目次
ワイヤーフレームとは
ワイヤーフレームとは、WEBサイトなどを制作する上で各ページごとに必要な要素を整理したものです。基本はグレースケールで作られ、実際のデザイン作業に入る前に作る設計図としての役割を持ちます。
ワイヤーフレームは実際にデザインを進める前に、完成イメージを「見える化」できます。すると情報の抜け漏れがないか、機能の整合性がとれているかといった確認ができます。
完成イメージが見えないまま作り始めてしまうと、デザイン作成後に
「必要な項目が足りてなかった…」
「この機能、ここのページにあると使いにくいな…」
といった事態が起こりかねません。
デザイン後に修正を必要としないためにも、ワイヤーフレームでの情報整理は大切です。
ワイヤーフレームの制作の流れ
ではワイヤーフレームはどのように作るのでしょうか？
ワイヤーフレームを作るためには、ページごとにどんな要素がいるのか分かっていないといけません。そのためにはサイトマップが必要です。
サイトマップを作るためには、要件の構造化ができていないといけません。そのためにはUIモデリングが必要です。
このようにデザインは一連の手順が繋がっており、まずはワイヤーフレームの前後の工程を確認する事で作業のイメージを持ちましょう。
- ヒアリング・カスタマージャーニーマップ（CJM）
ひとつ前の階層で設定したペルソナに基づきユーザーヒアリングを行います。
その結果をカスタマージャーニーマップとしてまとめ、ユーザーの体験構造・理想の状態を把握します。 - 要求定義・要件定義
把握したユーザーの流れに合わせ、ユーザーの要求を定義します。
「何に対して」「何をしたいか」「なぜそれをしたいのか」「どのように意欲を図るか」を定義しましょう。要求が明らかになれば、それを満たすための機能として要件が定義できます。 - UIモデリング
要求を満たすための機能をどんな時にどう提供すればいいか考えます。
要求定義で明らかにした「何に対して」を整理していきます。UIモデリングを進める事でビジネス、テクノロジー、クリエイティブ3観点の整合性をチェックできます。 - サイトマップ
画面単位で構造を整理し一覧表します。
UIモデル図を元にどの画面を当てはめればいいか、画面内の状態遷移をどうするかなどをまとめます。 - ワイヤーフレーム
サイトマップで整理した内容を元に、画面単位で要件を満たせているか議論をします。 - プロトタイピング
プロトタイピングツールを用いて画面の遷移や状態の遷移と行った部分に問題がないかなどを確認します。
多くの場合、UIデザイナーはワイヤーフレームの段階から作業に加わります。そのためワイヤーフレームは、企画職とデザイナー職がグラデーションするフェーズと言えます。
セブンデックスでもPM/UXデザイナーがワイヤーフレームを制作しますが、UIデザイナーもワイヤーフレームを制作しています。
ではPM/UXデザイナーとUIデザイナーが作るワイヤーフレームは何が違うのでしょうか？
ここからは、それぞれが作るワイヤーフレームの異なる目的について説明していきます。
ワイヤーフレームはどこまで作成すればいいの？
一括りにワイヤーフレームと言っても様々デザインのものがあります。
図形で大まかな配置を決めただけのものから、レイアウトまで詳細に決めたもの。
自分でワイヤーフレームを作る場合、どこまで作成すればいいのか迷ってしまうかもしれません。
そこでワイヤーフレームを目的の違いから二段階に分けて考えてみましょう。
情報の整理を行うため。レイアウトや世界観を議論するため。
この目的の違いは、PM/UXデザイナーとUIデザイナーが作るワイヤーフレームの違いでもあります。
情報整理のためのワイヤーフレーム
目的
サイトマップで整理した内容を基に、まず作るのは情報整理を目的としたワイヤーフレームです。
- 要求事項は満たせているか
- 要求を満たすための機能の構造に破綻がないか
考えた機能がユーザーの要求は満たせているのか。機能を提供するのはこのページで問題ないのか、そこで見せる情報に抜け漏れはないかなどを議論します。
機能を使うためのオンボーディングの導線、機能に必要な情報を収集する経路はあるのかなど要求を満たすための機能構造に破綻がないかチェックしましょう。
制作の流れ
- サイトマップをもとにページ単位で必要な情報を洗い出す
- 要素を図形やテキストで表現し配置する
- 画面についてチームのメンバーと議論し情報の抜け漏れや構造の破綻がないか確認
情報に抜け漏れがないか、構造に破綻がないかという議論を行う事が目的のため、どのページにどんな情報があるのか分かれば問題ありません。
そのため要素はテキストで書き出し、画像などが入る場所を図形で示します。このページでは何を伝えたくて、結果どういう要件に落とし込んだか最低限分かる形で表現します。
気をつける点
このとき注意すべき点は作り込みすぎてはいけない事です。
作り込まなくていいのではなく、作り込んではいけないのです。
制作時間がかかる
要件を満たせているかは全てのページに確認が必要です。全く同じ要素のページであれば省く事はできますが、基本全てのページのワイヤーフレームを作成します。
サイトの規模にもよりますが、数十以上のページを作る必要が出てくる場合もあります。
「レイアウトはどうするか」
「ここのボタンどうしようか」
など、細かく考えていては一向に全体像は見えてきません。そのため初期段階では中途半端にデザインを考えたりせず、情報を書き出すことに集中する事で短時間で効率よく作業を進めましょう。
議論の論点がずれる
作り込まれたワイヤーフレームだと、関係のない部分に目が行き議論が進まなくなってしまう可能性があります。
例えばグレースケール意外に色を使っていた場合、
「このサイトには違う色があう気がするな」
といった議論になってしまうかもしれません。メニューも必要以上に作り込んでいると
「ハンバーガーメニューはこの配置で良いの？」
といった議論になってしまうかもしれません。
すると、本来行うべき情報の抜け漏れの確認が上手く進まなくなってしまします。
レイアウト・世界観のためのワイヤーフレーム
目的
構造の破綻のチェックが済んだ後に作るのは、レイアウト・世界観の確認を目的としたワイヤーフレームです。
- レイアウトや世界観の確認
- 画面遷移の確認
世界観を表現するため、ページのレイアウトを詰めていきます。また、どんな文章を入れるか、どのくらいの文章量にするか決めていきます。また画面単位の情報の移動に対し不整合がないかも確認するため、ライトなプロトタイプを作るような感覚に近いかもしれません。
気を付ける点
基本はテキストベース
世界観を伝える文章といっても具体的に考える必要はありません。「ここらへんにエモい文章が入る」と言った抽象度で、とりあえず議論ができれば問題ありません。
テキストだけでは伝わらない場合
基本はテキストベースの表現ですが、テキスト情報だけでは世界観などのイメージが十分に伝わらない場合はもっと作り込んだワイヤーフレームが必要となります。
例えば映像系のSNSなどは、テキスト情報だけでは厳しい部分があります。「ここに動画が入ります」「いいね押すと派手な演出が起こります」だけでは世界観は十分に伝わりません。その場合は、これらの世界観が伝わる程度のクオリティまで作りこむ必要があります。
おわりに
今回はワイヤーフレームを目的別に説明しました。
ワイヤーフレームについてはどういったレイアウトにするかなど議論がされがちですが、まずは要求が満たされているかの確認が必要です。そういった意味で情報整理のためのワイヤーフレームの役割は非常に重要といえます。
情報整理のためのワイヤーフレームは、テキストベースで書き出すだけなので専門的なツールを扱う知識は必要ありません。自分が作るべきワイヤーフレームはどちらの段階か理解した上で制作すると、その後もプロセスも上手く進める事ができると思います。
ワイヤーフレームを含むUXデザインの一連のプロセスは、以下の記事で詳しく説明しています。是非ご覧ください。
