1.0UX TIMEShttps://uxdaystokyo.com/articles菊池 聡https://uxdaystokyo.com/articles/author/satoshi-kikuchi/rich600338<blockquote class="wp-embedded-content" data-secret="PA9n4Hvt9B"><a href="https://uxdaystokyo.com/articles/ia_interpretation_and_website/">情報設計（IA）の解釈とWebサイト</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/ia_interpretation_and_website/embed/#?secret=PA9n4Hvt9B" width="600" height="338" title="“情報設計（IA）の解釈とWebサイト” — UX TIMES" data-secret="PA9n4Hvt9B" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2016/04/image02-in.png516600IAのInformation(情報)の解釈が要 今年はアビー・コバートさんが来日することもありIAの内容が含まれます。 IAとは、infomation architecture（インフォメーションアーキテクチャ）の略で日本語で訳されると情報設計になります。アーキテクトや設計という言葉は、単純に情報を整理整頓することと捉えがちです。 しかし、アビーさんはIAの情報という言葉の捉え方がポイントだと解説しています。 アビーさんの書籍「今日からはじめる情報設計」や彼女のウェブサイトでも紹介していますが、情報の設計だけでなく、ユーザーがどのように思い、考え、感じるのかを含めたものが、 ”情報設計の情報” と説明しています。 コンテンツとデーターが情報ではない 彼女はイラストを用いてIAにおける「Information:情報」について解説しています。 上記のジャム、ジェリーはコンテンツです。価格というデーターがあります。 真ん中に何もない状態があります。これを見たあるユーザーは、「あ、売れ切れだ」と思うかも知れません。別のある人は、「人気のある商品なのね！」と思うのかも知れません。 IAでいう「Information:情報」は、上記のように、ユーザーが感じたことや思うことも含めてたものだと言っています。 私達が情報と思ってしまうデーターやコンテンツは単なる状態でしかなく、それらを踏まえたものがインフォメーションなのですね。 UXを考えるための手段がIA そう言う私も(IA)情報設計は情報を整理することで、その情報に触れる(UI)ユーザーインターフェースに大きく関わって、結果的にUXに関わっているものだと考えていました。 そのため、この概念を知った時は目から鱗が落ちる思いがしました。 前提として、IAがUX自体を考慮する要素が入っているという考えは重要です。この捉え方を間違えてしまうと、単なる情報の整理に過ぎないのかも知れません。（アビーさんのイラストで充分にわかるのですが）あえて、私はアビーさんのイラストに以下のように追加いたしました。 この世の中は全てカオス（混乱） アビーさんの書籍に混乱という言葉が利用されています。別に混乱なんてしていない。と思う人もいるかもしれませんが、実は、この世の中は全てはカオスの状態です。 例えば、人間。肌の色も違えば、言葉も違う、当然考え方なども異なり、好みも異なります。上記のように、IAの情報も同様にカオスの状態が常です。 アビーさんの言葉を借りるのであれば、混乱している状態と言えます。 その混乱している状態＝つまり、複雑に入り込んだ状態ではユーザーをナビゲートすることはできません。 混乱（複雑に入り組んだ）状態を整理し、便利などと感じさせることがIAのベーシックになります。そして、カオスの世の中を整理することができれば、ユーザー、カスタマー、ステークホルダーをナビゲートすることができます。 スポーツジムで感じるペルソナ 私はヨガをやるためにジムに通っています。スタジオは20名入れる部屋で、私の隣でヨガをやっていた方が、お風呂に入った後のドライヤールームでも隣になったことがありました。また違う日に、同じようにヨガのスタジオで隣にいた人がロッカーのブロックが6つあるのにも関わらず同じブロックにいたことがありました。 統計的にどのくらいの確率でなるのか？と思うのと同時に私は、同じ性格の持ち主は同じようなことを考え、同じような行動をとっている可能性を感じました。 ロッカーはコの字型のブロックになっています。奥のロッカーは手前のロッカーの人が使っていると中に入りにくいため、手前のロッカーが比較的人気です。また、ロッカーは上下に分かれていて、腰を曲げたりしゃがみこまないと荷物が出し入れしにくい下のロッカーは不人気です。 しかし、下のロッカーを好む人がいらっしゃいます。それは、足腰が弱い方で椅子に座って着替えをするため下のロッカーを好んでいるようです。また、人の目を気にされている方やゆっくり着替えをしたい方は、奥のロッカーを好んでいるように感じました。 つまり、私のようなタイプが利用するロッカーやドライヤーのブロック、ヨガを受ける際のスタジオの位置の好み、思考は同じところを利用する傾向にあるのでは？と感じました。利用する人も同じなのか気になったので、何名かに聞いたところ、好みの位置がやっぱりあるようで、できるだけ同じロッカーを利用する方が多くいらっしゃいました。 スポーツジムで感じる情報設計（IA) 同じくスポーツジムでの話ですが、ロッカーのカギを腕につけてください。というポスターの写真がありました。女子ロッカーに掲載しているのですが、男子の青色のカギで説明していたので、私は一瞬「あれ？」と違和感を感じました。 つまり、自分が使っている赤色のロッカーのカギでないことで戸惑ってしまったのです。内容を読めば理解でき、男性のロッカーの様子を写真に撮影しているのだとわかりますが、しっくりしない、戸惑いを感じるのです。 ポスターは全てのロッカーに貼っている訳ではないので、たまに目に入る程度なのですが、毎回戸惑いを感じてしまうのです。戸惑いを自分なりに分析すると、自分のことのように一瞬感じない。しっくりこない。というのを感じます。このように、ちょっとしたことに思えるものでさえユーザーには影響を与えているんですね。 同じ言葉でも使う場所と使う人によって異なる ジムのポスターで利用されたカギの色が異なるという同じ状況でも、性別が異なることで ユーザーによって感じることが違うように、同じ言葉でも使う場所と使う人によって意味が異なる場合があります。 ターゲットにしているユーザーやステークフォルダが利用する言葉と、一般に使われている意味が異なる場合や、解釈が異なっている場合があります。そのため、同じ言葉を同じ意味で利用する必要があります。 アビーの書籍を読んで アビーさんの書籍 日本語でも発売されています。 情報設計についての入門教科書はなかったためアビーさんが作成され、なかった時に比べ勉強しやすく入りやすくなったとのことですが、私が彼女の書籍を読んで感じたことは、教科書として作られたため穴埋めや方法論が記載されていて、読んだだけでは理解しきれないと感じました。もちろん、この書籍の通りにいくつかのワークショップを実践する（授業を行う）ことで理解を深めることができると思います。 しかし、昨年ケイトさんのワークショップを受講して、ちょっとしたニュアンスの質問が多く、且つその微妙な判断はスピーカーの助言で理解することができます。つまり、解説を受けて正しい方向に納得することが書籍では限界があるのだと感じています。これは、書籍が悪いという訳でなく書籍の特性の問題だと感じています。 昨年のケイトさんのワークショップでは、UXメトリックス（UXの評価）設定をする際に、例えば、「1月のダウンロード数が3万」「日本1位の＊＊」という評価方法のはUXの評価項目にならないということをおしゃっていました。 なぜならないのか？などの理解や、ワークショップで自分が出した考え方が間違っている場合に、助言や指摘で「なるほど！」と感じることができました。アビーさんのワークショップを受けることでこれらと同じように、ちょっとしたところでの考え方の方向性を教えてもらえるのではないかと感じています。 私はいくつかの情報設計手法をWebサイトの案件で行ったことがありますが、情報設計家（IA)でないため、踏み込んだ勉強をしていません。そのため、まだWebサイトへどのように役立たせるのか理解しきっていないのでその辺りをこのワークショップで勉強できたらと考えています。 書籍では、ブロックダイヤグラム、フローダイアグラム、ガンチャート、象限ダイヤグラム、ベン図、スイムレーンダイヤグラム、階層ダイヤグラム、マインドマップ、スキマティック、ジャーニーマップなどが紹介され、また情報を設計するための構造化の方法が記載されています。 Web上にも情報設計をするためのツールはたくさんあります。ただ、道具は使い方を知らなければ使えないように、ツールの使い方は学ぶべきだと感じているので、その辺りのポイントを掴みたいと考えています。 アビーさんは、言葉の定義のことも含め、情報設計は一人で行うものでなく複数で進めていくことが良いと言っています。当日、多くの人とアビーさんのワークショップをすることを楽しみしています。そして、Webサイトにもっと役立たせる方法を学びたいと思っています。 大本あかね Web Directions East CTO / allWebクリエイター塾 代表 2004年より最新のフロントエンド技術が学べるallWebクリエイター塾を運営。パフォーマンス、データードリブンでのUIデザイン,検索エンジンにヒットしやすいSEOなどのコンサルティングも行う。著書に「ウェブマスターツールの教科書」「Googleサーチコンソールの教科書」マイナビがあり、UXについては＠ITメディアで「5分で分かるユーザーエクスペリエンス（UX）」がある。