このワイヤーの特徴
どのページからでも、主要なページへ1回で移動できる
メニューを開かなくても主要なページがすべて見えているため、読み手は探す手間なく行き先を選べます。項目を横一列に並べ、どのページでも同じ位置に表示することで、どこからでも1回の操作で主要なページへ移動できるようにしています。
項目が見えていることで、サイトの全体像が伝わる
メニューの並びは、そのサイトに何が載っているかの目次の役割も持ちます。「サービス」「制作実績」「料金」のように項目がすべて見えていることで、初めて訪れた人にもサイトの全体像が伝わります。
今どのページにいるかが分かる
検索から途中のページに入った人は、自分がサイトのどこにいるかを把握しにくくなります。表示中のページのメニュー項目に下線と太字の印を付け、今いる位置が分かるようにしています。
マウスを重ねたときの見た目は薄い下線にとどめ、表示中の印と区別しています。
コード上は、表示中のページそのものへのリンクに aria-current=”page” を付けています。
相談の入口が、メニューと区別されて常に見える
相談ボタンがメニュー項目と同じ見た目だと、ほかの項目に埋もれてしまいます。右端に塗りつぶしのボタンとして置き、メニューとは役割が違うことが見た目で分かるようにしています。
SPでも、相談の入口を隠さない
SPではメニューをハンバーガーにまとめますが、相談の入口まで中に入れると、開かない限り見えなくなります。このワイヤーでは、相談がサイトの主な行動で、ボタンの文言も短くヘッダー内に収まるため、相談ボタンをメニューの外に残しています。
「無料相談を予約する」のように文言が長く、ロゴやメニューボタンと並べると窮屈になる場合は、文言を短くするか、画面下に固定する導線など別の入口も検討します。
制作時のよくある失敗
項目を増やしすぎて、横に収まらない
伝えたいページをすべてメニューに並べると、PCでも項目が詰まったり、画面の幅によって2行に折り返したりします。
主要な行き先は、横一列にしても読みやすい大きさで収まる数に絞ります。
何個まで収まるかは、項目名の長さやロゴ、相談ボタンの幅によって変わります。
このワイヤーでは5〜6項目程度を目安にしています。
収まらない場合は、階層を持たせる形（ドロップダウン型など）を検討します。
表示中のページに印がない
どの項目も同じ見た目だと、読み手は今どのページを見ているのかを確かめられません。
表示中の項目に下線や太字などの印を付けます。
コード上は、表示中のページそのものへのリンクに aria-current="page" を付けます。
子ページを見ているときに親の項目も強調する場合は、見た目の印としては付けてよいものの、その項目は表示中のページそのものではないため、aria-current="page" とは分けて扱います。
相談ボタンが、メニュー項目と同じ見た目になっている
「お問い合わせ」をほかのメニューと同じ文字リンクで並べると、相談の入口が目立たなくなります。
塗りつぶしのボタンにするなど、見た目で役割の違いが分かるようにします。
メニューの項目名が、社内の言葉や抽象的な英語になっている
「ソリューション」「プロダクト」のような言葉だけでは、その先に何があるのかが伝わりにくくなります。
読み手が中身を想像できる一般的な言葉を選びます。
ヘッダーやメニューを、見た目だけで組んでいる
div 要素だけで組むと、見た目は同じでも、読み上げソフトなどでは「ここがサイトのヘッダー」「ここが主要なメニュー」と伝わりません。
サイト共通の上部は header 要素でまとめ、主要なナビゲーションは nav 要素で示します。
ページ内に複数の nav がある場合（ヘッダーのメニューとフッターのメニューなど）は、それぞれの目的が分かる名前を付けます。
中間の画面幅で、メニューが崩れる
大きなPC画面では収まっていても、ノートPCやタブレットを横にした中間の幅で、項目が折り返したりロゴと重なったりすることがあります。
PC・中間の幅・SPのそれぞれで確かめ、どの幅でハンバーガーに切り替えるかを決めておきます。
よくある質問
メニューの項目は、いくつまで並べられますか?
横一列に並べても折り返さず、それぞれの項目が読みやすい大きさで収まる数が目安です。
何個まで収まるかは、項目名の長さやロゴ、相談ボタンの幅によって変わります。
このワイヤーでは5〜6項目程度を目安にしています。
収まらない場合は、項目の下に子ページを開く形など、階層を持たせる方法を検討します。
画面の幅によって収まり方が変わるため、中間の幅でも確かめます。
問い合わせは、メニューの項目にしますか、それともボタンにしますか?
相談や問い合わせをサイトの主な目的にしている場合は、メニューの項目とは見た目を分けたボタンにすると、どのページからも入口が見つけやすくなります。
メニューに文字リンクとして並べるだけだと、ほかの項目に埋もれやすくなります。
ロゴを押したら、トップページに戻るようにしたほうがよいですか?
ロゴを押すとトップページへ移動する作りは多くのサイトで使われており、読み手もそう動くと想定していることが多いです。
そのため、ロゴはトップページへのリンクにしておくのが扱いやすいです。
ヘッダーは、スクロールしても画面の上に残したほうがよいですか?
必ずしも残す必要はありません。
ページが長く、読み進めながらほかのページや相談へ移動してほしい場合は、画面の上に残す形も選べます。
その場合は、ヘッダーの高さが本文の表示領域を狭めすぎないかを、特にSPで確かめます。
