魅せる!読ませる!
WEBライティングと文章編集の実践テクニック
文＝益子貴寛 （株）サイバーガーデン 代表取締役
Webプロデューサー／コンサルタント。（社）日本能率連盟登録資格「Web検定」プロジェクトメンバー。Webデザインに関する記事執筆、講義など多 数。『月刊web creators』（MdN）、ITpro（日経BP社）、Web担当者Forum（インプレスR&D）に連載をもつ。著書に『Web標準の教科 書 ─XHTMLとCSSでつくる“正しい”Webサイト』『伝わるWeb文章デザイン100の鉄則』（ともに秀和システム）。共著に『スタイルシート・デザ イン』（MdN）、『変革期のウェブ』（マイコミ新書）など。
url. www.cybergarden.net/
第2回
もっとリストを活用しよう
読みやすくわかりやすいページづくりには「リスト」が不可欠。どのようなシチュエーションでリストを使うか、リストにはどのような種類があるかを見ていこう。最後に、ちょっと高度なリストの使い方も説明する。
文章の中でリストを使う
Webライティングは、紙媒体という先達のライティングメソッドから学ぶべきことが多い。しかし、単に紙媒体のメソッドをそのまま踏襲すればよいわけではなく、Webというメディア特有の性格も知っておかないとユーザーに読んでもらえる文章にはならないという点に注意が必要だ。
Webページは紙媒体よりも視認性や一覧性が低いため、特にシンプルな文章が求められる。文章をコンパクトにするのにもっとも効率的かつ効果的な方法は「リスト」を利用することだ。わかりやすい例として、空気清浄機について説明した【1】と【2】の文章を比較してみよう。
【1】このような冗長な説明は、ユーザーにとってわかりにくい
【2】ポイントごとにリスト化した例。見やすくわかりやすい
ユーザーが【1】のような冗長な説明を読んで、果たしてすんなりと理解できるだろうか。うまくまとまっているように思うかもしれないが、少なからぬユーザーが読んだそばから何が書いてあったか忘れてしまうだろう。このような文章は【2】のようにポイントごとにリスト化してしまったほうがよい。リストは目立つため、ページのスクロール中でも目に留まりやすいというメリットもある。マークアップ例は【3】、ブラウザでの表示例は【4】の通りだ。
【3】マークアップ例
【4】ブラウザでの表示例
リスト化の別のメリットとして「書きまちがいが少ない」ということがある。なぜなら読み手にとってわかりやすいということは、書き手が読み直す(つまり一時的に読み手になる)ときもわかりやすく、ミスを発見しやすいからである。
ナビゲーションにリストを使う
リストは一般的に「ナビゲーション」で利用することも多い。ナビゲーションはページ間の移動を容易にするためのリンクであり、サイト内のメインカテゴリへのリンクをまとめた「グローバルナビゲーション」、あるカテゴリやページの中でのリンクをまとめた「ローカルナビゲーション」のふたつに大別できる。いずれのナビゲーションもリストとして定義する、ということになる。
ソシオメディア(株)のトップページを見てみよう【5】。グローバルナビゲーションがページ上部に配置されているが、(X)HTML上ではリストとして定義し、CSSで横に並ぶように設定している。CSSをカットした状態を見れば、きちんとリストとして定義されているのがわかるだろう【6】。この状態がすなわち、テ
キストブラウザや音声ブラウザなどフルブラウザ以外での閲覧環境を表しているといってよい。
【5】ソシオメディア(株)(www.sociomedia.co.jp/)のトップページ。グローバルナビゲーションがリストで定義されている
【6】【5】のサイトのCSSをカットした状態。テキストブラウザや音声ブラウザなどフルブラウザ以外での閲覧環境を表しているといってよい
このように、そのテキストにどのような役割を与えるべきかをまず考え、適切にマークアップする。見栄えについては、CSSで設定すればよく、まずデザインから考えないことが大切だ。このような制作方針によって、さまざまな閲覧環境に耐えうるアクセシビリティの高いページになる。
リストの種類と区別
リストというと、これまで例で示したような並列リスト(ul要素)がよく使われるが、ほかにも順序リスト(ol要素)と定義型リスト(dl要素)が利用できる。状況に応じて使い分けよう。
順序リストは文字通り、順番や順位を示すためのリストである【7】。一般的なブラウザでは各項目の先頭に番号が自動的に振られる【8】。一方、定義型リストは「用語」と「その説明」を対応させながら定義するためのリストだ【9】。用語をdt要素、その説明をdd要素でマークアップし、全体をdl要素で囲む。一般的なブラウザではdd要素がインデント表示される【10】。
【7】順序リスト(ol要素)のマークアップ例
【8】ブラウザでの表示例
【9】定義型リスト(dl要素)のマークアップ例
【10】ブラウザでの表示例
これら3種類のリストは、内容に合わせて適切に使うことが大切だ。特に並列リストと順序リストは混同しがちであり、順番や順位を示すべきところで並列リストを使ってしまったり、逆に並列的に示すべき内容を番号リストで定義しまうといったケースがある。これらはユーザーの混乱の原因となるので注意しよう。
リストの使い分けのコツとしては、順序リストや定義型リストは並列リストよりも目的が特定されているため、まずこれらを使えないかどうか考え、もし使えない場合は並列リストを使うというように、消去法的に選択するとよいだろう。
ちょっと高度なリストの使い方
並列リストでも順序リストでも、各項目(li要素)にはブロックレベル要素を含むことができる。li要素にul要素やol要素を含めることで、リストの中でリストを示す、つまりリストを入れ子にすることができる【11】。用途としては、カテゴリのさらに下位のサブカテゴリを示す、年とそれに従属する月を示すといったことがある。このようなリストの入れ子を、CSSやJavaScript、DOM(Document Object Model)と組み合わせて、よりリッチなナビゲーションを制作することもできる。
【11】リストの入れ子のマークアップ例
定義型リストは、「用語」と「その説明」という使い方以外にも、「参考文献」と「その説明」、「リンク先」と「その説明」、「日付」と「更新情報」【12】、「カテゴリ名」と「その内容」【13】などさまざまな用途で利用できる。(X)HTML上の見出し要素(h1～h6要素)は、ある要素に対する直接の見出しというよりは、ページ全体の文脈上の存在といえる。つまり、ある要素に対する直接的な見出しをつける手段はないので、このように定義型リストをさまざまな用途に利用せざるを得ないというボキャブラリ上の制約もあるのだ。
【12】定義型リストを「日付」と「更新情報」に利用したマークアップ例
【13】定義型リストを「カテゴリ」と「その内容」に利用したマークアップ例。このようにひとつのdt要素に複数のdd要素を対応させることも可能だ
ただし、定義型リストを見出しづけに濫用しないように注意しよう。文脈上の見出しとしての役割を部分的にでも備えているのであれば、ふつうにh1～h6要素を利用し、ある要素に対する個別的な見出しを指定したい場合だけにdl要素を利用すればよいだろう。
本記事は『Web STRATEGY』2005年 冬号 vol.2からの転載です
WEBライティングと文章編集の実践テクニック
文＝益子貴寛 （株）サイバーガーデン 代表取締役Webプロデューサー／コンサルタント。（社）日本能率連盟登録資格「Web検定」プロジェクトメンバー。Webデザインに関する記事執筆、講義など多 数。『月刊web creators』（MdN）、ITpro（日経BP社）、Web担当者Forum（インプレスR&D）に連載をもつ。著書に『Web標準の教科 書 ─XHTMLとCSSでつくる“正しい”Webサイト』『伝わるWeb文章デザイン100の鉄則』（ともに秀和システム）。共著に『スタイルシート・デザ イン』（MdN）、『変革期のウェブ』（マイコミ新書）など。
url. www.cybergarden.net/
第2回
もっとリストを活用しよう
読みやすくわかりやすいページづくりには「リスト」が不可欠。どのようなシチュエーションでリストを使うか、リストにはどのような種類があるかを見ていこう。最後に、ちょっと高度なリストの使い方も説明する。
文章の中でリストを使う
Webライティングは、紙媒体という先達のライティングメソッドから学ぶべきことが多い。しかし、単に紙媒体のメソッドをそのまま踏襲すればよいわけではなく、Webというメディア特有の性格も知っておかないとユーザーに読んでもらえる文章にはならないという点に注意が必要だ。
Webページは紙媒体よりも視認性や一覧性が低いため、特にシンプルな文章が求められる。文章をコンパクトにするのにもっとも効率的かつ効果的な方法は「リスト」を利用することだ。わかりやすい例として、空気清浄機について説明した【1】と【2】の文章を比較してみよう。
【1】このような冗長な説明は、ユーザーにとってわかりにくい
【2】ポイントごとにリスト化した例。見やすくわかりやすい
ユーザーが【1】のような冗長な説明を読んで、果たしてすんなりと理解できるだろうか。うまくまとまっているように思うかもしれないが、少なからぬユーザーが読んだそばから何が書いてあったか忘れてしまうだろう。このような文章は【2】のようにポイントごとにリスト化してしまったほうがよい。リストは目立つため、ページのスクロール中でも目に留まりやすいというメリットもある。マークアップ例は【3】、ブラウザでの表示例は【4】の通りだ。
【3】マークアップ例
【4】ブラウザでの表示例
リスト化の別のメリットとして「書きまちがいが少ない」ということがある。なぜなら読み手にとってわかりやすいということは、書き手が読み直す(つまり一時的に読み手になる)ときもわかりやすく、ミスを発見しやすいからである。
ナビゲーションにリストを使う
リストは一般的に「ナビゲーション」で利用することも多い。ナビゲーションはページ間の移動を容易にするためのリンクであり、サイト内のメインカテゴリへのリンクをまとめた「グローバルナビゲーション」、あるカテゴリやページの中でのリンクをまとめた「ローカルナビゲーション」のふたつに大別できる。いずれのナビゲーションもリストとして定義する、ということになる。
ソシオメディア(株)のトップページを見てみよう【5】。グローバルナビゲーションがページ上部に配置されているが、(X)HTML上ではリストとして定義し、CSSで横に並ぶように設定している。CSSをカットした状態を見れば、きちんとリストとして定義されているのがわかるだろう【6】。この状態がすなわち、テ
キストブラウザや音声ブラウザなどフルブラウザ以外での閲覧環境を表しているといってよい。
【5】ソシオメディア(株)(www.sociomedia.co.jp/)のトップページ。グローバルナビゲーションがリストで定義されている
【6】【5】のサイトのCSSをカットした状態。テキストブラウザや音声ブラウザなどフルブラウザ以外での閲覧環境を表しているといってよい
このように、そのテキストにどのような役割を与えるべきかをまず考え、適切にマークアップする。見栄えについては、CSSで設定すればよく、まずデザインから考えないことが大切だ。このような制作方針によって、さまざまな閲覧環境に耐えうるアクセシビリティの高いページになる。
リストの種類と区別
リストというと、これまで例で示したような並列リスト(ul要素)がよく使われるが、ほかにも順序リスト(ol要素)と定義型リスト(dl要素)が利用できる。状況に応じて使い分けよう。
順序リストは文字通り、順番や順位を示すためのリストである【7】。一般的なブラウザでは各項目の先頭に番号が自動的に振られる【8】。一方、定義型リストは「用語」と「その説明」を対応させながら定義するためのリストだ【9】。用語をdt要素、その説明をdd要素でマークアップし、全体をdl要素で囲む。一般的なブラウザではdd要素がインデント表示される【10】。
【7】順序リスト(ol要素)のマークアップ例
【8】ブラウザでの表示例
【9】定義型リスト(dl要素)のマークアップ例
【10】ブラウザでの表示例
これら3種類のリストは、内容に合わせて適切に使うことが大切だ。特に並列リストと順序リストは混同しがちであり、順番や順位を示すべきところで並列リストを使ってしまったり、逆に並列的に示すべき内容を番号リストで定義しまうといったケースがある。これらはユーザーの混乱の原因となるので注意しよう。
リストの使い分けのコツとしては、順序リストや定義型リストは並列リストよりも目的が特定されているため、まずこれらを使えないかどうか考え、もし使えない場合は並列リストを使うというように、消去法的に選択するとよいだろう。
ちょっと高度なリストの使い方
並列リストでも順序リストでも、各項目(li要素)にはブロックレベル要素を含むことができる。li要素にul要素やol要素を含めることで、リストの中でリストを示す、つまりリストを入れ子にすることができる【11】。用途としては、カテゴリのさらに下位のサブカテゴリを示す、年とそれに従属する月を示すといったことがある。このようなリストの入れ子を、CSSやJavaScript、DOM(Document Object Model)と組み合わせて、よりリッチなナビゲーションを制作することもできる。
【11】リストの入れ子のマークアップ例
定義型リストは、「用語」と「その説明」という使い方以外にも、「参考文献」と「その説明」、「リンク先」と「その説明」、「日付」と「更新情報」【12】、「カテゴリ名」と「その内容」【13】などさまざまな用途で利用できる。(X)HTML上の見出し要素(h1～h6要素)は、ある要素に対する直接の見出しというよりは、ページ全体の文脈上の存在といえる。つまり、ある要素に対する直接的な見出しをつける手段はないので、このように定義型リストをさまざまな用途に利用せざるを得ないというボキャブラリ上の制約もあるのだ。
【12】定義型リストを「日付」と「更新情報」に利用したマークアップ例
【13】定義型リストを「カテゴリ」と「その内容」に利用したマークアップ例。このようにひとつのdt要素に複数のdd要素を対応させることも可能だ
ただし、定義型リストを見出しづけに濫用しないように注意しよう。文脈上の見出しとしての役割を部分的にでも備えているのであれば、ふつうにh1～h6要素を利用し、ある要素に対する個別的な見出しを指定したい場合だけにdl要素を利用すればよいだろう。
本記事は『Web STRATEGY』2005年 冬号 vol.2からの転載です
