Webページと情報の表現
情報デザインの考え方が最も体系的に実践されている場のひとつがWebです。Webページはどのような仕組みで表現され、どんな設計の工夫があるのでしょうか。HTMLとCSSの役割分担を軸に、Webにおける情報表現の基本を学びます。
Webページの仕組み
Webページは、HTML（HyperText Markup Language）という言語で記述されています。HTMLは、文章の各部分に「これは見出し」「これは段落」「これはリンク」といった意味（構造）を与えるための言語です。例えば h1 タグは最上位の見出し、p タグは段落、a タグはハイパーリンクを表します。Webページ同士がリンクでつながり合う仕組みをハイパーテキストと呼び、これがWorld Wide Webの根幹です。ページの所在はURLで示され、ブラウザがWebサーバーからHTMLを受け取って表示します。
構造と見た目の分離 — HTMLとCSS
文字の色・大きさ・配置といった見た目（デザイン）は、HTMLではなくCSS（Cascading Style Sheets）で指定します。「構造はHTML、見た目はCSS」という役割分担（構造と表現の分離）には大きな利点があります。①1つのCSSを差し替えるだけでサイト全体のデザインを統一・変更できる、②同じHTMLをパソコン・スマートフォンなど画面サイズに応じて表示し分けられる（レスポンシブデザイン）、③構造が明確なHTMLはスクリーンリーダーや検索エンジンにも正しく解釈され、アクセシビリティが向上する、という点です。
Webサイトの情報設計
複数のページからなるWebサイトでは、前講で学んだ「構造化」が生きてきます。サイト全体は通常、トップページを頂点とする階層構造で設計され、ナビゲーション（メニュー）やパンくずリスト（例：トップ > 製品情報 > 詳細）によって、利用者が「今どこにいるか」「どこへ行けるか」を把握できるようにします。また、ボタンらしい見た目のものは押せる、下線付きの青い文字はリンク——というように、「どう操作できるか」を見た目で伝える手がかりをシグニファイアと呼びます。慣習に沿ったデザインは、初めての利用者でも直感的に使える（UD7原則の「単純で直感的な利用」）ことにつながります。
発信するときの設計手順
実際にWebで情報発信する際は、①目的と対象（誰に何を伝えるか）を定める、②情報を収集・整理し構造化する（サイトマップを作る）、③ページのレイアウトを設計する（ワイヤーフレームと呼ばれる配置図を作る）、④制作する、⑤公開後に利用者の反応を見て改善する、という手順で進めます。作って終わりではなく、評価と改善を繰り返す点は、単元1で学んだ問題解決のプロセスと同じです。
- HTML＝文書の構造（意味）、CSS＝見た目。役割分担（分離）が原則。
- 分離の利点：デザイン一括変更・レスポンシブ対応・アクセシビリティ向上。
- ハイパーテキスト（リンクでつながる文書）がWebの根幹。
- サイトは階層構造で設計し、ナビゲーションとパンくずリストで現在地を示す。
- シグニファイア＝操作の手がかり。慣習に沿うほど直感的に使える。
- 発信は「目的と対象の明確化→構造化→レイアウト→制作→評価・改善」の手順で。
練習問題
- HTMLとCSSの役割の違いを説明しなさい。
- 「構造と見た目の分離」によって得られる利点を2つ以上挙げなさい。
- パンくずリストとは何か、利用者にとっての利点とともに説明しなさい。
- Webページのリンクを、下線も色の変化もないただの黒い文字にした場合、どのような問題が起こるか「シグニファイア」という語を使って説明しなさい。
解答・解説
- 解答：HTMLは、見出し・段落・リンクなど、文書の各部分に意味（構造）を与えるための言語。CSSは、文字の色・大きさ・配置など、ページの見た目（デザイン）を指定するための言語。
解説：「構造のHTML、見た目のCSS」という役割分担が答えの核。HTMLで見た目を作り込まないのが現代の原則。 - 解答：（例）①CSSファイルを差し替える・修正するだけで、サイト全体のデザインを一括で変更・統一できる。②同じHTMLのまま、パソコンやスマートフォンなど画面サイズに応じた表示に切り替えられる（レスポンシブデザイン）。③構造が明確になるため、スクリーンリーダーや検索エンジンが内容を正しく解釈でき、アクセシビリティが向上する。
解説：3つのうち2つ書ければ正解。共通する理屈は「意味と見た目を独立に変更できる」こと。 - 解答：パンくずリストとは、「トップ > 製品情報 > 詳細」のように、サイトの階層構造の中で現在のページがどこに位置するかを示す表示のこと。利用者は自分が今サイトのどこにいるかを把握でき、上位の階層へ一足でも戻れるため、迷子になりにくい。
解説：童話「ヘンゼルとグレーテル」でパンくずを落として帰り道を示したことが名前の由来。「現在地の把握」と「上位への移動」の2つの利点。 - 解答：下線や色の変化は「ここは押せる（リンクである）」ことを利用者に伝えるシグニファイアとして機能している。それを取り除くと、利用者はどこがリンクか分からず、クリックできることに気づけないため、必要な情報にたどり着けなくなる。
解説：シグニファイア＝操作可能性を伝える見た目の手がかり。慣習（青い下線＝リンク）を破ると学習コストが発生する、という理解ができていれば十分。