モバイルファーストで設計されたWebマニュアル。しかし「PCとモバイルでスクロール位置がずれる」──そんな見落としがちなUX問題に直面しました。今回は、実際に行った 統一的な位置管理システムの再設計について紹介します。
画面幅を変えると「位置がズレる」
モバイルで読んでいた途中の章を、PCに切り替えて読み直すと…
「さっき読んでいた場所がズレている…？」
このズレは、レイアウトの構造差（1カラム vs 2カラム）や、DOMツリーの違いによるものでした。
ES6でクラス構造に再設計しても、完全な位置同期はできませんでした。
解決策：「data-page-id」ベースの統一管理へ
そこで思い切って、スクロール位置の基準そのものを見直すことにしました。
新たに導入したのが UnifiedPositionManager.js という統一的な位置管理クラスです。
主な特徴：
- 章ごとに
<div data-page-id="3">のような識別子を付与 - モバイルもPCも同じ
data-page-idで章を判定 - 切り替え時に
getCurrentPageId()→scrollToPageId(id)で復元
統合対象のコード
script_scroll_mobile.js（モバイル側スクロール）script_scroll.js（PC側スマートスクロール）search.js（検索結果ジャンプ）
すべてが「ページIDベース」で制御されるようになり、デバイス間のズレをなくしました。
Before → After の設計比較
従来の複雑な構造
// 複雑なインデックス変換
calculateEntryIndexFromSubIndex(subItemIndex, category)
calculateSubIndexFromEntryIndex(entryIndex, category)
// デバイス別の異なるデータ構造
PC: subItemIndex (連続番号)
Mobile: entryIndex + subIndexInEntry (階層構造)新しい統一設計
// 統一されたページID
<div data-page-id="3">...</div>
// 単純な位置管理
UnifiedPositionManager.scrollToPageId(3)
getCurrentPageId() // → 3
IDだけで位置を扱えるようになったことで、保守性も大幅に向上しました。
まとめ
UIの見た目や演出に目がいきがちですが、こうした「位置の同期」こそが、実はUXの肝になります。
表面のデザインよりも、“読んでいた場所にちゃんと戻れる”ことの方が、ずっと重要だったりします。
次回は、この設計を進める中で直面した LCP（Largest Contentful Paint）の壁について紹介したいと思います。
この記事は、採用サイトのUI・UX設計に携わる制作チームによって書かれています。
実際に私たちが開発・運用している採用サイトでは、
細部にこだわった設計を数多く取り入れています。
もしご興味があれば、以下からデモサイトをご覧いただけます。