このワイヤーの特徴
主要なページを、大きく押しやすく並べられる
ヘッダーの下に開く一覧では、画面の一部しか使えず、項目が詰まって見えることがあります。画面全体を使い、主要なページを大きな文字でゆったり並べて、SPでも押しやすくしています。
相談の入口と連絡先も、メニューの中で見せられる
メニューを開いた人の中には、そのまま相談したい人もいます。主要なページの横（SPでは下）に、相談ボタンと電話番号、補助的なリンクをまとめています。
開いている間は、メニューだけに集中できる
画面全体を覆っているのに背面のページを操作できると、誤って背面のリンクを押したり、読み上げソフトで背面の内容に移ったりします。開いている間は背面を操作と読み上げの対象から外し、Tabキーでの移動もメニューの中にとどめています。
閉じ方に迷わず、閉じたあとも元の位置に戻れる
閉じるボタンが見つけにくかったり、閉じたあとにフォーカスがページの先頭へ戻ったりすると、今どこにいたのかを見失います。閉じるボタンを開くボタンと同じ位置に置き、Escキーでも閉じられるようにして、閉じたらメニューボタンにフォーカスを戻しています。
今どのページを見ているかが、メニューの中でも分かる
画面全体を覆うと、背面のページの見出しが見えなくなります。メニューの中で、表示中のページに線と「表示中」のラベルを付けています。
制作時のよくある失敗
PCでも、主要なページをメニューボタンの中に隠す
見た目はすっきりしますが、どんなページがあるのかが最初の画面で分からず、移動の手数も増えます。
主要なページを常に見せたい場合は、PCではヘッダーに並べ、SPだけ全画面メニューにする形も検討します。
開いたあとも、背面のページを操作できてしまう
画面全体を覆っているのに、Tabキーで背面のリンクへ移れたり、読み上げソフトで背面の内容が読まれたりすると、今どこを操作しているのかが分からなくなります。
背面を操作と読み上げの対象から外し、フォーカスをメニューの中にとどめます。
dialog 要素を showModal() で開く場合はブラウザが背面を操作できない状態にし、独自に組む場合は inert 属性などで外します。
閉じるボタンが見つけにくい
開くボタンと違う位置にあったり、小さな「×」だけだったりすると、閉じ方を探すことになります。
開くボタンと同じ位置に「閉じる」の文字を添えて置き、Escキーでも閉じられるようにします。
閉じたあと、フォーカスがページの先頭に戻る
閉じたときにフォーカスの行き先を決めていないと、キーボードで操作している人はページの先頭から移動し直すことになります。
閉じたら、開いたときのメニューボタンにフォーカスを戻します。
メニューの上で、背面のページがスクロールしてしまう
メニューの上で指を動かしたときに背面のページがスクロールすると、閉じたときに読んでいた位置がずれます。
開いている間は背面のスクロールを止め、メニューが長い場合はメニューの中だけをスクロールできるようにします。
開閉の動きが大きく、時間がかかる
画面全体が大きくスライドしたり、ゆっくり表示されたりすると、開くたびに待たされ、動きが苦手な人には負担になります。
動きは短く控えめにし、動きを減らす設定の利用者には動きを省きます。
よくある質問
全画面メニュー型と、ヘッダーの下に一覧を開く形は、どのように使い分けますか?
項目を大きく見せたい場合や、相談の入口や連絡先もメニューの中にまとめたい場合は、全画面メニュー型が向いています。
開いたまま背面の内容も見ていたい場合や、少ない項目を手軽に開閉したい場合は、ヘッダーの下に一覧を開く形が扱いやすいです。
全画面メニュー型はモーダルとして扱う分、フォーカスや背面の扱いなど、実装で確かめる点が増えます。
全画面メニューを開いたとき、フォーカスはどこへ移せばよいですか?
メニューの中へ移します。
このワイヤーでは閉じるボタンへ移していますが、最初の項目へ移す方法もあります。
どちらの場合も、フォーカスが背面のページに残らないこと、閉じたらメニューボタンへ戻すことを確かめます。
PCでも、全画面メニューにしてよいですか?
使うことはできますが、主要なページがメニューボタンの中に隠れます。
見た目を優先するブランドサイトなどで使われることがある一方、主要なページへの移動を重視する場合は、PCではヘッダーにメニューを並べ、SPだけ全画面メニューにする形が扱いやすいです。
メニューの中に、画像や大きな背景を入れてもよいですか?
印象づけに使うことはできますが、項目の文字が背景に埋もれて読みにくくならないか、読み込みが重くならないかを確かめます。
このワイヤーでは、白い背景に文字だけで項目を並べています。
