2010年11月29日月曜日

タブ構造のWEBデザインとSEO

スポンサーリンク

一時雑誌等で良く見かけたタブを用いたデザイン。

デザイナーの視点で考えると有効に感じますが...。
しかしSEOの視点を盛り込むと問題もあります。


タブ構造デザイン


タブ構造デザインとは、複数の画面を同一のページ内で見せるデザインです。

ブラウザのタブを見るのが最も分かりやすいかもしれません。
タブをクリックするだけで、複数のWEBページを同じウィンドウ内に表示できる構造です。

なおこの記事では、1ページのソース内に全タブの内容が書かれている場合です。
実際の動作では、CSSやjavascriptなどを用いて表示させる情報の表示/非表示を操作します。

タブ構造のメリット

画面の推移が無く、全てのタブの内容が最初に読み込まれる場合には切り替えも早くなります。
ユーザーへのストレスが減らせますので、ユーザビリティに効果があります。

スペースの問題ではさらに有効です。
画面をスクロールさせる事無く、多くの情報を提示できるからです。
全情報の一覧性には欠けますが、タブ部分に適切な語句を使う事で、ある程度対応出来ます。

SEOの視点から見るタブ構造


一見便利なタブ構造。
しかし、SEOの視点で見れば問題が浮き彫りになります。

結論から言えば、1ページに1テーマという原則に反している点が大きな問題です。

見た目はタブで明確に分かれていますが、ソースとしては1ページに全てのタブの内容が記載されていうrからです。
複数種類の情報が1ページに凝縮されている状況は、そのページのテーマを薄れさせてしまいます。

タブに分けられた情報

あるページのタブは、そのページに関する内容のはずです。
その意味ではテーマが同じであると言えます。

しかしタブに分ける事が出来る時点で、内容に明確な区切りがあるはずです。
区切りがあるのであれば、詰め込む事でテーマが散漫になってしまいます。

SEOは1ページ1テーマ

SEOの基本としてよく言われているのは、1ページのテーマを統一する事です。

理想はサイト全体のテーマを保持しつつ、個別のページが詳細なテーマ(キーワード)に特化してる状態です。
特化させたテーマが排他的であればある程思い通りの施策ができるでしょう。

タブ構造にしてしまったら、SEO的なメリットが失われてしまいます。

結び


タブにも有効な点はありますが、SEOの視点に立つととたんに邪魔な点が目につきます。

デザイナーやプログラマー等がIA(情報設計)を考える場合には、SEOとの関連も充分に理解しておく必要があります。
SEOにかぎりませんが、複数の視点を持たずに作り上げたしまったら打たれ弱い(柔軟性が無い)成果物が出来上がるでしょう。

今回の場合は、極端な話、タブ風のデザインで対応して構造上はタブごとに別ページ分ける方が良いかもしれません。
もっとも、タブ構造などはあまり見ないのでこの様な心配も不要かもしれませんが。

スポンサーリンク

0 件のコメント :

コメントを投稿