ウェブで情報を表現する

指導者向けの公開補足

学習本文に加えて、指導の視点・背景・授業での確かめ方を示します。どなたでも読めます。

指導の焦点

HTMLは構造、CSSは見た目という役割を起点にする。文字を大きくしただけの行と、見出しとして意味づけた要素を区別する。

文書構造は読み上げや検索にも関係する。表示の成功だけでは、キーボード操作や狭い画面での利用が適切かは判断できない。

自作の短い案内を見出し・段落・リスト・リンクで構造化する。外部のスクリプトを無批判に貼らず、利用する素材とリンク先を確認させる。

制度・規格等は本文末尾の参考資料も確認してください。

ウェブは、ページ間をリンクで結び、ブラウザーなどで情報を利用できる仕組みだ。ページの文書構造にはHTMLが使われる。見出し、段落、箇条書き、リンクなど、内容がどのような役割かを示す。CSSは、文字の大きさや配置、色などの見た目を指定する役割を担う。

大きく太い文字にしただけでは、文書構造上の見出しになるとは限らない。適切な見出しの構造があれば、読み上げソフトなどで章を移動したり、ページの内容を把握したりしやすい。見た目だけでなく、機械にも意味が伝わる構造にする。

初めて参加する人が、開催内容と申込み条件を見つけられるページを考える。紙面の座標をそのまま再現するより、読む順番とまとまりを先に決める。

全てを表にすれば整理できるとは限らない。比較する値は表、順番のある行動は番号付きの手順など、情報の関係に合う構造を選ぶ。表を画面配置のためだけに使うと、読む順番が不自然になる場合がある。

「こちら」を何度も並べると、何が開くのかわかりにくい。「講座の申込みフォーム」「会場までの移動方法」のように、目的を示す文字にする。PDFなど別の形式を開く場合は、そのことや容量を知らせると、通信や閲覧の準備をしやすい。

ページ内の移動、別ページへの移動、申込みの送信は、役割が異なる。リンクに見えるのに重要な操作が実行されるなど、見た目と働きが食い違わないようにする。色だけに頼らず、下線などでもリンクを認識できるように考える。

画像には、その場所で必要な内容を伝える代替テキストを付ける。日程表が画像なら、日付や時刻を本文でも読める形にする。写真の説明と、長い手順の説明を一つに詰め込まず、本文と役割分担する。

申込みフォームでは、項目名、必須か任意か、入力例を明確にする。送信前に確認できるか、誤りがあったとき何を直すべきかわかるかも重要だ。入力欄の中の薄い文字だけでは、入力後に項目の意味を確認できなくなる場合がある。

個人情報の利用目的と必要な項目を見直す。見た目の整ったフォームでも、情報の送信先や保管方法が不明なら、安全に公開できるとは限らない。授業で試作するときは、実在する個人情報を集めず、架空の入力で動作を確かめる。

幅の狭い画面、文字を拡大した状態、キーボードだけの操作などで確認する。固定の幅に押し込むと、文章がはみ出したり、横方向の移動が必要になったりする。リンク切れ、誤字、素材の利用条件、写真に写る情報も点検する。

公開後は、誰が何を更新するかを決める。過去の講座案内なら、終了したことを明示し、古い申込先へ誘導しない。内容の最終更新日と連絡先があれば、利用者は時点や疑問を確認しやすい。

問1の解答例を見る

画像だけでは見出しの構造が伝わらず、検索や読み上げ、文字の拡大で不利になることがある。見出し要素で文書構造を示せば、見た目とは別に文章の階層を伝えられる。

問2の解答例を見る

「こちら」ではなく、「講座の申込み方法」「会場へのアクセス」など、リンク先の内容や操作が分かる言葉にする。前後の文章を読まなくても区別しやすくする。

問3の解答例を見る

終了した日付と受付終了を目立つ場所に示し、申込みボタンを外す。次回の案内がある場合は区別してリンクし、古い日時や受付中という表現を残さない。

ウェブでは、意味のある文書構造と見た目を分けて考える。探しやすい見出し、目的がわかるリンク、利用できる入力欄を整え、公開後の更新と安全な管理まで計画しよう。