Studioでテンプレートを確認する際、タブレットやモバイルの表示に切り替えると特定の要素が表示されなくなる場合があります。
たとえば、ヘッダーメニューをタブレット画面でも表示したいのに非表示になってしまうケースです。
レスポンシブ切り替え時に非表示となった要素を再表示する手順を解説します。
表示・非表示は、画面幅（ブレイクポイント）ごとに個別に決められます。
現行の公式手順では、レイヤーパネルで対象のボックスにカーソルを合わせ、右側に現れる目のアイコンから表示設定を開きます。
つまずきやすいのは、直したい要素そのものに原因が無い場合です。
| 症状 | まず疑うところ |
|---|---|
| 特定の画面幅だけ消える | その要素の表示設定で、そのサイズのチェックが外れている |
| 中身がまとめて消える | 親のボックスが非表示になっている |
| チェックが入っていても見えない | 親の寸法・固定幅・出現時の条件付きスタイル |
| 文言や画像だけ変えたい | 同じボックスの内容は共通なので、別ボックスを出し分ける |
Studioの非表示の要素を表示する方法
操作手順は次のとおりです。
まずレイヤーパネルを開き、表示したいボックスのレイヤーを探します。
以下の旧掲載画像では、非表示のレイヤーが薄い色になり、閉じた目のアイコンで示されています。
現行の手順では、そのレイヤーにカーソルを合わせます。
レイヤーの右側に現れる目のアイコンをクリックします。
表示したいブレイクポイント（タブレットやモバイルなど）のチェックが外れていれば、チェックを入れます。
下の画像は旧画面の上部ツールバーから設定する例で、現在の操作位置を示したものではありません。
対象の画面幅へ切り替えて、ボックスが表示されるか確認します。
表示設定が有効でも見えない場合は、下の「チェックが入っていても表示されない場合」へ進みます。
操作位置の出典：Studio公式：ブレイクポイントごとのボックス表示/非表示設定。
テキストの背景色が変更できない場合の対処法は、以下の記事をご確認ください。
Figmaなどのデザインツールの関連記事は、まとめから確認できます。
中身がまとめて消えるとき
子の要素をいくら見ても直らない場合があります。
親のボックスを非表示にすると、その中に含まれるすべてのボックスも非表示になります。
これはStudio公式でも注意として案内されています。
レイヤーパネルで上の階層をたどり、親のほうの表示設定を確認してください。
親の表示設定を確認し、親と子それぞれを意図する画面幅で表示する設定にします。
チェックが入っていても表示されない場合
目のアイコンのチェックだけで、すべての表示不具合が直るとは限りません。
親ボックスの幅が0になっていないか、固定した幅が画面からはみ出していないかを確認します。
不要な親ボックスや、条件付きスタイル「出現時」の設定も確認対象です。
公式ヘルプ：PCでは表示されていた要素がモバイルでは表示されない。
エディタと実際の画面幅を比べる
エディタで選んだブレイクポイントの幅と、ライブプレビューを表示している画面の幅を区別して確認します。
公式の例では、モバイルを540px、ミニを320pxに設定したとき、390px幅にはモバイル540pxのデザインが縮小して適用されます。
幅や高さをpxで固定した要素は、縮小時にはみ出すことがあるため、サイズ指定と親ボックスの寸法を確認します。
変更後はエディタとライブプレビューの両方で、ブレイクポイントの境界付近も含めて表示を確かめます。
参考：Studio公式：スマホ表示の公開サイトやプレビューがデザインエディタと異なる場合。
ブレイクポイントごとに変えられるもの・変えられないもの
Studioは1つのページデザインを基準にして、画面幅ごとにスタイルだけを調整する作りです。
| 項目 | 画面幅ごとに変えられるか |
|---|---|
| レイアウト・外観・ポジション | 変えられる |
| 表示・非表示 | 変えられる |
| テキストの内容 | 共通。変えられない |
| 画像そのもの | 共通。変えられない |
| グルーピングの構造 | 共通。変えられない |
同じテキストボックスの文言を、ブレイクポイントの切り替えだけでスマホ用に短くすることはできません。
その場合は、PC用とモバイル用のボックスを両方作り、表示設定で出し分けます。
画像もそれぞれ別の画像ボックスを用意し、表示設定で出し分けます。
出典：Studio公式：PCとモバイルで表示する画像を変える方法。
出し分けの使いどころ
この仕組みは、デバイスごとにメニューを変えるときによく使います。
PCではナビゲーションメニューを表示し、モバイルではハンバーガーメニューを表示する、という形です。
どちらも作っておき、表示設定で切り替えます。
両方が同時に出てしまう場合は、それぞれの表示設定を見直してください。
公式資料の確認日は2026年10月8日です。
掲載している4枚は旧記事の画面を引き継いだもので、今回のStudio実機操作の記録ではありません。
今回の改稿では、Studioエディタでの設定変更や公開サイトへの反映は実機未検証です。
Studio・Figmaに関する記事は、ほかにもあります。
よくある質問：Studioのブレイクポイントごとの表示・非表示で迷ったときのチェックリスト
Studioで、タブレットやモバイルにすると要素が消えるのは、なぜですか？
表示・非表示は、画面幅（ブレイクポイント）ごとに個別に決められます。その要素の表示設定で、そのサイズのチェックが外れている場合があります。
現行の手順では、どこから表示設定を開きますか？
現行の公式手順として、レイヤーパネルで対象のボックスにカーソルを合わせ、右側に現れる目のアイコンから表示設定を開くと説明しています。記事内の旧画面の画像は、現在の操作位置を示したものではありません。
子の要素を見ても直らないときは？
親のボックスが非表示になっていないか確認します。親のボックスを非表示にすると、その中に含まれるすべてのボックスも非表示になります。親の表示設定を確認し、親と子それぞれを意図する画面幅で表示する設定にします。
チェックが入っているのに、表示されないときは？
目のアイコンのチェックだけで、すべての表示不具合が直るとは限りません。親ボックスの幅が0になっていないか、固定した幅が画面からはみ出していないか、不要な親ボックスや、条件付きスタイル「出現時」の設定も確認します。
スマホ用に、テキストの文言だけを短くできますか？
できません。テキストの内容は共通です。PC用とモバイル用のボックスを両方作り、表示設定で出し分けます。画像も同様に、それぞれ別の画像ボックスを用意して出し分けます。
ブレイクポイントごとに変えられるものは、何ですか？
記事の表では、レイアウト・外観・ポジションと、表示・非表示は変えられます。テキストの内容、画像そのもの、グルーピングの構造は共通で、変えられません。