このワイヤーの特徴
全体像を見てから、詳細へ進める
まず大きな分類だけが並ぶので、何がそろっているかを一目で見渡せます。
気になる分類を開くと、その中の作業が並び、さらに開くと詳しい内容が読めます。
分類ごとの数を、閉じたまま伝える
大きな分類の見出しに「3つの作業」のように中の項目の数を添えています。
開く前に、どのくらいの量があるかの見当が付きます。
段の違いを、見た目でも分ける
2段目は左に線を引いて字下げし、文字と開閉の印を小さくしています。
今どの段を見ているかを、位置と大きさで見分けられます。
見出しの階層も、段に合わせる
1段目の見出しは h2、2段目は h3 のように、見出しの階層を段とそろえています。
読み上げや見出しでの移動でも、まとまりの関係が伝わります。
制作時のよくある失敗
3段以上に重ねている
段が深くなるほど、今どこを開いているのか分からなくなり、閉じるための操作も増えます。
開閉は2段までにし、それ以上はページを分けます。
2段目の見た目が、1段目と同じ
大きさや位置が同じだと、中の項目なのか次の分類なのかを取り違えます。
字下げや線、文字の大きさで、段の違いを示します。
1段目を閉じると、2段目の開閉が消える
分類を閉じて開き直すたびに、中の項目がすべて閉じた状態に戻ると、読みかけの場所を探し直すことになります。
開いていた状態を残すかどうかを決めておきます。
大切な情報を、2段目の奥に入れる
2回開かないと見えない場所にある情報は、読まれにくくなります。
料金や条件など判断に欠かせない情報は、1段目か、別のページに出します。
よくある質問
アコーディオンは何段まで重ねてよいですか?
2段までにすると、今どこを見ているかを見失いにくくなります。
3段目が必要な場合は、分類ごとにページを分け、一覧から詳細のページへ移る形にします。
入れ子の中の項目は、排他にしたほうがよいですか?
中の項目を見比べたい場合は、独立して開閉する形のほうが向いています。
1つだけ読めばよい項目が並ぶ場合は、排他にすると画面が縦に伸びすぎません。
入れ子型とタブは、どう使い分けますか?
分類の数が少なく、名前が短い場合は、分類をタブにして中の項目をアコーディオンにする方法もあります。
分類が多い場合や、SPで横に並べきれない場合は、入れ子型のほうが収まります。
