papativa.jp

SEOとCSSデザインと...

HTMLにおいて、文章の構造を決定するのが、ブロック要素だ。ブロック要素には、H1～H6、OL、UL、LI、P、HR、MENU、TABLE、CENTER、NOSCRIPT, NOFRAMESなどがある。

SEOにおいてブロック要素が重要視されるのはよく知られている。たとえば、Pは段落を表すブロック要素だが、このPタグの直後の文章を検索エンジンのクローラーは重要視する。なぜ重要視するか？　「文章」というのは、段落のあとに、その段落における重要なキーワードが含まれる確率が高いからだ。
また、H1～H6は「見出し」を意味するが、当然、「見出し」にはその文章の要約となるキーワードが含まれる確率が高いため、検索エンジンにおいても重要視される。

このあたりのことは、SEO本にもよく書かれている。「だから、H1タグやUL、OLみたいなタグを効果的に利用して、ページを作成しましょう」ってな感じだ。
しかしながら、実際はHxやOL、ULといったブロック要素を使ってWebページのデザインを行うのは難しい。ディフォルトの状態なら、H1なんて使ってしまうと、おそろしく大きな文章がキャンバスに踊ることになる。
そこで、CSSを利用する。CSSで、フォントやサイズ、マージンのとり方などを指定しておけば良いわけだ。H1なんかをCSSで制御することをスパムだと思っている人もいるようだが、それは違う。むしろ、構造とレイアウトを分離することは、HTMLの仕様上推奨されていることだ。ただ、必要以上に小さなフォントを指定したり、バックグラウンドカラーを合わせてしまうといったことが駄目だというだけだ。一般的には、H1～H6を利用する際でも、それぞれの見出しレベルの意味にあった大きさが指定されていれば問題はない（らいし）。つまり、H1よりH2の方が大きいサイズになってたりということがなければ良いということだ。（でも、これも実際、あまり問題ではなく、どちらかというと倫理観的問題みたいな感じもするけど）

さて、CSSで制御すればレイアウトができる....
と思ってると、これでも実は不十分だ。
本当の意味でのCSSデザインではなく、あくまでも今までのようにHTMLタグでレイアウトをつくり、そのなかで論理タグをレイアウトにあうように調整してくのは大変だ。

MacIE、MacNN、WinIE、WinNNなどにもレイアウト上の最適化をはかろうとするならば、最低でもCSSは6パターン必要と考えられる。MacIE、MacNN4.7用（以前）、MacNN4.7以降、WinIE、WinNN4.7用（以前）、WinNN4.7以降の6種類だ。まぁ、IEのシェアがここまで高くなっていることを考えると、そこまでやる必要はないだろうと思う人もいるだろう。それはそれで全然問題ない。6種類もCSSを分けて、得られるものが自己満足では意味がない。

たとえば、Win NN4.7以降として、

h1 {
font-family: "ＭＳ Ｐゴシック", "Osaka";
font-size: large;
color: #000000;
padding-left:10px;
padding-right:0px;
padding-top:2px;
padding-bottom:0px;
margin-top:0px;
margin-bottom:0px;
}

を指定するとする。
これをNN4.7で最適化するなら、こんな感じにしておく必要がある。

h1{
font-size:18px;
font-weight:normal;
color:#000000;
margin-left:10px;
margin-top:15px;
margin-bottom:-20px;
}

同じNNでもマージンの考え方が異なるため、同じ見た目をつくるには調整が必要になる。たとえば、NN4.7以降であれば、margin-bottomを0ピクセルとしているが、同じ設定だと、NN4.7なら随分と上に位置されてしまう。ということで、NN4.7では、-20pxというように、マイナス指定をしてやって、位置を調整してやるのだ。

これはOLやLIといったリスト系のブロック要素などでも同じ。その一つ一つで微妙な調整をしていくという作業が求められる。かなり面倒な作業だ。

CSSデザインでもっと割り切ってしまうという手もある。上記の例はあくまでも、HTMLタグでレイアウトまでやることを前提としているわけだけれども、CSSデザインで完全に構造とレイアウトを分離してしまうという方法もあるだろう。現状は過渡期に近いので、CSSデザインで対応ブラウザの範囲を拡大してしまうと、大変なことになってしまうかもしれないが、アクセシビリティなどを考える場合には、特定のブラウザ以外のブラウザで見た場合でも情報は把握できると割り切っちゃうことも重要だろう。

たとえば、JR東海2005年度採用ページ。CSSデザインがなされている。
Win IE6.0で見た場合と、WinNN4.7で見た場合ではまったく違うページに見える。

IE6.0で見た場合

NN4.7で見た場合

これも一つのアクセシビリティだ。
今後はこの手のサイト構築って増えていくんだろうなぁ。

CSSデザインのサイト構築って、今までのワークフローとか手順ではうまく行かなくなるケースも多々でてくるのではないかと思う。このあたりにもちゃんと対応できるようにしていかないとなぁと思う今日この頃。

ちなみに、クローラーは基本CSSは特に意識してないので（本当？）、CSSデザインでページを作成する場合には、SEO対策の基本、なるべくHTMLページの上部に重要な言葉が含まれるブロックを持って来ておけば良い。（レイアウトはCSSでどうにでもなるだろうし）

って、「CSSデザイン」って言葉を使ってたけど、これって一般的な言葉なのだろうか？