2021.11.26
133
こんにちは、アートディレクターのもりたです。
長らく時間を明けてしまいましたが、前回の記事「デザイナーがする情報設計のすすめ」の後編です。
今回はじゃあ具体的にどうやるの？ という部分の流れを書いてみました。
簡単に書くつもりだったんですが、長くなってしまったのが反省点です……ではどうぞ！
目次
webサイトの情報設計における全体の流れ
はじめに断っておきたいのは、この流れとはひとつの方法であり、絶対の正解ではありません。
ただ、デザイナーにとって理解しやすい流れを意識してまとめてみたつもりです。
各項目の下に、「web制作会社が採用サイトを作るまで」を例として挙げてみました。言ってる内容がよくわからなくなったらこの例を読んでみてください。
フェーズ1：分析
最初に、制作するwebサイトやそのwebサイトを提供する事業（自社であったり、クライアントであったり）について詳しく知る必要があります。
まずは詳細な情報を洗い出してみましょう。
1-1：現状の課題を整理
webサイトを作ろう・リニューアルしよう・改修しようと決めたからには、そのキッカケが必ずあります。
- サービスのアクティブなユーザー数が落ちてきた
- ユーザーからの不満が溜まっている
- 現状のサービスの売上を増やしたい
- 問合せの経路を増やしたい
- webサイトに古さを感じるため会社のイメージにそぐわない
- 新規サービスのユーザーを獲得したい
- 新規サービスや事業の認知度を上げたい
まずは何を問題と感じて、webサイトの制作に着手することになったのかを明確にします。
- 例：採用サイトを作りたい
- 採用のミスマッチを減らしたい
1-2：課題が発生している原因を分析
次に問題点の分析を行います。分析をするためのフレームワークは様々な方法がありますが、詳しくないので紹介できません！
でも、みんなで問題点について考えていることや原因を付箋紙に書き出して壁に並べて貼るだけでも効果はあります。
この時大事なのは自分たちがどうにもできない要因を原因として挙げないことです。
例えば「雨の日が多く、買い物客の来店が減った」と書くよりも、「雨の日にも来店したくなる施策を用意していなかった」と書いたほうが、次になにを考えるべきか想像しやすいですよね。
自分たちがどうにもできない要因が原因として挙げられた場合は、自分たちがどうにかできるレベルまで分解する作業をこの工程で行う必要があります。
- 例：採用のミスマッチがなぜ発生するのか
-
- 社風や働いている人の情報が外部に伝わっていない
- 社風に合う人に会社の情報がリーチしていない
1-3：原因を解決する方法の仮説を立てる
課題の原因は複数あることが一般的です。原因が複数あるなら、解決策も複数ありますね。
それぞれの課題に対して、解決策の仮説を立てます。ここで立てた仮説が果たして正しいかどうか、コストパフォーマンスの良い具体的なやり方はなにか、などなどを「フェーズ2：戦略」で出てくる情報を元に考えます。
- 例：社風や働いている人の情報を外部に伝えるには
- 社内の様子をwebサイトで発信する
→どんな情報を伝えればいいの？
- 例：社風に合う人に会社の情報がリーチしていない
- 社風に合う人（ターゲット層）にリーチするように情報を流す
→そもそもターゲット層はどんな人？
→どんな媒体を使えばいいの？
フェーズ2：戦略
現状を分析することができたら、問題解決に必要な情報を集めて、戦略を練ります。
2-1：競合と比較したときの立ち位置とユーザーに提供できる価値を把握する
まずはwebサイト制作の対象となるサービスのポジションを確認するためにポジショニングマップを作成します。
競合サービスと比較したとき何が違うのか、どういうポジションとしてユーザーに受け取られているのか。それらを踏まえた上で、ユーザーに「自分だけの特別なもの」として何を見せられるのか。
この「自分だけの特別なもの」こそが、「ユーザーに提供できる価値」になります。
ユーザーにとって代替品がないもの、特別なものにならなければ、自分を選んでもらうことはできないのです。
この情報設計の記事だって、別に私の記事を読む必要なんてありません。情報設計の記事は他にもたくさんあるし。この記事は、そこに「デザイナーの」とつけ、今まで情報設計を自分の仕事でないと思っていたデザイナー層をターゲットにすることで、「ディレクターに向けた情報設計の記事」と差別化を図っているわけです。
- 例：同業他社と比較して自分たちの会社はどう思われているのか
-
- 高度な技術を使っている←→作るものがユニーク
- ノリの良い人が多い←→一人で黙々と仕事する人が多い
- 例：同業他社にはない自社の特徴とは
-
- 地方にサテライトオフィスを持っている
- 多様な仕事があるので、自分の希望する仕事に集中することができる
2-2：どんなユーザーが対象になるのか（ペルソナ）
次にサービスを提供するユーザーについて知ります。想像上のユーザーでもいいのですが、その場合自分たちに都合の良いユーザーを作りがちです。可能であれば、実在の人物をペルソナとして設定したほうがリアクションも計測しやすくなります。
ペルソナの情報としては以下のような項目を設定します。
- 分類・区分
- 会社員、学生などの所属、職業
- 年齢
- 性別
- 年収、生活水準
- 家族構成、配偶者
- 居住地
- 出身
- 意識・性格
- 趣味
- 好きなもの
- 行動・習慣
- 普段の癖・行動
- サービスを必要とする生活上の場面
- 外見
ペルソナを簡単にまとめられる言葉があると、もっとわかりやすいですね。
例えば『ドラえもん』の「のび太」は「怠け癖があり、泣き虫ですぐ人に頼るが、根は明るく憎めない人」みたいな感じで。……良くいいすぎですか？
- 例：応募してほしいターゲット
-
- 新しいことに目移りしやすいが、自分の興味のあるものに熱中する人
- 休日は一人だったり、親しい人と静かに過ごすほうが好きな人
2-3：webサイトを通じてユーザーは何を感じるのか（感動）
ペルソナを決定したら、今度はその人に「何を感じてもらうべき」なのかを考えます。
例えば、のび太がドラえもんにお願い事をしたいとき、どら焼きを贈るとします。
いつも食べている店のどら焼きが一番確実ですが「もっと美味しいどら焼き」をドラえもんに提供できたら、いつもより無茶なお願いも聞いてくれるかもしれません。
この場合、のび太に感じてもらうべきは「いつも買ってるどら焼きよりも美味しそうだから、ドラえもんも喜ぶだろう」という感情です。
もちろんプラスの感情だけではありません。健康保険は自分に何かあったときの予防策として、不安を解消するために加入するものです。この場合はまずは不安を意識させたうえで、不安に対して安心を提供する必要があります。
人を行動させるためには喜怒哀楽のいずれかを動かさないといけません。そしてこれはユーザーが「何をメリットと思ってもらうのか」と同義です。
- 例：会社についてどう感じてもらうべきか
-
- この会社ならいつも新しいことができて退屈せずに仕事できそう
- ノリのいい雰囲気が苦手だけどこの会社なら大丈夫かもしれない
2-4：ユーザーが感じた結果どんな行動をするのか
「これは自分のメリットになる！」と感じたユーザーにどのような行動を取ってもらえば、事業の利益につながるのか。
これは大事なことです。
「いつものどら焼きより美味しそう！」と思ったのび太にはどら焼きを買ってもらわないと利益になりません。
でもECサイトの場合は、検索でたどり着いた結果1度だけ少額の買い物をしてもらうよりも「このECサイトで買い物するかも……」と思ったユーザーにブックマークしてもらったほうが長期的な利益につながるかもしれません。
どんな行動を取ってもらうべきかは、webサイトを通じてどう利益を出すのかというビジネスを考えて決めなければいけないのです。
ちなみに「ユーザーの感じたこと」と「感じた結果の行動」を一連の流れとして捉えるためによく使われるのが、カスタマージャーニーマップです。こちらも希望的観測がまじりやすいので使う場面が難しい手法ですが、まとめるためには有効な手段だと思います。
- 例：ペルソナに何をしてもらいたいか
- 採用への応募
2-5：ユーザーを行動させるための施策とゴールを考える（KPIとKGI）
1-3で立てた例の仮説を、ペルソナと提供できる価値を見直した上でもう一度考え直してみましょう。
- 例：社風や働いている人の情報を外部に伝えるには
- 社内の様子をwebサイトで発信する
→どんな情報を伝えればいいの？
例にした会社が提供する価値は
- 地方にサテライトオフィスを持っている
- 多様な仕事があるので、自分の希望する仕事に集中できる
の2点なので、
- 社内でそれぞれ希望する仕事に専念している人を紹介する
- 会社で扱っている多様な制作事例を詳しく紹介する
- 地方でゆっくり静かに仕事できる様子を紹介する
などの施策が考えられます。
- 例：社風に合う人に会社の情報がリーチしていない
- 社風に合う人（ターゲット層）にリーチするように情報を流す
→そもそもターゲット層はどんな人？
→どんな媒体を使えばいいの？
これについては、ペルソナの年齢など分類・区分を考えた上で、ペルソナがよく見ているメディアを選択し、先ほど挙げた情報を露出させていくという施策が考えられます。
KPIは施策をどれくらい実施するか、KGIは施策を行った結果、どれくらいの成果を期待するかを数値化したものです。
あると効果測定や改善施策の目安になり便利ですが、私は数字に明るくないので今回は省略します！
フェーズ3：設計
施策とゴールが決まったら、ようやくwebサイトの中身を決めていきます。
3-1：必要なコンテンツは何か
載せるべきコンテンツ、載せたいコンテンツ、載せなくていいコンテンツを洗い出していきます。
場合によっては不必要と思われるものも、いろんなところから要望として挙がってくることがありますが、ゴールを確認して、挙げられたコンテンツがゴールの達成にプラスになるかを考えて判断します。
3-2：どんな流れでコンテンツを見せるのが有効か
よく後輩のデザイナーには「どういう流れで説得したら読む人に納得してもらえるのかを考えて」と説明します。
もちろんユーザーは上から下まで、コンテンツに従ってwebサイトを隅から隅まで読んでくれるなんてことはありません。
だからこそ、スタート（最初に入ってくる情報）とゴール（最後に行き着いてほしい情報）を整理する必要があります。
3-3：サイト構成/ページ構成
必要なコンテンツと流れ（重要なコンテンツ）を整理したら、サイト構成とページ構成を作成します。
簡単なwebサイトであれば、サイトマップと各ページのワイヤーフレームを作れば十分です。ページ数が多く複雑なwebサイトやサービスになると、サイトフローやユーザーフローが必要になるでしょう。
情報設計を実践する前に
注意すべきこと
情報設計の段階というのはあくまで仮説であり、社内で話しているとこうしたらユーザーはこう反応するだろう（してほしい）という、ちょっと希望の混じった推測になることがよくあります。
しかしそれでは本当にユーザーに、こちらの想定した感動を与えられるのか曖昧になってしまいます。ですから、情報設計はできるだけ「憶測ではない情報」を用いて考える必要があります。
「憶測ではない情報」を得て、設計するための理論は以下のようないくつかの種類が考えられます。
- 経験則
- マーケティング
- HCD（人間中心設計）/UCD（ユーザー中心設計）
- 人間工学
webサイトと相性が良いのはマーケティングでしょうか。
情報設計とUXの関係
フェーズ2で取り上げた、ユーザーのペルソナや感動を考えるとなると、「情報設計とUXデザインは何が違うんだ？」と思われる方もいるかもしれません。
誤解を恐れずに簡易にまとめると、UXは情報設計よりも俯瞰的な視野を持った概念です。
webデザイナーが作っているのは、サービスを提供しているwebサイトというモノであり、情報設計はサービスと提供するモノを作る段階で必要な情報を設計しているに過ぎません。
UXはもっと長期的・包括的に、継続して考えられるものです。
例えば「ソニータイマー」という言葉は、長期的にマイナスのUXが重なった結果生まれたと考えることができます。
これに沿うと、私たちが今考えているのは製品を作って売るところまでなので、「ソニータイマー」という評判を覆すUXを提供するところまでは考えられていないというわけですね。
有名なフレームワークとの関係
もしかしたらデザインスプリントなどのフレームワークを実践したことのある人は、「これってだいぶ○○のやることと被ってる」と思ったかもしれません。
まあぶっちゃけ被ってますね！
webサイトの制作や改善に必要な情報はおおむね決まっていて、情報をどう引き出すかという手法がフレームワークによって異なります。
デザインスプリントは私もやったことがありますが、サービスのコンセプト設計部分はかなり省略されています。
デザインスプリントをやる場合は、事前にKGI/KPIとまでは行かなくても、何のために提供しているサービスなのか、自分たちの強みやユーザーに提供できる価値は何かを洗い出した上で実践したほうが効率的でしょう。
つまるところ情報設計のやり方は「今必要な情報は何か」を洗い出し、決めていくために、状況に合わせて変化するものなのです。
おわりに
webの業界が長い方は、「とりあえずホームページは見た目の体裁がつけばいい」というtableレイアウト時代や、スキューモーフィズムなんて言葉もわからないデザイナーが立体感だけを真似したweb2.0時代をご存知かと思います。
その頃から比べて、現在のブランディングやマーケティングを意識することが一般的になったweb制作のなんて進化したことか！
だから今後は情報設計という工程は今後web制作に関わる人間は誰でもできるようになり、デザイナーでも提供するサービスに対してさらに俯瞰的・包括的視野を持つ必要が出てくるのではないかと、私は考えています。あるいは設計の分野が完全に独立した職能となるか……。
未来はまだわかりませんが、様々な分野で今後必要とされるUXという概念を意識する、最初のステップとして、情報設計にデザイナーも一歩足を踏み入れてみませんか？
それでは、もりたでした。