人間・コンピュータ双方にわかりやすい表現
- 本日のテーマ
- WWWの情報を考える出発点
- HTMLの要素とタグ
- HTMLの役割とブラウザ
- 人間が理解しやすい文書
- 文章の論理構造と見出し
- パラグラフとトピック
- ポイントとなる語句をハイライト
- 文書のタイトルの役割
- 文責と更新情報
- 意味構造の視覚的な表現
- スタイルシート
- 重要な要素のハイライト
- 関連する要素のグループ化
- HTMLで表現できないグループ
- 繰り返しによる意味の明確化
- 代表的なスタイルプロパティ
- ウェブの特質と分かりやすさ
- ウェブというメディアの特質
- 利用者が持っていない予備知識
- 利用者の持っている予備知識
- 現在位置と移動手段
- 陥りやすい表現の失敗例
- コンピュータを使った情報共有
- 情報をコンピュータに処理させる
- 文書のメタ情報を提供する
- Dublin Coreの15要素
- ウェブの将来：Semantic Webへ
- 参考文献
HTMLの要素とタグ
- HTMLの要素
- 要素（Element)：HTML文書を構成するパーツ
- 要素タイプ：h1、pなど、HTMLで示す要素の種類
- タグとマーク付け
- タグ：文書中のどこがどの要素タイプであるかを示す記号
- マーク付け：文書の構成要素をタグによって示していくこと
HTMLの役割とブラウザ
- HTMLは文書の構成要素の“役割”を記述
- 見出し、引用などの意味上の役割をマーク付けして示す
- 要素をどのように「視覚表現」するかは定義していない
- 見出し、引用などの意味上の役割をマーク付けして示す
- ブラウザがHTML文書を解釈して表示
- 見出しや引用を、読者が区別できるように画面表示
- ブラウザの種類や機種によって表現は異なる
- 見出しや引用を、読者が区別できるように画面表示
人間が理解しやすい文書
- 文章の流れ（論理構造）が把握できること
- ポイントが適切にハイライトされていること
- 文書の主題がわかるタイトルを持つこと
- 文責や更新情報が明確になっていること
- HTMLでこれらの「役割」をマークアップ
文章の論理構造と見出し
- アウトラインによる構想と見出し
- 論理的な文章を書く場合は、アウトラインを使って骨格を構成することが多い
- アウトラインの項目が文書の見出しになる
- HTMLの見出し要素タイプを使う
- 見出しのレベルに応じてh1〜h6を使い分ける
- 文字サイズの指定ではなく、文章の骨格を示す要素
- 見出しのレベルに応じてh1〜h6を使い分ける
パラグラフとトピック
- 文章の基本単位であるパラグラフ
- ひとつのパラグラフではひとつのトピックを扱う
- パラグラフの要旨を示すトピックセンテンスを意識する
- HTMLではp要素としてマーク付けする
- ｐ要素はパラグラフであって、改行や1行空けではない
文書のタイトルの役割
- 読者“候補” に内容を簡明に伝えるもの
- 読者は、文書を“開く前”に、タイトルで読む価値があるかどうかを判断する
- タイトルは内容を凝縮した「マイクロ・コンテンツ」
- title要素は文脈に依存しない内容で
- 「授業のページ」というタイトルは、文脈の外では理解不能
- 「○○大学△△研究室2000年度授業概要」とすれば、検索エンジンのリストやブックマークでも意味が通じる
文責と更新情報
- どんな文書でも作者と日付は必須
- レポートなら表紙に作者、日付を明記。書物なら奥付に
- 文責のない文書は怪文書、日付のない文書は役立たず
- HTMLではaddress要素でマークアップ
- 一連の文書でも最初から順番に読まれるとは限らないので、全てのHTML文書にaddress要素を加える
- オンライン文書は常に変化する可能性があるので、必ず更新情報を加える。月日だけでなく、年も必ず記載する
スタイルシート
- HTMLで示した意味構造に視覚表現を付与
- スタイル規則で、要素に対応付けて表現方法を指定
- スタイル規則で、要素に対応付けて表現方法を指定
- 一般にはCascading Style Sheet (CSS)
- 作者だけでなく、ユーザー（読者）やブラウザも指定できる
- メディアに応じて異なるスタイルシートを設定できる
重要な要素のハイライト
- 見出しや強調語句をハイライトし、意味を視覚的にはっきりさせる
- フォントや色に関するプロパティでコントラストを明確に
- ブラウザ標準スタイルより効果的なハイライトを設定できる
- h1 {font-size: 300%; color: navy}
em, strong {color: red}
関連する要素のグループ化
- 意味が関連する項目をグループ化する
- 例：グループの間にマージンを設定する
- h2 {margin-top: 3em}
HTMLで表現できないグループ
- 章、節、注釈などHTMLにない要素のグループ化にはdiv要素とclass属性を使う
-
<p class="note">【注】ただし、...</p>
＋
p.note {border: gray thin solid;
padding: 1em; background: #ffc}
-
利用者が持っていない予備知識
- 利用者はサイトについて予備知識がない
- 作者はサイト構造を知っているが、利用者は知らない
- 構造が分からないと欲しい情報を見つけ出せない
- 「次のページへ」ばかりでは、読者はいつまでたっても全体像が分からず、フラストレーションがたまる
- 常に利用者に全体像を示す
- 全体を把握しやすい構造モデルを用いる
- 最初のページに目次を置く
- どこからでも目次に戻れるようにする
利用者の持っている予備知識
- 利用者は“常識”を予備知識として用いる
- 商品情報なら、「エリア」ではなく「商品」カテゴリーを探す
- 組織の論理でコンテンツを分類すると、利用者は迷子になりやすい
- 常識と異なる使い方を強要すると、混乱する
- ボタン型のアイコン、下線付きのテキストは常識ではリンク
- 商品情報なら、「エリア」ではなく「商品」カテゴリーを探す
現在位置と移動手段
- 地図には現在位置が不可欠
- 各ページでそのサイト内での現在位置情報を提供する
- 途中から入ってきても、位置付けを把握しやすい配慮を
- 一貫したナビゲーション手段を提供する
- 必ず目次（トップページ）に戻る手段を用意する
- 一貫したナビゲーション＝使いやすさ＋統一感
ごく簡単なHTMLの説明