複数サイトのヘッダーロゴ導線を整理した実践ログ

この記事で分かること

関連サイトが増えると、ヘッダーにロゴを置くだけで中央メニューが狭くなります。このログでは、自サイトロゴ、他サイトロゴ、中央メニューを分けて、PCとスマホの両方で見やすくする考え方を整理します。

• 作業前に確認すること
• Codexへ頼む時の分け方
• 失敗しやすい点
• 次回使えるチェックリスト

作業前の状態

• 自サイトロゴと他サイトロゴが同じ行に増え、中央メニューが圧迫されていた
• PC幅でも横スクロールが出る可能性があった
• スマホではロゴとメニューの折り返し方を決める必要があった

Codexに頼んだこと

• 左に自サイトロゴ、中央に主要メニュー、右に他サイトロゴを置く
• 右側ロゴは補助導線として小さくする
• 中央メニューの横スクロールを消す
• スマホでは2列または縦積みにする
• ロゴリンク先を維持する

確認したこと

• PCでメニューが見切れていない
• スマホ390pxで横はみ出しがない
• ロゴリンク先が正しい
• CSSが200 OK
• SEOタグを変更していない

共通パーツを変更する時の注意

ヘッダーやナビゲーションは全ページに出るため、変更の影響が一箇所では済みません。個別ページの修正とは扱いを変える必要があります。

確認する時は、1ページだけ見て終わらせないことが重要です。トップページ、通常の記事ページ、レイアウトが違うページを最低3種類は開いてください。ページの種類によってヘッダーの表示が変わる場合、1種類だけの確認では崩れを見逃します。

ロゴとナビゲーションの役割

見た目の調整として扱われがちですが、この2つには実用的な役割があります。

• ロゴはトップページへの入口：多くの訪問者は、ロゴを押せばトップに戻れると期待しています。リンクが設定されていないと、戻る手段を探すことになります。
• ロゴのalt属性：画像が表示されない環境や読み上げでは、altの文字が代わりに使われます。サイト名を入れておきます。
• ナビゲーションは全体像を示す：どんな内容があるサイトかを、検索から来た人に一目で伝える役割があります。
• 項目数は絞る：多すぎると選べません。主要なものだけに絞る方が、実際には押されます。

特に1番目は、検索から個別ページに来た人にとって重要です。トップページを経由していない訪問者にとって、ロゴは「このサイトの全体を見る」ための唯一の入口になります。

失敗しやすい点

• ロゴを大きくしすぎる
• navにoverflow-x:autoを残したままにする
• スマホだけ見てPCの横幅を見ない
• リンク先を取り違える

実際に使えるチェックリスト

• 自サイトロゴは左
• 他サイトロゴは右
• 中央メニューが読める
• PCで横スクロールなし
• スマホ390pxで横はみ出しなし
• ロゴリンク先を確認した

Codex指示テンプレート

ヘッダーの3サイトロゴ導線を整理してください。

配置：左 自サイトロゴ / 中央メニュー / 右 他サイトロゴ
確認する幅：PC / スマホ390px
変更してよいもの：ヘッダーHTML、ヘッダーCSS
変更してはいけないもの：SEOタグ、広告コード、sitemap、robots、ads.txt
報告書形式：

次に読むページ

実践ログ一覧へ戻る