てんぽ : 1. タブであること

今回から数回にわたって[chameleon]の解説をしてみようかと思います。気に入ったら投票してくださいね。投票は終了しました。

さて、たいていの「ブログ」ではすべてのページにナビゲーションがついていて、どこからでもいろんなページ（特定のカテゴリ/月別のアーカイブ、最近のエントリーなど）に直接移動できるようになっています。 しかしすべてのページで同じレイアウトをとる（ことが多い）ために次のような問題が生じます。

• 今自分がどのページを見ているのかわからなくなる
• ページ内に不必要なナビゲーションが存在する

これらの（個人的な）不満を解消するべく[chameleon]は作られました。

デザイン面ではタブ風のメニューを採用しました。タブメニューは以前から憧れていたもののひとつでしたが、 わざわざメニューをタブにする意味が薄かったのと、単にCSSの知識不足のためになかなか実現できませんでした。 「どのページを表示しているか」を示すのにタブメニューは有効だと思うので今回ついに採用することにしました。

タブメニューは単なるリンクアンカーではなく、現在のページを示すナビゲーションのような役割も果たします。またグローバルなナビゲーションはサイトデザインに一貫性と個性を与えてくれます。 このようにいいことづくめのタブメニューですが、効果的に使うには注意が必要です。

タブメニューは当然「画面の切り替え」を期待させるものなので、タブをクリックすると別窓が開いたり、メーラが起動したり、JavaScriptが動作したり、ページ内の別の場所にジャンプしたり（ページ内リンク）するのは好ましくありません。 そういったものならタブの形を模す必要はないどころかタブにするべきでないと思います（通常のリンクで十分）。

また、タブのメニューは「同じ次元」のものに限ります（というようなことを『戦うWebデザイン』で読みました）。 たとえば「5月の過去ログ」と「カテゴリ『××』の記事」を同じタブにするのはよくありません。「5月の過去ログ」と同じタブにあるべきなのは「4月の過去ログ」であり、「カテゴリ『××』の記事」と同じタブにあるべきなのは「カテゴリ『△△』の記事」です。

『戦うWebデザイン』ではタブメニューの例としてAmazonを挙げ、タブは「何が買えるか」を示す良いデザインだ（った）と述べています（後にタブには「オークション」や「ようこそ」などが加わり、タブの意味が明確でなくなった。オークションタブをクリックしても「オークションが買える」わけではない）。

[chameleon]ではタブはFC2ブログの「各モード」を示します。そして現在どのモード（トップページ、個別記事、カテゴリ別/月別アーカイブ、検索結果、コメントの編集）なのかをわかりやすくするためにモード毎にタブの色を変えてみました。 色が変わることにちなんで名前はカメレオンに決まりました（[tab]という名前のテンプレはすでに登録されていたし）。

タブの色をモード毎に変えたためにタブを画像でかっこよく装飾できませんでしたが（モード毎に画像も変えれば可能だけど面倒だからやれない）、幅可変、文字サイズ可変（IEの文字のサイズ「最小」から「最大」まで問題なし）で、しかも（タブメニューに関しては）HTMLもシンプルになりました。