情報アーキテクチャも、いよいよ最後の項目になりました。
今回のテーマ、ワイヤーフレームとは、WEBサイトの画面設計そのものです。
今までは、情報の構造について追求してきました。
しかし、まだはっきりとレイアウトの形で見える化されていません。
それを今回、具体的なレイアウトとして、書き起こしていきます。
とは言っても、一体どうやって情報をレイアウトに落とし込むのでしょう。
どんな情報を画面のどこに配置すれば、情報を見つけやすくなるのでしょうか。
レイアウトで、どのパーツをどこに置くか。
どうすれば、ユーザーにとって一番スムーズに情報を見つけられるか。
なかなか判断基準が難しいと感じる方も多いでしょう。
しかし実際、トップページ以外の大まかなレイアウトは、もう出来ています。
前回、ユーザーに「コンテンツの優先順位」を決めてもらったと思います。
1ページの中に内包された、いくつものコンテンツ。
それを優先順位通りに、上から並べていきます。
前回使ったサービスページについての例でご説明します。
サービスページには、3つのコンテンツがあり、優先順位をつけました。
「1.コンセプト」「2.サービス内容」「3.こだわり」の順番です。
なので、一旦、上から順に番号通り、並べていきます。
これが、トップページ以外の大雑把なレイアウトです。
あとは、各セクションの中が、どういうレイアウトになるのか考えるだけです。
とは言え「だけ」と言っても、これがなかなか難関です。
一体、各セクション、どのような順番で情報を配置すれば良いのでしょうか。
情報を最も見つけやすくするために、まずシナリオの設計をします。
シナリオ設計とユーザーインタビュー
シナリオとは、ユーザーがどのような道順で、目標まで到達するかを、物語を語るようなイメージで表現することです。
例えば1ページ完結型の縦長ランディングページを作る時はよく使われます。
ユーザーがページを読みすすめる間、どんな思考の動きがあり、スクロールする度にどんな情報を求めているか、心と思考の移り変わりを考えながらレイアウトを考えるのです。
例えば、化粧品のランディングページを作る時、こんなふうに考えます。
『まず、メインビジュアルで、今回売る化粧品の強みである「安さ」と「高品質である」ということ、さらに「美容のプロフェッショナルが推薦している」ことを伝えて、興味を持たせよう。
するとユーザーは、もっと具体的なことが知りたくなるので「なぜ安いか」「なぜ高品質か」「なぜプロが推薦しているか」を伝えれば、納得感が増すはずだ。
納得感が生まれると、今度は、この情報が本当かどうか疑うはずなので「他のユーザーの声」を乗せて、情報が真実であることを確認させよう。。』
こんな調子で購入までの流れを作ります。
ユーザーの心や思考の移り変わりを読んで、欲しいと感じるであろう情報を、欲しいと感じるタイミングで、どんどん提示してくのです。
一通りWEBサイトを巡回することで、特定のペルソナを持つユーザーの購買意欲を刺激し、不安を払拭し、購買行動に移る後押しが出来るように設計します。
テレビショッピングなども、同じような流れで展開されますよね。
すべてのペルソナに対応するレイアウトをつくるには？
WEBサイトの設計におけるポイントは、全ペルソナへの対応です。
今回は最低でも4パターンのペルソナは用意されているはずです。
なら4パターンのシナリオ設計していきます。
ただ、自分のイメージだけで作るわけではありません。
ペルソナに近いユーザーに手伝ってもらいましょう。
ユーザーの心や思考の動きを検証するには、ペルソナに近しい属性を持つユーザーと作っていくのが、一番的確です。
では、どう作っていけば良いのでしょうか。
具体的なシナリオ制作方法
まず、メインビジュアルだけ制作してください。
先程の例であれば「安さ」と「高品質である」ということ、さらに「美容のプロフェッショナルが推薦している」ことが伝わるメインビジュアルです。
それを印刷、またはパソコンに表示してユーザーに見せます。
そして「興味を惹かれたか」尋ねましょう。
この時点で興味を持ってもらえなければ、メインビジュアルやキャッチコピーの時点で、すでに離脱される可能性が高いということです。
その場合は、ユーザーと相談して、どんな内容であれば、興味を惹かれそうか、どうして興味を惹かれなかったのかを突き止め、新しいキャッチコピーを考えてください。
メインビジュアルとキャッチコピーがある程度形になったら、今度は「次に何の情報がほしいか」を聞き出します。
ユーザーが欲しいと思う情報をそのままメモしたら、さらに「その情報が手に入ったら次に何について知りたいか」を同じように尋ねます。
このように「次に何がほしいか聞いてメモを取る」というループを、知りたい情報が無くなるまで繰り返してください。
知りたい情報が無くなったら「購入に踏み切るには何が必要か」を尋ねます。
この質問の答えが、ユーザーを購入に踏み込ませるトリガーです。
もし買わないのであれば、買わない理由も尋ねましょう。
買わない理由を解消すれば、ユーザーは購入するはずです。
このように、ユーザーに尋ねながらメモを続けると、結果的に、ユーザーの心の動きを表した、具体的なシナリオが完成しているはずです。
こうして出来上がったシナリオこそ、詳細なワイヤーフレームの元となります。
シナリオとペルソナの優先順位
前回、インタビューを通じて、ペルソナごとのシナリオを構築しました。
化粧品の例に従うと、4つのシナリオができることになります。
しかし、すべてのシナリオを、同じ重要度で扱うのは無理があります。
WEBサイトは1つの画面で、限られた範囲内で作らなければなりません。
全てのシナリオを同じ価値で反映しようとすれば、どのシナリオも引き立つことのない、混沌としたレイアウトになってしまうでしょう。
そこで、ペルソナの優先順位を決めます。
一体、どのペルソナを軸にすれば良いのでしょうか。
これは単純に、最も一般的なペルソナです。
4つのペルソナを作るとは言え、より一般的なペルソナは存在します。
一番平凡なペルソナとシナリオを軸にワイヤーフレームを構築します。
しかし、かと言って他の3つのシナリオを捨てるわけではありません。
優先順位を下げた上で、レイアウトに反映させます。
だからこそ、細かなレイアウト設計が決まっていくのです。
実際にワイヤーフレームを作ってみましょう。
ワイヤーフレームの作成
まず、唯一何もコンテンツが決まっていないトップページからです。
トップページはメインビジュアル以外、入れる内容も決まっていません。
だからこそ、シナリオをダイレクトに反映させられるのです。
ちなみに、ワイヤーフレームを作る時、紙に直接書いても良いのですが、Adobe XDなどのプロトタイピングツールを使うことで「プロトタイプテスト」が楽にできるようになります。
XDの詳しい説明は割愛させていただきますが、例えばクリックで画面を遷移させたり、レスポンシブレイアウトにしたり、スマートフォンで確認したり、簡単なアニメーションをつけたり、といったことが可能です。
ワイヤーフレームの段階から体験価値を色濃く伝えられますし、よりリアルに近いフィードバックをもらうことが可能になります。
プロトタイプとテストに関しては、また次項でお伝えします。
具体的なワイヤー作成方法
ではワイヤー作成ですが、まずヘッダーとメインビジュアルを配置しましょう。
そして、シナリオを確認しながら、メインビジュアルの次に、ユーザーが知りたいと感じた情報を、メインビジュアルのすぐ下に配置してください。
ただし、すべての情報を掲載するわけではありません。
トップページはあくまで、コンテンツへの入り口です。
少し詳しく内容が掲載された「目次」のようなものと考えてください。
情報の概要だけ表示し「詳しい内容」へのボタンリンクを作りましょう。
詳しい内容については別ページにまとめます。
では、詳細をまとめる別ページがどこか？ということですが、これは、組織分類でまとめた「コンテンツの位置」に準じてください。
例えば、先程の化粧品を例として、メインビジュアルの次に「なぜ安いか」「なぜ高品質か」「なぜプロが推薦しているか」3つの「なぜ」を知りたい、というシナリオなら、これらは、分類されたコンテンツのどこに当てはまるでしょうか。
例えば「商品詳細」というページがあり、中のコンテンツが「1.コンセプト」「2.商品内容」「3.こだわり」で優先順位がつけてあるなら、コンセプトの代わりに、3つの「なぜ」について配置するのが良いかもしません。
なぜなら、コンセプトはメインビジュアルで見せています。
無くても問題ありません。
そして、コンセプトの「次」に求められる情報は3つの「なぜ」です。
メインビジュアルから「なぜ」に直接飛べたら、シナリオどおりです。
知りたい情報をスムーズに獲得するという観点でも適切です。
元の優先順位とシナリオを保ちつつ、臨機応変に作っていきましょう。
これで「3つのなぜ」は「商品詳細ページ」へ配置が決定しました。
ユーザーが次に知りたい情報は何でしょうか。
化粧品のシナリオに沿うと「他のユーザーの声」になります。
もし別ページに「ユーザーの声」を分類しているのであれば「ユーザーの声へのボタンリンク」が必要になるでしょう。
もし「ユーザーの声」が別ページにまとめられておらず、分類に存在しないのであれば、3つの「なぜ」のすぐ下に配置することも検討できます。
このように、基本はシナリオに沿い、各ページの配置やコンテンツを考えていくことで、少しずつ全体のワイヤーフレームが出来上がるのです。
最初のシナリオを反映し終えたら、次は優先2位のシナリオを元に、レイアウトを追加していきましょう。
あくまでも優先1位のコンテンツの邪魔にならないように、しかし、周辺視野には優先2位のコンテンツがしっかり捉えられるように配置します。
さらに優先3位のコンテンツは、優先1位と2位の邪魔になってはいけませんし、その中でも、優先3位のコンテンツを周辺視野で捉えられるようにします。
そう考えると、適切な条件が揃うレイアウトや配置は、そう多くはありません。
ある程度限られてくるので、何をどこに配置しようか、さっぱり検討がつかないということは、まず無いはずです。
ペルソナ全員分のシナリオを反映し終えるころには、ワイヤーフレームも充実しているでしょうし、もしすべてのシナリオを反映し終えても、ワイヤーフレームに空きがあるなら、自分たちが伝えたい内容を重要度順に入れるとよいでしょう。
注意点は、組織化システムの分類は変更しない、ということです。
シナリオを分類に合わせて当てはめるイメージを持ってください。
もし、ここで分類を変えたら、ユーザーの持つグローバルナビやリンクラベルのメンタルモデルが崩壊してしまう可能性があります。
そうなれば、ラベルから伝わるイメージと、実際のページ内容が違う可能性が生まれ、ユーザーの混乱を引き起こすリスクになります。
プロトタイプとテスト
ワイヤーフレームを作成したら、今度はユーザーにテストしてもらいましょう。
ただ、テストをするためには、まずプロトタイプが必要になります。
プロトタイプは、大きくわけて2種類存在します。
1つが、低忠実度のプロトタイプ。
主に紙に書いたワイヤーフレームを「使うフリ」してもらうことで、レイアウトの欠点や使い勝手を試すテストです。
XDなどでプロトタイプを作った場合も、低忠実度のプロトタイプに属します。
ユーザーの隣に説明役の人をつけて、ユーザーの操作にあわせて紙を取り替えたり動作の説明を加えたりと、人力のサポートが必要になります。
2つ目が、高忠実度のプロトタイプ。
HTMLやCSSを使って、実際のUIに近い形で試します。
最低限の機能を実装することによって、ユーザーの、よりリアルな反応やデータを獲得することができるでしょう。
どのように行うかというと、あるタスクを指定して、そのタスクをスムーズに実行できるか試したり、ユーザーがどのようにページを遷移して、どこに目を止めるか観察するというような、ユーザビリティテストやコンテキスト・インクワイアリーに近い形で実施されます。
基本的には、まず低忠実度のプロトタイプでテストし、改善点を抽出します。
そして、何度か改善を重ね、問題が無ければ、高忠実度プロトタイプを作り、より高次元のリアルなフィードバックと改善を繰り返します。
こうして、ワイヤーフレームは理想の形に近づいていくのです。
いきなり高忠実度のプロトタイプを作るわけではありません。
低忠実度のプロトタイプから高忠実度のプロトタイプへ段階を踏んだ方が、余分な開発コストや手間をかける必要がなくなります。
いきなり高忠実度のプロトタイプを作るのは、手間も時間もかかりますし、しかも変更したい時に、時間がかかってしまうでしょう。
プロトタイプの作成とテストは、UXデザインの「プロトタイプを作ろう」という項目で、詳しく解説しています。
スキルのカテゴリは異なるかもしれませんが、テストの方法は一緒です。
目を通して、しっかりと身につけてください。
情報アーキテクチャ・ガイドラインの作成
いよいよ、情報アーキテクチャも最後の項目になりました。
せっかく苦労して作った情報構造ですから、アップデートの度に崩されないように、今の情報構造に到達した背景や、効果的な構造を維持するためのルールを決めなければなりません。
一方で、情報アーキテクチャは、ユーザーのフィードバックから学んで数々のアップデートしていくものであり、よりよい方向性に進化するのであれば、柔軟に変更すべきものでもあります。
ですので、ガイドラインや、そこに含まれるルールには、WEBサイトの使い方を習熟している既存のユーザーにも使いやすく、そして、将来、さらに情報を見つけやすい構造を追求できるような、縛りすぎない内容を決める必要があるのです。
では、具体的にどんな項目をまとめれば良いのでしょうか。
ひとまず、ガイドラインに掲載する項目の前半から始めていきましょう。
下記の項目リストを参考にしてみてください。
- WEBサイトが作られた目的、ビジョン
- 想定ユーザー、ペルソナ
- 情報へのニーズ
- サイトを更新する際のルール
- 構造パターンを参考にできるライブラリ
「情報へのニーズ」までは、既存のデータから応用できるでしょう。
これまで散々、調査して試してきたはずです。
では、4番目の「サイトを更新する際のルール」とは何でしょうか。
例えば、過去に作ったとあるWEBサイトでは、下記のルールを加えました。
「サイトの更新は、必ず定性的、定量的なデータによる変更の裏付けと仮説が必要です ( 緊急時やニュース、ブログ、キャンペーン、誤字脱字などは対象外 )」
これは、WEBサイトを更新する際に「なんとなく変えたほうがいいと思ったから変える」というような安易な理由で変更するケースが膨大に発生していたので、そうした変更を避けるためです。
何の仮説も裏付けも無い状態で、なんとなく変えたほうが良いと思った、という理由で変更を重ねた場合、一体何が悪くて、何が良かったのか良し悪しを把握できず、ただ成果の上がらないループを繰り返してしまいます。
そんな不毛な更新で、予算も時間も消費してはいけません。
このように、どうすればより良い情報アーキテクチャを維持し、良くしていけるかについて試行錯誤すると、今後の更新で守った方がいいルールが、いくつか見つかります。
他にも「新規コンテンツは、まず組織化システムで分類したグループに当てはまるか模索し、もし存在しない場合のみ新しくグループを追加する」「すべてのページに2クリック以内にいけるようにする」「コンテンツを追加する時は、必ずリンクラベルとページタイトル、見出しを一致させる」「主観で分類を作るのではなく、ユーザーテストを行い、ユーザー中心で分類する」など色々ありますが、言ってみれば、これまで情報アーキテクチャで学んできたような項目について、遵守すべき内容を記載していくようなイメージを持つとよいでしょう。
「構造パターンのライブラリ」は、ゼロからレイアウトを設計する手間を省き、全体に統一感をもたせるために、レイアウトの設計パターンをいくつも並べていくものと認識してください。
レイアウト設計パターンは、検索すれば参考のレイアウトが見つかるというような、社内サイトを作るという方法もあります。
予算や時間と相談になりますが、ぜひ検討してみてください。
次にガイドラインの後半ですが、これは今まで作ってきた内容のまとめです。
具体的には、下記の内容を参考にしてください。
- 組織化システム
- ラベリングシステム
- ナビゲーションシステム
- 検索システム
- コンテンツ
- サイトマップ
- ワイヤーフレーム
それぞれ、情報をまとめていきましょう。
まとめる内容は下記を参考にしてください。
- 基本構造やルール
- どうやって決めたか
- 試した仮説
- 仮説の検証方法
- 調査で学んだこと
人は、ただ「こうしてくれ」とガイドラインを与えられても守りません。
そのガイドラインよりよいものを作れると思っているからです。
なので、納得して業務に取り組むためには、信じるに値する根拠が必要です。
上記の項目を書くことは、ガイドラインを守る納得感の1つになるでしょう。
また、以前やった施策を繰り返してしまい、すでに検証結果が存在しているのに無駄な時間と予算をかけてしまうような間違いを侵さないことが重要です。
進歩とは過去の積み重ねであり、過去にやってきたことに対して、さらに上積みしていくからこそ、進歩していくのです。
過去に試した仮説を何度もぐるぐる繰り返したところで、先には進めません。
やってきたことや、試した仮説を可能な限り掲載してください。
これまでの仮説、経緯、検証方法など、積み重ねた結果を明示することで、その先に続くすべての行動が、より建設的になるでしょう。
まとめ
情報アーキテクチャのカリキュラム学習、おつかれさまでした。
今回は情報アーキテクチャについて考えられる「最も手間をかけ、もっとも成果を出すための方法」について、お伝えしてきました。
しかし、プロジェクトによっては予算も時間もリソースも無いために「さすがに、ここまでは出来ない」といったケースもあるでしょう。
そんな時は、今回の内容をできる限り維持しつつも「出来ないこと」を考えるのではなく「そのプロジェクトで出来ること」を考えてみてください。
例えばユーザーテストをしたいけれど、ユーザーに直接話を聞く機会をもらえない場合、誰に聞くか考えてみましょう。
ユーザーの代わりに「サービス開発に直接関わりがなくて、ペルソナに近い人」とすれば、社内やクライアント企業の中にも、サービス開発に直接関わっていない人がいるはずです。
ユーザーに近い属性を持つ人は、以外と身近にいるかもしれません。
また、プロジェクトの規模によっては、省ける箇所もあるでしょう。
例えば組織化システムの場合、ベストなのはユーザーとの共創ですが、どうしてもユーザーを巻き込めないなら、これもまた社内、もしくはクライアントのサービス開発から離れた役割の人を相手に試し続けることもできます。
精度が一般ユーザーほど高くないため、より多くのサンプル数が必要かもしれませんが、ある程度、理想には近づけます。
ランディングページ作成のような、そもそも小規模のプロジェクトであれば、組織化システム、ナビゲーションシステム、検索システムは省けます。
大事なのは、情報アーキテクチャの知識や経験を活用しつつ、結果を出すことであり、今回学んだことをすべて踏襲することそのものではありません。
もちろん、全て踏襲すれば、最良の結果に近づけることは間違いないですし、できるだけ全行程を実践すべきですが、状況によって自分で考え、あたえられた条件の中でどうすれば最も結果を出せるか、考えることが重要なのです。
その結果、新しい情報アーキテクチャの理論も生まれるかもしれません。
ぜひ、臨機応変に、柔軟に、今回学んだことを活用してみてください。
特にUIデザインやUXデザインのカリキュラムとは相性抜群です。
UIとUX、そしてIAを使いこなして、ビジュアルの格好良さを操るだけでなく、体験や構造まで根本から操る、最高の設計者 ( デザイナー ) になりましょう。
そして、世の中の情報や体験を、より高みへとアップデートしていきましょう。