【初心者必見】デザイナー以外に見て欲しい。仕事での資料作りにも活かせる"情報設計"に学ぶデザインパターンを知る
まず始めに
皆さんの中に椅子の使い方を知らない人はいないと思います。
椅子はどの種類においてもおおよその構造は同じため、見た目の違いはあれど椅子の使い方がわからないと言うことはないと思います。
※ UI（インターフェイス）界隈では、アフォーダンスと言われています。
アフォーダンスについては、本記事では詳しく言及しません。
わかりやすい見た目 のおかげで使いこなすことができます。
※ 無論、わかりにくいものも世の中には溢れています。
特にドアノブに至っては、数多くのインターフェイス関連の書籍で好例 / 悪例が取り上げられており、
UI界隈ではよく話題になります。笑
わかりやすい見た目とは？
上記の椅子がわかりやすい見た目をしているので、座れるという情報が伝わり、使用することができます。 このように相手に正しい情報を伝えることができたらいいですよね。 きっと日常生活のあらゆるシーンで活用できるでしょう！- コミュニケーション時に、的確に相手に物事を伝えることができる
- 仕事における資料作成などが捗り、生産性が向上する
- etc…
情報設計 といいます。
人に情報を伝えるためにはいくつか （デザイン）パターン や コツ が存在し、それを学ぶことによって情報設計力をあげることができるのです。
[amazonjs asin="4788514346" locale="JP" title="誰のためのデザイン？ 増補・改訂版 ―認知科学者のデザイン原論"]
今回は特に 資料作りなどのアウトプットにおける情報設計 について解説していきます。
情報設計において、重要なポイント3つ
特に大きく留意すべきポイントは下記になります。- ①ストーリー（文脈を考える）
- ②グルーピング（かたまりを意識する）
- ③ランキング（優先順位をつける）
①ストーリー（文脈を考える）
読む人（ターゲット）を主体に考えて、文脈を考えます。 情報の伝え手が押さえるべきポイントはこの 1.背景 と 3.結果 の部分にあります。
1.背景
資料を作り始める前に、まずは読む人の背景を考えてみましょう。
あなたがこれから作るものは、 一体何の目的で、どんな人たち が目にするものでしょうか？
例えばこの記事だと、 情報設計を知らない人 や 資料作成などのアウトプットが苦手な人 のためにノウハウを伝えるためのものになるので
それを前提に、本題に入る前にわかりやすい例を挙げるなどして、木ワードなどの解説をしています。
2.読む
実際にココで読んでもらうためのものを用意します。
いわゆるあなたの用意したアウトプットをターゲット（読み手）が見るプロセスがここに相当します。
3.結果
あなたの資料を読んだ人が、 結果としてどういう行動を取れると良いのか？ を考えてみましょう。
ゴールが見えていると、資料に求められている情報が明確かつ具体的に見えてくるはずです。
この記事の場合、読んでくれた人が結果として解像度の高い資料作成やコミュニケーションを作れるようになることにあります。
従ってとにかく細かい内容よりも、すぐに実践できるような内容（以降に記載）を多めに取り扱っています。
②グルーピング（かたまりを意識する）
グルーピングとは、 組分けすること /配置すること をいいます。 資料作りの場合、グルーピングには2種類あります。- 情報のグルーピング
- 視覚的グルーピング
情報のグルーピング
例えばふと立ち寄ったファミレスで、以下のようなメニューがあったとします。いかがでしょうか？
空腹で仕方がないのに、どこに目を向けていいかわからにくいですよね。
これは食べ物という情報が羅列されていますが、それ以上細かいグルーピングがされていないからです。
では情報のグルーピングをしたものを見てみましょう。
洋食、和食、中華でカテゴライズされていて、すっきりと見えますよね。
これが情報のグルーピングです。
一つの情報を分解した要素を階層構造化し、それを視覚的にも見やすくまとめること を指します。
今回は食べ物の種類でグルーピングしましたが、メニューであればランチタイムやディナータイムなどの食べられる時間帯で区切るなどしてもいいかもしれません。
グルーピングの方法は様々です。
視覚的グルーピング
さらに視覚情報を活用したグルーピングを見てみましょう。 先ほどのメニューに画像を入れてみます。
だいぶファミレスのメニューらしくなってきましたね。
画像を入れることで、これまでの食べ物の種類のグルーピングに加えて
画像とテキストのグルーピングがされたことになります。
さらに一手間、見た目に加えてみましょう。
テキストの色味を微妙に変えてみました。
※ ただし要素は必要十分なだけで過剰なデザインは逆に情報量が増えることで悪化することがあります。あくまでデザインとしては微妙ですが一例として挙げています。
このように情報を整理・分解してグルーピングし、それらをわかりやすく視覚的に整えることで
アウトプットをわかりやすくことができます。
③ランキング（優先順位をつける）
最後に、伝えたい情報に優先順位をつけることについてご紹介します。 優先順位とは主に読み手に対して伝えたい情報が複数ある場合、何から順に伝えたいか？何を一番に伝えたいのか？を整理すること です。
本記事の場合、一番伝えたいのは情報設計のノウハウですが、ターゲットがそういった分野以外の方になりますので
まず最初に情報設計の基本的な内容を簡潔に記載しています。
本記事の場合
- まず始めに情報設計とは何か？を簡潔に説明する
- 次に、その流れで情報設計について順に説明する ← 今ココ
- 最後にこれまでに説明した内容をまとめる
まず一番最初に目に入ってくるのが、大きな 1日1回無料 という大きなテキストです。
無料ってことはおトクなガチャのかな？となんとなくわかります。
次に周囲に散りばめられたキャラクターやアイテムの画像です。
アイテムがキラキラしていますね。このバナーには明記されていませんが、察するに これらのアイテムが手に入るのかな ということがわかりますね。
最後に画面下部に小さく記載された開催期日がわかります。 このガチャに興味を持った人はこうして期日を確認できる わけです。
まとめてみましょう。
このゲームのバナーの場合
- 最初に「無料」を強く訴求して、おトク感を出す
- 次に無料で何が手に入るのか？アイテムの画像を出して、それを伝える
- 最後に興味を持った人が、開催期日をわかるようにしてガチャイベントに参加してもらえるよう、概要がわかるようにする
最後に
いかがでしたでしょうか？ 本当に情報設計の基本の考え方やノウハウを簡潔にまとめてみました。- ①ストーリー（文脈を考える）
- 1.（ターゲットの）背景を考慮する
- 2.（ターゲットが）読む
- 3.（ターゲットが）結果を踏まえて、どう行動して欲しいかを考える
- ②グルーピング（かたまりを意識する）
- 情報のグルーピング
- 視覚的グルーピング
- ③ランキング（優先順位をつける）
- 何から順に伝えたいか？
- 何を一番に伝えたいのか？