デザイナーがする情報設計とは?具体的なプロセスを解説

デザイナーがする情報設計とは?具体的なプロセスを解説

もりた

もりた

こんにちは、Web制作会社 株式会社LIGでアートディレクターをしているもりたです。

この記事ではデザイナーが情報設計することの理由とメリットを説明します。

「ユーザーにどんな”よいこと”を提供するのか」を考えた時、ただの情報整理だけではない情報設計の領域へと入っていくことになります。ディレクターやプランナーに任せてもいいのかもしれませんが、きっとデザイナーが一番意識しながら制作する立場にいるはずです。

もしもあなたが他のメンバーから渡されたワイヤーを元にデザインを作成していて、そのワイヤーに不満を持つことが多いのであれば、あなたは情報設計をすべきなんです。

株式会社LIGとは
株式会社LIG 本社写真
2007年設立のWeb制作会社。これまで国内外において30以上のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。
👉LIGのWeb制作実績はこちらから

そもそも情報設計とは?

情報設計(Information Architecture=IAとも略されます!)とは、Webサイトに限らず、多くの情報をまとめ、受け手が必要とする情報を適切に届けるための設計のことです。

Webサイトにおいてはワイヤーフレーム制作前におこなう工程であり、情報設計はUXデザインの一つで、(Webサイトならボタンやナビゲーションの配置などですね)サイトのユーザーエクスペリエンス(UX)を高めるための工程です。

主にWebディレクターやWebプランナーがおこなう業務ですが、これからのWebデザイナーは情報設計が出来るとすごく強い!と心から思ってます。

実際にデザイナー視点でどのようにおこなっていくのか、一緒に見ていきましょう。

webサイトの情報設計における全体の流れ

はじめに断っておきたいのは、この流れはひとつの方法であり、絶対の正解ではありません。

ただ、デザイナーにとって理解しやすい流れを意識してまとめてみたつもりです。

フェーズ1:分析

最初に、制作するwebサイトやそのwebサイトを提供する事業(自社であったり、クライアントであったり)について詳しく知る必要があります。

まずは詳細な情報を洗い出してみましょう。

①現状の課題を整理

webサイトを作ろう・リニューアルしよう・改修しようと決めたからには、そのキッカケが必ずあります。

  • サービスのアクティブなユーザー数が落ちてきた
  • ユーザーからの不満が溜まっている
  • 現状のサービスの売上を増やしたい
  • 問合せの経路を増やしたい
  • webサイトに古さを感じるため会社のイメージにそぐわない
  • 新規サービスのユーザーを獲得したい
  • 新規サービスや事業の認知度を上げたい

まずは何を問題と感じて、webサイトの制作に着手することになったのかを明確にします。

「採用サイトを作りたい」という注文にもさまざまな背景があります。

「応募数が欲しい」
「弊社の魅力をもっと伝えたい」
「採用のミスマッチを減らしたい」

etc…

さまざまな背景がありますので、ヒアリングなどを通じてしっかりと整理していきましょう。

②課題が発生している原因を分析

次に問題点の分析を行います。フレームワークなど様々な方法を用いて、しっかりと原因を分析していきましょう。

この時大事なのは自分たちがどうにもできない要因を原因として挙げないことです。

例えば「雨の日が多く、買い物客の来店が減った」と書くよりも、「雨の日にも来店したくなる施策を用意していなかった」と書いたほうが、次になにを考えるべきか想像しやすいですよね。

自分たちがどうにもできない要因が原因として挙げられた場合は、自分たちがどうにかできるレベルまで分解する作業をこの工程で行う必要があります。

例:採用のミスマッチがなぜ発生するのか
  • 社風や働いている人の情報が外部に伝わっていない
  • 社風に合う人に会社の情報がリーチしていない

③原因を解決する方法の仮説を立てる

課題の原因は複数あることが一般的です。原因が複数あるなら、解決策も複数あります。

それぞれの課題に対して、解決策の仮説を立てます。ここで立てた仮説が果たして正しいかどうか、コストパフォーマンスの良い具体的なやり方はなにか、などなどを「フェーズ2:戦略」で出てくる情報を元に考えます。

例:社風や働いている人の情報を外部に伝えるには
社内の様子をwebサイトで発信する
→どんな情報を伝えればいいの?
例:社風に合う人に会社の情報がリーチしていない
社風に合う人(ターゲット層)にリーチするように情報を流す
→そもそもターゲット層はどんな人?
→どんな媒体を使えばいいの?

フェーズ2:戦略

現状を分析することができたら、問題解決に必要な情報を集めて、戦略を練ります。

①競合と比較したときの立ち位置とユーザーに提供できる価値を把握する

まずはwebサイト制作の対象となるサービスのポジションを確認するためにポジショニングマップを作成します。

競合サービスと比較したとき何が違うのか、どういうポジションとしてユーザーに受け取られているのか。それらを踏まえた上で、ユーザーに「自分だけの特別なもの」として何を見せられるのか。

この「自分だけの特別なもの」こそが、「ユーザーに提供できる価値」になります。
ユーザーにとって代替品がないもの、特別なものにならなければ、自分を選んでもらうことはできないのです。

この記事1つとってもそうで、情報設計の記事はたくさんありますが、この記事は、そこに「デザイナーの」とつけ、「ディレクターに向けた情報設計の記事」と差別化を図っているわけです。

例:同業他社と比較して自分たちの会社はどう思われているのか
  • 高度な技術を使っている←→作るものがユニーク
  • ノリの良い人が多い←→一人で黙々と仕事する人が多い
例:同業他社にはない自社の特徴とは
  • 地方にサテライトオフィスを持っている
  • 多様な仕事があるので、自分の希望する仕事に集中することができる

②どんなユーザーが対象になるのか(ペルソナ)

次にサービスを提供するユーザーについて知ります。想像上のユーザーでもいいのですが、その場合自分たちに都合の良いユーザーを作りがちです。可能であれば、実在の人物をペルソナとして設定したほうがリアクションも計測しやすくなります。

ペルソナの情報としては以下のような項目を設定します。

  • 分類・区分
    • 会社員、学生などの所属、職業
    • 年齢
    • 性別
    • 年収、生活水準
    • 家族構成、配偶者
    • 居住地
    • 出身
  • 意識・性格
    • 趣味
    • 好きなもの
  • 行動・習慣
    • 普段の癖・行動
    • サービスを必要とする生活上の場面
  • 外見

ペルソナを簡単にまとめられる言葉があると、もっとわかりやすいですね。

例えば『ドラえもん』の「のび太」は「怠け癖があり、泣き虫ですぐ人に頼るが、根は明るく憎めない人」みたいな感じで。……良く言いすぎですか?

例:応募してほしいターゲット
  • 新しいことに目移りしやすいが、自分の興味のあるものに熱中する人
  • 休日は一人だったり、親しい人と静かに過ごすほうが好きな人

③webサイトを通じてユーザーは何を感じるのか(感動)

ペルソナを決定したら、今度はその人に「何を感じてもらうべき」なのかを考えます。

例えば、のび太がドラえもんにお願い事をしたいとき、どら焼きを贈るとします。
いつも食べている店のどら焼きが一番確実ですが「もっと美味しいどら焼き」をドラえもんに提供できたら、いつもより無茶なお願いも聞いてくれるかもしれません。

この場合、のび太に感じてもらうべきは「いつも買ってるどら焼きよりも美味しそうだから、ドラえもんも喜ぶだろう」という感情です。

もちろんプラスの感情だけではありません、人を行動させるためには喜怒哀楽のいずれかを動かさないといけません。そしてこれはユーザーが「何をメリットと思ってもらうのか」と同義です。

例:会社についてどう感じてもらうべきか
  • この会社ならいつも新しいことができて退屈せずに仕事できそう
  • ノリのいい雰囲気が苦手だけどこの会社なら大丈夫かもしれない

④ユーザーが感じた結果どんな行動をするのか

「これは自分のメリットになる!」と感じたユーザーにどのような行動を取ってもらえば、事業の利益につながるのか。これは大事なことです。

「いつものどら焼きより美味しそう!」と思ったのび太にはどら焼きを買ってもらわないと利益になりません。

しかしECサイトの場合は、検索でたどり着いた結果1度だけ少額の買い物をしてもらうよりも「このECサイトで買い物するかも……」と思ったユーザーにブックマークしてもらったほうが長期的な利益につながるかもしれません。

どんな行動を取ってもらうべきかは、webサイトを通じてどう利益を出すのかというビジネスを考えて決めなければいけないのです。

ちなみに「ユーザーの感じたこと」と「感じた結果の行動」を一連の流れとして捉えるためによく使われるのが、カスタマージャーニーマップです。こちらも希望的観測がまじりやすいので使う場面が難しい手法ですが、まとめるためには有効な手段だと思います。

例:ペルソナに何をしてもらいたいか
採用への応募

⑤ユーザーを行動させるための施策とゴールを考える(KPIとKGI)

原因の仮説を、ペルソナと提供できる価値を見直した上でもう一度考え直してみましょう。

例:社風や働いている人の情報を外部に伝えるには
社内の様子をwebサイトで発信する
→どんな情報を伝えればいいの?

例にした会社が提供する価値は

  • 地方にサテライトオフィスを持っている
  • 多様な仕事があるので、自分の希望する仕事に集中できる

の2点なので、

  • 社内でそれぞれ希望する仕事に専念している人を紹介する
  • 会社で扱っている多様な制作事例を詳しく紹介する
  • 地方でゆっくり静かに仕事できる様子を紹介する

などの施策が考えられます。

例:社風に合う人に会社の情報がリーチしていない
社風に合う人(ターゲット層)にリーチするように情報を流す
→そもそもターゲット層はどんな人?
→どんな媒体を使えばいいの?

これについては、ペルソナの年齢など分類・区分を考えた上で、ペルソナがよく見ているメディアを選択し、先ほど挙げた情報を露出させていくという施策が考えられます。

KPIは施策をどれくらい実施するか、KGIは施策を行った結果、どれくらいの成果を期待するかを数値化したものです。

設定してあると効果測定や改善施策の目安になり便利です。

フェーズ3:設計

施策とゴールが決まったら、ようやくwebサイトの中身を決めていきます。

①必要なコンテンツは何か

載せるべきコンテンツ、載せたいコンテンツ、載せなくていいコンテンツを洗い出していきます。

場合によっては不必要と思われるものも、いろんなところから要望として挙がってくることがありますが、ゴールを確認して、挙げられたコンテンツがゴールの達成にプラスになるかを考えて判断します。

②どんな流れでコンテンツを見せるのが有効か

よく後輩のデザイナーには「どういう流れで説得したら読む人に納得してもらえるのかを考えて」と説明します。

もちろんユーザーは上から下まで、コンテンツに従ってwebサイトを隅から隅まで読んでくれるなんてことはありません。

だからこそ、スタート(最初に入ってくる情報)とゴール(最後に行き着いてほしい情報)を整理する必要があります。

③サイト構成/ページ構成

必要なコンテンツと流れ(重要なコンテンツ)を整理したら、サイト構成とページ構成を作成します。

簡単なwebサイトであれば、サイトマップと各ページのワイヤーフレームを作れば十分です。ページ数が多く複雑なwebサイトやサービスになると、サイトフローやユーザーフローが必要になるでしょう。

情報設計を実践する前に

注意すべきこと

情報設計の段階というのはあくまで仮説であり、社内で話しているとこうしたらユーザーはこう反応するだろう(してほしい)という、ちょっと希望の混じった推測になることがよくあります。

しかしそれでは本当にユーザーに、こちらの想定した感動を与えられるのか曖昧になってしまいます。ですから、情報設計はできるだけ「憶測ではない情報」を用いて考える必要があります。

「憶測ではない情報」を得て、設計するための理論は以下のようないくつかの種類が考えられます。

  • 経験則
  • マーケティング
  • HCD(人間中心設計)/UCD(ユーザー中心設計)
  • 人間工学

webサイトと相性が良いのはマーケティングでしょうか。

情報設計とUXの関係

フェーズ2で取り上げた、ユーザーのペルソナや感動を考えるとなると、「情報設計とUXデザインは何が違うんだ?」と思われる方もいるかもしれません。

誤解を恐れずに簡易にまとめると、UXは情報設計よりも俯瞰的な視野を持った概念です。

webデザイナーが作っているのは、サービスを提供しているwebサイトというモノであり、情報設計はサービスと提供するモノを作る段階で必要な情報を設計しているに過ぎません。

UXはもっと長期的・包括的に、継続して考えられるものです。
例えば「ソニータイマー」という言葉は、長期的にマイナスのUXが重なった結果生まれたと考えることができます。

これに沿うと、私たちが今考えているのは製品を作って売るところまでなので、「ソニータイマー」という評判を覆すUXを提供するところまでは考えられていないというわけですね。

どんなフレームワークを使うか

webサイトの制作や改善に必要な情報はおおむね決まっていて、情報をどう引き出すかという手法がフレームワークによって異なります。

ただし、選択するフレームワークによっては、サービスのコンセプト設計部分が省略されたりしてしまう可能性があります。

事前にKGI/KPIとまでは行かなくても、何のために提供しているサービスなのか、自分たちの強みやユーザーに提供できる価値は何かを洗い出した上で実践したほうが効率的かと思います。情報設計のやり方は「今必要な情報は何か」を洗い出し、決めていくために、状況に合わせて変化するものです。

おわりに

今後、情報設計という工程は今後web制作に関わる人間は誰でもできるようになり、デザイナーでも提供するサービスに対してさらに俯瞰的・包括的視野を持つ必要が出てくるのではないかと、私は考えています。

あるいは設計の分野が完全に独立した職能となるか……。未来はまだわかりませんが、様々な分野で今後必要とされるUXという概念を意識する、最初のステップとして、情報設計にデザイナーも一歩足を踏み入れてみませんか?

ユーザーファーストなWebサイトを作りませんか?

LIGは2007年創業、年間150サイト制作の実績で、毎年複数のデザインアワードを受賞しています。
訪問した瞬間貴社の魅力がグッと伝わる!そんなWebサイトを制作します
LIGのWeb制作実績・詳細をみてみる

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーでイラストレーターのもりたです。 好きなモビルスーツはνガンダム、好きなレイバーはイングラム、好きな勇者はガオガイガーです。

このメンバーの記事をもっと読む
WEBデザインをはじめよう | 39 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL