javascript タブUI導入の参考になるサイトでも紹介したタブ機能・jQueryTab（タブ）プラグイン（jQuery UI Tabs / Tabs 3）をこのブログに実装しました。
iGooleやYahoo!ニュースなどユーザーがよく見るページで普通に使われるようになった便利なタブ機能。実装するにも意味を持って使わないとタダのタブになってしまいます。ブログの中で使える場所は？と考えた結果。エントリー文末に使うのがベストであるという結論になりました。
そんなタブ機能を実装した思惑と配置場所の理由なんかを書き出してみます。
jQuery UI Tabs
こちらのjQuery UI Tabs / Tabs 3から必要なデータがDLできます。
以前から改良された点は、表示タブの幅が限定されていましたが、今のバージョンからはテキスト内容に従って表示されるようになりました。
今回このブログでは、いくつもあるタブ機能のパターンの中でもnoscript時にもコンテンツが表示されるSimple Tab(以前までは”Custom HTML structure”）を使うことにしました。
設置方法-Simple Tab（”Custom HTML structure”）
Custom HTML structureタブでの実装方法の紹介です。
上記のようにhead部分に必要なファイルを読み込ませるように追加します。URLは、任意の保存先アドレスに変えてください。）
各スクリプトのpackはエンコードされて、圧縮されていますのでファイルが軽いです。読み込みも早くなるのでpackファイルを読み込むようにするほうがいいと思います。
タブとコンテンツは任意に増やしていけます（タグのパターンを把握すれば）。
タブの配置位置の考察
タブ機能をブログに配置するには、どこかいいかということを考えました。
アクセスのあるサイトのレイアウトから学び、ユーザーの行動を考え、Movabletypeの機能を活かせれるように、過去ログが埋もれてしまうという点などさまざまなことを考察してみたことを以下に書き出してみます。
人気サイトのコンテンツ配置から
はてなブックマーク - 人気・注目ニュースに表示されているサイトもブログスタイルと同じようなレイアウトや機能・配置をしているのもあって、よくはてブホットエントリーに出てくるサイト（CNET・ITmedia Biz.ID・WEB担当者Forum・gihyo.etc...）なんかを並べて調べてみると共通する点があります。エントリー（記事）文末に関連情報・新着記事といったコンテンツが用意されているということ。
コレは、今多くのサイトが採用している2コラムレイアウト（コンテンツを求めるユーザーに対してのベスト）でのユーザーのアイキャッチなどを見ると”F"の文字のようになる。また、コンテンツを流して読むという行動、そしてスクロールという動作が加わり、サイドコンテンツが表示・ユーザーの印象から消える。
必然的にエントリー文末にユーザーの探している情報に関連したエントリーを表示することや、新着記事などを見せることでサイトの主旨なんかも把握させたり、興味を抱かせたりするにはいいという結果につながる。
ユーザーの行動
ユーザーの行動を考えてみると、欲しい情報が見つからない場合、検索エンジンを使って他の情報を探しに行く。ページを離れるということです。
ユーザーはこちらが用意したテキストリンクをクリックするという行動（テキストリンクしか追わないユーザーの行動）
あまりスクロールしたくない。
コンテンツ以外は流して見る（読むのではなく）
ブログにも検索（サーチ）がありますが、検索エンジンから来訪し、さらに絞ってそのブログのサーチを使って情報を探すかということを考えるとわずかしかいないということが考えられます。
過去ログが埋もれてしまう
ブログは時系列で構築されてゆきます。新しいエントリーを生成して行くことで過去のログが埋もれてしまいます。正直過去のアーカイブのリンクを月毎に表示していようが、それをクリックしてすべての過去記事に目を通すユーザーはわずかであると考えた方がいいと思う。
過去ログのほとんどは、検索エンジンからの来訪として考えた方がいい。
コンテンツに関連した過去ログを配置できたら、ユーザーにもいいし、せっかく作ったこちらとしても甲斐がある。いい結果につながる
Movabletypeの機能
新着エントリーは普通に表示できる。
TagSupplementals_Plugin.ja_JP - Ogawa::Code - Tracを使えば、エントリーに関連した過去エントリーを表示できる。
MT Extensions: MTTagInvoke 1.0を使えば、同一カテゴリーでの過去エントリーを表示できる
あまりうまくまとめれていませんが、以上のような理由からエントリー文末にタブ機能を実装し、スクロールさせることなく、簡単にいくつかのコンテンツを閲覧することができるようにしてみました。
タブのコンテンツ
タブ機能を使って表示させるコンテンツは、以下のようにしました。
初期表示では、トラックバックURLやSMOを考えてのブックマークリンクやフィードバナーのRSSフィード表示。今回から情報アーキテクトの一部を機能させる前記事と過去記事のリンクなど。
エントリーに関連した過去ログを表示するようにする。
新着記事を表示し、サイトの主旨みたいなものを把握させる。
同一カテゴリーの記事リストを表示し、過去ログへのアクセスを促す。
ユーザーからの利点
- エントリー直下なのでページ内をスクロールして情報を探さなくていい。
- 関連した情報を簡単にみることができる。
- 過去ログにも簡単に目を通すことができる。
- スクロールしなくてクリックだけでいくつかのコンテンツを見る（探す）ことができる。
このことにより、ページ離脱率を下げることやサイト全体のPVの底上げも図ることができると思います。また、過去ログにも目を通してもらえる機会が増えるという点もあります。
ブログは、トップページよりも各エントリーが重要であると考えています。トップはあくまでも目次扱い。情報を探しているユーザーには、やはり個々のエントリーでテキストリンクを提案表示することを充実させた方が共にいい結果をもたらすと考えます。
タブ機能を実装する意図や理由などを考えてみるといいかと思います。もちろんいくつかのタブがありますが、やはりjQueryがオススメです。
エントリーページ以外での使える箇所
エントリーページ以外でタブ機能を実装するならどんな風に使うかを考えてみました（Movabletypeでのブログ構築で）。
- トップページに各カテゴリーの概要説明とエントリーリスト3件ほど（タブはカテゴリー数分）。
- ブログは、どちらかというとニュース系サイトの要素を多く持つものと思います。トップページにて、ユーザーに一目でそのサイトの主旨を把握させるためには、情報を探してきているという前提でいくつかのカテゴリーの概要を表示し、各エントリーの新着記事リストなどをタブ機能を使ってコンパクトに表示させるのがいいかと思います。
- また、個々のエントリーからトップへ移動するユーザーもいると考えた場合にもいい結果をもたらすと思います。
- カテゴリーページでは
- 今のところいろんなパターンを考えていますが、なかなかベストが導き出せていません。カテゴリー概要、過去ログ、新着エントリーといった感じになるかと思いますが、どうしてもスクロールをするという動作が考えられます。今のところはそんな感じで適しているかどうかは？？？？？？といった感じです。
- ただ、コンテンツ数が決まっている場合には使えると思います。注意点は、スクロールさせない程度のコンテンツを表示するという点です。（トピックなんかが作れるプラグインがあればいいのにと思います。）
参考にしたコンテンツ
今回の実装までに時間がかかったのは、自分の中でまとめることができていなかったのもあります。意味あるものをという点が引っかかり、その配置位置や表示する内容などを明確に決めるのに時間がかかりました。
今現在テンプレート構築のためにさまざまなことを調べています。見た目も大切ですが、結果の出せるコンテンツ配置という面でのデザインも取り入れようとしています。
ゆくゆくエントリーするつもりでいますが、CNETJAPANをメインにして、他のニュースサイト（日々アクセスがあり、ブログと同じ機能を持ち、記事更新が頻繁に行われている）などのレイアウト配置を調べています。
CNETJAPANは、かなり考えられてレイアウト配置されています。他サイトは、CNETを参考にしている感もあリます。（ITmedia Biz.ID・WEB担当者Forum・gihyo.etc...）
他サイトは、広告表示を考えていますが、CNETはサイト内での移動・PVを上げること（離脱率を下げる）をメインに考えてのレイアウト・コンテンツ配置をしているように思えます。
今回の考察に関して、なんか後押しできるものをと思って探していたらありました。ユーザー視点のウェブデザインガイド | Web担当者Forum
Yahoo! JAPANをはじめとする大手サイトを幅広く手がけており、ユーザビリティに関しては日本でトップクラスの評価を得ているビービット ユーザビリティに特化したウェブコンサルティングがいくつか興味深いエントリーをリリースしています。一気に読んで、気になる点をクリップしてつなげてみてください。ブログのユーザービリティ向上のポイントが一目でわかるようになります。
今、いろんなことをこのブログを使って試しています（正直きれいにレイアウトはしてないけど）。今月の初めからいくつかの変更や追加を行っています。過去のアクセスと比べ、改善できた点などもわかることができたらエントリーします。
コメントする