UXを高めるためのワイヤーフレームの作り方

1.UXとUIを理解しよう

「UX」と「UI」、みなさんは何を表すものか理解できていますか？

まず、言葉の意味をきちんと理解しましょう。

UXって何だろう？

「UX」とは、「ユーザーエクスペリエンス」顧客（ユーザー）体験を指します。ユーザーが商品やサービスをから得た体験や感情（使い勝手がどうか、使って楽しかったかどうかなど）を指します。詳細は記事「UXとは」でご紹介してますので併せてご覧ください。

UIって何だろう？

「UI」とは「ユーザーインターフェース」。顧客（ユーザー）接点を指します。コンピュータ機器やソフトウェアの操作画面、操作方法のことになりますが、ウェブサイト上で考えると、例えばカーソルを合わせることで一目でこのボタンがクリックできることがわかる、などを指します。

ウェブサイトの画面設計書（ワイヤーフレーム）では、ユーザーが使い勝手がいいような導線設計をしたり、画像やボタンやテキストでのリンクがクリックできるかどうかわかりやすくしたりという工夫が求められます。まさにこれは「UI」です。

UXとUIの関係性とは？

UXとUIの言葉の整理をしましたがいかがでしょうか？わかりやすく図にしてみましょう。

UXが顧客体験そのものを指すことに対し、UIは顧客接点、つまり顧客が目にしたり使ったりしたものひとつひとつを指します。UIのひとつひとつがUXにつながっています。

2.ウェブサイトのUXデザイン

UXを高めるUXデザイン、つまりユーザー体験の設計には何が求められるのでしょうか。
ユーザーにとって使い勝手のいいウェブサイトにするために、UXデザインをウェブサイトで表現するにはどうしたらいいのでしょうか。

UXデザインをつくる７つの流れ

１．調査、分析

まずは顧客、他社、自社の調査と分析からはじめます。顧客のニーズ、市場のニーズ、他社との差別化ポイントなどを分析し、目的の設定につなげます。

2．目的設定

分析の結果から、サイトに求められている役割やゴールを目的として設定します。このサイトの成果を決める部分です。

3．ペルソナ設定

サイトに訪れるユーザー像を考えます。どのような状況、背景、考えを持ったユーザーがどのような経緯で訪れるのでしょうか。ペルソナだけでなく、カスタマージャーニーや共感マップなどのフレームワークと併せると、より深くユーザー像を考えられるでしょう。

4．企画立案

ここまででまとまった内容をもとに、具体的な企画を練っていきます。サイトの目的や顧客像を中心にし、ひとつひとつの企画がどのように成果につながるか、顧客にとって有意義なものにつながるか考えましょう。

5．要件定義

企画をし、それを形にするには、どのようなものが必要でしょうか。コンテンツそのものやそれらを動かす機能面であるシステムの仕様などを、要件として決定していきます。社内でおこなうものものあれば、外部業者に委託するものもあるでしょう。要件の背景も含め、きちんと意図が伝わるように言語化しましょう。

6．サイト設計

具体的にどのようなコンテンツをどのように展開していくか、サイトマップをつくって構造を設計していきます。サイト全体のつながりを可視化する作業です。

7．画面設計（ワイヤーフレーム）

それぞれのページをどのように見せるか、ユーザーにとって使い勝手のいいサイトにするにはどうするかという設計を行う部分です。ここで設計した内容に基づいてサイトが作り上げられていくので、まさしくUIそのものと言えるでしょう。

UXデザインでワイヤーフレームが注目される理由

ワイヤーフレームについては次章から詳しく説明しますが、ユーザーの使い勝手に考慮したワイヤーフレームをもとにサイトを作ることで、UXが高まることにつながります。ですから、自社サイトを訪れるユーザーに配慮できている質の高いワイヤーフレーム作成がUXを高めるためには重要になるのです。

3.ワイヤーフレームを理解しよう

ところで、ワイヤーフレームって何だろう？

ウェブサイトのページ内で、何をどこにどう配置するかを設計図として見える化したものです。最終的には細かな指示を含めて作り込んだ状態にしますが、まずは手書き（ペーパープロトタイピング）でおおまかな構成や見せ方がわかるものを作ってみてはいかがでしょうか。1つのワイヤーフレームをテンプレートとしてサイト内の各ページにあわせて使っていくことももちろんできますが、ページの役割やにあわせていくつかパターンを作成するとよいでしょう。

ワイヤーフレームの作成手順

1．サイト全体の構成と今回作成するワイヤーフレームの位置づけの整理

ウェブサイトの目的とすりあわせることで、サイト全体の構成もつくりやすくなるでしょう。各ページにどのような役割を持たせるか、重要視するところは何なのかを考え、ワイヤーフレームに盛り込みましょう。

2． ワイヤーフレームに盛り込む情報の整理

情報に優先順位をつけましょう。なんでも盛り込みすぎては、そのページに訪れたユーザーが何をどのように見ていいのかわからなくなってしまいます。ページ内でも情報の強弱があるのではないでしょうか？サイト回遊をねらうのであれば、その導線設計も忘れずに。

3． レイアウトする

情報に漏れがないように決まっている限りできるだけ細かく指示します。最初はあいまいだったフォントサイズや文字列の幅、余白をどれくらいとるかなども、最終的にはきめなければなりません。もちろん他のページとの整合性もきちんと取りましょう。

なぜワイヤーフレームが必要なのか

ワイヤーフレームを作成する目的は、サイトの情報設計、整理です。ウェブサイトのどこにどのような情報を置くか、届けなければいけない情報は何かを整理し、可視化させます。
このワイヤーフレームを介してサイトコンテンツそのものやデザインなども見えてくるので、サイト構築や運営にかかわる人たちの意思統一をはかる役割も担えます。

ワイヤーフレーム作成で気をつけることとは？

鈴木 英美

私もワイヤーフレームを作ることがありますが、「作成して初めて気づいたこと」がたくさんあります。今回、このサイトを立ち上げるにあたり、ワイヤーフレームをいくつか作成し、気づくことがいくつかありました。

鈴木 英美

実際にサイト制作をするために必要な要素を構築する土台になるので、作りはじめはざっくりしたペーパープロトタイプものでも、最終的にはしっかりと細かいとろこまで指示出ししたものに仕上げなくてはならないのだと感じました。 ただ、最後まで迷ったのは「どの部分には正確な指示だしが必要で、どのあたりはあまり影響しないからそこまで突き詰めなくてもいいのか」という作業の精度の線引きをどこですればいいかです。 作業者に、背景まで含めて正確に伝えることで指示した内容をサイトに忠実に反映させてもらうところ、他の部分ともつながりがあるために整合性が必要なところ、意図をくんでもらえればお任せするところなど、ウェブサイトを運営するときにまでめをむけた発注の仕方が必要だと感じました。

4.UXを高めるためのワイヤーフレームは「顧客視点を大事にする」こと

一昔前の、ただ情報検索するだけがウェブサイトの使われ方ではなくなった今、UXを高めていくことはウェブサイトの評価にもつながる重要な要素です。顧客視点を反映させたワイヤーフレームを作ることが、UXを高めることにもつながります。

ユーザーはどうやって対象ページを見つけるか

そもそもユーザーはどのようにこの対象ページにたどり着くのでしょう。検索キーワードにヒットする、広告が出てくるなど、流入経路はさまざまです。ユーザー像を今一度確認してみましょう。

ユーザーは何を考え、このページで何をしたいのか

ユーザーが何を求めてこのページに来ているのかという背景や心理状態を考え、そこで解決したい課題がスムーズに解決できるような導線設計をします。
ユーザーのことが見えてくると、ゴールが明確になります。

ユーザーはどのようにページ推移するか

ユーザーがさらにページをまたいで情報を得ようとしたとき、どのような導線をもうけるといいのでしょうか？ユーザーの本当のゴールはどこなのでしょうか。また、サイト運営する立場として、ユーザーに知ってもらいたい情報はなんでしょうか。他のページのつながりも考えてみましょう。

5.ウェブ担当者として、どのようにワイヤーフレーム設計にかかわるか

ワイヤーフレームの設計は、ウェブ担当者自身がおこなうこともあれば、制作会社に要求を出して作成してもらう場合もあります。制作会社に指示出しをするときには、どのようなことに注意すればいいのでしょうか？

発注のしかたの注意点

鈴木 英美

外部に制作を依頼するとき、どのようなことに気をつければいいのでしょうか？

「シンプル」「全体的に明るい感じで」などとオーダーしても感覚的な言い回しでは受け取る人によって異なる解釈をしてしまいます。誰が受け取っても同じ解釈ができるような明確な指示だしを心がけましょう。 上記の言い回しであれば「シンプルに」「（具体的なサイト例やページを指定して）このような見え方やコンテンツの配置のようにシンプルにしたい」、明るい感じ」→「（配色パターンをいくつか提示して）この色味に寄せてほしい（またはこの色味は使用しないなど）」という伝え方ができますね。

谷川 雄亮

途中経過の確認のしかたの注意点

鈴木 英美

発注をしたら、納品までただ待っていればいいのでしょうか？

サイトの規模や、ワイヤーフレームの種類によって、作成にかかる時間も費用も変わります。すべて作成してからチェックを入れて修正依頼を出すと、さらに時間も工数もかかってしまいます。外部に依頼するときにはどのような契約をするかにもよりますが、進捗状況を途中で確認できるといいですね。 もしかしたらそのなかで、「ここは〇〇のほうがいいかもしれない」というような方向の修正や煮詰まっていなかった部分を他との兼ね合いを見ながら調整することも可能かもしれません。

谷川 雄亮

納品時の確認のしかたの注意点

鈴木 英美

いよいよ納品。ここでのポイントは何かありますか？

こちらの要求がきちんと反映されているか、できれば複数人でチェックができる体制が整っていると望ましいですね。チェックリストなどを作って、それに従ってチェックしていくと品質保障にもつながるかもしれません。 スマホ版はきちんと対象デバイスで確認する、アクセシビリティ対応がなされているかの観点での確認もするなど、どのようなサイトを作るのかという目的にあわせて考えておきましょう。

谷川 雄亮

6.まとめ

「UX」「UI」というキーワードは知っていても、きちんと理解できている人はまだまだすくない状況です。ぜひ、この記事で言葉の理解をしたうえで、ウェブ担当者としてどのように UXを高めていけばいいのか、そのためのUI設計では何を重視すればいいのかということを考えてみてください。