この記事はセゾン情報システムズ Advent Calendar 2022 20日目の記事です。
はじめに
はじめまして、サービスデザインチーム所属のUIデザイナーです。
突然ですが、開発の前に「情報設計」は済んでいますか？
- 時間がないからやってない？
- それは自分たちの領域じゃない？
- 情報設計なにそれ？
なるほど、お気持ちはわかります、、
ところが情報設計を二の次にしていると、せっかく開発を頑張っていても「なんか使いづらい」製品・サービスになっているかもしれません。
情報設計とは何か？
情報設計は「必要な情報を見つけやすく、わかりやすくするための設計」です。
機能設計にも似ていますが、情報設計の目的はユーザーが、開発側の意図した通りに情報を受け取れることにあります。
この記事では「情報設計」と記載していますが、「情報アーキテクチャ設計」「インフォメーションアーキテクチャ設計」とも同じものを指しています。
情報設計をしていないとなにが起こる？
情報設計を意識していなくても、画面を設計していれば何らかの設計を行っていることになります。
ただ、情報設計の工程を意識せずに進めていると以下のようなことが起こります。
- ごちゃごちゃする
- ユーザーにとって情報が見つけられなくなる
- 使いづらい・使えないと思われる
- 問い合わせが増加する
- サービス・製品自体が使われなくなる
- サービス提供側が想定していなかった使われ方をする
- 情報を追加した時に設計が破綻する
- 開発の手戻りが発生しやすくなる
このように、頭の痛くなるような事ばかり起こる可能性があるのです。
情報設計に必要な材料
まずは、情報設計のために必要な情報を事前に揃えます。
ここまでに揃っていなければ作成してチームメンバーと認識を合わせましょう。
必要な情報は以下の4つです。
- ビジネス要件の把握
- ユーザー分析から得られたペルソナ
- 開発サービスを利用する時のユーザーシナリオ
- 既存コンテンツのリスト
それぞれで必要なアウトプットと詳細を記載します。
ビジネス要件の把握
アウトプット：サービス開発の目的を明示化した 資料 or メモ
ビジネス要件の把握で、サービス・機能開発の目的を明らかにします。
これがはっきりしていないと、そもそも作るものがブレてしまい、これ以降の工程が完璧だったとしてもやり直しが発生します。
または、ブレたまま進み続けることになります。これは避けたいですね、、、
開発の目的は振り返りや共有のためにも、必ず資料として書き起こしておきましょう。
ユーザー分析から得られたペルソナ
アウトプット：ペルソナ (必要な立場/人数分)
ターゲットとなるユーザーを分析し、ペルソナを作成します。
対象とするユーザーの立場が複数ある場合、例えば申請者と承認者という別の立場のユーザーが使用するとしたら、2名分のペルソナを作成しましょう。
ここで注意点。ペルソナは、全くの想像で作り上げないこと。
ユーザーインタビューやリサーチの結果から得られた情報を使用してペルソナを作成します。
開発サービスを利用する時のユーザーシナリオ
アウトプット：ユーザーシナリオ
サービスを訪れたペルソナが、サービスの利用前〜後までどのように立ち回るかを把握します。
これも情報設計のために重要な項目です。
- 何を達成したいのか
- そのために具体的に何をするのか
- 開発サービスを使用する前後の動き
既存コンテンツのリスト
アウトプット：As-Isのディレクトリ構造
すでにサービスがある場合は、既存構造をリスト化しておく。
この後の情報設計の「ラベル設計」段階で構造と名称を整理します。
ここで分類や関連性を確認できるといいと思います。
情報設計のプロセス
前提条件がまとまったら、いよいよ本題の情報設計です。
ここでは2つを作成します。
- サイトストラクチャ・ナビゲーション設計
- ラベル設計
サイトストラクチャ・ナビゲーション設計
アウトプット：サイトストラクチャ (Figma or Miro)
サイトストラクチャ・ナビゲーション設計は同時に行なってしまいます。
プロダクトの用途に合わせてサイトストラクチャの形態を選択します。
- 「階層型分類構造」
- 「ファセット分類型構造」
- 「Web型(ハイパーリンク)構造」
- 「ハブ＆スポークス型構造」
- 「一覧&詳細管理型」
- 「直線型(フロー型)構造」
サイトストラクチャを書き出した後にナビゲーション(画面遷移)を表す矢印を足しています。
ここでは、ナビゲーション(フロー)として繋がっていない画面がないか確認が必要です。
ラベル設計
アウトプット：ディレクトリマップ (Excel)
画面のディレクトリ構造を書き出します。
画面名称、URL、パスファイル、階層レベル、titleなど情報の情報構造を一覧化したものです。
これにより、概念やラベル・文章の一貫性、画面の抜け漏れがすぐにわかります。
ラベルはターゲットにもよりますが、ひと目見ただけで分かりやすいことが最も重要です。
情報設計完了！
ここまでで情報設計完了です。
この後、画面設計に入ります。
画面設計に必要なものは以下になります。
続きにも興味を持っていただいた場合は以下キーワードで検索してみてください。
- ゾーニング
- ワイヤーフレーム
- ビジュアルデザイン
最後に
デザインチームで行っている情報設計のプロセスについて紹介してきました。
エンジニアの方々だけで開発を行う際は、ご紹介した内容をぜひ実践してみてください。
デザイナーの方が実施する場合も、意識しておけばコミュニケーションが取りやすく、レビューも捗るのではないでしょうか。
この設計を使って、構造としての「なんか使いづらい」を解消していきましょう！
最後までご覧いただき誠にありがとうございました。
参考情報
- 長谷川敦士, IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計, 株式会社ビー・エヌ・エヌ新社, 2010年.