このワイヤーの特徴
行き先が多くても、ヘッダーをすっきり保てる
子ページまですべてヘッダーに並べると、項目が多すぎて探しにくくなります。ヘッダーには「サービス」「会社案内」などの大きな分類だけを並べ、子ページはその下の一覧にまとめています。
子ページへ、途中のページを経由せずに移動できる
分類のトップページを経由しないと子ページへ進めない作りだと、目的のページまでの手数が増えます。一覧から子ページを直接選べるようにし、どのページからでも1〜2回の操作で目的のページへ移動できるようにしています。
今どの分類の、どのページにいるかが分かる
子ページを見ているときに親の項目に印がないと、サイトのどのあたりにいるのかが分かりにくくなります。このワイヤーでは、表示中の子ページに印を付け、親の「サービス」にも下線と太字で現在の分類を示しています。
コード上の aria-current=”page” は、表示中のページそのもの（子ページ）へのリンクにだけ付けています。
マウスでも、タッチやキーボードでも開閉できる
マウスを重ねたときにしか開かない作りだと、タッチ操作やキーボードでは子ページを選べません。重ねたときだけでなく、押したときやキーボードでも開閉でき、Escキーで閉じると親の項目にフォーカスが戻るようにしています。
分類全体のページへの入口も残している
親の項目を開閉専用のボタンにすると、そのままでは分類全体のページへ移動できなくなります。一覧の先頭に「サービス一覧」を置き、分類全体のページにも移動できるようにしています。
制作時のよくある失敗
マウスを重ねたときにしか開かない
重ねたときだけ開く作りだと、タッチ操作の画面やキーボードでは子ページの一覧を開けません。
開閉する要素をボタンとして組み、押したとき・キーボードでも開閉できるようにします。
親の項目を押したときの動きが、1つに決まっていない
親の項目がページへのリンクでありながら、押すと一覧も開く作りにすると、押した瞬間にページが移動して一覧を選べなかったり、逆に分類全体のページへ行けなかったりします。
親を開閉専用のボタンにして一覧の先頭に分類全体へのリンクを置くか、リンクと開閉ボタンを分けます。
一覧がすぐに閉じて、子ページを選べない
親の項目から一覧へマウスを動かす途中で一覧が閉じると、子ページを選ぶ前に消えてしまいます。
親の項目と一覧の間に隙間を作らず、離れてから閉じるまでに少し間を置きます。
開いた一覧が閉じられない、いくつも開いたままになる
一覧を閉じる方法が分からなかったり、別の分類を開いても前の一覧が残ったりすると、本文が隠れたままになります。
Escキーや一覧の外を押したときにも閉じられるようにし、同時に開く一覧は1つにします。
アプリの操作メニュー用の役割を付けている
ページへのリンクの一覧に role=”menu” や role=”menuitem” を付けると、読み上げソフトなどではアプリの操作メニューとして扱われ、矢印キーでの操作が前提になります。
ページへ移動するためのリンク集は、開閉するボタンとリンクの一覧として組むほうが扱いやすいです。
階層を何段も重ねて開く
子ページの一覧からさらに横へ孫ページの一覧を開く作りは、マウスの動かし方が難しく、SPでも階層が深くなります。
ドロップダウンで見せる階層は2段程度に抑え、それより多い場合は、大きく開く一覧で分類ごとに見せるメガメニュー型などを検討します。
よくある質問
ドロップダウンは、マウスを重ねたときと押したときのどちらで開けばよいですか?
どちらか一方に決める必要はなく、このワイヤーでは両方で開くようにしています。
重ねて開く場合も、タッチ操作の画面やキーボードで使えるように、押したときにも開閉できるようにしておきます。
親の項目は、リンクとボタンのどちらにしますか?
押したときの動きが分かりやすいのは、親の項目を開閉専用のボタンにして、一覧の先頭に分類全体のページへのリンクを置く形です。
親の項目をリンクのまま残したい場合は、その横に十分な押しやすさを持つ開閉ボタンを分けて置きます。
一覧には、子ページをいくつまで並べられますか?
1列の一覧で、ひと目で見渡せる数が目安です。
項目名の長さや画面の高さによって変わり、このワイヤーでは3〜4項目にしています。
子ページが多い場合や、説明や画像を添えて選ばせたい場合は、大きく開く一覧で分類ごとに見せるメガメニュー型を検討します。
ドロップダウン型と2段型は、どのように使い分けますか?
主要なページが多く、それらをすべてヘッダーに見せたい場合は2段型、大きな分類の下に子ページがある場合はドロップダウン型が向いています。
2段型の下段の項目から子ページの一覧を開くなど、組み合わせて使うこともあります。
