PiloTubeの多言語字幕生成AIページを開くと、一瞬だけ空白が表示され、ログイン確認が終わった瞬間にフォームやクレジット表示がバッと現れる。ページ全体がガクッと下にずれる。いわゆる「レイアウトシフト」です。

開発チーム内では当初、大きな問題として認識されていませんでした。機能は正しく動いているし、表示も数秒で安定する。しかし代表が実際に触って一言。「これは気持ち悪い。読み込み後にブロックが現れてレイアウトが動くのは全部禁止で」。

この一言から、レイアウトシフト全面解消プロジェクトが始まりました。

最初に試した解決策——却下

最初に試したのは、認証確認中にフォーム全体をグレーアウトしてオーバーレイスピナーを載せる方法。技術的にはきれいな解決策でしたが、代表のフィードバックは「どこのことかわかりづらいし見にくい」。却下です。

「隠してから見せる」から「最初から見せておく」へ

次に試したのが、もっとシンプルなアプローチ。フォームは最初から表示しておく。認証が終わるまでは送信ボタンだけをdisabledにする。クレジット表示部分には同じ高さのスケルトン(灰色の枠)を置いて、読み込み後に数字に差し替える。

つまり「隠してから見せる」のではなく、「最初から見せておいて、使えるようにするだけ」という発想の転換です。

技術的な変更

技術的には、ページ全体をisPageLoadingというフラグで制御していた設計を全面廃止しました。このフラグが「認証確認中は何も表示しない」という動作を生んでいたからです。全セクションからこのガードを削除し、コンポーネントごとに個別のローディング状態を持たせる設計に変更しました。

結果、ページを開いた瞬間からフォームが見え、画面が一切動かなくなりました。

チームルールへの昇格

この経験から「レイアウトシフト禁止」がチーム全体の永続ルールになりました。デフォルト表示+位置固定。ローディングで要素を非表示にしない。シンプルですが、ユーザー体験への影響は大きい。

派手な解決策を試して失敗し、シンプルな解決策にたどり着く——このパターンは開発あるあるですが、毎回気づくのに少し時間がかかります。次は最初からシンプルな方向で考えようと思っています。