Vol.7 ワイヤーフレーム作成

(1)Web行動プロセスから、必要な機能へ

ペルソナ・シナリオ法を行ってきて、もっとも重要な最終アウトプットが、ワイヤーフレームです。
シナリオからワイヤーフレームを作るには、少し高度なスキルが必要です。ただ、ユーザーのためのWebサイトを制作するためには、シナリオを前提としたワイヤーフレーム作成は必要不可欠だと考えています。

ペルソナ・シナリオ法を実践して、ユーザーの【Web行動プロセス】のシナリオを作成しました。

何かが観たい、何かを食べたいなどの目的があって、目的地を決めて、
日程を決めて、宿を決めて、宿から行ける観光地を調べて、道順を決めて、
というように、ユーザーそれぞれに目的があり、それぞれにシナリオがあります。

これらのプロセスを理解していくことで、ユーザーのプロセスを実現するために必要な、【ユーザーの要求】が明らかになってきました。

そして、ユーザーの要求に応える機能やコンテンツを考えていく中で、具体的な【機能・コンテンツ】が浮かび上がってきます。

しかし、これらはあくまで【機能・コンテンツ】であり、全体像である【ワイヤーフレーム】には、そのままでは結びつきません。ペルソナ・シナリオ法からワイヤーフレームを作成するためには、全体を貫く【コンセプト】が必要です。

ワイヤーフレーム作成

ペルソナ・シナリオシートから、いよいよワイヤーフレーム作成です。

ワイヤーフレーム作成に集中

ペルソナ・シナリオ法の最終アウトプットを完成させるため集中しています。

(2)コンセプトの重要さ

コンセプトはWebサイトの中を一本串刺しにする「筋」であったり、ユーザーに届けたい「想い」であったり、Webサイト目的の実現に対して、バラバラにある機能やコンテンツを一本貫く「串」のようなものです。
コンセプトのないWebサイトは「心のない笑顔」のようなものです。コミュニケーションとして本質的なものになりません。Webサイトにとってコンセプトは、「木の幹」「森」などとも言われる程、重要なものです。

TAMにとっての『コンセプト』の考え方は、“バラバラなものを串刺しできる考え方”です。

Web行動プロセスから、必要な機能へ
(3)【機能・コンテンツ】の優先順位をつける

今回のコンセプトと前提のペルソナにとって、どの機能が重要なのか、という優先順位を付けていきます。その上で、今回のコンセプトと、今回のペルソナにとって不要な物は勇気を持って優先順位を下げます。

優先順位の付け方でWebサイトにエッジを立てていきます。

(4)“ペルソナの行動”という文脈からレイアウトする

今回のペルソナ、今回のコンセプトから導き出された優先順位を考慮しながら、【機能・コンテンツ】をワイヤーフレームの中にレイアウトしていきます。
ユーザーの動きを頭の中でシミュレーションしながら置いていくことが重要になります。
一般的に言われているユーザーの目線の動き、表示する面積の大きさなど、基本的な指標も考慮します。

この時注意しなければならないことは、【機能・コンテンツ】からワイヤーフレームのレイアウトを考えるのではなく、プロセスからワイヤーフレームのレイアウトを考える、ということです。

文脈のあるシナリオから、優先順位を付けて、ワイヤーフレームをレイアウトしていく時には、
プロセスから考えることが重要で、【機能・コンテンツ】から考えてはいけないのです。

プロセスからワイヤーフレームを考えます

【機能・コンテンツ】から考えるのではなく、プロセスからワイヤーフレームを考えます。

(5)キーパスシナリオ

次にそれぞれにレイアウトされた【機能・コンテンツ】の中身や詳細を考えていきます。

  • ・写真は必要なのか、どれくらいの大きさなのか
  • ・価格はいつ表示するのか
  • ・プルダウンで一覧を見せるのか、写真で一覧を見せるのか

【機能・コンテンツ】を使う際の、ユーザーの実際の行動をキーパスシナリオといいます。
キーパスシナリオを想定して【機能・コンテンツ】を検討していきます。

キーパスシナリオを分かりやすく表現すると、電子機器のマニュアルと同じイメージです。
例えば携帯電話であれば、メールするときは、これをして、あれをして、このボタンをどのような手順で、という風に細分化された操作が書かれていると思いますが、これらの操作を

  • ・今回のペルソナと今回のコンセプトにあった、メールするときの動き
  • ・今回のペルソナと今回のコンセプトにあった、写真を添付するときの動き

という切り口に置き換えて、キーパスシナリオを想定していきます。

詳細を決定していきます

キーパスシナリオを想定し【機能・コンテンツ】の詳細を決定していきます。

■ペルソナシナリオ法からワイヤーフレームへ

我々も、ペルソナ・シナリオ法からワイヤーフレームへのアウトプットで、最も苦労しました。しかし試行錯誤の末、今回のワークショップ実践で手応えを得る事が出来ました。

【ペルソナ・シナリオ法→ワイヤーフレーム作成】

この点が結びつきにくいため、ペルソナ・シナリオ法が難しいと考えられているのかもしれません。
我々はペルソナ・シナリオを重視して、今後もWebサイト制作の質を上げていこうと思っています。

プロトタイプのプレゼン

プロトタイプのプレゼンを行い、チームごとのペルソナ・シナリオを検証・共有します。

ペルソナラボTOPへ

実践ワークショップ その1

ペルソナ・シナリオ法を
活用し、Webサイトを
リニューアル。

実践ワークショップ その2

ユーザーテストで
Webサイトの
問題点を明らかにする。

実践ワークショップ その3

モバイルサイトの
ユーザーテストを
実施する。

実践ワークショップ その4

グループインタビューを
Webサイトに活用するには。

実践ワークショップ その5

オンラインアンケートで
テキストマイニングを
実施。