INTERACTIVE LAB / 情報デザイン
情報の可視化、問題マップ
近づくと、言葉が問題に。気になった問題を開くと、その理由まで。
知識のつながりと、自分の学びの地形を探す「問題マップ」。
HOW TO EXPLORE
見える量を、
自分で変える。
PCではドラッグで移動、ホイールで拡大・縮小。スマートフォンでは1本指で移動、2本指でピンチ。文字や問題文の上でも同じ操作ができます。問題文をクリック・タップすると、選択肢と解説を開けます。自動表示中に「タグ・単語・問題」を押すと、選んだ情報だけを表示する手動になります。手動中は押すたびに表示を切り替えます。「手動」を押すと倍率に応じた自動表示に戻ります。＋・−でも操作でき、地図にフォーカスすると矢印キーで移動、＋・−で拡大・縮小、Homeで全体に戻れます。
背景は「個人成績」でこのブラウザの解答履歴、「全体成績」で学習アプリの集計データを表示します。赤・黄は復習の手がかり、緑・青は正答の多い場所。未挑戦の場所は中立色で表示します。履歴がなければ、学習アプリで解いてから戻ってみましょう。
この地図から分かること
似た内容の問題が近くなるよう、t-SNEで配置しています。座標軸に単位はなく、離れた島同士の距離や島の広さは、難しさや学習量を表しません。言葉は今見えている問題から選ぶので、移動すると地域の見出しも変わります。自動表示では全体表示で文字を省き、近づくと地域の言葉が現れます。さらに近づくと、文字が大きくなって薄れ、問題に置き換わります。手動で選んだ情報は引いた状態でも表示し、読みやすい大きさと数に調整します。地図上では問題文だけを表示し、長い問題文の全文・選択肢・解説はクリックして開く詳細で読めます。
地形の色は近隣の回答をなだらかに混ぜた目安です。個人・全体とも凡例横の「0～100％」と「地域差強調」を切り替えられます。地域差の表示では色の範囲を正答率の分布に合わせ、両端の値を凡例に示します。問題ごとの実際の正答率は詳細で確認できます。履歴が少ない場所の色は少数の回答による目安で、未挑戦を誤答には数えません。個人の履歴はこのブラウザ内だけで参照します。全体成績の取得には公開問題のIDだけを送り、個人の履歴や解答内容は送信しません。海岸線は問題の配置密度を表し、成績の切り替えでは形は変わりません。
情報デザインとして
この問題マップは、限られた画面で多くの情報を探索できるよう、表示する内容と詳しさを変えています。
セマンティックズームは、拡大率に応じて情報の見せ方を切り替える手法です。「自動」では、全体を見渡すときは点と地形を表示し、近づくとタグ、単語、問題文の順に切り替わります。単に同じ文字を大きくするのではなく、分野から個別の問題へと情報が具体的になります。「タグ・単語・問題」のボタンで手動表示に切り替えて比べることもできます。
魚眼レンズメタファは、注目する部分を詳しく、周辺を簡略化して、両方を同じ画面で見せる考え方です。「問題」の表示では、画面中央に近いカードを大きく詳しく、周辺のカードを小さく短く表示します。背景には問題の点群や海岸線が残るため、問題文を読みながら全体の中での位置も確かめられます。図形全体を魚眼レンズのようにゆがませるわけではありません。
必要なときだけ詳細を表示する（Details on Demand）仕組みも使っています。地図上では問題文の一部を見せ、気になったカードをクリック・タップすると、全文・選択肢・解説を確認できます。
このように、全体の分布を見渡すところから、関心のある問題を詳しく調べるところまで、一つの地図の上でつなげています。