情報のマークアップ
情報の一般的な形態であるテキストに、構造や見栄えの情報を与える。
マークアップとは
マークアップとは、見出しや段落など「文章の構造」や、フォントの色やサイズなど「見栄えなどに関する指定」を本文とともにテキストファイルに記述することである。
Webデザイナーが行う2種類のマークアップ
構造的なマークアップ（コーディング）
文章を構造化する作業。見出し、段落、表、リストなど、最適な要素を割り当てる。主にHTMLやXMLを使って行う。
視覚的なマークアップ（デザイン）
構造化された情報を視覚的に区別させる作業。CSSにより指定し、文字の色やサイズ、背景画像などで文章を装飾することで、文章の持っている情報や構造の「伝わりやすさ」を飛躍的に伸ばすことができる。
構造的なマークアップ
構造を意識せずに記述された文章は、どの要素（タグ）で指定するべきであるかを見極めるのは難しい。おおむね、次のような段階を踏むると混乱すことなくマークアップすることができる。
- 内容の区切りを見つける
- 内容の区切りを見出し、まとまりを指定する（div、hr）。
- 本文を見つける
- そのまとまりの本文である箇所を指定する（p）。
- 重要語を見つける
- そのまとまりの重要語を指定する（em、strong）。
- 箇条書き、定義を見つける
- 箇条書きや定義を指定する（ul、ol、dl）。
- 表や画像の必要性を判断する
- 情報伝達の補助となる表や画像が必要かどうかを考える（table、img）。
- 見出しをつける
- 全体の、また各まとまりの見出しをつける。（h1～h6）
- 他との関係性を見つける
- 他ページや外部へのリンク、引用などを指定する（a、blockquote）。
視覚的なマークアップ
視覚的なマークアップを行う際、構造的なマークアップを無視してデザインを与えると、情報構造が崩れる。次のような点に注意して、統一したルールで全体のデザインを行う必要がある。
- 大きさで区別する
- ユーザーは文字サイズが大きいほど重要な、または上位の情報ととらえる。
同格の情報にはできるかぎり同じ文字サイズにする。 - 記号を付けて区別する
- 記号を付けると視覚的に区別しやすい。
同格の情報にはできるかぎり同じ記号を付ける。 - 色で区別する
- ユーザーは相対的に目につきやすい色が使用されていると重要な情報ととらえる。
同格の情報にはできるかぎり同じ色を付ける。 - コントラストで区別する
- ユーザーは周囲とのコントラストが高い情報を重要な情報ととらえる。
同格の情報にはできるかぎりコントラストを合わせる。 - 余白で区別する
- 「インデント（字下げ）」のように、余白を使って情報を区別することができる。
同格の情報にはできるかぎり同じ余白を与える。
まとめ
情報構造を意識せずに書かれた文章は当然構造的なマークアップも視覚的なマークアップも難しくなる。Webサイトを製作する際はデザインやプログラムのルールと同様、文章構造のルールも策定しておくべきである。
参考
記事のデータ
| 文責 | |
|---|---|
| 公開日 | 2012年1月10日 |
| カテゴリー | |
| タグ | Web／情報を表現する／技術と手法／文章デザイン／構造化 |
| 関連する記事 |