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

この記事で分かること

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

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

作業前の状態

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

Codexに頼んだこと

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

確認したこと

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

失敗しやすい点

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

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

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

Codex指示テンプレート

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

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

次に読むページ

実践ログ一覧へ戻る