Rapid Express

Rapid Express

中小企業を支援するLinuxベースのWebアプリケーション開発

Rapid Express RSS Feed
 
 
 
 

SEOを意識したケータイや障害者にも優しい段組サイト

ブログの普及もあって、2段組や3段組のページを作るのに、テーブルを使うサイトは(少なくともメジャーなところでは)減って来たように思います。

しかし、テーブルを使わずCSS(スタイルシート)さえ使えば、素晴らしいかというと、そうではありません。

私がメインのブラウザとしてFireFoxを好むのは、 スタイルシートを使用しない というオプションがあり、スタイルシートを使用している状態から、メニューですばやく切り替えられるからです。

この機能を利用して、いつも見ているサイトを裸にしてみると、普段気づかない部分が見えてきます。

デザインにダメ出しをしても(たぶん)文句を言ってこないであろう公共的なサイトを例にします。
次は、ちょくちょく拝見させてもらっている 産経新聞のイザ!の記者ブログ です。

070219_css_1.gif

スタイルシートを使用しない状態にすると次のようになります。

070219_css_2.gif

1280×1024の画面で、ページダウンを5回くり返してやっと本文が出てきました。画面を作る作業を途中で放棄しようかと思ったくらいです。

画面デザインで青帯のヘッダ部分に並ぶバナーやリンクが最初の1画面にあるのは仕方がないでしょう。しかし、その後に延々と続くのは左サイドバーのコンテンツで、本文を読む前に読まされなければならない 内容ではありません。

これの何が問題なのでしょうか。

段組という視覚的な配置は、画面全体を眺め重要項目を自分で探せる「人」にだけに出来ることです。

検索エンジンのロボットは、h1やstrongなどを評価するほか、文書先頭にある語彙をより重要なものと判定する……と言われています。産経新聞なら気にする必要はないのでしょうが、一般の企業や個人なら少しでも検索結果の上位になるよう、SEOの観点で不利です。

また、視覚障害者で画面を音声読み上げさせている人は、本文にたどり着くまで、延々とこの画面の通りに読まされ(聞かされ)ていると考えるべきです。重要な何かがあるのではと、常に神経を集中させ。

さらに、ケータイによるアクセスでも問題です。1ページの受信量制限があるようなら、本文にたどり着く前にページが切れることがあります。ケータイ専用に別ページを設けるくらいなら、最初から段組構成を配慮しておいたほうが簡単なはずです。

私は、W-ZERO3[es]にインストールした、WZモバイルのテキストブラウザ機能 を使ってニュースサイトを読むことがあります。イザは、テキストブラウザでは上記の通りのありさまなので、記事が読みたいのに辟易しています。ですので「出汁」に使わせてもらいました。

 

では、サイドバーを右に配置すればよいのでしょうか?

その解決法では3段組が存在できません。

次のサイトを見てください。立派な3段組です。

070219_css_3.gif

そして、このサイトをスタイルシートを使用しない表示がこれです。

070219_css_4.gif

いかがでしょうか。

スタイルシートを使ってサイドバーを非表示にしたのではありません(だって、スタイルシートを使ってないのですから)。

HTMLのソースとして、

1. ヘッダ
2. 中央の本文
3. 左サイドバー
4. 右サイドバー
5. フッタ

という構造にしてあり、スタイルシートによって、2?4の表示を整えているのです。
ヘッダの部分もできるだけ情報量を抑える配慮をしています。

このように、サイドバーの情報をHTMLソースで本文の後に配置することができると、 それを視覚的に段組表示することは、一段組ページよりも優れている 面があると言えます。
本文情報よりも優先度が低いとは言え、ナビゲーション情報がページ末尾にしかない状態よりも、2段組、3段組で最初に表示されたほうが、明らかにアクセシビリティが高いからです。





Leave a Reply



Tags

Links




Meta


TMAX.MYOPENSRC.COM