html（Web作成のための言語）は文章の構造的意味を補足しながら記述されます。例えば<h1>で囲まれた言葉は文書の題を意味し、<address>で囲まれた言葉はお問い合わせ先を表します。 （記事を書く際に参考になるタグ一覧はこちら）
ですから、Web用の原稿や記事を書く際には、htmlの特性を活かしたほうが得策です。読みやすく伝わりやすいページ構成・デザインになるのに加え、検索エンジン対策（SEO）にも効果があります。
ここでは、Web制作とは直接関係ない方にとって必要な、アウトラインを効かした立体的な文書の書き方をご説明します。
WEBでのアウトライン作成のメリット
例1のような数字にhtmlで適切なマークを付けると、例2になります(実際にはこのようなマークはありません)。例1では数字の羅列にしか見えませんでしたが、例2では数字の意味が分かるようになります。
文章の場合も同じで、適切なマークをつけてゆくと文章構造が明確になり、読者や検索エンジンに対して内容や文章構造が伝わりやすくなります。また、見出しの文字を大きくするなどのデザイン的要素はマーク（タグ）に依存しますので、視覚的にも読みやすくなります。
ちなみに、マークを付けてゆく作業を「マークアップ」、マークの記号を「タグ」といいます。
マークアップ前の数字(例1)
092 9333 3333 1976 12 23 1 14 14 203 092 9948 8888 1302332211
マークアップ後の数字（例2）
<電話番号>092 9333 3333</電話番号> <誕生日>1976 12 23</誕生日> <住所番地>1 14 14</住所番地> <部屋番号>203</部屋番号> <会社電話番号>092 9948 8888<> <ジムの会員番号>1302332211</ジムの会員番号>
アウトラインについての基本的なこと
アウトラインとは
文書構造の骨格の事。情報を分類・整理し読みやすくするため、題・大見出し・中見出し・小見出し、と階層化したもの。概要・目次。
アウトラインの基本形
htmlでは、対象となる部分を<></>というマーク(タグ）で囲むことにより、文書の構造を示します。
アウトラインを示すタグとしては、「題」を表す<h1>(見出しレベル1)があり、「大見出し」を表す<h2>(見出しレベル2)、「中見出し」を表す<h3>(見出しレベル3)、<h6>(見出しレベル6)まであります。
<h1>～<h6>はディレクトリ構造の関係になっており、基本的なアウトラインを図解すると、およそ以下のような形なります。
<h1>題</h1>
├ <h2>大見出し</h2>
│ ├ <h3>中見出し</h3>
│ │ ├ <h4>小見出し</h4>
│ │ ├ <h4>小見出し</h4>
│ │ └ <h4>小見出し</h4>
│ └ <h3>中見出し</h3>
│ ├ <h4>小見出し</h4>
│ ├ <h4>小見出し</h4>
│ └ <h4>小見出し</h4>
│
└ <h2>大見出し</h2>
└ <h3>中見出し</h3>
├ <h4>小見出し</h4>
└ <h4>小見出し</h4>
アウトラインの実例
実例として、このページのアウトラインを以下に記しておきます。
<h1>Webの文書にアウトラインをつけよう
├ <h2>WEBでのアウトライン作成のメリット
│ ├ <h3>マークアップ前の数字(例1)
│ └ <h3>マークアップ後の数字（例2）
├ <h2>アウトラインについての基本的なこと
│ ├ <h3>アウトラインとは
│ ├ <h3>アウトラインの基本形
│ └ <h3>アウトラインの実例
├ <h2>アウトラインの作り方
│ ├ <h3>先に文書を作り、後からアウトラインをつける
│ │ ├ <h4>オリジナルのアウトライン
│ │ ├ <h4>要約を見出しにしたアウトライン（例1）
│ │ └ <h4>キャッチコピーを見出しにしたアウトライン（例2）
│ └ <h3>先にアウトラインを作り、後から文章を作る
├ <h2>アウトラインの便利な使いかた
│ ├ <h3>文書構造を見直す
│ │ └ <h4>焦点のぼやけたアウトライン（修正後は2行目～18行目まで）
│ └ <h3>以前作った他の文書のアウトラインをフォーマットとして再利用
└ <h2>アウトライン作成に役に立つツール
├ <h3>ワープロソフト
└ <h3>アウトラインプロセッサ
アウトラインの作り方
先に文書を作り、後からアウトラインをつける
では実際の文書に見出しをつけてアウトラインを作成してみます。
ここでは、青空文庫の楠山正雄版「桃太郎」を任意の部分で区切り、見出しのアウトラインを抜き出してみます。
この時注意したいのは、見出しの付け方によって文章自体の印象や、見出しに選ぶ語句によって文章の重要なキーワードが、変化することです。
オリジナルのアウトライン
<h1>桃太郎 <h2>一 <h2>二 <h2>三 <h2>四
要約を見出しにしたアウトライン（例1）
<h1>桃太郎
<h2>桃太郎の誕生
<h3>川で見つけた桃
<h3>桃から生まれた子
<h2>桃太郎の成長
<h3>15才になった桃太郎
<h3>鬼ヶ島の噂
<h3>きびだんごを持って鬼退治へ
<h2>鬼ヶ島へ
<h3>仲間との出会い
<h4>犬との出会い
<h4>猿との出会い
<h4>きじとの出会い
<h3>鬼ヶ島へ到着
<h2>鬼退治
<h3>鬼との戦い
<h3>宝をもって帰郷
キャッチコピーを見出しにしたアウトライン（例2）
<h1>ワンダーピーチボーイ
<h2>誕生
<h3>奇跡の桃
<h3>その名前、桃太郎
<h2>グローイングアップ
<h3>15才の肖像
<h3>鬼ヶ島を僕はまだ知らない
<h3>決断の時
<h2>Road to 鬼ヶ島
<h3>桃太郎と愉快な仲間たち
<h4>獣戦士、犬
<h4>作戦参謀、猿
<h4>航空騎兵、きじ
<h3>いざ！決戦
<h2>史上最大の戦い
<h3>鬼ヶ島、陥落
<h3>武器よ、さらば
先にアウトラインを作り、後から文章を作る
比較的長い文書の場合などでは、アウトラインを先に作りながらそれにそって文章を考える方法もあります。各階層の内容を考えつつ全体のアウトラインを作成・修正してゆきます。
また実際に文章を書き始めてからも随時、見出しレベル等の文書構造全体を見直し、効率的に文書を作成してゆきます。
アウトラインの便利な使いかた
アウトラインとは文書構造の骨格のことですから、考えるためツールとしても便利に利用できます。
文書構造を見直す
例えば、以下のようなアウトラインの構造になったとします。文書構造を見渡すと、2行目<h2>△△△△△についてとても詳細に書かれていることが分かります。
このような場合、1行目の<h1>◎◎◎◎◎が題では焦点がややぼやけてしまいます。こういう場合は思いきって、2行目<h2>△△△△△をh1に格上げして、元の1行目<h1>◎◎◎◎◎と19・20行目の<h2>☓☓☓☓☓・▽▽▽▽▽を削除してみます。そのほうが文章構造のおさまりが良くなります。
どうしても削除したくない場合などは、<h2>☓☓☓☓☓・▽▽▽▽▽の内容をもう少し詳しく書いて全体のバランスを取ることも出来ます。
焦点のぼやけたアウトライン（修正後は2行目～18行目まで）
<h1>◎◎◎◎◎ <h2>△△△△△ <h3>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h3>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h3>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h3>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h4>◯◯◯◯◯◯◯◯ <h2>☓☓☓☓☓ <h2>▽▽▽▽▽
以前作った他の文書のアウトラインをフォーマットとして再利用
例えば代表的なものとして料理の作り方・製品紹介など、結果的に似かよったアウトラインになる文書があります。
そういう文書を作成する場合は、以前作ったアウトラインを再利用しましょう。情報の書き忘れなどもなくなり効率的になりますし、読み手にとってもデザインや構造が統一され読みやすいものになります。
アウトライン作成に役に立つツール
ワープロソフト
MSワード・一太郎などの主要なワープロソフトにはアウトライン作成機能があります。
アウトラインプロセッサ
アウトライン作成に特化したソフト。有償・無償を問わずたくさんありますので、お好みで。ちなみに、Veoctorでの検索結果。
Web-Writingのおすすめ記事
カテゴリー：Web-Writing