きっかけは、移動先と色が合わないこと
初期のヘッダーでは、Contactだけを濃い背景のボタンにしていました。問い合わせを目立たせるための強調でしたが、別のページへ移動してもContactに色が付くため、選択中のタブのように見える状態でした。
ページへ正しく移動できることと、どこにいるか分かることは別の問題でした。
リンクの見た目を揃え、現在地だけを示す
Projects・Blog・About・Contactを同じ形に揃え、現在の項目だけを淡い背景と下線で示す形へ変更しました。プロジェクトの詳細ではProjects、ブログの記事ではBlogを選択中にします。
ホームは複数のセクションを持つため、表示している場所に合わせて選択表示を切り替えます。メニューに対応しないヒーローや取り組み領域では、無理にどれかを選択状態にしません。
クリックだけでなく、戻る動きも確かめる
ページの直接表示、詳細からホームへの戻り、Blogから該当セクションへの移動を確認しました。スマホでは、メニューの開閉、リンクを押した後の閉じ方、Escapeキーで閉じる動きも確認対象にしています。
旧LabのURLからBlogへ戻れること、旧サービスページから取り組み領域へ移動することも残しました。名前の変更だけで以前の導線を切らないためです。
小さな違和感も、運用の一部にする
今回はページそのものの追加ではなく、既にある情報を迷わずたどるための修正でした。実際に移動しながら見ることで、静止画では気づきにくい違和感が見つかりました。
次の更新でも、リンクの行き先だけでなく、現在地、戻り方、狭い画面での読みやすさまで一緒に確認していきます。