STUDIOでサイトを制作しているとき、デザインエディタやライブプレビューでは完璧に見えているのに、いざ公開したサイトを見ると特定のパーツがごっそり消えて真っ白になっている…という経験はありませんか。
実はこれ、バグではなくSTUDIOの仕様によるものがほとんどです。今回は、技術的な視点からその原因と、初心者の方でもすぐに実践できるチェックポイントをやさしく解説します。
最大の原因はCMSの公開ステータス
今回のようなケースで最も多い原因は、CMS（コンテンツ管理システム）のデータが公開設定になっていないことです。
STUDIOには、表示環境によって見えるデータの範囲が異なるというルールがあります。
- デザインエディタとライブプレビュー 制作をスムーズに進めるため、下書き状態のデータもすべて表示されます。
- 公開サイト（本番環境） 最終的なユーザーが見る画面なので、公開ステータスが公開になっているデータしか表示されません。
つまり、プレビューで見えているのは下書きも含めたすべてのデータですが、本番サイトでは下書きデータが非表示になるため、結果として中身が空っぽになり真っ白に見えてしまうのです。
解決のためのチェックリスト
原因がわかれば、解決は簡単です。以下の手順を確認してみましょう。
手順1. CMSダッシュボードを確認する 画面左側のメニューからCMSを開き、該当するモデルのアイテム一覧を表示します。各アイテムの右側にあるステータスが下書きや公開予約になっていないか確認してください。
手順2. ステータスを公開に変更する 表示したいアイテムを選択し、ステータスを公開に切り替えます。このとき、公開日が未来の日付になっていないかもあわせて確認しましょう。
手順3. サイトを更新する CMS側で公開設定にしたら、最後に必ずデザインエディタ画面の右上にある更新ボタンを押してください。これで本番環境に最新のデータが反映されます。
それでも直らないときに確認すること
もしCMSの設定が正しいのに表示されない場合は、アニメーションの設定が影響している可能性があります。
出現時アニメーションの開始位置が画面の外側になっていたり、不透明度の設定が0のまま止まっていたりすると、ブラウザが読み込みに失敗した際に消えたままになることがあります。一度アニメーション設定を外して再公開し、表示されるかどうかを確認する切り分け作業が有効です。
まとめ
STUDIOは直感的に操作できる素晴らしいツールですが、プレビューと本番でデータの扱いが違うという点には注意が必要です。
もし画面が真っ白になったら、まずは落ち着いてCMSのステータスをチェックしてみてください。この記事が、皆さんのスムーズなサイト制作の助けになれば幸いです。
