『jQueryでユーザビリティを考慮した２段階層式アコーディオン作ってやんよ!!!』

2重構造のアコーディオンの作成

以前、何回かjQueryでアコーディオンを作成しましたが、 『jQueryで簡単アコーディオン作ってやんよ!!』 『jQueryで簡単アコーディオンもっと作ってやんよ!!』 『jQueryでアコーディオン（改良版）作ってやんよ!!』 アコーディオンの中にさらにアコーディオンがある2段階式のアコーディオンって見かけないなと思い作成。 制作自体はそんなに難しくは思わなかったけれども、操作するにつれて色々ユーザビリティを考えると改善しなければならない点が多数ある事に気付いた。 今回はもはや使い古されたといってもイイであろうアコーディオンについて考える。

2段階アコーディオン（通常タイプ）

ただ中のコンテンツを出したり隠したりの記述は単純だけど、慣れないユーザーには中身が隠れてる事すら気づかれずに離脱される恐れが高いので、これではあまりに無骨すぎてユーザービリティの欠片もないので・・・

わかりやすいトリガーエフェクトを設置

これでアイコンなどを設置する事で視覚的に「この箇所に何かある？」と認識させられる。けどこの辺はテンプレ素材としてもよくあるアコーディオンだし別にCSSでもできる事なので特にUIを意識しているとは言えません。

ユーザビリティを考慮したアコーディオン

コンテンツの垂れ流しを防ぐ

今回の本題はここから！ 多数あるコンテンツを視覚的に省略・簡略化して認識させるのがアコーディオンの役目（…と管理人は認識しています。異論は認めます。） ですが見終わったコンテンツの次を開いてまた開いて・・・気付いたらページスクロールの長さがとんでもない事になってたり・・・ これも上の項目をもう一度見たかったり、ページトップに戻ろうとしたらすぐ戻れるiPhoneユーザーならまだしもAndoroidユーザーの事を考えたら改善の余地アリ！です これで今現在、ユーザーが見ている項目以外は自動で閉じる仕様になったので、開いたトリガーを閉じて他のトリガーを開いたらまた閉じて・・・という動作をユーザーに強要させることもなくなりました。 ここまでくると構造が複雑になりベタ書きだとかなりのボリュームになりJavaScriptの記述が複雑になってきたので メイン・サブトリガーをクリックしたイベントをユーザー定義関数のイベントとして定義し、配列毎の処理を割り振りました。 （※配列名はわかりやすくしましたが、タグと同名指定は基本的に推奨されませんのであしからず!!）

ページスクロールをユーザー目線にする

これが今回2段階アコーディオンを作成して初めて気付いたポイントですが、アコーディオンの仕様上、閉じたり開いたりでコンテンツの長さはユーザーの意思で操作できるものの、今現在ユーザーがページのどのポイントを見ているかはブラウザ自体にはシカトされまくってるのが現実。 仮にひとつのコンテンツが非常に多いモノの場合、他のトリガーを開いた時にコンテンツは一番上まで戻るものの、現在見ている画面はそれに準じて戻ってくれる訳ではない（下記デモ参照） 現在開いているコンテンツ以外トリガーをクリックするたびにスクロールをページトップに戻す記述を加える事で、ページ内でスクロールの暴走を防ぎ、ユーザーを迷わせる事もなくなった。