-5匹目- ネコの手も借りたい情報デザイン "序列"

五匹目は、"序列"です。
表紙は、カンボジアのアンコール遺跡群にある寺院遺跡"バンテアイ・サムレ"にお住まいのサバトラシロさんでした。

• 前→四匹目 "プレグナンツの法則"
• 次→六匹目 "情報のシグニファイア"

情報の序列。"リニア"と"ノンリニア"。

みなさんリニアモーターカーのリニアって、どういう意味かご存知ですか？

リニア (linear) とはlineの形容詞で"直線の"という意味である。リニアモーターとは、円筒状の交流モーターを帯状に展開し、回転運動の代わりに直線運動をするようにしたものである。（Wikipediaより）

つまり、リニアとは"直線的（線形）に置かれたもの"という意味です。ちなみに、ノンリニアとはnon-linearと表記し"直線でない非線形に置かれたもの"という意味になります。

この考え方を拝借して、序列（並ぶ順番）を持つ情報をリニアな情報、持たない情報をノンリニアな情報と定義します。

序列を持つ情報の例を挙げてみます。野球の打順、出席番号、料理の手順などはリニアな情報ですね。

一方で猫の柄リストやオムニバス形式の小説、料理の材料リストなどは明確な序列がありませんので、これらはノンリニアな情報と言えます。

では、突然ですが、リニアな情報とノンリニアな情報をHTMLを使ってマークアップしてみましょう。

リニアな情報のマークアップ

リニアなリストをHTMLでマークアップすると以下のようになります。サンプルはネコの餌やり手順です。

これをブラウザで見ると、以下のようになります。

1. ネコ缶を用意します。
2. プルタブに指をかけます。
3. カパッ！
4. 皿に盛りつけます。
5. ネコまっしぐら。

ブラウザで見ると、リストの冒頭に数字がつきました。HTMLでは、リニアな情報はOL要素でマークアップ（タグで囲むこと）します。OL要素は"Ordered List"の頭文字をとったもので、その名の通り序列を持つリストをマークアップするために使用します。こうすることで、ブラウザ側から数字を付与するサービスが受けられます。

ノンリニアな情報のマークアップ

次に、HTMLでノンリニアな情報をマークアップしてみましょう。サンプルはネコの柄リストです。

これをブラウザで見ると以下のようになります。

• キジネコ
• 三毛ネコ
• チャトラネコ
• クロネコ

リストの冒頭に"・"がつきました。HTMLではノンリニアな情報はUL要素でマークアップします。UL要素は"Unordered List"の頭文字をとったものです。UL要素は序列の概念を持たないので、数字ではなく"・"などの汎用マーカーが付与されることになっています。

序列の重要性

都道府県リストを作るとします。47個の都道府県を並べるにあたり、さまざまな序列が考えられます。もしあなたがWebページや紙面のデザイナー・製作者であった場合、考え得る序列基準の中から、どれかひとつを選ぶ必要があるでしょう。

※ ここで言及した"基準"のことを、"ファセット"と呼びます。今後、このシリーズで解説すると思いますので触れておきます。

50音順

都道府県を50音順（正確には都道府県の"読みかた"の50音順）で並べると、以下のようになります。埼玉県は20番目ですね。

全国地方公共団体コードより、都道府県コード順

都道府県を都道府県コード順で並べると、以下のようになります。埼玉県は11番目ですね。

面積順

では、都道府県を面積が広い順で並べると、以下のようになります。カッコ内は概算面積です。単位はkm2となります。埼玉県は３９番目になってしまいました。

このように、同じ体系を並べるにしても、序列の設計が異なれば結果が大きく変わります。

情報はただ並べるだけでは意味を成しません。必ず論拠が必要になります。ユーザーに、どんな文脈でリストを見せ、何を理解させたいのか。明確に言えるようにしておきましょう。

どうやって序列を設計するのか？

では、どのように序列を設計すれば良いのでしょうか？

以下は、私の序列設計ノウハウです。長くなってしまうので箇条書きにしますが、当シリーズで順次言及するつもりです。

１．誰かが決めた序列を使ってみる

先ほどの都道府県の順番決めの例においては、"都道府県コード順"が該当します。決めたのは国でしょうか。

権威ある組織や団体が決定した序列を使用するのは、論拠があるので使いやすいです。注意すべきは、その序列が世間で十分に認知されているかどうかです。誰も知らない組織が勝手に提唱したものでは、きっと使いづらいものになります。

Webでよく見かける良くない事例として、自社の管理コードによって製品や商品をリストしているパターンがあります。ユーザーから見たら謎の序列になっているのに、管理者側は使いやすいため、なかなか気がつけないんですよね。

２．LATCHを使ってみる

LATCHとは、
Location（ロケーション：位置）
Alphabet（アルファベット）
Time（タイム：時間）
Category（カテゴリー）
Hierarchy（ヒエラルキー：連続量）
という整理軸を指します。序列設計の指標としてリチャード・ソール・ワーマン（Richard Saul Wurman）が提唱しました。とても便利ですので、覚えておいて損はありません。

３．無秩序 もしくは ランダム

つまり、"論理的な序列は無し""その時の気分""なんとなく"という設計です。「設計してないじゃん！」と突っ込まれそうですが、"無秩序である"という設計を行っているのです。

ノンリニアな情報を使いやすく

リニアな情報は、適切な序列を採用することで使いやすくなります。しかし、ノンリニアな情報を使いやすくするためには、ちょっとしたコツが必要です。

下のリストはネコの柄のリストです。個人的な好き嫌いは別にすると、柄に序列はありませんので"無秩序"な情報となるはずです。では、並べてみましょう。

• キジネコ
• シロネコ
• サビネコ
• チャトラネコ
• クロネコ
• 三毛ネコ

このような感じです。これを記憶するのはなかなか難しいですね。少し手を加えてみます。

• 三毛ネコ
• シロネコ
• クロネコ
• チャトラネコ
• キジネコ
• サビネコ

いかがでしょうか。少しは覚えやすくなったと思いませんか？ どんな技を使ったのでしょうか。

• 三毛ネコ
  メジャーな柄名を最初に持ってきて敷居を下げる。
  また"この情報は何のリストか"を明示する効果も狙っている。
• シロネコ
  シロとクロは単色つながりなので連続させる。
• クロネコ
  塗りタイプここまで。
  シロとクロはどちらが先でもよさそうだが、クロシロよりシロクロの方が語感がよさそう。
• チャトラネコ
  ここから先は縞模様ゾーン。比較的メジャーな縞模様その１。
• キジネコ
  縞模様その２。知ってるひとは知っている。
• サビネコ
  マイナーだがインパクトのある柄名でフィニッシュ。

このように、ノンリニアな情報を使いやすくするには、明確な順番が無いことを逆手にとり、要素同士の関係性を利用して順番をコントロールすると、読みやすく、理解しやすく、覚えやすい情報となります。

まとめ

普段、何気なく並べられている情報にも、誰かの設計意図が隠されています。情報デザインのスキルを習得したい方は、このような設計意図を見いだす訓練をしてみてはいかがでしょうか。きっと現場で役に立つはずです。

ちなみに、この"猫の手シリーズ"の記事リリース序列設計は"書きたい順"です。

• 前→四匹目 "プレグナンツの法則"
• 次→六匹目 "情報のシグニファイア"