このワイヤーの特徴
関係のない項目が、開いたまま残らない
1つ開くとほかが閉じるため、画面に出ているのはいつも読み手が選んだ1項目だけです。
支払い方法のように、使うのが1つだけの項目では、ほかの説明が邪魔になりません。
開いた位置がずれにくい
前に開いた項目が閉じるので、ページが縦に伸び続けません。
SPで次の項目を開いたときに、見ていた場所から大きく流されることを防げます。
閉じた中身も、ページ内検索で見つかる
閉じた中身はページに含めたまま隠し、ブラウザのページ内検索で見つかったときは、その項目を開いてほかを閉じます。
開いていない項目の言葉も探せる状態を保ちます。
制作時のよくある失敗
見比べたい項目を排他にしている
料金や仕様のように見比べたい項目で、1つしか開けないと、行き来するたびに読んだ内容を覚えておく必要があります。
見比べる項目は、表やタブに分けるか、独立して開閉できる形にします。
開いたときに、画面が大きく動く
上の項目が閉じると、その分だけ下の項目が持ち上がり、押した項目が画面の外へ出ることがあります。
開いた項目の見出しが画面に残るように、位置を確かめます。
どれも開いていない状態に戻せない
開いている項目をもう一度押しても閉じないと、読み終えたあとに一覧を見渡せません。
開いている項目は、押せば閉じるようにします。
閉じた中身をページから消している
開くたびに中身を読み込む作りにすると、ページ内検索で見つからず、検索エンジンにも伝わりにくくなります。
中身はページに含めたまま隠します。
よくある質問
排他型と、独立して開閉する型はどちらがよいですか?
項目のうち1つだけを読めばよい場合は排他型、いくつか開いて見比べたい場合は独立して開閉する型が向いています。
迷う場合は、独立して開閉する型のほうが読み手の操作を制限しません。
最初から1つ開いておくべきですか?
もっとも多くの人が選ぶ項目がはっきりしている場合は、その項目を開いておくと、開閉できることも伝わります。
どれが選ばれるか分からない場合は、すべて閉じておきます。
排他型は、キーボードでも操作できますか?
見出しをボタンにしておけば、Tabキーで移動し、EnterキーやSpaceキーで開閉できます。
上下の矢印キーで見出しの間を移動できるようにすると、項目が多い場合に操作しやすくなります。
