body要素の中に何を書くか?

ドキュメント(コンテンツ)

ドキュメントは、多くの人へ効率的に情報を伝達するために適したツールです。
その中に書かれる内容が「コンテンツ」です。
そのドキュメントをHTML形式で書いたものが、Webページです。
そして「body要素」内に書かれる部分を「コンテンツ」と呼びます。


以下、ドキュメントを「Webページ」と置き換えて読んでみてください。

なぜドキュメントを作成するのか?

誰かが誰かに情報を伝達する手段には、以下の方法があります。

  1. 口頭(相手が限られ、残らない)
  2. 手書きのメモ(整理されていない、必要な部分を取り出しにくい)
  3. 電子ドキュメント(複製・再配布が容易、検索可能)


いうまでもなく、パーソナルコンピュータが使われる理由がここにあります。

電子ドキュメントを作成するコスト

通常の企業に見られるように、ただ誰かが作った大量のドキュメントが効率的な情報伝達に役に立つかと言えば、必ずしもそうではありません。


そこには、コミニュケーション・コストの考え方が欠如しています。

  1. 作成のコスト(最初に作成するコスト、ツール次第でコスト削減ができる)
  2. 配布のコスト(伝えたい相手に比例して増大する、最新版を得るためのコスト)
  3. 理解のコスト(内容を理解するために必要なコスト、読みやすさがコストに跳ね返る)
  4. 保守のコスト(現状にあわせて、更新するためのコスト)


「Word」でドキュメントを作るときには、あまり意識していないコストの問題が、Webページを作ることを意識したとたんに、はっきり見えてきます。
本来、Wordなどのドキュメント作成ツールの場合でも、考える必要があります。


よいドキュメント

WordでもWebページでも、必要とされる要件は同じです。

  • 読みやすい
  • 体裁が整っている
  • メンテナンス性が高い


もっとも誤解が生じやすいのが「読みやすい(見栄え)」という部分です。

読みやすい(見栄え)
  • 見出しと本文の区別がある
  • 適切な内容の分割がある
  • 結論から内容への誘導がある
  • 必要な場所へ移動できる
体裁が整っている
  • 読み手のことを考えてある
  • 必要十分な空きがある
  • 文字の大きさで重要度に変化をつけてある
  • ドキュメント全体の規則性がある
メンテナンス性が高い
  • 繰り返し改訂・追記されることが前提
  • 誰もがルールに則り更新ができる
  • 無駄な作業をせずに価値ある作業に集中できる

つまり、コンテンツを作るということは、文章を書く技術を最大限利用しておこなう行為なのです。
それは、HTMLを暗記するなどという行為とはまったく意味の違うものです。
ですから、このクラスは「まる暗記」はしません。


コンテンツ内容

必ず以下の要素が必要になります。WordもWebページも同じです。

  1. 本文
  2. 見出し
  3. 箇条書き
  4. 画像(説明・解説用、イメージ)
  5. 補足要素(引用、脚注)
  6. ハイパーリンク
  7. ヘッダー・フッター(Wordのみ)
本文

紙媒体の場合、日本では「9pt ≒ 13Q、中明朝体、正体、べた組み」と基準が決まっています。
Webページも同様に、ブラウザの標準文字サイズ「16px」が基準となります。
本文の文字サイズを指定しなければ、自動的に「16px」で表示されます。


ここで最も重要なことは、文字サイズは「スタイルシート」で設定することです。
とくに、Wordの場合「スタイルシート」を使わなければ、Wordの機能の1/10も利用したことになりません。
もちろん、Webページは言うまでもありません。

見出し

本文が数十行にわたって書かれていれば、誰も読む気はおこりません。
ですから、本文は段落ごとに分かれていて、なおかつ内容をわかりやすくまとめた1行、つまり「見出し」が必要になります。


見出しには、重要度によってランク付けがあります。


Wordの場合は、見出し1→ 見出し2→ 見出し3
Webページの場合は、h1→ h2→ h3→ h4→ h5→ h6


という風に基準が決まっています。
WordもWebページも、この指定がなくても表示上問題はありません。
しかし、よいドキュメントである条件

  • 読みやすい
  • 体裁が整っている
  • メンテナンス性が高い


を満たしたことにはなりません。
つねに「本文と見出し」の組み合わせで書くことを意識しましょう。

箇条書き

しかし、実際には「本文と見出し」だけでは単調なもになってしまいます。
とくに説明する内容などは、全体が比較して見えないと理解につながりません。
そこで利用されるのが、「箇条書き」です。


箇条書きには、3種類あります。(Wordでは2種類)


番号なし箇条書き
順序の前後が入れ替わっても、意味や価値の変わらない場合に利用します。


番号つき箇条書き
順序の前後が入れ替わると、意味の通じない順序が重要なレシピなどの説明に利用します。


定義型箇条書き
語句の説明や、日ごとに起こったことを並列で並べて見せるときに利用します。

画像

文字だけが長く続くと、それだけで読む気が起こりにくいものです。
そこで、より情報量が多い「画像」を挿入して、読みやすさのアクセントを作ります。


画像には、2種類の使い方があります。

  • 説明・解説のための画像(キャプションなどをつけます)
  • Webページの印象をつくるための画像


写真集でもない限り、写真が主張しすぎると全体のバランスを崩す原因にもなりかねません。

ハイパーリンク

現在、電子ドキュメントの中でもっとも重要な要素です。
文章の特定の場所から、関連する情報に移動できるような仕組みを指します。
WordでもPDFでも、この仕組みを使うことができるようになっています。


もちろん、Webページでは「ハイパーリンク」がなければ役立ちません。


文書構造

上記のドキュメント内容を、見る人が理解しやすくする形を「文書構造」と呼びます。


Webページの場合、「読みやすい」「体裁が整っている」「メンテナンス性が高い」以外に、「検索結果が上位表示」するということを求められます。
このことも、正しい文書構造をつくる必然性のひとつになっています。


この文書構造こそが「伝えるドキュメントの書き方」の本質です。
そして、Webの勉強は文書構造の書き方を中心におこないます。
プログラミングであっても同じことです。
伝える相手が人から「OS(機械)」に変わるだけのことです。
伝えようとする内容が、的確に効率よく伝わらなければ意味がありません。