Unityで開発していて、ScrollViewの中に表示されるUI要素が解像度によってずれるという問題に直面したことはないでしょうか？
この記事では、実際に個人開発中に遭遇したScrollView関連のUIズレとその修正までの試行錯誤を紹介します。
問題の概要
- ScrollViewの中に
NodeというUIオブジェクトを複数配置。 - それに連動する線（
ConnectionLine）を別のCanvas上に表示。 - 解像度や端末サイズによって、Nodeと線の位置がズレる。
特に、iPadや横長の端末で右側にスクロールしきれないといった現象も確認。
初期状態のUI構成
- ScrollView > Viewport > Content（= Nodeの親）
- Nodeは
middle leftにAnchor設定されていた - ConnectionLineの親Canvasは
stretch stretchで画面全体を覆っていた
これにより、Scroll量とUIの位置計算が一致しない状態が発生していました。
修正のアプローチ
NodeとConnectionLineの基準を揃える
NodeとConnectionLineの描画位置を合わせるために、Anchorを同一に揃える必要がありました。
// NodeとConnectionLineがそれぞれこのTransformを基準にしている
RectTransform nodeContent = ...; // middle left
RectTransform connectionParent = ...; // stretch stretch → middle left に修正これにより、線がNodeの中心と常に一致するようになりました。
Nodeの親コンテナの幅が足りない
一部の端末で右にスクロールしきれない原因は、Nodeを並べているContentの横幅不足でした。
// スクリプトでContentの幅を自動調整するように変更
float requiredWidth = nodeCount * (nodeSpacing + nodeWidth);
contentRectTransform.sizeDelta = new Vector2(requiredWidth, contentRectTransform.sizeDelta.y);さらに、解像度ごとの初期化タイミングの調整も重要でした。 Start()内でのサイズ指定が反映されないケースがあったため、Coroutineで1フレーム待ってから反映しています：
IEnumerator Start() {
yield return null; // レイアウト確定を待つ
AdjustContainerWidth();
}最終的な構成のポイントまとめ
- Nodeと線のAnchorをmiddle leftに揃える
- Node配置用Contentの横幅を動的に調整する
- 画面初期化完了後にサイズ調整を行う（Coroutine）
これにより、どの端末でもズレることなく表示できるようになりました。
公開中のアプリ一覧はこちら！
実際にUnityで開発してリリース済みのアプリ一覧をまとめています。
コメント