.png)
Wix Studioの「ハグ」とは？枠が中身に合わせて伸縮する仕組みと、文字が突き抜けるときの直し方をやさしく解説
- 7月1日
- 読了時間: 9分
Wix Studioでサイトを編集していると、レスポンシブ動作の設定欄に出てくる「ハグ」という言葉。
なんとなく設定したまま放置している方も多いのではないでしょうか。
実はこの「ハグ」、使いどころを押さえると非常に便利な一方、知らずに使うと「文字が枠から突き抜ける」といったトラブルの原因にもなります。
この記事では、Wix Studioの「ハグ」とは何かをやさしく解説したうえで、便利に効くシーン、似た設定「比例してスケーリング」との違い、そして文字が突き抜けるときの直し方までを、操作手順ベースでまとめます。
Wix Studioに不慣れな方でも、読み終わるころには「ハグ」を自信を持って使い分けられるようになります。
結論：Wix Studioの「ハグ」とは、枠が中身に合わせて自動で伸縮するレスポンシブ動作のこと
Wix Studioの「ハグ」とは、要素の枠（ボックス）が中に入っているコンテンツのサイズに合わせて自動的に伸縮するレスポンシブ動作の設定です。
テキストや画像など中身の大きさが変わると、枠もそれに寄り添うように調節されます。
Wix Studioでは、ボタンやテキストを囲むボックスなどの要素に「レスポンシブ動作」という設定項目があります。
これは画面サイズや中身の変化に対して、その要素がどう振る舞うかを決めるものです。
「ハグ」はその選択肢のひとつで、英語の hug（抱きしめる）の通り、中身をぴったり包み込むように枠のサイズが決まります。
たとえばボタンの中の文言を「送信」から「お問い合わせはこちら」に変えた場合、ハグが設定されていれば、ボタンの幅が文言の長さに合わせて自動で広がります。
固定幅で作っていると文字が枠からはみ出したり窮屈になったりしますが、ハグなら中身に応じて枠が調節されるため、余計な余白や見切れが起きにくいのが特徴です。
ここで大切なのは、これはバグや不具合ではなく、Wix Studioの「仕様」だという点です。
ハグは便利な機能として用意されているものであり、正しく理解して使えば編集の手間を大きく減らせます。
ボタン・タグ・ラベルで光る、ハグが便利に効くシーン
Wix Studioの「ハグ」が便利に効くのは、中身の長さや大きさが変わっても、枠を中身にぴったり合わせ続けたいシーンです。
ボタン、タグ、ラベル、見出しまわりのボックスなどで特に活躍します。
具体的に役立つ代表的なケースを挙げます。
ボタンの文言が場面によって変わるとき。「詳しく見る」「資料ダウンロード」など長さの異なるラベルでも、枠が文字幅に自動でフィットするため、ひとつずつ手動で幅を調整する必要がありません。
カテゴリタグやバッジを並べるとき。「新着」「人気」など文字数がバラバラなタグでも、それぞれの枠が中身に合わせて伸縮し、見た目が自然に整います。
中身に応じて枠の余白を一定に保ちたいとき。枠が中身を包む形なので、コンテンツと枠の間の余白（パディング）を設定しておけば、文言が変わっても余白の見え方が安定します。
このように、「中身が主役で、枠は中身に従ってほしい」という箇所では、ハグはとても相性が良い設定です。
逆に「枠のサイズを基準に、中身をその中に収めたい」という箇所では、後述する別の設定のほうが向いています。
この使い分けが、Wix Studioを快適に扱うコツになります。
なお、過去に制作したサイトではハグで作られている箇所が多く、運用フェーズで「文言を変えたらレイアウトが崩れた」という相談につながることがあります。
便利だからこそ、効いている場所を把握しておくことが大切です。
Wix Studioの設定や運用でお困りの際は、お気軽にご相談ください。
「ハグ」と「比例してスケーリング」の違いと、迷わない選び分け
「ハグ」は中身に合わせて枠が伸縮する設定、「比例してスケーリング」は枠の幅を基準として中身を収める設定です。
突き抜けを防ぎたいときは、ハグ以外を選んで横幅を指定します。
「ハグ」と「比例してスケーリング」は、どちらもレスポンシブ動作の選択肢ですが、発想が逆です。
ハグが「中身に枠を合わせる」のに対し、比例してスケーリングは「枠（横幅）を決めて、その中で中身を扱う」考え方になります。
違いを表で整理します。
項目 | ハグ | 比例してスケーリング（ハグ以外） |
枠のサイズの決まり方 | 中身の大きさに合わせて自動で伸縮 | 設定した横幅を基準に振る舞う |
向いている箇所 | ボタン・タグ・ラベルなど中身が主役の要素 | 見出しや本文枠など、幅を一定に保ちたい要素 |
文言を長くしたとき | 枠が広がる（場所によっては画面外に突き抜ける） | 指定した横幅内に収まる |
主なメリット | 余白や見え方が中身に合って整いやすい | レイアウト幅が安定し、突き抜けを防げる |
選び分けの目安はシンプルです。
「文言の長さがそれほど変わらず、中身にぴったり合わせたい」ならハグ。
「文言が大きく変わる可能性があり、レイアウトの幅を崩したくない」なら比例してスケーリングなどハグ以外にして横幅を指定する、と覚えておくとよいでしょう。
特に見出しやファーストビューの大きな文字など、文言変更で崩れると目立つ箇所は、最初から横幅を指定しておくと安心です。
ハグのままだと文字が突き抜ける？4ステップで直す方法
Wix Studioでテキストが画面外に突き抜けるのは、その要素のレスポンシブ動作が「ハグ」のままになっているのが主な原因です。
バグではなく仕様なので、ハグ以外に変更して横幅を指定すれば解決します。
ハグは便利な反面、文言が想定より長くなると枠が際限なく広がり、テキストが画面の外へ突き抜けてしまうことがあります。
とくにクライアントがコンテンツ編集モードで文言を差し替えた後に、「文字がはみ出した」という問い合わせにつながりやすいポイントです。
対処の手順は次の通りです。
突き抜けている要素を選択し、カスタム編集モードに入る
その要素のレスポンシブ動作が「ハグ」になっていることを確認する
レスポンシブ動作を「比例してスケーリング」など、ハグ以外に変更する
横幅を設定する（例：青枠を500pxに指定する）。これで枠内に文字が収まり、長い文言でも突き抜けなくなる
この4ステップで、突き抜けの問題はほぼ解消できます。
なお、どうしてもハグの「中身に合わせて枠が自動調節される」挙動を活かしたい箇所では、ハグのまま使い続けても構いません。
ハグそのものが悪いのではなく、突き抜けると困る箇所でハグを使っているのが問題、という整理です。
ポイントは、文言が変わる可能性が高い箇所を制作段階で洗い出し、そこだけ横幅を指定しておくこと。
これだけで運用後のトラブル相談が大きく減ります。
突き抜けや崩れの修正、運用しやすい設計のご相談を承っています。
設定はどこ？コンテンツ編集モードとカスタム編集モードの役割分担
「ハグ」を含むレスポンシブ動作の設定は、カスタム編集モードで行います。
クライアントが文言や画像を差し替える日常の編集はコンテンツ編集モード、レイアウトの細かい挙動を整えるのがカスタム編集モードと役割が分かれています。
Wix Studioには大きく2つの編集モードがあり、できることが異なります。
コンテンツ編集モード：クライアント（サイトのオーナー）が文言や画像を変更するための基本のモードです。日々の更新はこちらで行います。レスポンシブ動作のような細かい設定は、基本的にここでは触りません。
カスタム編集モード：レスポンシブ動作（ハグ／比例してスケーリングなど）、横幅、余白といったレイアウトの挙動を細かく設定するモードです。「ハグ」を変更したり横幅を指定したりするのは、このモードで行います。
そのため、文字の突き抜けなどを直したいときの流れは次のようになります。
編集画面でカスタム編集モードに切り替える
調整したい要素を選択する
レスポンシブ動作の項目で「ハグ」かどうかを確認し、必要に応じて変更する
横幅を指定して、意図したレイアウトに整える
制作する側としては、レイアウトが崩れないようにカスタム編集モードで設計を固めておき、クライアントにはコンテンツ編集モードで安全に更新してもらう、という役割分担を意識すると、引き渡し後の運用がスムーズになります。
よくある質問（FAQ）
Q1. Wix Studioの「ハグ」とは結局どういう機能ですか？
A. 要素の枠が、中に入っているテキストや画像のサイズに合わせて自動的に伸縮するレスポンシブ動作の設定です。
中身を包み込むように枠が決まるため、ボタンやタグなど中身の長さが変わる要素で便利に使えます。
Q2. ハグにしているとなぜ文字が画面外に突き抜けるのですか？
A. ハグは中身に合わせて枠が広がる仕様のため、文言が長くなると枠もどんどん広がり、画面の外まではみ出すことがあります。
これはバグではなく仕様です。
突き抜けると困る箇所では、ハグ以外（比例してスケーリングなど）にして横幅を指定してください。
Q3. 突き抜けを直すとき、横幅は何pxにすればよいですか？
A. レイアウトに合わせて指定しますが、ひとつの例として青枠を500pxに設定すると枠内に収まり、長い文言でも突き抜けなくなります。
実際の数値はデザイン上の収めたい幅に合わせて調整してください。
Q4. 「ハグ」と「比例してスケーリング」はどう使い分けますか？
A. 中身に枠を合わせたい（ボタン・タグなど）ならハグ、枠の幅を基準にして中身を収めたい・幅を一定に保ちたい（見出しや本文枠など）なら比例してスケーリングなどハグ以外を選びます。
文言が大きく変わる可能性がある箇所は後者が安心です。
Q5. ハグの設定はどの編集モードで変更できますか？
A. カスタム編集モードで変更します。
クライアントが文言・画像を更新するコンテンツ編集モードでは、レスポンシブ動作は基本的に触りません。
ハグの変更や横幅指定はカスタム編集モードで行ってください。
Q6. ハグは使わないほうがよい機能なのですか？
A. いいえ。
ハグ自体は使い勝手の良い便利な機能です。
問題になるのは「突き抜けると困る箇所でハグを使っている」場合だけです。
中身に枠を合わせたい箇所では積極的に活用してよい設定です。
Q7. Wix Editorを使ったことがあれば、ハグもすぐ使いこなせますか？
A. Wix StudioはWix Editorと挙動が異なるため、Editor経験者でも改めて学習が必要です。
ハグやスタックなど、Studio特有のレスポンシブの考え方を押さえることをおすすめします。
Q8. クライアントに引き渡す前に、ハグまわりで気をつけることはありますか？
A. 文言が変わる可能性が高い箇所（ボタン、見出し、ファーストビューの大きな文字など）を洗い出し、突き抜けると困る箇所はあらかじめ横幅を指定しておくことです。
これだけで運用後の「文字がはみ出した」という相談を大きく減らせます。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
