一覧へ 情報Ⅱ (2) 第7回 | 情報デザインを踏まえた設計
情報Ⅱ (2) コミュニケーションとコンテンツ | 第7回

情報デザインを踏まえた設計

素材を並べる順と、受け取った人がたどる道すじを決める

50分 | 班で行う
教師用メモ

準備(授業前) 教室コードを新しく決め、板書して残す。学校にある道具で行う。特定のソフトを指定しない。設計図は紙でよい。班に大きめの紙を 1〜2 枚と、動かせる小さな紙(付箋の代わりでよい)を配ると並べ替えができる。第4〜6回で作った素材を、班の全員が開ける状態にしてくるよう前回に伝えておく。

投影 「投影」を押して 1 枚ずつ送る。教師の端末では「教師」も押す。班の作業中は、まとめ 01 の枚(導線の三段)を出したままにする。

時間配分 前回まとめ・目標 5分 / 節1 並びを決める 14分 / 節2 統一する決まりを決める 23分 / まとめ・自己評価・ふりかえり 8分

この回の評価(指導要領 情報Ⅱ (2) イ(イ)「情報デザインに配慮してコンテンツを制作すること」。設計指針 B5L4(統一された UX を持つコンテンツをグループで設計・制作できる。高選)、J2L2(人間とのインタフェース)。単元設計は 単元設計のページ)

  • 知識・技能 素材を導線の順に並べ、設計図の形(並びと、最後の行き先)で書けている
  • 思考・判断・表現 並びと決まりを、相手の場面と外せない要求から説明できている(体験02)。ここが今日の重点
  • 態度 決まりを守っていない所を自分たちで見つけ、直そうとしている(体験03・ふりかえり)

作り込ませない。今日は設計図までで、制作は第8回。きれいに仕上げ始めた班には「並びが決まっていないものを飾っても、あとで全部やり直しになる」と止める。

前回のまとめ

素材はそろった | 次は、どの順で見せるか

文字・静止画→音声→動画→並べて、一つにする

第4〜6回で作ったのは、ばらばらの素材である。同じ素材でも、どの順に置くかで、受け取った人が動くかどうかが変わる。順を決めることが設計にあたる

受け取った人は、どこから見て、どこへ進むのか

教師用メモ

2 分。第3回で決めた「気づかせる・分からせる・動かせる」の三語を板書に戻す。今日はその三語を並びの順として使う。

第4〜6回の素材を出せない生徒がいたら、班の中で共有させる。素材が足りない班は、今日の設計図で「ここに何を置くか」だけ決めておけば、第8回で作れる。

今日の目標

授業の終わりにできるようになること

01
導線を決め、素材を上から下へ並べられる
02
班で統一する決まりを 3 つ決め、カードに書ける
03
見せて、迷った所を聞き、直すところを決められる
01 | 14分
並びを決める

順に並べてみる

02 | 23分
統一する

決まりを 3 つ書く

03 | 8分
まとめ

迷った所を直す

SECTION 01

並びを決める

受け取った人が、上から下へたどる道すじ

机に広げた大きな紙の上で、小さな紙片を縦に並べ替えながら順番を相談している3人の高校生の手元
体験 01

1 枚の中の並びを、組んでみる

バラバラに並んだ 6 つの部品を、受け取った人が見る順にタップする。タップした順に番号が付く(もう一度タップで外れる)。全部に番号を付けたら「答え合わせ」。手がかりは、第3回の「気づかせる → 分からせる → 動かせる」

教師用メモ

進め方(9分) 一人で 4 分 → 答え合わせ → 「なぜこの順か」を 3 分聞く。順の理由が言えれば、班の設計図も書ける。

なぜこの順か 気づかせる(写真・見出し)→ 分からせる(外せない要求への答え・日時)→ 動かせる(してほしい行動)→ 迷ったときの戻り先(連絡先)。外せない要求への答えを、日時より前に置くのがこの単元の考え方である。日時を知っても、行けるかどうかが分からなければ動かない。

別解を認める 見出しを最初に置く案も成立する。ただし「してほしい行動」を分からせるより前に置くと、何をする話か分からないうちに押されることになる。理由が言えれば別解でよい。

並べ終わったら、班の 1 枚(または 1 画面)を同じ形で紙に並べさせる。動かせる小さな紙を使うと、並べ替えができる。目標 01。

まとめ 01

導線 | 気づかせる → 分からせる → 動かせる を、上から下に置く

気づかせる
最初のひと目。ここで止まらなければ、下は存在しないのと同じ。大きいもの・写真・色を一つだけ使う
分からせる
外せない要求への答えを先に置く。そのあとで日時・場所などの細かい情報を置く。順が逆だと読み飛ばされる
動かせる
してほしい行動を一つだけ、囲むか色を変えて置く。行動が二つ以上あると、どちらもされない
戻る所
迷ったときに戻ってくる場所(連絡先・目次・最初に戻る)。最後に置く
一画面に入る量受け取る場面から決める。廊下で数秒なら、ひと目で読めるのは見出しと写真だけ。座って読むなら、その下も読まれる
迷わせない同じ高さに、押せるものを二つ並べない。次にすることが一つに見えるように置く
複数の画面があるとき1 枚目で気づかせ、2 枚目で分からせ、3 枚目で動かせる。どの画面からも戻れるようにする
教師用メモ

目標 01。この帯を投影したまま、班の設計図を書かせる。ここでの「導線」は、受け取った人の目と手が動く順のこと。難しい言い方をせず、「どこから見て、どこへ行くか」と言い換えてよい。

Web やスライドのように画面が複数あるものを作る班には、下の 3 行目を指す。紙 1 枚の班は、上下の並びだけで足りる。

SECTION 02

統一する

三つだけ決めて、班の全員が同じにする

ホワイトボードに「見出しの大きさ」「色は二色まで」「文字は左そろえ」と三つの決まりを書き出している高校生
体験 02

並びと、統一する決まり 3 つを、カードに書く

第2回から続けている班のカードに、並び・導線・統一する決まりを書き足して出し直す。同じ教室コードを入れると、前のカードが右に並ぶ

相手 | 前のカードから、直っていれば直す
してほしい行動
並び | 上から下に何を置くか。「→」でつなぐ
導線 | 受け取った人が最後にどこへ行くか
統一する決まり 3 つ | 「、」で区切る

前のカードの下に、設計を書き足した版が並ぶ。他の班のカードに、下の 4 つのうち当てはまるものを 1 つ押して返す

班のカード | これまでの版と、設計の版
教師用メモ

進め方(17分) 紙の上で並べ替える 6 分 → 統一する決まりを 3 つ決める 4 分 → カードに書いて提出 4 分 → 他の班のカードに印を返す 3 分。提出は班で 1 枚。

決まりが出ないとき 「見出しの大きさ」「使う色の数」「文字のそろえ方」「写真の形」「言葉づかい(です・ます か、だ・である か)」の五つを投げて、そこから 3 つ選ばせる。4 つ以上は決めさせない。守れない決まりは、決まりではなくなる。

統一する理由 第8回で分担して並行に作るため。決まりがないまま分担すると、つなげたときに別々のものに見える。ここで決めておくと、あとで直す時間が要らない。

机間指導で聞くこと 「気づかせる役は、どれが持っていますか」「その決まりは、四人とも同じようにできますか」。目標 01・02、今日の評価の場面。

体験 03

見せて、目がどこへ動いたかを聞く

隣の班に、設計図を 5 秒だけ見せる。見終わったら「最初にどこを見ましたか」「次にどこへ目が動きましたか」と聞く。返ってきたものを、下から選ぶ

クラスの結果
教師用メモ

進め方(6分) 二班一組で交代に見せる 4 分 → 選ぶ 1 分 → 分布を見て 1 分話す。5 秒で切るのが大事。長く見せると、どんな設計でも読めてしまう。

分布の読み方 「別の所を見た」が多ければ、気づかせる役のものが弱いか、他に目立つものがある。「迷った」は、同じ大きさのものが並んでいるとき起きる。「色が多すぎる」は決まりの数を減らせば直る。

直す所を一つだけ決めて、設計図に赤で書き込ませる。次回の分担のときに、その一つを誰が直すかを割り当てる。目標 03。

まとめ 02

統一とは、同じにすると決めたことを、全員が守ること

RULE 1
大きさ
見出し・本文・注記の三段。段の数を増やさない。どれが大事かが、大きさだけで分かるようにする
RULE 2
色
二色まで(下地の色は数えない)。色は目立たせるためだけに使い、色だけで意味を分けない
RULE 3
そろえ方
左そろえか中央そろえか、どちらかに決める。端の位置をそろえると、それだけで整って見える
三つでよい理由四つ以上あると、誰かが守れない。守られない決まりは、決まっていないのと同じ。少なく決めて、全員が守るほうが統一される
決まりを破るとき「ここだけは目立たせたい」という所で、一箇所だけ破る。破る所が二つ以上あると、どちらも目立たなくなる
誰でも読めるか文字は小さくしすぎない。色だけで区別しない。情報Ⅰ (2) で扱った配慮を、まとまった規模でも同じように行う

設計図は決まった。次は、これを手分けして作る。誰が何を、いつまでに作るかを決める回に入る

教師用メモ

設計指針 B5L4 の「統一された UX」を、生徒の言葉で「同じにすると決めたことを全員が守ること」と置き換えている。用語としての UX は出さなくてよい。

次回は「分担と並行制作」。今日の設計図と決まり 3 つを、そのまま分担表の元にする。設計図は失くさないよう、写真に撮って各自の端末に残させる。

今日のまとめ

3つの目標に、班の設計図で答える

01
導線 気づかせる → 分からせる → 動かせる → 戻る所。外せない要求への答えは、日時より前に置く
02
統一 大きさ・色・そろえ方。決まりは 3 つまで。四つ以上あると誰かが守れず、統一されない
03
確かめる 5 秒だけ見せて、目がどこへ動いたかを聞く。決めた順に見られていなければ、設計が効いていない
自己評価

今日の目標、自分はどこまで

3 つの目標それぞれに、できた/だいたい/まだ、を 1 つ選ぶ。右の帯にクラス全体の分布が出る

今日の目標、自分はどこまで | 1 つずつ選ぶ
01導線を決め、素材を上から下へ並べられる
02統一する決まりを 3 つ決め、カードに書ける
03見せて迷った所を聞き、直すところを決められる
できただいたいまだ
教師用メモ

1 分。目標 02 に「まだ」が多い班は、決まりが抽象的(「見やすくする」など)で止まっている。次回の分担の前に、具体的な形(大きさ・色の名前・そろえる向き)まで決めさせる。

ふりかえり

並べ替えて、変わったこと

一文でよい。並べ替える前と後で、受け取った人がすることがどう変わりそうかを書く

並べ替えて変わったこと
教師用メモ

4 分。3 つ読み上げる。「見た目がよくなった」で止まっているものには、「受け取った人は、前とどう違うことをしますか」と返す。

次回は「分担と並行制作」。設計図を写真に撮り、統一する決まり 3 つを班の全員が控えているか確認する。教室コードを控えたか確認する。