香港の大手修理チェーンが、標準ヘッダーをまるごと Navi+ に置き換えた話 — 何百もある ブランド × model × 故障 × 店舗のページを、モバイルでもデスクトップでも一貫した一つのナビゲーションシステムに変えました。
Heater は大規模なサイトです：13 以上のメーカー、各メーカーに多数の model、各 model に さまざまな故障の種類（画面、バッテリー、充電ポート、カメラ、水没など）、さらに5つの店舗と、 予約・見積もりのフローがあります。構造は実質、非常に広く深いツリーです：ブランド × model × 故障 × 店舗。
テーマ標準のヘッダーでは、このツリーを捌けません。デスクトップではフラットなメニューバー、 モバイルでは別に組まれたハンバーガードロワー。体験が二つ、ロジックも二つ — デスクトップに慣れたお客様がモバイルに移ると、また一から覚え直しです。大規模なサイトでヘッダーが弱いと、 サイト全体が辿りにくくなり、機器の故障で急いでいるお客様ほど離脱しやすくなります。
ご提案した方向性は「メニューを一つ足す」ことではなく、メインヘッダーの役割を置き換えること — 統一された一つの Navi+ システムにする、つまりあらゆるデバイスで同じ構造ソースを使い、 モバイルとデスクトップが同じナビゲーションの言語で話すようにすることです。
Mega Menu がデスクトップの標準メニューバーを置き換えます：すべてのブランド × 故障の種類を、 列の分かれた、画像付きの一つの構造にまとめます。大規模なサイトが、マウスを一度乗せるだけでざっと見渡せるようになり — お客様は、どのブランドのどの故障を直せるのかをすぐに把握できます。ブランドページを一つずつ試し打ちする必要はありません。
モバイルでは、Slide Menu が標準のハンバーガーを置き換え、メガメニューとまったく同じ構造を使います： お客様はブランド → model → 故障の階層をスライドで辿ります。同じソースを使っているため、モバイルとデスクトップが一貫し — 二つのメニューを別々に作って保守する必要がなくなり、お客様もデバイスを変えるたびに覚え直す必要がありません。
Tab Bar はモバイル画面の下部に固定され、重要な操作を常に手元に保ちます：予約、店舗、電話、メニュー。 Slide Menu とあわせて、標準ヘッダーの残りの部分も置き換えます — お客様は、ページ上部まで戻る必要なく、 親指の届く範囲にぴったり収まった、すっきりとしたナビゲーションバーを手にします。
メインヘッダーを統一された一つの Navi+ システムに置き換えると、非常に大規模なサイトが辿りやすくなり、 さらに重要なことに — モバイルとデスクトップの体験が一つになります。お客様は一度覚えれば、どこでも使えます。
これらは Heater に限らず、多階層の大規模サイトのほとんどに応用できるポイントです。