【情報I】コミュニケーションと情報デザインを図解で総まとめ—伝達の型・ユニバーサルデザイン・配色と配置｜武蔵野個別指導塾

同期・非同期の分類から、案内の情報整理、等間隔の配置までを例題で確かめます。色だけに頼らない表示と3枚の図を通して、相手が迷わず行動できる伝え方を学べます。

よくあるのは、図書館の机で読書会の案内を作り、日時も場所も書いたのに、見直すと何を先に読めばよいか自分でも迷ってしまうという場面です。題名を大きくし、色を増やし、写真を足しても、申し込み方が見つからなければ案内の目的は果たせません。伝える内容が正しいことと、相手が必要な内容を受け取れることは、別々に確かめる必要があります。

情報Iで学ぶ情報デザインは、見た目を飾る技術だけではありません。誰に、何を、どのような状況で伝え、どのような理解や行動につなげたいかを考え、情報の表し方を設計することです。会話と掲示の違い、情報のまとめ方、文字や色の選び方をつなげると、「なんとなく見やすい」から一歩進んで、改善の理由を説明できるようになります。ここでは読書会の案内を手がかりに、伝達の型から配置の計算までを順に確かめます。

この単元で身につけること

• 同期と非同期を区別します。同じ時間にやり取りする必要があるかに注目し、返信の速さだけでは判断しないようにします。
• 1対1、1対多、多対多を区別します。送信者と受信者の人数や役割を調べ、時間の分類とは別の軸として説明します。
• 抽象化・可視化・構造化を使い分けます。目的に必要な情報を取り出し、見える形に表し、関係や順序を整理します。
• ユニバーサルデザインの考え方を使います。利用する人や環境の違いを想定し、色、音、細かな操作など一つの手段だけに依存しない工夫を考えます。
• 配色・フォント・レイアウトの理由を説明します。強調する箇所を選び、関連する項目をまとめ、端や間隔をそろえて読む順序を支えます。

これまで学んだ文字・画像・音の表現は情報を扱う材料であり、この単元ではその材料を相手に届く形に組み合わせます。用語を暗記したあとには、必ず「この案内を初めて見た人は何を探すか」という問いに戻ってみましょう。

基本の考え方

伝達は時間と人数を分けて考えます

コミュニケーションは、情報を伝えたり受け取ったりして、意思や理解を共有する営みです。送り手が文章を書いただけで完了するとは限りません。受け手が使う言葉を理解できるか、媒体にアクセスできるか、意味を取り違えないかまで関わります。同じ「明日まで」という言葉でも、読む日が違えば締め切りの受け取り方が変わります。時間をずらして読まれる案内には、日付や時刻を具体的に示す必要があります。

同期型は、参加者が同じ時間に参加してやり取りする型です。対面の会話や通話では、その場で聞き返し、相手の反応に合わせて説明できます。一方で、互いの時間を合わせなければなりません。非同期型は、送り手と受け手が同じ時間に参加する必要のない型です。電子メールや掲示板への投稿は、都合のよいときに読めますが、疑問への回答が届くまで待つことがあります。

ここで人数の軸を加えます。1対1は個人間の相談、1対多は1人から参加者全員への説明、多対多は参加者どうしの討論などです。ただし、媒体の名前だけで型が固定されるわけではありません。文字のチャットでも、全員が集まって即座に応答すれば同期的に使えますし、投稿を後で読んで返せば非同期的に使えます。問題文では、実際の使われ方を根拠に判断します。

図1のように、同期・非同期を横に、1対1・1対多を縦に分けると、2つの分類を混同しにくくなります。図の「通話」は2人の会話、「一斉説明」は話し手1人の説明を同時に聞く場面です。「個別メール」は1人宛ての連絡、「掲示」は1つの発信元から複数人が後で読む案内を表します。この図は代表的な4場面を整理したもので、多対多まで含むすべての伝達を示したものではありません。

実際の連絡では、複数の型を組み合わせることも有効です。参加者全員に掲示で日時を知らせ、事情のある人とは個別に相談する方法なら、共通情報と個別の情報を分けられます。ただし、掲示を出したことは全員が読んだことの証明にはなりません。確実な確認が必要なら、回答を求めるなど、受け取ったかを確かめる仕組みも設計します。

抽象化・可視化・構造化は重ねて使えます

抽象化とは、目的に照らして重要な性質や情報を取り出し、細部を省いて扱いやすくすることです。読書会の案内なら、準備担当者の打ち合わせの経緯より、参加日時や場所、必要な持ち物が重要です。情報を短くすれば必ずよいのではなく、受け手の判断に必要な情報を残すことが条件です。「予約が必要」という条件まで削ってしまうと、簡潔でも役に立たない案内になります。

可視化とは、情報や関係を図、表、グラフなど目で捉えられる形にすることです。図書館内の道順を長い文章で説明する代わりに、入口から会場までの経路を地図に示せば、位置関係をつかみやすくなります。ただし、矢印が多すぎる図や説明のない記号は、かえって意味を取りにくくします。何を比較するのか、何の関係を見せるのかを決めてから表現方法を選びます。

構造化とは、情報を関係、分類、順序、階層などに基づいて整理することです。日時と場所を「開催情報」、締め切りと申込先を「申し込み」としてまとめると、受け手が探す範囲を絞れます。見出しを付けるだけでなく、どの項目がどのまとまりに属するかが一貫している必要があります。日時が別々の場所に食い違って書かれていれば、配置が整っていても混乱します。

3つの働きは排他的ではありません。会場の略図は、必要な通路を残す抽象化、位置関係を示す可視化、入口から会場までの順序を整理する構造化を含みます。用語を問われたら、設問が注目する操作に対応させます。「細かな背景を省く」なら抽象化、「関係を図で示す」なら可視化、「種類ごとにまとめる」なら構造化が中心です。

読めることと使えることを確かめます

ユニバーサルデザインは、年齢、言語、障害の有無などの違いにかかわらず、できるだけ多くの人が利用しやすいよう、あらかじめ設計する考え方です。全員にまったく同じ見え方や使い方を求めることではありません。文字の大きさを変えられること、視覚と聴覚の複数の経路で情報を得られることなど、利用の選択肢を確保する工夫も含まれます。

関連するアクセシビリティは、必要な情報や機能にアクセスし、利用できることや、そのしやすさに関わります。ユーザビリティは、特定の利用者が目的を達成する際の使いやすさに関わります。入口となる情報にたどり着けるかと、たどり着いたあと迷わず操作できるかを両方調べると、見た目だけの評価から離れられます。

配色では、文字と背景が見分けやすいか、強調色を使いすぎていないか、色を区別できなくても意味が伝わるかを確かめます。赤と緑を使うこと自体を一律に避けるのではなく、「赤は不可、緑は可」という色だけの符号に頼らないことが重要です。文字や形を併用すれば、白黒印刷や暗い画面などでも判断しやすくなります。

フォントは文字の形を表す書体に関わる言葉です。画面上の短い案内では、線の太さが比較的そろった書体が読み取りやすい場合がありますが、書体名だけで読みやすさは決まりません。文字の大きさ、太さ、行間、1行の長さ、背景との差、表示する端末を合わせて考えます。強調したい語をすべて大きくすると差がなくなるので、重要度を決めて見出しと本文の役割を分けます。

レイアウトでは、関連する情報を近づける近接、端や基準線をそろえる整列、同じ役割の表現をそろえる反復、重要度の差を示す対比が役立ちます。余白も情報のまとまりを区切る働きを持ちます。空いた場所を埋めるために無関係な図を置くと、探すべき情報が埋もれるので、余白を残す理由も説明できるようにしましょう。

例題で解き方を確かめる

例題1　連絡の型を2つの軸で分類します

次の3場面を、時間と人数の両方で分類します。Aは担当者と参加希望者が時刻を決めて2人で通話する場面、Bは担当者が全参加者向けの案内を掲示し、それぞれが都合のよい時刻に読む場面、Cは4人が同じ時刻に接続して互いに発言する話し合いです。

1. まず同じ時間に参加する必要があるかを調べます。AとCは同時参加が条件なので同期、Bは読む時間を合わせないので非同期です。人数を見る前に時間を判定すると、別の軸を混ぜずに済みます。
2. 次に情報を伝える人と受ける人の関係を調べます。Aは2人の個別のやり取りなので1対1、Bは担当者から全参加者への発信なので1対多です。Cは複数人が送り手にも受け手にもなるため、多対多です。
3. 判定の根拠を言葉にします。「電子的な連絡だから非同期」ではなく、「同時参加を必要としないから非同期」と書きます。媒体名が変わっても使える根拠にするためです。

答え：Aは同期・1対1、Bは非同期・1対多、Cは同期・多対多です。

Bを見た参加者が担当者に個別の質問を送った場合、その質問のやり取りは別の場面として扱います。1つの活動全体を無理に1つの型に押し込めず、どの情報伝達を分類しているかを先に切り分けることが大切です。

例題2　案内の情報を選び、3つのまとまりにします

案内に載せる候補が「日時」「場所」「持ち物」「締め切り」「申込先」「担当者の好きな本」の6項目あります。今回は初めて参加する人が、参加できるかを判断して申し込めることを目的とします。個人の好みは参加条件に関係しないものとし、必要な項目を選んで整理します。

1. 目的から必要性を判断します。日時と場所は参加できるかの判断、持ち物は準備、締め切りと申込先は申し込みに必要です。担当者の好きな本は今回の判断には必要でないので、中心となる案内から外します。これが目的に沿った抽象化です。
2. 残した5項目を役割でまとめます。「開催」に日時・場所、「準備」に持ち物、「申し込み」に締め切り・申込先を入れます。項目数を均等にするためではなく、受け手が同じ目的で探す情報を近づけるためです。
3. 見出しを付け、開催、準備、申し込みの順に配置します。この順序は案内を読む流れの一案です。すでに参加を決めた人向けなら申し込みを先にするなど、受け手の状況に応じて変えて構いません。

答え：5項目を残し、開催2項目・準備1項目・申し込み2項目に構造化します。

図2のように、同じ役割の項目を枠の中にまとめると、何を探すべきかが見出しからわかります。図は内容のまとまりを示した骨組みなので、実際の案内には具体的な日時や申込先を記入します。枠を作ることが目的ではなく、必要な情報が欠けずに見つかることが目的です。

項目の数だけは、短いPythonのプログラムでも確かめられます。次のコードは各まとまりの項目数と合計を表示します。lenは項目の個数を求め、sumは数の合計を求めます。

groups = [["日時", "場所"], ["持ち物"], ["締め切り", "申込先"]]
counts = [len(group) for group in groups]
print(counts)
print(sum(counts))

出力は次のとおりです。

[2, 1, 2]
5

数が合うだけでは情報デザインの正しさを保証できません。申込先を省いて別の項目を足しても合計は5になるからです。計算では個数を確かめ、内容の確認では相手の行動に必要な情報があるかを確かめる、と役割を分けて使います。

例題3　左右の余白と枠の間隔をそろえます

図2と同じく、幅1200の領域に幅320の枠を3個横に置きます。左右の余白を90ずつ取り、枠どうしの間隔を等しくするとき、間隔と各枠の左端の位置を求めます。左端を0とする横方向の座標を使います。

1. 枠と外側の余白が使う幅を求めます。枠は320 × 3 = 960、左右の余白は90 × 2 = 180なので、合計1140です。まず固定されている長さを集計すると、残りの幅を求められます。
2. 残りは1200 − 1140 = 60です。枠が3個なら枠と枠の間は2か所なので、60 ÷ 2 = 30となります。枠の個数で割ると、外側の余白を別に確保した条件と合わなくなります。
3. 最初の左端は90です。次の左端は前の左端に枠の幅320と間隔30を足すので、440、790となります。最後の右端は790 + 320 = 1110で、右余白1200 − 1110 = 90が確保できています。

答え：枠の間隔は30、左端の座標は90、440、790です。

この計算をPythonで表すと次のようになります。ここでの単位は図の座標の単位です。紙に印刷したときの長さとは区別します。

width, margin, box, n = 1200, 90, 320, 3
gap = (width - 2 * margin - n * box) // (n - 1)
lefts = [margin + i * (box + gap) for i in range(n)]
print(gap)
print(lefts)
print(width - (lefts[-1] + box))

出力は次のとおりです。

30
[90, 440, 790]
90

この例では割り切れることを確かめているので整数の除算を使っています。一般には余りが出ることもあるため、整数に切り捨てるだけでは等間隔にならない場合があります。また、間隔が等しいことは整列の確認にはなりますが、見出しの意味や文字の読みやすさは別に確認する必要があります。

つまずきやすいところと直し方

誤り1　返信の速さで同期を決めてしまいます

誤った書き方：「電子メールにすぐ返信が来たので、この連絡手段は必ず同期型です。」どこが違うか：たまたま読む時刻が重なったことと、やり取りの成立に同時参加が必要なことを混同しています。返信までの秒数だけを見ても、型を決める十分な根拠にはなりません。

正しい書き方：「電子メールは一般に非同期型の連絡として使えます。同時参加を必要とせず、受信者が後から読むこともできるためです。」実際の場面が同時の応答を前提にしているなら、その条件も説明します。問題文の「その場で」「後から」「互いに発言する」といった表現に線を引き、時間の条件と人数の条件を別々に抜き出すと整理できます。

誤り2　すべてを目立たせようとします

誤った書き方：「重要な情報が5項目あるので、全部を最大の文字と別々の強い色で表示します。」どこが違うか：どれも同じ強さで主張すると、先に読む場所が決まらず、項目どうしの関係も見えにくくなります。色の数が多いほど情報量が増えるとは限りません。

正しい書き方：「題名、まとまりの見出し、具体的な内容の順に強弱を付け、同じ役割の項目は同じ表現にそろえます。」文字の大きさだけでなく、位置や余白でも優先順位を示せます。図2の見出しを隠しても近い項目どうしがまとまって見えるか、本文だけを見ても必要な項目を見つけられるかという2通りの確認が役立ちます。

誤り3　色を付けたので誰にでも伝わると考えます

誤った書き方：「空席は緑、満席は赤の丸だけで示せば、説明は要りません。」どこが違うか：色の見え方には違いがあり、印刷や画面の状態でも変わります。また、色を見分けられる人でも、どちらが空席かという対応を知らなければ判断できません。

正しい書き方：「空席は丸と『空席』、満席は四角と『満席』で示し、色も補助として使います。」図3のように、色に加えて形と文字を組み合わせると、色の区別が難しい場面でも意味を読み取る手がかりが残ります。ただし、この形そのものに普遍的な意味があるわけではないので、文字を省かないことがポイントです。

図3の左側では、同じ形の丸を色だけで分けています。右側では形を変え、意味も併記しています。さらにWebページで使うなら、見える画像の中だけに文字を置くのではなく、画像を見られない場合にも意味が伝わるテキストを用意します。図を見やすくしただけで、すべての利用条件に対応できたとは考えないようにします。

この表示の対応もコードで確認できます。次の例は状態ごとに形と文字を対応させるだけのプログラムで、実際の配色の見え方や利用しやすさを判定するものではありません。

labels = {"空席": "丸・空席", "満席": "四角・満席"}
for state in ["空席", "満席", "空席"]:
    print(labels[state])

出力は次のとおりです。

丸・空席
四角・満席
丸・空席

同じ状態に同じ表現を使い続けることは反復の考え方にもつながります。途中で「丸は満席」に変わる表示では、個々の文字が読めても判断を誤りやすくなります。情報デザインでは、1か所の見やすさと案内全体の一貫性を行き来して点検します。

練習問題

練習1　掲示板での話し合いを分類します

読書会の参加者6人が、共有の掲示板に感想を書き込みます。全員がほかの参加者の投稿に返信でき、読む時刻と書く時刻は各自に任されています。このやり取りを時間と人数で分類し、それぞれの根拠を書いてください。投稿した直後に返事が来ることもあるものとします。

練習2　案内図を作る操作に名前を付けます

図書館の案内図を作るため、Aでは会場までの移動に不要な机の細部を省きました。Bでは入口と会場の位置関係を図で示しました。Cでは注意事項を「移動中」と「会場内」に分け、見出しを付けました。各操作で中心となる考え方を、抽象化・可視化・構造化から選んでください。また、Aで省いてはいけない情報を1つ挙げてください。

練習3　配置と状態表示を点検します

幅1000の領域に幅260の枠を3個並べ、左右の余白を80ずつ取ります。枠どうしを等間隔にするときの間隔と、各枠の左端の座標を求めてください。さらに枠内の受付状態を赤と緑の丸だけで区別していた場合、色が区別できなくても伝わる改善案を書いてください。

答えと解説

練習1の答え：非同期・多対多です。時間を合わせる必要がなく、複数人が投稿と返信の両方を行えるためです。短時間で返事が来ることがあっても、各自の都合で参加できるという条件は変わりません。1つの投稿を1人が書くことだけに注目して、全体を1対多としないようにします。

練習2の答え：Aは抽象化、Bは可視化、Cは構造化です。省いてはいけない情報の例は、会場まで通れる通路のつながりです。細部を減らしても、通れない壁を通路のように描くと案内の意味が変わります。AとBが同じ図の制作過程に含まれていても、注目する操作を分けて答えられます。

練習3の答え：間隔は30、左端の座標は80、370、660です。枠は合計780、左右の余白は合計160なので、残り60を2か所に分けます。最後の右端は920で右余白も80になります。表示の改善案は、受付中を丸と「受付中」、終了を四角と「終了」で示すことです。色を残しても構いませんが、色なしでも状態を判断できる手がかりを持たせます。

次の単元へのつながりと家庭での確かめ方

情報デザインの考え方は、Webページ、発表資料、データのグラフ、操作画面へつながります。Webページでは見出しの階層が内容の構造を示し、ボタンの表現が行動を案内します。グラフでは色を増やす前に比較したい量を決めます。どの場面でも、目的と受け手を確かめてから表現を選ぶ順序が使えます。

家庭での確認の1つ目は、身近な案内を1枚選び、5分以内に「いつ」「どこで」「何をすればよいか」を探すことです。見つからなければ、内容自体が欠けているのか、書かれているが見つけにくいのかを分けます。2つ目は、別の5分で、その案内の色を使わずに紙へ写すことです。意味が失われる箇所があれば、文字や形、配置をどう補うか考えます。

個別指導で確かめる際は、用語の選択が違った理由を、設問のどの条件を読んだかまで戻って整理します。保護者の方がお子さまと確認するときも、最初に正解を伝えるより、「誰が、いつ読む案内か」を一緒に言葉にすると、選んだ表現の理由を聞き取りやすくなります。

まとめ

案内を作り終えたら、送り手としての説明をいったん止め、初めて読む人の立場で必要な情報を探してみましょう。見出しの意味が通るか、次の行動を決められるか、色を失っても区別できるかを確かめると、直す場所が具体的になります。読書会の案内であれば、参加するか判断し、準備し、申し込むところまでたどり着けることが評価の基準です。

伝わる案内の完成条件は、受け手が次の行動を自分で選べることです。