文書構造とデザイン
最近ブログなどの文章を主としたサイトのデザインについて考えていて、文章構造が違うことできれいに見えるデザインも違うなと。
主に見出しのデザインだけど。
そして適当にやってる個人ブログだと記事ごとに文書構造が違うので、記事によってはデザインがマッチせずガタガタになっていかんなあと。
要するに異なる文書構造に同じスタイルを当てているのでしばしば見た目がおかしくなる。
で、見た目を揃えるために文書構造を崩してh3の下にh5を直接置いたりとかして収集がつかなくなっていく。
これを解決できるかは別として意識できただけでもなるほどなというかんじですね。
文書構造について
ここで想定するウェブの文章の文書構造とはだいたい次のものが基本となる。
- タイトルがただひとつの見出しとなる構造
- タイトルの下にいくつかの大見出しがある構造
- タイトルの下にいくつかの大見出し中見出しの構造
- タイトルの下にいくつかの大見出し中見出し小見出しの構造
例えばおいしいラーメン屋をいくつか紹介するコンテンツなら具体的に以下のようになる。
- タイトル以外に見出しはなく本文で複数のラーメン屋を紹介する。区切りは段落のみ
- それぞれのラーメン屋の名前を大見出しとして、それぞれの店ごとについて紹介する
- それぞれのラーメン屋の名前を大見出しとして、中見出しに特徴、メニュー、店舗情報、アクセスなどを加えつつ、中見出し配下の本文を書く
- それぞれのラーメン屋の名前を大見出しとして、中見出しに特徴、メニュー、店舗情報、アクセスなどを加え、小見出しでさらに内容を細分化し、小見出し配下の本文を書く
構造が複雑になるほど内容も詳細で長くなる傾向があると考えてよく、行ってみれば気合いの入ったコンテンツとなる。
文章構造と見出しのスタイル
タイトルがただひとつの見出しとなる構造ではタイトル以外全てがフラットになるので、それほどデザイン上の問題は無い。
素っ気なさ過ぎるとは感じられるかもしれないが、デザインの必要が小さい文章系のサイトであればOKだろう。
（ただデザインは簡単だが、メリハリをつける手段が文字の運び方しかないのでより高い文章力や構成力が必要とされるかもしれない）
大見出しの構造では見出しは本文よりもわずかでも目立てば良い。
具体的には太字にするだけでもいいし、少しだけフォントサイズを大きくしたり、色を変えたりするなど。
逆に強すぎるスタイルを大見出しに当てると本文の文章が短い場合にけっこううるさく見えるため、長い本文でも短い本文でも違和感なく見えるようにするにはあまりスタイルを強くしない方が都合がいい。必ず長いと言うなら強くしても問題はない。
大見出し中見出しの構造では大見出しは中見出しの上位にあることを示す必要がある。中見出しは本文よりもわずかでも目立てば良い。
三段階の強弱が必要となるため大見出しはそれなりに強いスタイルとなる。
大見出し中見出し小見出しの構造では見出しと本文を合わせた強弱が四段階となる。
大見出しには強いスタイルが必要で、中見出しもそれなりに強いスタイルとなる。
悩みのタネと解決案
コンテンツによって文書構造がまちまちなサイトでは大見出しがそんなに目立って欲しくない場合と目立って欲しい場合が混在するのでそこが悩みの種だ。
これを解決する方法として一番いいのはそもそもサイトのコンテンツが一貫した構造を持つようにすることだろう。
しかしこのサイトみたいに適当にやっているとそこが崩れるので困る。そんなこと最初にもっと考えればよかった。
次に考えられるものとして文書構造が違うものは明確にカテゴリーを分けてデザインも違ったものを適用する、というものがある。例えば記事とお知らせなど。
やりすぎるとサイトデザインの一貫性が損なわれる可能性はあるが割と無難な解決策に思える。
だがこのサイトみたいに適当にやっていると（以下略）
最終的にカオスなサイトを救う手段としては、どんな文書構造でもきれいに見えるデザインにするくらいしかない。デザインの難度が高くなるということを除けば完璧な答えだ。
救わないで雑多なままにしておくというのもまたひとつ。諦めの境地。
文書構造迷走の防止策
文書構造が違うコンテンツを作りそうになったときの対応として共通で考えられるのは以下のようなものだろうか。
- このサイトで扱うべきコンテンツなのか再考する
- カテゴリーを分けることを検討する
大見出しのみのコンテンツばかりところに中見出し小見出しのあるものを追加したくなった場合は
- テーブルやリスト、定義リスト、図表、枠で囲ったコラムなどでなんとかならないか考えてみる
すでに中見出し小見出しのあるところに大見出しのみのコンテンツを追加したくなった場合は
- 内容を掘り下げて中見出し小見出しのある文書構造への書き換えを試みる
といったところだろう。
こまけえこたあいいんだよ！と迷走するままにまかせるのもまたひとつ。このブログはこれからもそうなるかな〜。
