このワイヤーの特徴
ブランドの印象が、ヘッダーの中心に来る
ヘッダーはどのページでも最初に目に入る場所です。店名やブランド名のロゴを画面の中心に置くことで、どのページを開いても、最初にロゴの印象が伝わるようにしています。
左右がそろい、落ち着いた印象になる
ロゴを中心に左右へメニューを振り分けると、ヘッダー全体が左右対称に近い形になります。雰囲気や世界観を大切にしたいサイトで、ヘッダーが整って見えるようにしています。
左右の分け方で、探す場所が想像できる
項目を数で半分に割るだけだと、どちら側に何があるのかが分かりにくくなります。このワイヤーでは、左に「コンセプト」「メニュー」など知るためのページ、右に「お知らせ」「よくある質問」と予約ボタンを置き、左右で役割を分けています。
予約の入口が、メニューと区別されて見える
中央にロゴがあると、視線は中心に集まりやすくなります。予約ボタンは右端に塗りつぶしのボタンとして置き、メニューの項目とは役割が違うことが見た目で分かるようにしています。
SPでも、ロゴの位置と左右のバランスを保つ
SPでロゴだけを中央に残すと、片側だけが空いて見えることがあります。ロゴを挟んで左にメニューボタン、右に予約ボタンを置き、PCと同じくロゴが中心に見えるようにしています。
制作時のよくある失敗
ロゴが、画面の中心からずれている
左右のメニューの幅が違うまま並べると、ロゴが中央からずれて見えます。
左・ロゴ・右を 1fr auto 1fr のグリッドで組むなど、左右のメニューの幅に関係なく、ロゴが画面の中心に来るようにします。
左右の項目を、数だけで半分に分けている
5つの項目を3つと2つに機械的に分けると、どちら側に何があるのかを想像しにくくなります。
左右は意味のあるまとまりで分けます。
このワイヤーでは、左を「知る」、右を「行動する」ためのページにしています。
左右の量が偏り、片側だけが詰まって見える
片側に長い項目名が集まると、左右のバランスが崩れ、中央ロゴ型の落ち着いた印象が弱くなります。
項目名の長さも含めて左右の量をそろえ、そろわない場合は項目を絞るか、横並び型を検討します。
キーボードで移動したときの順番が、見た目と食い違う
ロゴを中央に見せるために、CSSで要素の並び順を大きく入れ替えると、キーボードで移動したときにフォーカスが左右に飛び、今どこにいるのかが分かりにくくなります。
HTMLは意味の分かる順序で組み、CSSによる並べ替えで、キーボード操作の順序と見た目が不自然に食い違わないようにします。
左右のメニューを、区別できないまま別々のナビゲーションにしている
左右に分かれて見えても、1つの主要なメニューとして機能している場合は、できるだけ1つの nav として扱います。
nav 要素を左右で2つに分け、どちらにも同じ名前を付けると、読み上げソフトなどでは違いの分からないナビゲーションが2つあるように伝わります。
役割の違いから複数に分ける場合は、それぞれの目的が区別できる名前を付けます。
中間の画面幅で、メニューとロゴがぶつかる
大きなPC画面では収まっていても、ノートPCやタブレットを横にした中間の幅で、メニューがロゴに近づきすぎたり重なったりすることがあります。
中間の幅でも確かめ、どの幅でSPの形に切り替えるかを決めておきます。
よくある質問
中央ロゴ型と横並び型は、どのように選べばよいですか?
ロゴの印象や世界観を大切にしたい場合は中央ロゴ型、行き先の選びやすさや相談の入口を優先したい場合は横並び型が向いています。
主要なページの数が多く、左右に分けると詰まる場合も、横並び型のほうが扱いやすいです。
左右の項目数がそろわないときは、どうすればよいですか?
項目の数ではなく、項目名の長さも含めた左右の量でバランスを見ます。
予約ボタンを項目の少ない側に置いて量を合わせる方法もあります。
どうしても偏る場合は、無理に左右へ分けず、横並び型を検討します。
ロゴが中央にあっても、ロゴを押すとトップページに戻るようにしますか?
ロゴを押すとトップページへ移動する作りは、ロゴの位置に関係なく多くのサイトで使われています。
中央に置く場合も、ロゴはトップページへのリンクにしておくのが扱いやすいです。
SPでも、ロゴは中央に置いたほうがよいですか?
必ずしも中央に置く必要はありません。
PCと印象をそろえたい場合は中央に置き、左右にメニューボタンと予約ボタンを置いてバランスを取ります。
ロゴが横に長く、左右のボタンと並べると窮屈になる場合は、SPだけロゴを左に寄せる形も選べます。
