このワイヤーの特徴
主要なページが多くても、1列に並べられる
下段をヘッダーの横幅いっぱいに使えるため、ロゴと同じ段に並べるより多くの項目を、折り返さずに並べられます。このワイヤーでは、下段に7項目を均等に並べ、どの項目も同じ大きさで選べるようにしています。
項目名の長さに差が大きい場合は、無理に等幅にせず、十分な余白と押しやすさを保って配置します。
「連絡する」と「ページを探す」が、段で分かれる
連絡先とメニューが同じ並びにあると、読み手はどれがページへのリンクで、どれが連絡の入口なのかを見分けにくくなります。上段に電話番号と相談ボタン、下段に主要なページのメニューを置き、役割を段で分けています。
電話番号と受付時間が、どのページでも見える
電話で問い合わせたい人にとって、番号と受付時間を探す手間は小さくありません。上段の右側に電話番号と受付時間を並べ、どのページからでも確かめられるようにしています。
補助的なリンクが、主要なメニューの邪魔をしない
お知らせや採用情報など、一部の人が使うリンクを主要なメニューと同じ並びに入れると、項目が増えて探しにくくなります。補助的なリンクは上段に小さく置き、下段の主要なメニューとは分けています。
SPでは、よく使う入口だけをヘッダーに残す
SPで2段の内容をそのまま並べると、ヘッダーだけで画面の上部が埋まります。このワイヤーでは、ヘッダーにはロゴ・電話ボタン・メニューボタンだけを残し、それ以外はメニューの中にまとめています。
何を外に残すかは、サイトの主な行動に合わせて選びます。
制作時のよくある失敗
ヘッダー全体が高くなり、本文が押し下げられる
2段にすると高さが増え、最初の画面で本文やファーストビューが下に押し下げられます。
上段の文字や余白を必要以上に大きくせず、最初の画面でどこまで見えるかを確かめます。
スクロールしても画面の上に残す場合は、下段だけを残す、1段にまとめるなど、必要な要素だけに縮めます。
上段と下段の役割が混ざっている
主要なページの一部を上段に、補助的なリンクを下段に置くなど、段ごとの役割が混ざると、読み手はどちらを見ればよいか迷います。
上段と下段に何を置くかを先に決めてから、項目を振り分けます。
上段に情報を詰め込みすぎる
電話番号、受付時間、住所、SNS、言語切り替え、複数のボタンなどを上段にすべて並べると、ロゴや相談ボタンが目立たなくなります。
上段に置くものは、どのページでも必要なものに絞ります。
主要なメニューと補助的なリンクを、区別できない nav にしている
主要なメニューと補助的なリンクを別の nav 要素にしたとき、どちらにも名前がなかったり同じ名前だったりすると、読み上げソフトなどでは違いの分からないナビゲーションが2つあるように伝わります。
「メインメニュー」「サブメニュー」など、目的が区別できる名前を付けます。
電話番号が、SPで押しても発信できない
電話番号を画像やただの文字で表示すると、SPで押しても発信できず、番号を書き写す手間がかかります。
電話番号は文字として読める形で表示し、発信できる環境では利用できるよう tel: のリンクにします。
受付時間も近くに添えます。
中間の画面幅で、下段の項目が折り返す
大きなPC画面では収まっていても、ノートPCやタブレットを横にした中間の幅で、下段の項目が2行に折り返したり、上段の電話番号とロゴが重なったりすることがあります。
中間の幅でも確かめ、どの幅でSPの形に切り替えるかを決めておきます。
よくある質問
横並び型と2段型は、どのように選べばよいですか?
主要なページが少なく、ロゴと同じ段に無理なく収まる場合は横並び型が扱いやすいです。
主要なページが多い場合や、電話番号などの連絡先をどのページでも見せたい場合は、2段型が向いています。
上段と下段には、それぞれ何を置けばよいですか?
上段にロゴと連絡先・補助的なリンク、下段に主要なページのメニューを置く形がよく使われます。
ただし、サイトの主な行動によって上段に置くものは変わります。
このワイヤーでは、電話での問い合わせが多いサイトを想定し、上段に電話番号と受付時間、相談ボタンを置いています。
スクロールしたとき、2段とも画面の上に残したほうがよいですか?
必ずしも両方を残す必要はありません。
2段とも残すと、本文を表示できる範囲が狭くなります。
画面の上に残す場合は、下段だけを残す、1段にまとめて高さを抑えるなどの方法があります。
特にSPで、本文が読みにくくならないかを確かめます。
PCでも、電話番号を押すと発信できるようにしたほうがよいですか?
PCでも通話アプリから発信できる環境があるため、リンクにしておいても問題になりにくいです。
一方で、PCでは番号を見て別の電話からかける人も多いため、番号を大きく読みやすく表示することを優先します。
