魅せる!読ませる!
WEBライティングと文章編集の実践テクニック
文＝益子貴寛 （株）サイバーガーデン 代表取締役
Webプロデューサー／コンサルタント。（社）日本能率連盟登録資格「Web検定」プロジェクトメンバー。Webデザインに関する記事執筆、講義など多 数。『月刊web creators』（MdN）、ITpro（日経BP社）、Web担当者Forum（インプレスR&D）に連載をもつ。著書に『Web標準の教科書 ─XHTMLとCSSでつくる“正しい”Webサイト』『伝わるWeb文章デザイン100の鉄則』（ともに秀和システム）。共著に『スタイルシート・デザ イン』（MdN）、『変革期のウェブ』（マイコミ新書）など。
url. www.cybergarden.net/
第1回
テキストに適切な役割を与える
Webサイト成功のカギは「Webライティング」にあり。ユーザーに読んでもらえる文章の書き方と見せ方を、見出しとパラグラフに焦点を当てて解説する。RSS時代の見出しとパラグラフのあり方についても考えてみよう。
正しいマークアップがWebライティングの基本
Webライティングの基本は、テキストそれぞれに適切な役割を与えることだ。見出しは見出しとして、パラグラフはパラグラフとしてマークアップすることで、アクセシビリティ上もSEO上も好ましい状態にできる。逆に、見出しとして定義すべきテキストをパラグラフとして定義し、太字にしたりフォントサイズを大きくして「見出しに見せかけ」ても、ブラウザや検索クローラーは当然、見出しとは認識してくれずパラグラフとして認識する。テキストはその役割に合わせてマークアップし、フォントサイズなどの見栄えはCSSで調整すればよい。不自然なマークアップはユーザーとマシンを混乱させるだけだ。
正しいマークアップのワークフローは【1】の通りだ。まず何が見出し(h1～h6要素)なのかを考え、次にリスト(ul/ol要素)などテキストに特定の役割を与えられないかを考える。そのほかのテキストの固まりはパラグラフ(p要素)として定義しよう。最後に、一部のテキストをリンク(a要素)や強調(em/strong要素)などとしてマークアップする。プレーンなテキスト、役割を与えたテキスト、実際のマークアップの例は【2】に示してある。
【1】
【2】左上から、プレーンなテキスト、役割を与えたテキスト、実際のマークアップ例。テキストそれぞれに適切な役割を与え、正しくマークアップすることが大切だ
Web制作の現場では、クライアントからメールやテキストファイル、FAXなどで生のままの文字情報が送られてきて、それをWebページに落とし込む作業が多い。テキストそれぞれにどのような役割を与えるかは制作者に任されるわけだ。テキストに適切な役割を与え、アクセシビリティやSEOを同時に果たせなければ、顧客満足度の低いサービスしか提供できないことになる。そうなれば、クライアントを取り逃がすことになってしまう。文章の中身を推敲する前提として正しいマークアップが求められることを覚えておこう。
見出しのコツ
見出し(h1～h6要素)の使い方と中身について見ていこう。見出しはh1要素、h2要素、h3要素というように、階層的にマークアップするのが基本だ。たとえば、h1要素の次にh3要素が出現するのは正しくない。
また、必ずh1要素から始めるようにする【3】。すべてのページともタイトルロゴをh1要素で定義しているケースをよく見かけるが、h1要素は本来各ページの最上位の見出し(≒タイトル)を定義するものであり、h1要素によるタイトルロゴの定義はせいぜいトップページしか妥当しない。また、トップページであっても何らかの適切なテキストをh1要素で定義すればよく、必ずしもタイトルロゴをh1要素で定義する必要はない。
【3】見出しのマークアップの悪い例（上）、よい例（下）。上はh2要素で始まり、h3要素が飛ばされてh4要素が出現している。一方、下はh1要素で始まり、次のレベルの見出しはh2要素で統一されている
見出しの中身については、まず日本語のほうがSEO上有利と覚えておこう。日本人であれば、たとえば「Wine Shop」ではなく「ワインショップ」という日本語のキーワードで検索するからだ。見出しは検索エンジンから重視されるテキストのひとつであるので慎重に決めたい。また、造語や具体性のない言葉は避ける、冗長なタイトルは体言止めでコンパクトにするなど、ユーザーのことを考えたわかりやすい見出しにしよう【4】。
【4】見出しの付け方の悪い例（上）、よい例（下）。日本語のほうがSEO上有利、造語や具体性のない言葉は避ける、冗長なタイトルは体言止めでコンパクトにするといったポイントを押さえておこう
パラグラフのコツ
Webページは紙媒体以上に見やすさ、わかりやすさが求められる。特にテキストの「固まり」であるパラグラフ(p要素)のマークアップの使い方と中身の書き方は、見やすさ、わかりやすさに大きな影響を与える。パラグラフは長くなりすぎないように3～5行程度で区切ろう。10行にも20行にもわたる文章はユーザーに威圧感を与え、読む気を失わせてしまうからだ【5】。なお、パラグラフが分かれているように見せかけるためにbr要素を連続挿入するのは正しくないので注意したい。別々にp要素で定義する。
【5】パラグラフのマークアップの悪い例（上）、よい例（下）。長いパラグラフは適度に区切ると読みやすくなる。ひとつのパラグラフは3～5行程度が目安だ
パラグラフでは結論をはじめに書くことが大切だ。まず結論を知ったうえで文章を読むと理解しやすいからである【6】。拾い読みしやすいということや、冒頭だけを抜粋しても価値のある情報を提供できるといった実用的なメリットもある。また、パラグラフは積極的な意味をもつというよりは、テキストに特定の役割を与えられない場合に消去法的に使うことも多い。前掲【2】のマークアップ例でいえば、「○○株式会社」と「東京都港区芝×-××-×」が消去法的なパラグラフの使い方である(厳密なマークアップ書式では、すべてのテキストに何らかの役割が与えられていなければならない)。
【6】パラグラフの書き方の悪い例(上)、よい例(下)。左では結論が最後に書かれているため、何が言いたいのかすぐに理解できない
RSS時代に求められる見出しとパラグラフ
最後にRSS時代にはどのような見出しやパラグラフが求められるか考えてみよう。RSSリーダーにはソフトウエア型やWebアプリケーション型、ティッカー型などさまざまなタイプがあるが、概して記事見出しの表示領域は狭い【7】。つまり、長すぎる見出しは途中で切られてしまうので、キーワードを初めのほうに含めておかないとユーザーが興味をもってくれない恐れがあるからだ。
【7】ソフトウエア型「Headline-Reader」とWebアプリケーション型「goo RSSリーダー」の記事見出し表示。長すぎる見出しは途中で切られてしまうので、キーワードは初めのほうに含めておいたほうがよい
RSSリーダーを使い慣れてくると、わざわざWebページにアクセスせずにRSSだけを読む人も少なくない。RSSリーダーでは記事内容がマークアップに基づいてシンプルに表示されるため、正しくマークアップされているかどうかが読みやすさに直結することになる。また、RSSで配信する文字量を冒頭1パラグラフや50文字などに制限しているケースをよく見かけるが、RSSだけで全文を読みたいユーザーもいることを考えれば、あまり望ましくないといえる。
これからはRSSリーダーというブラウジング環境を考慮したうえで、見出しやパラグラフの中身を考えたり、マークアップや配信設定を工夫する必要があるだろう。
本記事は『Web STRATEGY』2005年 創刊号 vol.1からの転載です
WEBライティングと文章編集の実践テクニック
文＝益子貴寛 （株）サイバーガーデン 代表取締役Webプロデューサー／コンサルタント。（社）日本能率連盟登録資格「Web検定」プロジェクトメンバー。Webデザインに関する記事執筆、講義など多 数。『月刊web creators』（MdN）、ITpro（日経BP社）、Web担当者Forum（インプレスR&D）に連載をもつ。著書に『Web標準の教科書 ─XHTMLとCSSでつくる“正しい”Webサイト』『伝わるWeb文章デザイン100の鉄則』（ともに秀和システム）。共著に『スタイルシート・デザ イン』（MdN）、『変革期のウェブ』（マイコミ新書）など。
url. www.cybergarden.net/
第1回
テキストに適切な役割を与える
Webサイト成功のカギは「Webライティング」にあり。ユーザーに読んでもらえる文章の書き方と見せ方を、見出しとパラグラフに焦点を当てて解説する。RSS時代の見出しとパラグラフのあり方についても考えてみよう。
正しいマークアップがWebライティングの基本
Webライティングの基本は、テキストそれぞれに適切な役割を与えることだ。見出しは見出しとして、パラグラフはパラグラフとしてマークアップすることで、アクセシビリティ上もSEO上も好ましい状態にできる。逆に、見出しとして定義すべきテキストをパラグラフとして定義し、太字にしたりフォントサイズを大きくして「見出しに見せかけ」ても、ブラウザや検索クローラーは当然、見出しとは認識してくれずパラグラフとして認識する。テキストはその役割に合わせてマークアップし、フォントサイズなどの見栄えはCSSで調整すればよい。不自然なマークアップはユーザーとマシンを混乱させるだけだ。
正しいマークアップのワークフローは【1】の通りだ。まず何が見出し(h1～h6要素)なのかを考え、次にリスト(ul/ol要素)などテキストに特定の役割を与えられないかを考える。そのほかのテキストの固まりはパラグラフ(p要素)として定義しよう。最後に、一部のテキストをリンク(a要素)や強調(em/strong要素)などとしてマークアップする。プレーンなテキスト、役割を与えたテキスト、実際のマークアップの例は【2】に示してある。
【1】
【2】左上から、プレーンなテキスト、役割を与えたテキスト、実際のマークアップ例。テキストそれぞれに適切な役割を与え、正しくマークアップすることが大切だ
Web制作の現場では、クライアントからメールやテキストファイル、FAXなどで生のままの文字情報が送られてきて、それをWebページに落とし込む作業が多い。テキストそれぞれにどのような役割を与えるかは制作者に任されるわけだ。テキストに適切な役割を与え、アクセシビリティやSEOを同時に果たせなければ、顧客満足度の低いサービスしか提供できないことになる。そうなれば、クライアントを取り逃がすことになってしまう。文章の中身を推敲する前提として正しいマークアップが求められることを覚えておこう。
見出しのコツ
見出し(h1～h6要素)の使い方と中身について見ていこう。見出しはh1要素、h2要素、h3要素というように、階層的にマークアップするのが基本だ。たとえば、h1要素の次にh3要素が出現するのは正しくない。
また、必ずh1要素から始めるようにする【3】。すべてのページともタイトルロゴをh1要素で定義しているケースをよく見かけるが、h1要素は本来各ページの最上位の見出し(≒タイトル)を定義するものであり、h1要素によるタイトルロゴの定義はせいぜいトップページしか妥当しない。また、トップページであっても何らかの適切なテキストをh1要素で定義すればよく、必ずしもタイトルロゴをh1要素で定義する必要はない。
【3】見出しのマークアップの悪い例（上）、よい例（下）。上はh2要素で始まり、h3要素が飛ばされてh4要素が出現している。一方、下はh1要素で始まり、次のレベルの見出しはh2要素で統一されている
見出しの中身については、まず日本語のほうがSEO上有利と覚えておこう。日本人であれば、たとえば「Wine Shop」ではなく「ワインショップ」という日本語のキーワードで検索するからだ。見出しは検索エンジンから重視されるテキストのひとつであるので慎重に決めたい。また、造語や具体性のない言葉は避ける、冗長なタイトルは体言止めでコンパクトにするなど、ユーザーのことを考えたわかりやすい見出しにしよう【4】。
【4】見出しの付け方の悪い例（上）、よい例（下）。日本語のほうがSEO上有利、造語や具体性のない言葉は避ける、冗長なタイトルは体言止めでコンパクトにするといったポイントを押さえておこう
パラグラフのコツ
Webページは紙媒体以上に見やすさ、わかりやすさが求められる。特にテキストの「固まり」であるパラグラフ(p要素)のマークアップの使い方と中身の書き方は、見やすさ、わかりやすさに大きな影響を与える。パラグラフは長くなりすぎないように3～5行程度で区切ろう。10行にも20行にもわたる文章はユーザーに威圧感を与え、読む気を失わせてしまうからだ【5】。なお、パラグラフが分かれているように見せかけるためにbr要素を連続挿入するのは正しくないので注意したい。別々にp要素で定義する。
【5】パラグラフのマークアップの悪い例（上）、よい例（下）。長いパラグラフは適度に区切ると読みやすくなる。ひとつのパラグラフは3～5行程度が目安だ
パラグラフでは結論をはじめに書くことが大切だ。まず結論を知ったうえで文章を読むと理解しやすいからである【6】。拾い読みしやすいということや、冒頭だけを抜粋しても価値のある情報を提供できるといった実用的なメリットもある。また、パラグラフは積極的な意味をもつというよりは、テキストに特定の役割を与えられない場合に消去法的に使うことも多い。前掲【2】のマークアップ例でいえば、「○○株式会社」と「東京都港区芝×-××-×」が消去法的なパラグラフの使い方である(厳密なマークアップ書式では、すべてのテキストに何らかの役割が与えられていなければならない)。
【6】パラグラフの書き方の悪い例(上)、よい例(下)。左では結論が最後に書かれているため、何が言いたいのかすぐに理解できない
RSS時代に求められる見出しとパラグラフ
最後にRSS時代にはどのような見出しやパラグラフが求められるか考えてみよう。RSSリーダーにはソフトウエア型やWebアプリケーション型、ティッカー型などさまざまなタイプがあるが、概して記事見出しの表示領域は狭い【7】。つまり、長すぎる見出しは途中で切られてしまうので、キーワードを初めのほうに含めておかないとユーザーが興味をもってくれない恐れがあるからだ。
【7】ソフトウエア型「Headline-Reader」とWebアプリケーション型「goo RSSリーダー」の記事見出し表示。長すぎる見出しは途中で切られてしまうので、キーワードは初めのほうに含めておいたほうがよい
RSSリーダーを使い慣れてくると、わざわざWebページにアクセスせずにRSSだけを読む人も少なくない。RSSリーダーでは記事内容がマークアップに基づいてシンプルに表示されるため、正しくマークアップされているかどうかが読みやすさに直結することになる。また、RSSで配信する文字量を冒頭1パラグラフや50文字などに制限しているケースをよく見かけるが、RSSだけで全文を読みたいユーザーもいることを考えれば、あまり望ましくないといえる。
これからはRSSリーダーというブラウジング環境を考慮したうえで、見出しやパラグラフの中身を考えたり、マークアップや配信設定を工夫する必要があるだろう。
本記事は『Web STRATEGY』2005年 創刊号 vol.1からの転載です
