.png)
Wix Studioで文字が画面外に突き抜けるのはなぜ？「ハグ」の正体と、突き抜けを止める比例スケーリング設定をご紹介
- 7月1日
- 読了時間: 9分
Wix Studioでサイトを公開したあと、お知らせや見出しの文言を少し長くしただけで、文字がボックスからはみ出し、画面の外まで突き抜けてしまった。
そんな経験はありませんか。
「これはバグなのでは」と不安になる方が多いのですが、実はこれはWix Studioの仕様で、原因さえ分かれば数クリックで直せます。
この記事では、突き抜けの正体である「ハグ」というレスポンシブ動作の仕組みと、最も確実な「比例してスケーリング」への変更手順、横幅の数値指定までを、お客様自身が操作できるように順を追って解説します。
Wix Studioで文字が突き抜けるのはバグではなく「ハグ」が原因
結論：Wix Studioで文字が画面外に突き抜けるのはバグではなく、「ハグ」というレスポンシブ動作の仕様が原因です。
直し方は、テキストを囲むボックスの動作を「ハグ」から「比例してスケーリング」へ変えることが基本になります。
突き抜けが起きやすいのは、サイト公開後、運用の中で文言を変更したときです。
制作時はちょうどよく収まっていた見出しやキャッチコピーを、運用の中で長い文章に差し替えると、文字を囲む青いボックスがその文字量に合わせて横に伸び続け、最終的に画面の外までボックスごと飛び出してしまいます。
ここで覚えておきたいのは、これはWixのエラーでも表示崩れでもなく、設定された通りに動いているだけ、ということです。
ボックスが「中の文字の長さに合わせて自分の幅を変える」という設定（ハグ）になっているために、文字が長くなるほどボックスも広がります。
原因がはっきりしているので、設定を1つ変えれば確実に止められます。
そもそもWix Studioのレスポンシブ動作「ハグ」とは何か
「ハグ（hug）」は英語で「抱きしめる」という意味です。
その名のとおり、ボックスが中身を抱きしめるように、コンテンツのサイズにぴったり寄り添って自分の幅や高さを変えます。
たとえばボタンの中の文字が「送信」なら小さく、「お問い合わせはこちら」なら横に広く、というように中身に応じて枠が自動でフィットします。
これ自体はとても使い勝手のよい機能で、要素の周りに余計な余白ができにくく、デザインがすっきりまとまります。
問題になるのは、ハグの「中身に合わせて無制限に広がる」という性質です。
横幅に上限が決まっていないため、文字が長くなればボックスは画面幅を超えてどこまでも伸びていきます。
これが「突き抜け」の正体です。
設定を変えるには、2つの編集モードの違いを知っておくと安心です。
編集モード | 役割 | レスポンシブ動作の変更 |
コンテンツ編集モード | お客様が文言や画像を入れ替える基本のモード | できない |
カスタム編集モード | レスポンシブ動作などを細かく設定するモード | できる |
普段の運用で文言を直すのはコンテンツ編集モードですが、「ハグ」を別の動作に切り替えるには、次の手順で説明するカスタム編集モードに入る必要があります。
Wix Studioの設定は奥が深く、「自分のサイトのこの部分はどう直すべきか分からない」というときは、お気軽にご相談ください。
突き抜けを直す手順：カスタム編集モードで「比例してスケーリング」に変える
Wix Studioのテキスト突き抜けは、突き抜けている要素を選んでカスタム編集モードに入り、レスポンシブ動作を「ハグ」から「比例してスケーリング」へ変更すれば直せます。
これでボックスが無制限に広がるのを止められます。
手順は次のとおりです。
突き抜けている要素（文字を囲んでいるボックス）を選択し、カスタム編集モードに入る
その要素のレスポンシブ動作が「ハグ」になっていることを確認する
レスポンシブ動作を「比例してスケーリング」など、ハグ以外の設定に変更する
ボックスが中身に合わせて無制限に伸びることがなくなり、文字が長くなっても画面外への突き抜けが起きにくくなる
ここで起きやすいつまずきが、「コンテンツ編集モードのままレスポンシブ動作を探してしまう」というケースです。
先ほどの表のとおり、レスポンシブ動作の変更はカスタム編集モードでしか行えません。
設定パネルに「ハグ」「比例してスケーリング」といった項目が見当たらないときは、まずカスタム編集モードに入れているかを確認してください。
「比例してスケーリング」に変えると、ボックスは画面幅の変化に対して比率を保ちながら大きさを変えるようになります。
中身が長くなったら無制限に伸びるのではなく、決められた範囲の中でレイアウトを保つ動きに切り替わります。
【番外編】プロが使うハグの応用テクニック：横幅を数値で固定する
ここまでで突き抜けは止められますが、現場のプロはもう一手間かけて、ボックスの横幅を数値で指定します。
たとえば青枠を500pxに設定すれば、その幅の中で文字が折り返され、長い文言でも枠内に収まって突き抜けません。
手順は次のとおりです。
カスタム編集モードで、対象のボックス（青枠）を選択する
レスポンシブ動作を「ハグ」から変更したうえで、横幅（W）の数値を入力する
たとえば「500px」と指定する
文字が長くなっても、500pxの幅の中で自動的に折り返されるため、画面外へ突き抜けなくなる
「500px」はあくまで一例です。
デザインや配置場所に合わせて、見出しなら広め、補足テキストなら狭めといったように、収めたい幅を数値で決めてください。
ポイントは、「中身に合わせてボックスが伸びる（ハグ）」状態から、「ボックスの幅を先に決めて、その中に中身を収める」状態へ発想を切り替えることです。
このひと手間を入れておくと、サイト公開後に運用の中で文言を差し替えても、文字は指定した幅の中で折り返されるだけで、レイアウトが崩れません。
運用フェーズでの問い合わせやトラブルを未然に防げる、地味ですが効果の大きい設定です。
「公開後に文言を変えても崩れないサイトにしておきたい」「自社サイトの突き抜けをまとめて直してほしい」といったご要望は、Wix Studio専門のチームにお任せください。
「ハグ」のまま使うとき・避けるときの使い分け
「ハグ」は悪者ではなく、使いどころを選べば便利な機能です。
中身に合わせて枠を自動調節したい部分は「ハグ」のまま、文言が変わりやすく突き抜けを避けたい部分は「比例してスケーリング」と横幅指定、という使い分けがWix Studioのコツです。
「ハグ」が向いているのは、中のコンテンツに合わせて青枠を自動でフィットさせたい場面です。
たとえば、文言がほぼ固定で短いボタンや、要素の周りに余白を作りたくないパーツなどでは、ハグにしておくと中身にぴったり寄り添って見た目がきれいにまとまります。
一方で、「ハグ」を避けたほうがよいのは、公開後に文言が長く差し替えられる可能性がある場所です。
見出し・キャッチコピー・お知らせ枠など、運用の中で文字数が変わりやすい部分は、ハグのままにしておくと突き抜けのリスクが残ります。
こうした箇所は「比例してスケーリング」に変え、横幅を数値で指定しておくのが安心です。
使い分け | おすすめのレスポンシブ動作 | 向いている場所の例 |
中身に合わせて枠を自動調節したい | ハグ | 文言が短く固定のボタン、余白を作りたくないパーツ |
文言が変わりやすく突き抜けを防ぎたい | 比例してスケーリングと横幅指定 | 見出し、キャッチコピー、お知らせ枠 |
判断に迷ったら、「この部分のテキストは将来変わるか？」を基準にしてください。
変わる可能性があるならハグを避ける。
これだけで、突き抜けトラブルの大半は防げます。
よくある質問（FAQ）
Q1. Wix Studioで文字が画面外に突き抜けるのはバグですか？
A. バグではありません。
テキストを囲むボックスのレスポンシブ動作が「ハグ」になっているために、文字の長さに合わせてボックスが無制限に広がる、という仕様どおりの動きです。
設定を変えれば直せます。
Q2. 突き抜けの直し方を一番シンプルに言うと？
A. 突き抜けている要素を選んでカスタム編集モードに入り、レスポンシブ動作を「ハグ」から「比例してスケーリング」に変えます。
さらに横幅を数値（例：500px）で指定すると、より確実に枠内へ収まります。
Q3. レスポンシブ動作の「ハグ」「比例してスケーリング」の項目が見つかりません。
A. これらの設定はカスタム編集モードでしか変更できません。
コンテンツ編集モードのままだと項目が出てこないため、まずカスタム編集モードに入っているかを確認してください。
Q4. 横幅は必ず500pxにしないといけませんか？
A. いいえ。
500pxはあくまで一例です。
デザインや配置に合わせて、収めたい幅を自由に数値で指定してください。
大切なのは「中身に合わせてボックスが伸びる」状態から「ボックスの幅を先に決める」状態へ切り替えることです。
Q5. 「ハグ」はもう使わないほうがいいのですか？
A. そんなことはありません。
文言が短く固定のボタンや、余白を作りたくないパーツでは、ハグのほうが見た目がきれいにまとまります。
文言が変わりやすい見出しやお知らせ枠など、突き抜けを避けたい場所だけ「比例してスケーリング」に切り替えるのがおすすめです。
Q6. なぜ公開後に文言を変えると突き抜けが起きやすいのですか？
A. 制作時にちょうど収まっていた文言を、運用の中でより長い文章へ差し替えると、ハグ設定のボックスがその長さに合わせて広がるためです。
あらかじめ文言が変わりやすい箇所のハグを外しておくと、運用後のトラブルを防げます。
Q7. Wix Editor（旧エディタ）の感覚で操作すると突き抜けが直りません。
なぜですか？
A. Wix StudioはWix Editorと挙動が異なります。
レスポンシブ動作の考え方も違うため、Editor経験者の方でもWix Studioの「ハグ／比例してスケーリング」は改めて押さえておくと、突き抜けの直し方が分かりやすくなります。
Q8. 突き抜けている箇所が複数あります。
まとめて直せますか？
A. それぞれの要素で同じ手順（カスタム編集モードでレスポンシブ動作を変更し、必要に応じて横幅を指定）を行えば直せます。
数が多く対応が大変な場合や、運用後も崩れにくい設計にしたい場合は、Wix Studio専門のチームへご相談ください。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
