BLOG

ネコの手も借りたい情報設計
五匹目「序列」

Fujii

ネコの手も借りたい情報設計 <br>五匹目「序列」

こんばんは。キャットパッド藤井です。

実践で役に立つ設計キーワードをぼちぼち取り上げています。第五回は、「序列」です。表紙は、カンボジアのアンコール遺跡群にある寺院遺跡「バンテアイ・サムレ」にお住まいのサバトラシロさんでした。

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

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

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

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

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

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

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

では、突然ですが、リニアな情報とノンリニアな情報をHTMLを使ってマークアップしてみましょう。（HTMLが分からない方はポカンとしていてOK）

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

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

<ol>
<li>ネコ缶を用意します。</li>
<li>プルタブに指をかけます。</li>
<li>カパッ！</li>
<li>皿に盛りつけます。</li>
<li>ネコまっしぐら。</li>
</ol>

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

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

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

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

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

<ul>
<li>キジネコ</li>
<li>三毛ネコ</li>
<li>チャトラネコ</li>
<li>クロネコ</li>
</ul>

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

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

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

序列の重要性

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

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

50音順

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

  1. 愛知県
  2. 青森県
  3. 秋田県
  4. 石川県
  5. 茨城県
  6. 岩手県
  7. 愛媛県
  8. 大分県
  9. 大阪府
  10. 岡山県
  11. 沖縄県
  12. 香川県
  13. 鹿児島県
  14. 神奈川県
  15. 岐阜県
  16. 京都府
  17. 熊本県
  18. 群馬県
  19. 高知県
  20. 埼玉県
  21. 佐賀県
  22. 滋賀県
  23. 静岡県
  24. 島根県
  25. 千葉県
  26. 東京都
  27. 徳島県
  28. 栃木県
  29. 鳥取県
  30. 富山県
  31. 長崎県
  32. 長野県
  33. 奈良県
  34. 新潟県
  35. 兵庫県
  36. 広島県
  37. 福井県
  38. 福岡県
  39. 福島県
  40. 北海道
  41. 三重県
  42. 宮城県
  43. 宮崎県
  44. 山形県
  45. 山口県
  46. 山梨県
  47. 和歌山県

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

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

  1. 北海道
  2. 青森県
  3. 岩手県
  4. 宮城県
  5. 秋田県
  6. 山形県
  7. 福島県
  8. 茨城県
  9. 栃木県
  10. 群馬県
  11. 埼玉県
  12. 千葉県
  13. 東京都
  14. 神奈川県
  15. 新潟県
  16. 富山県
  17. 石川県
  18. 福井県
  19. 山梨県
  20. 長野県
  21. 岐阜県
  22. 静岡県
  23. 愛知県
  24. 三重県
  25. 滋賀県
  26. 京都府
  27. 大阪府
  28. 兵庫県
  29. 奈良県
  30. 和歌山県
  31. 鳥取県
  32. 島根県
  33. 岡山県
  34. 広島県
  35. 山口県
  36. 徳島県
  37. 香川県
  38. 愛媛県
  39. 高知県
  40. 福岡県
  41. 佐賀県
  42. 長崎県
  43. 熊本県
  44. 大分県
  45. 宮崎県
  46. 鹿児島県
  47. 沖縄県

面積順

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

  1. 北海道(83,424.22）
  2. 岩手県(15,275.01）
  3. 福島県(13,783.75）
  4. 長野県(13,561.56）
  5. 新潟県(12,584.10）
  6. 秋田県(11,637.54）
  7. 岐阜県(10,621.29）
  8. 青森県(9,645.40）
  9. 山形県(9,323.15）
  10. 鹿児島県(9,188.10）
  11. 広島県(8,479.38）
  12. 兵庫県(8,400.90）
  13. 静岡県(7,778.70）
  14. 宮崎県(7,735.31）
  15. 熊本県(7,409.32）
  16. 宮城県(7,282.14）
  17. 岡山県(7,114.62）
  18. 高知県(7,103.91）
  19. 島根県(6,708.23）
  20. 栃木県(6,408.09）
  21. 群馬県(6,362.28）
  22. 大分県(6,340.61）
  23. 山口県(6,112.30）
  24. 茨城県(6,096.93）
  25. 三重県(5,774.39）
  26. 愛媛県(5,676.10）
  27. 愛知県(5,172.40）
  28. 千葉県(5,157.64）
  29. 福岡県(4,986.40）
  30. 和歌山県(4,724.68）
  31. 京都府(4,612.20）
  32. 山梨県(4,464.99）
  33. 富山県(4,247.61）
  34. 福井県(4,190.43）
  35. 石川県(4,186.15）
  36. 徳島県(4,146.93）
  37. 長崎県(4,132.32）
  38. 滋賀県(4,017.38）
  39. 埼玉県(3,797.75）
  40. 奈良県(3,690.94）
  41. 鳥取県(3,507.05）
  42. 佐賀県(2,440.64）
  43. 神奈川県(2,415.81）
  44. 沖縄県(2,281.00）
  45. 東京都(2,190.90）
  46. 大阪府(1,904.99）
  47. 香川県(1,876.73）

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

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

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

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

経験則で考えても、うまくいくことも多いでしょう。しかし、情報設計の現場であるならば、もう少し論拠が欲しいところです。

以下は、私の序列設計ノウハウです。長くなってしまうので箇条書きにしますが、当シリーズで順次言及するつもりです。（リクエストしていただければ優先して記事にしてみようと思ってます。）

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

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

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

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

２．LATCHを使ってみる

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

カオスな明日にネコパンチ！　キャットパッド藤井でした〜。

  • SHARE