このワイヤーの特徴
子ページが多くても、分類ごとに見渡せる
子ページを1列に並べると、数が多いほど一覧が長くなり、目的のページを探しにくくなります。子ページを「つくる」「育てる」「見直す」のようなグループに分けて横に並べ、多くの子ページを一度に見渡せるようにしています。
説明を読んで、違いを比べながら選べる
名前だけでは違いが分かりにくい子ページは、どれを開けばよいか迷わせます。子ページの名前の下に1行の説明を添え、一覧の中で比べて選べるようにしています。
どこから見ればよいかの手がかりがある
子ページが多いと、まだ決めきれていない人はどれも選べずに止まってしまいます。一覧の左に分類の説明と「サービス一覧を見る」を置き、分類全体のページから見始められるようにしています。
開いている間は、本文と区別される
大きな一覧は本文の上に広く重なるため、どこまでが一覧なのかが分かりにくくなります。このワイヤーでは、一覧が開いている間は本文を薄く暗くし、その部分を押すと一覧が閉じるようにしています。
今どの分類の、どのページにいるかが分かる
子ページが多いほど、今いるページがどの分類に属するのかが分かりにくくなります。表示中の子ページに印を付け、親の「サービス」にも下線と太字で現在の分類を示しています。
コード上の aria-current=”page” は、表示中のページそのもの（子ページ）へのリンクにだけ付けています。
制作時のよくある失敗
子ページをすべて載せて、一覧が見渡せない
すべての子ページを一覧に並べると、項目が多すぎて目的のページを見つけにくくなります。
一覧にはひと目で見渡せる範囲の主要な子ページを載せ、それ以外は分類全体のページから探せるようにします。
グループの分け方が、読み手の探し方と合っていない
社内の部署や商品の管理番号の順などで分けると、読み手はどのグループを見ればよいか分かりません。
目的、業種、対象者など、読み手が選ぶときの切り口で分けます。
説明文が長く、一覧が文章だらけになる
子ページごとに何行もの説明を付けると、一覧が読み物のようになり、見渡しにくくなります。
説明は1行程度に抑え、詳しい内容は各ページで伝えます。
一覧がすぐに閉じる、操作中に消える
大きな一覧では、親の項目から離れた位置にも子ページがあります。
ポインターを移動している途中や、一覧の上にある間に閉じてしまうと、子ページを選べません。
移動中や操作中は閉じないようにし、意図せず開閉しにくいよう短い待ち時間を設けます。
画面の高さに収まらず、一覧の下が切れる
大きな画面では収まっていても、ノートPCなど高さの低い画面では、一覧の下の項目が画面の外にはみ出すことがあります。
高さの低い画面でも確かめ、収まらない場合は載せる数を減らすか、一覧の中をスクロールできるようにします。
グループ名と子ページが、読み上げでは結び付いていない
見た目ではグループ名の下に子ページが並んでいても、コード上で関連付いていないと、読み上げソフトなどではどのグループの項目なのかが伝わりません。
グループ名をリストのラベルとして関連付けるか、見出しとして組みます。
よくある質問
ドロップダウン型とメガメニュー型は、どのように使い分けますか?
子ページが少なく、1列の一覧で見渡せる場合はドロップダウン型が扱いやすいです。
子ページが多い場合や、グループに分けたり説明を添えたりして選ばせたい場合は、メガメニュー型が向いています。
子ページの多い分類だけをメガメニューにし、ほかはドロップダウンにするなど、同じサイトの中で使い分けることもあります。
一覧に画像を入れてもよいですか?
製品や事例のように、見た目で選ぶものであれば画像が役立つことがあります。
ただし、画像を増やすと一覧が重くなり、表示にも時間がかかりやすくなります。
文字だけで選べる場合は、名前と短い説明で足りることが多いです。
画像が、名前だけでは伝わらない製品や事例の特徴を伝える場合は、その情報が分かる代替テキストを付けます。
隣の文字と同じ情報を補うだけの画像であれば、空のalt属性にする方法もあります。
一覧には、子ページをいくつまで載せられますか?
ひと目で見渡せる数が目安です。
画面の幅と高さ、説明を添えるかどうかによって変わり、このワイヤーでは「サービス」の一覧に8項目を載せています。
載せきれない場合は主要なものに絞り、分類全体のページから探せるようにします。
SPでも、子ページの説明を表示したほうがよいですか?
必ずしも表示する必要はありません。
SPで説明まで並べると一覧が長くなりやすいため、このワイヤーでは説明を省き、グループ名と子ページの名前だけにしています。
説明が選ぶために欠かせない場合は、分類全体のページで読めるようにします。
