このワイヤーの特徴
一覧を見ながら、条件を選べる
PCでは右から、SPでは下から条件の画面を出し、後ろの一覧が少し見えたまま条件を選べるようにしています。
選んだ条件の結果の件数を、ボタンに出す
条件を選ぶたびに、下のボタンの名前を「6件を表示」のように結果の件数で書き換えています。
押す前に、結果が何件になるかが分かります。
SPでは、指の届く下側で操作する
SPでは画面の下からシートを出し、条件と決定のボタンを指の届きやすい位置に置いています。
上端のつまみの形で、下から出た画面であることを示しています。
条件のクリアと決定を、並べて置く
「条件をクリア」と「〇件を表示」を下に並べ、選び直しと決定をどちらも1回で行えるようにしています。
決定すると、一覧の上に選んだ結果の件数を表示します。
制作時のよくある失敗
つまみの形だけで、閉じる方法を示す
上端のつまみを下に引けば閉じられることは、気づかれないことがあります。
「閉じる」のボタンも置き、Escキーでも閉じられるようにします。
条件を選ぶたびに、一覧が切り替わって画面が動く
選ぶたびに後ろの一覧が読み込み直されると、画面が動いて落ち着いて選べません。
条件はまとめて選び、決定のボタンで反映します。
結果が0件になる条件を、選べてしまう
選んだ結果が0件だと、読み手は条件を選び直すことになります。
0件になる条件には件数の0を表示し、決定の前に分かるようにします。
SPで、シートが画面いっぱいまで伸びる
シートが画面の上端まで伸びると、後ろの一覧が見えず、普通のページと区別がつかなくなります。
内容の量と端末の高さに合わせ、画面いっぱいにしない高さ（目安として8割程度）にします。
よくある質問
ボトムシートと、画面の中央に出すモーダルは、どう使い分ければよいですか?
一覧を見ながら条件を選ぶなど、後ろの画面との関係を保ちたい場合はボトムシート、確認や入力など、その場の操作に集中してもらいたい場合は中央のモーダルが向くと考えられます。
チェックボックスを押したら、すぐに一覧に反映したほうがよいですか?
反映が速く、画面が大きく動かない場合は、すぐに反映する方法もあります。
反映に時間がかかる場合や、画面が動く場合は、決定のボタンでまとめて反映します。
モーダルは、dialog 要素で作ったほうがよいですか?
dialog 要素を showModal() で開くと、後ろのページを操作できない状態やEscキーで閉じる動きをブラウザが用意してくれます。
独自に作る場合は、role=dialog と aria-modal=true を付け、操作を閉じ込める処理と閉じたあとに元の場所へ戻す処理を自分で用意します。
