ホーム > サイトマップ > PC > サイト構築 > Web記事の文書スタイル |
2010.02.07. 掲載
このページの最後へ |
目次
はじめに
1.当サイトが目標とする記事のスタイル
2.これまでの対応とこれからの対応
3.HTMLの歴史
まとめ
1996年8月15日に当サイトを開設した。以来14年が過ぎ、ここに掲載する記事の文書スタイルも、ある程度固まってきている。しかし、明確なきまりを持って作ってきたわけではなく、スタイルにバラつきがある。そこで、このあたりでWeb記事の文書スタイルを決めておくことにした。
その理由は、1)記事を作る場合、きまりがあれば、早く簡単に作れる。2)読む側でも、スタイルが決まっていることで、戸惑いが少なくなり、記事を探しやすく、読みやすいと思われる。その上、3)Web標準の言語を使うようにすれば、将来も通用する可能性が大きいからだ。
スタイルの決まりを作ることによって、スタイルの変化が少なく、面白みの少ない記事となる可能性はあるが、それはいたしかたないとあきらめることにする。
1996年はWebが急速に普及し始めた年であった。その年に開設し、以来、HTML言語を使って、エディターだけで、Webサイトの記事を書いてきた。考えてみれば、HTMLの歴史はWebの歴史でもある。これまであまり関心はなかったが、Web記事のスタイルを決めるにあたり、これらを調べてみると、当時の状況が思い出されて、なかなか面白かった。
私が望む当サイトの記事のスタイルの要素を、優先順位の高いものから挙げていくと、1)読みやすい、2)分かりやすい、3)関連記事にすぐ移れる、4)記事を見つけやすい、5)少ない手順で求める情報にアクセスできる、6)情報の新鮮度が分かる、7)記事を作るのが容易、8)見た目がきれい、少なくとも不快ではない、ではないかと思う。
それをもう少し詳しく説明すると、
記事の文章そのものの読みやすさは、別の問題である。記事のレイアウトによって、読みやすさはずいぶん変わってくる。
まず、空白行が必要で、2〜3行、少なくとも数行以内に1つは欲しい。次は、ページの両端の余白で、これがないと圧迫感がある。それ以上に大事なのは、行間かもしれない。上下の行に隙間がない文章は読みづらい。そのほかにも、適当に設けられた余白は、読みやすくする効果がある。
ページの幅がブラウザの表示に依存しいていると、例えば、全画面表示を行った場合には、まともに読めたものではない。もちろん、ブラウザの幅を調節すれば良いのだが、その幅が一定でないと、常に同じレイアウトの文章を読むことができず、読みやすさに影響する。
年をとり、視力が衰えてきて、痛感することの一つが、文字が分かり難いことである。世の中には老齢以外にも、視力障害のある人はたくさんいる。そのような人のためにも、文字の鮮明度は重要である。
文字が背景色に埋没してしまうような配色は、記事の存在価値を否定するものと言えるだろう。白の背景に黒い文字、黒い背景に白い文字、青の背景に白い文字などは広く使われている配色だが、文字を鮮明に見せる。
記事の文章そのものの分かりやすさもまた、別の問題である。記事の中で、引き立たせることば、強調することば、内容のあらましを示す見出し、などの配慮は、記事の理解の助けになるだろう。
階層構造をもった長文を理解してもらうには、その階層構造を分かりやすくする工夫が必要になってくる。例えば、見出し文字の大きさ、色、レイアウト、記号や符号などに工夫の余地がある。
関連記事にすぐ移れるというのは、書物やほかのメディアでは難しいが、ハイパーテキストであるWebの記事では簡単至極で、これを活用しない手はない。できるだけ多くリンクを張るように努めれば、読者にとって嬉しい配慮となる。
ただし、リンクが正しく行われていなかったり、アクセスする対象記事が削除されていたりで、リンク切れを起こしていれば、記事そのものの信頼が失われるので、チェックは必要である。
長いページの記事の場合、文頭に目次を付け、ページ内へリンクできるようにしたり、ページの最下段に、ページのトップへのリンクを付ける配慮も必要であろう。
Webサイトの訪問者が最初に目にするのはトップページである場合が多い。だから、トップページの工夫が重要である。どのような記事が掲載されているのか、最新の記事は何かなどが、すぐに分かるように配慮するべきである。
最近は、検索の結果から、直接サイト内の記事にアクセスするケースも多い。常連を除けば、むしろこの訪問の方が多いと思われる。その場合、パンくずリストのような、現在アクセスしている記事と、ほかの記事との位置関係を知ることのできる表示が欲しい。これによって、無駄なクリックを少なくし、迷子となるのを防ぐ効果がある。
求める記事に到達するためのステップが少ない方が良いのは、当然の欲求であろう。できれば、ワンクリック、多くても3クリック程度で、求める記事にアクセスできれば、気持ちが良い。そのための工夫が必要である。
例えば、すべてのページの同じ場所に、パンくずリストを配置することも、その工夫の一つである。
制作年月日を記載していない記事からは、その記事が現在に通用するものかどうかが分からない。古い情報が今も通用することもあるが、日進月歩の分野の記事では、まったく当てはまらないことがありえる。だから、記事の制作年月日の記載は必須で、記事の中の同じ位置に、同じ形式で記しておくべきである。
私は掲載する記事を大切にするが、それをWeb記事にする工程は、簡単であればあるほど良いと思う人間である。少しくらいのデメリットなら、それを受け入れようとする。例えば、HTML言語の文法にはない使い方でも、望む結果が簡単に得られるなら、あえて使ってきた。
記事のスタイルを似たものにしてきたたことも、記事のスタイルを決めて、テンプレートとして使おうとするのも同じ発想で、なるだけ省力化(手抜き)を図りたいと思うからである。
私とて、見た目のカッコいいWebサイトを望ましく思う。しかし、一番最後にくる希望であり、少なくとも不快感を与えるサイトでなければ良いと思っている。
シンプル、バランスの良い配置、整然と並んだ文字列、好きなカラーなどが満たされていれば、それ以上はオマケ、無くてもかまわない。
サイトを開設して間もなくの頃から、トップページにBGMを流してきたが、今回から取りやめることにした。音楽は好みがあり、私の好みの曲を嫌う人もいるであろうし、BGM自体が嫌いな人もいるだろう。その上、読み上げブラウザで、BGMが邪魔をして、記事を聞く人の迷惑になることを知った。そこで、思い切って私の好きなドビュッシーの「月の光」を削除した。
これまでの対応とこれからの対応の、最も大きな違いは、Webサイトを作る言語がHTMLだけであったのが、HTMLとスタイルシート(CSS)の併用に変わったことである。HTMLも2.0系のものを中心に使ってきたが、4.01バージョンに変更した。
HTMLは、Webサイトの骨組み(構造)を作るもの、スタイルシート(CSS)は、Webサイトの見映え(装飾)に使う道具である。これまでは、骨組みを作る道具をいろいろ工夫して、装飾までしようとしてきたが、もう、HTMLを本来の骨組み作りに使い、装飾は、そのために作られた道具であるスタイルシートを使う時期だと考えた。
HTMLは大文字、小文字の区別をしないので、これまでタグは大文字、属性は小文字で書いてきた。HTMLから発展したXHTML(Extensible HyperText Markup Language)では、タグも属性も小文字を使うことに決められている。いずれは、このXHTMLが標準となると思われるので、この際、タグの大文字を小文字に変更することにした。
文章を読みやすくするため、段落を多くとるようにし、2〜3行で1回、少なくとも数行で1回段落をつけてきた。この段落には、意味段落と、読みやすくするために空白行を入れて作る形式段落がある。しかし、その区別はしなかった。また、通常、書物では段落の最初に1字下げ(インデント)を行うが、Webの記事の場合、感覚的に美しく思えないので、最初から1字下げはしなかった。
段落を区切るタグは<p>だが、ある時期から、改行タグの<br>を使って、空白行を入れることで代用してきた。これは、1回で改行、2回で1行空白、3回で2行空白を入れることができる。また、<p>タグと違って、終了タグ(</>)が要らないので便利である。
しかし、今回から本来の段落タグ<p>を使うことにした。その理由は、<br>を使った代用では、見た目は段落であるが、ブラウザは改行としかとらえず、そのため、視覚障害のある人に使われる読み上げソフトでも、段落とはとられない重大な欠点があること。もう一つは、スタイルシートと併用すれば、<p>タグ(要素)は、非常に多くの装飾をほどこすことが簡単に行えることを知ったからである。特に、後の方の理由が大きかった。
HTMLタグ(要素)だけを使ったWeb文書(記事)をブラウザで表示すると、ページの両端の余白がなく、読みにくい。これを解決するのに、引用タグ<blockquote>を使ってきた。これは要するに、全部を引用文にしてしまうという、いささか乱暴な方法である。しかし、これより方法がなく、ページの両端の余白のあるなしでは、読みやすさに雲泥の差があるので、不本意ながら長年使ってきた。
しかし、スタイルシートを使うと、簡単にページの両端の余白を付けることができる。<blockquote>では、余白のサイズは一定で、30px くらいしかとれないが、スタイルシートでは思うサイズに設定できる。そこで、これからは、違法行為はやめて、スタイルシートを使って、ページの両端の余白を、それぞれ 90px とることに変更した。
行間のない文章は読みにくい。通常の書物では、文字の行と行の間隔は、0.5文字から1文字分はある。これを行間1.5から2と表現する。HTMLタグ(要素)だけを使ったWeb文書(記事)をブラウザで表示すると、行間1、つまり文字の行と行の間に隙間がなく表示される。
これは、HTMLをどのように流用しても解決できないので、このためだけに、<span>タグの中にスタイルシートを<span style="line-height: 1.5">のように埋め込むことで解決してきた。これも、文書全体を<span>タグで囲む(マークアップする)という乱暴な方法で、<span>タグの本来の使い方から逸脱している。
今回からは、全面的にスタイルシートを使うことにしたので、このような変則的な方法を止め、正式な方法で行うことにした。
HTMLタグだけを使ったWeb文書(記事)をブラウザで表示すると、ページの幅はブラウザが表示する幅と同じで、例えば、全画面表示にすると、ページの幅もモニターの横幅と同じになる。ページの両端の余白の長さは変わらないので、画面いっぱい横1列に並んだ文字を読むことになる。これでは非常に読みにくい。
もちろん、ブラウザの表示の横幅を小さくすれば良いが、横幅のサイズを一定にするのは難しく、ブラウザの表示横幅を調節する度に、1行の文字数は変わってしまう。
これに対して、どうしてもページの幅を一定にしておきたい場合は、表タグ<table>を使うことで、応急的に対処してきた。つまり、表タグでは横幅のサイズを決めることができるので、文書全体を表の中に入れてしまう乱暴な方法である。
さすがに、文書全体を表の中に入れることは滅多にしないが、文書の一部分を表で囲み、その枠線の幅を 0 にすることで、表であることを分からせないようにして、文書を整形することはよく行われている。この方法は、簡単で効果があるので、これからも使っていこうと思っている。
しかし、ページの幅は、スタイルシートを使えば、簡単に設定できる。これからは、<div>要素にスタイルシートを使うことで、ページ幅を 940px 背景色をベージュと設定した。インターネットを始めたころは、ディスプレイの表示サイズは 640x480 であったが、現在は横幅1920pxのものも多数使われている。ASAHI-net のトップページが約 935px、@Nifty が 約 940px であることも参考にした。これで、 800x600px程度の画像が問題なく表示できる。
この値は、読み込むスタイルシートの値を変更することで、個々のHTMLファイルを変更することなく、1200px に変更することも、800px に変更することも可能である。
文字の鮮明度は文字と背景色の配色によって決定される。白地に黒文字を基本として、自分の好みで決めればよいが、私は長年、背景色:ベージュ、文字色:黒を基本としてきた。
引き立たせることばは、これまで「 」で括ってきたし、これからもそうしようと思う。
強調することばは、太字で表してきた。これまで、HTMLタグの、<b>を使ってきたが、これは形式的に太字にするだけで、強調の意味はない。そこで、これからは、強調の意味での太字は<strong>を、形式的太字には、これまで通り<b>を使うことにする。
これまでも、内容のあらましを示す見出しをつけることが多かったが、これからも続けたいと思っている。見出しのスタイルについては、次の「階層構造を分かりやすくする工夫」で述べる。
大分類、中分類、小分類の見出しの大きさ、色、配置の位置を変える
大分類(章)の見出しは<h2>、文字は黒色、開始位置はページ左端から 10px、前に栗色■をつける
中分類(節)の見出しは<h3>、文字は黒色、開始位置はページ左端から 40px
小分類(項)は、見出しの大きさは<h4>、文字は黒色、開始位置はページ左端から 70px
段落の始まる位置は、左端から 70pxに設定しているので、小分類の見出しは、段落と同じ位置から始まることになる。
見出しには、◆、●、○の符号を付けてもよい。数字をつける場合は1 、1 、1)、とする。
大分類(章)が始まる前には空白行を3〜2行入れる。これは<br>タグを2個挿入する。
中分類(節)が始まる前に空白行を2〜1行入れる。これは<br>タグを1個挿入する。
小分類(項)が始まる前に空白行を1行入れる。これは<br>タグを1個挿入する。
パラグラフ(段落)には空白行を入れる。1字分の字下げは行わない
注釈などの項目の開始位置は、ページの左端から 100px 、文字の大きさは標準の 90% とする。
リンクこそ、Webの最大のメリットであり、これまでも、できるだけリンクを張るようにしてきた。
リンクの色は標準の青とし、下線を付けない。訪問済みのリンクの色は、標準の紫にせず、これも青とした。訪問済みで色が変わると、まだらな色彩となる。それが嫌いで、あえて、訪問済みリンクの色を未訪問と同じにしてきた。下線は、リンクの上にマウスが乗った状態で表示するようにし、リンクが選択された状態では、赤色になるように設定してきた。
また、リンクが分かりやすいように、原則としてリンクは太字にしている。
リンクをまとめると、青い太字にして、マウスを近づけると手のマークと下線が現れ、そのリンクを選択すると、赤色になるように設定している。これは、これまで行ってきたことで、これからも続ける予定である。
リンクで問題になるのは、リンク切れで、これは記事の信頼性にも関わることで、注意している。
最初の訪問ページで、できるだけ記事を見つけやすいように、トップページを設定してきた。ここでは、最新の更新情報にワンクリックで到達できる。また、カテゴリー別に分けたサイトマップのサマリーをここに置いているので、2ステップ、多くても3ステップで求める記事に到達できる。また、最近更新した10件ほどの記事へは、2クリックで到達できる。
検索エンジンでページを探り当てた訪問者に、サイトの現在位置を示すものとして、パンくずリストを、すべてのページの最上段と最下段に設置している。
これは、検索エンジンによる訪問者だけでなく、リンクを次々追って、ページが変わった場合にも、現在地を知ることができて、便利だと思う。
「記事の探し方」という記事へのリンクを、トップページに置いているので、参考にしていただけることがあるかもしれない。
以上は、これまで行ってきたことで、これからも続ける予定である。
これまでにこのサイトに掲載した記事は約490件で、そのうち、現在も掲載中の記事は330件ほどある。トップページにあるサイトマップのサマリー、サイトマップ、更新暦、パンくずリストのどれかを使えば、多くとも3クリックで、目的とする記事に到達できるように設定してきた。
この設定は、これからも続ける予定である。
掲載日時のない記事の情報価値は少ない場合が多い。そこで、すべての記事の最下段左下に、制作年月日を記載してきた。また、サイトマップと更新暦にある記事にも、すべて掲載年月日を、定位置に記載してきた。これも続ける予定である。
掲載する記事を作るために時間を使うことは苦にならない、むしろ、したいこと、楽しいことだ。しかし、それをWeb記事にする過程は面白くなく、できるだけ簡単に済ませるのが望ましいと思う人間である。
だから、テンプレートを利用しようとしたり、文法を外れたHTMLの使い方でも、その方が簡単であれば、利用してきた。今回からHTMLにスタイルシートを併用することにしたが、標準的な使い方以外の省力的な便法も、致命的な欠点がなければ使うつもりでいる。
面白いことに、テンプレートを作ったり、省力的な便法を検討するために使う時間は、まったく苦にならず、楽しいが、これはホモ・ファーベル(工作人)の特徴かもしれない。
Webサイトのレイアウトが美しいに越したことはないが、シンプルで、明快、少なくとも不快でなければ良いと思ってきたし、これからも変わらないと思う。
配色に関しては、背景色はベージュをメインに、強調する場合には、マルーン、シルバーなどを使ってきた。文字については、ブラックをメインに、青はリンク、深紅はタイトルや、大分類の見出し(章)、強調する文字列、区別する文字列、ポイント中のリンク、などに使ってきた。これからは、大分類の見出し(章)にマルーン色の■を付け、文字を黒文字にする他は、これまで通りで行こうと考えている。
配置では、空白を多く取り、シンメトリカルなレイアウトを好んできたが、これもあまり変わらないのではないかと思う。スタイルシートでは簡単に思うようなレイアウトができるようなので、例えば、段組スタイルなどを試みることがあるかも知れないが、それをする前に、これまでの記事をスタイルシートで書き直す作業が待っている。
最後に、今から5年ばかり前の、旧野村医院のサイトのトップページを供覧する。開設して10年目に入ったところで、この日を以って息子に医院を引き継ぎ、サイトも閉鎖した。このトップページのスタイルは、開設以来ほとんど変わらず、現在のサイト「中之島のBOW」のトップページにも、引き継がれている。現在のトップページの方が、使いやすくなり、少しだけ洗練されたように思うが、主観的な感想であろうか?
今回作ったWeb文書スタイルのテンプレートを供覧する。当分は、このスタイルに統一しようと考えている。下記をクリックすると表示される。
大分類(章)を持つ長文は、目次を持つこのスタイルで、大分類がない比較的短い文章では、目次を設けず、中分類、あるいは、小分類を使う。分類なしもあり得る。
購入して10日目のWindows95機で、エディターを使ってHTML言語を書き、1996年8月15日に、野村医院のWebサイトを開設した。それ以来、今日までHTMLとエディターだけでWebサイトに記事を載せてきた。
HTML(HyperText Markup Language)は、Web作成の基本ツールとなる言語で、HTMLの歴史はWebの歴史でもある。 ハイパーテキスト(HyperText)とは、情報から情報へ、任意に渡り歩くことができるようにした電子上の文書である。この渡り歩ける状態・機能のことを、ハイパーリンク(Hyperlink)、略して、リンク(Link)という。
これまで、単にツールとしてHTMLタグに関心があり、その歴史には興味がなかった。今回、自分のWeb文書スタイルを決めるにあたり、HTMLの歴史を調べてみると、自分のサイトを開設したころからの、Webの状況の移り変わりが思い出され、面白かった。
表1に、その年表をまとめた。これに従って、説明を加えていくことにする。
表1.HTMLとWebの歴史
年 | HTML CSS | BROWSER | その他 |
---|---|---|---|
1991年 | HTML 0 | 世界最初のWebサイト | |
1992年 | 日本最初のWebサイト | ||
1993年 | HTML 1.0 | Mosaic | |
1994年 | Netscape Navigator 1.0 | Yahoo! | |
1995年 | HTML 2.0 | Internet Explorer 1.0 | 第1回ブラウザ戦争 11月 Windows 95発売 |
1996年 | Internet Explorer 2.0 Netscape Navigator 3.0 Internet Explorer 3.0 | 4月 Yahoo! JAPAN 8月 野村医院サイト |
|
1997年 | HTML 2.x HTML 3.2 | Internet Explorer 4.0 Netscape Navigator 4.0 | |
1998年 | Google Windows 98 | ||
1999年 | HTML4.01 CSS 1 | Internet Explorer 5.0 | Internet Explorer 5.0がHTML4.01とCSSに対応 |
2000年 | XHTML 1.0 | Internet Explorer 5.5 | |
2001年 | Internet Explorer 6.0 Opera 6.0 | 第2回ブラウザ戦争 Google日本法人 Windows XP |
1991年に、欧州原子力研究機関のTim Berners-Lee氏は、クライアントがサーバにアクセスする方法として、HTTP (Hypertext Transfer Protocol) を生み出し、そのプロトコルに適した Web上の汎用言語として、HTML を作成、それを使って、世界最初のWebサイトを作った。
日本最初のWebサイトは、1992年に、文部省高エネルギー加速器研究機構の森田洋平博士によって発信された。
1993年には、Mosaicというブラウザが作られ、、1994年には、その後継であるNetscape Navigator 1.0が発売され、検索サイトのYahoo!も登場し、Webが一般に広がり始めた。
1995年には、HTML 2.0が決められた。これは最初の標準化だった。ブラウザに、Internet Explorer 1.0 が登場し、Netscape Navigatorと間でブログ戦争が始まった。
1996年には、前年11月に発売された、Windows95搭載のPCが爆発的に売れ、4月にはYahoo! JAPANが生まれ、Webは急速に普及し始めた。そして、この年の8月、私もWebサイトを開設した。その当時のHTMLは2.0だったが、正式なリファレンスはなく、インターネット接続キットの解説書に書かれているものを使ったことを覚えている。
Internet ExplorerとNetscape Navigatorの熾烈な戦いの中で、HTML2.0にない独自のHTMLタグをそれぞれが作り、機能拡張競争を行った。その結果、ブラウザが違えば、Web表示が異なるとか表示されないという問題となって戻ってきた。そのブラウザ戦争も、1997年のInternet Explorer 4.0がリリースされた頃には、決着がつき、Internet Explorerの勝利に終わった。
1998年には、ダウンしやすいWindows95に代わって、Windows98が登場し、検索エンジンのGoogle が誕生した。
1999年には、HTML 4.01とCSS 1が作られ、Internet Explorer 5.0が登場した。それまで、独自のHTMLタグを作り、機能拡張をしてきたInternet Explorerだったが、この時からHTML4.01とCSSに対応するようになった。
2000年には、より厳格な文法を持つXHTML 1.0が定められた。
2001年には、Internet Explorer 6.0とOpera 6.0が登場し、第2回ブラウザ戦争が始まった。この年、検索エンジンGoogleの日本法人が誕生した。
今、振り返ると、Internet Explorer 1.0 が登場した1995年から、HTML4.01とCSSに対応のInternet Explorer 5.0が登場した1999年までの期間は、HTMLの規則(文法)が守られず、ブラウザが勝手に解釈し、独自のタグを作ってきた時代だった。私が文法にないHTMLの使い方をしているところがあるのも、その時代を生きてきたからとも言える。
これからは、最新バージョンであるHTML4.01の文法を守るが、致命的な悪影響がなければ、便利な使い方もするつもりだ。何しろ、Webの世界には、過去に作られた膨大な量のWeb文書が残されており、それらを表示できないブラウザはありえず、過去に表示できたものは、これからも表示できる可能性が高いからである。
思えば、世界最初のWebサイトが誕生し、その5年後には自前のサイトを持つことができた。人類史上かつてないスケールの情報交換の世界に参加できた幸運を、感謝するばかりである。
20年間のPCデータの整理保存を行った機会に、15年目に入ったWebサイトを振り返り、これからの掲載記事のスタイルを考えてみた。つまり、自分が望むWebサイトはどのようなものか、それに対してどのように対処してきたか、これからどう対処するつもりか、文書スタイルをどうするかであった。
そして選んだのは、これまでのスタイルの多くを引き継ぐが、修正したく思ってきた点は修正する。それを可能にしてくれたスタイルシートを、最新バージョンのHTMLと組み合わせて、使っていく。しかし、その規範・文法を固守することはしない。そして、Web文書のスタイルのテンプレートを作り、これからのWeb掲載文書の作成に利用する、ということだった。
過去に掲載した文書を、このテンプレートに沿って書き直すのは、かなり大変な作業である。そこで、最近掲載した記事や、私が大事に思っている記事から、順に修正していこうと考えている。その上で、いずれは、スタイルシートファイルを読み込む方式に全面的に変更し、掲載している記事のメンテナンスが簡単に行えるようにしようと思う。
これは、かなり大きな改革であるが、結果として表示されるスタイルは、これまでとほとんど変わりがなく、どこが大改革なのかと失望されるかもしれない(苦笑)。
ホーム > サイトマップ > PC > サイト構築 > Web記事の文書スタイル このページのトップへ |