.png)
Wix studioでスマホサイトのレイアウトが崩れてしまう原因とは？Wix studio崩れにくいPC版の作成方法をご紹介！
- 3月4日
- 読了時間: 7分
更新日：3月12日
スマホでサイトを見たときに、
文字が重なっている
ボタンがはみ出している
画像と文章の間がバラバラ
こんな経験はありませんか？
まず前提として知っておきたいのは、
Wix自体の技術的な品質は非常に高いということです。
Web Almanac の分析によると、Wix は主要CMSの中で Google Lighthouse（SEO）スコアの中央値100点を達成しています。
このスコアは、ページの構造がSEOに非常に優れている品質を評価するもので、かつての「WixはSEOに弱い」という印象を過去にするものです。
ユーザーには届けられるのに、見栄えが悪くてユーザーが離れてしまう……。
こんな勿体無いことはありませんよね？
では、なぜ「wix studio モバイル版 崩れる」という現象が起きるのでしょうか？
この記事では、レイアウトが崩れる原因を、Wix studioのプロのクリエイターができるだけわかりやすく解説します。
Wix studioでモバイル版のレイアウトが崩れる原因
今回は特定の機能ではなく、 「なぜモバイル版でレイアウトが崩れるのか？」という原因そのものを解説します。
原因は、ほぼこの2つに集約されます。
パーツ同士の位置関係がバラバラ
パーツの大きくなり方がバラバラ
※パーツと表記しましたが、専門的な用語で言うところの要素と同義です。 この記事では誰にでも伝わることを意識し、なるべく専門的な用語は避けて表記いたします。
それでは、順番にわかりやすく説明いたします。
スマホサイトが崩れる2つの原因と解決方法
原因① パーツ同士の位置関係がバラバラ
たとえば、
見出し
画像
説明文
ボタン
これらの要素は、本来「1つのセット」ですよね。
ですが、見出しと画像はこの距離関係、説明文とボタンはこの距離関係というように、パーツ同士の位置関係を決めていないとどうなるでしょうか？
こうなります↓
文字数が増えたりして段落が1行から2行に変わったりすると、他の要素と重なるというレイアウトが崩れる現象が起きてしまいます。
この問題は制作の最終段階や制作後に起きることが多くみられます。
正式な文言を反映させたり、事例紹介やブログの一部を自動的に表示させる機能(CMS)を使用した際に増えたテキストが他の要素と重なってしまい、レイアウトが崩れるという現象に繋がります。
解決方法：パーツを「ひとかたまり」にする
Wix Studioでは、パーツをグループのようにまとめることができます。
ひとかたまりにする主な方法は3つあります。
スタックをする
セクショングリッドを使用する
高度なCSSグリッドを使用する
順に説明いたします。
スタック
一番シンプルな方法です。
複数のパーツを選んで「スタック」にすると、
自動で“ひとかたまり”になります。
イメージとしては、
長さを決めた棒で要素同士を繋ぐ感覚です。
メリット：
パーツの間隔を一定に保てる
縦並び・横並びを切り替えられるため、PCでは横、スマホでは縦、のような切り替えもできる
スタックした要素群＋スタックした要素群もできるため、スタックの順序を工夫すれば柔軟にレイアウトが変更できる
デメリット：
パーツを重ねるデザインには向かない ※要素の重なり順を任意に設定できないため意図しない重なり順になる。画像や装飾の上に文字を重ねるなどのデザインには向かない
基本的には、
「重ならない情報セット」をまとめるのに最適です。
セクショングリッド
これは、
1つの大きな箱を更に複数の箱に分けるイメージです。
ただし分けた箱のレイアウトの大枠は変えられません。
スタック使用時とセクショングリッド使用時共に同じ見た目を再現可能です。
メリット：
テンプレートから雛形を選べるので自分で設定する必要がない
セクションを選択してドラッグ&ドロップでセクション同士をスワップできる
標準装備のAI機能を使用してレスポンシブ対応させた時に綺麗に対応してくれるため、工数が劇的に減る
デメリット：
レイアウトの大枠は変えられない
セクションの縦横の大きさの設定が難しい
使い分けとしては、スタックした要素群のレイアウトを作成するときに使用します。
セクショングリッドという箱の中に、スタックという情報セットを入れるイメージです。
セクショングリッドを使用した際の最大のメリットとも言えるAIを使用した際のレスポンシブ対応の差をご覧ください。
矢印など装飾の大きさこそ違えど、コンテナのサイズや余白がスタックよりも整理されている場所があります。
ただ、AIを使うための余白の設定方法などにも工夫が必要、結局修正は必要になりますので、ここはどちらを使うのが好みかに分かれるかと思います。
高度なCSSグリッド
これは上級者向けです。
縦と横に細かく区切った“マス目”の中に、
自由に配置できる仕組みです。
イメージとしては大きさと配置を柔軟に設定できる箱の中に入れる感覚です。
コンテナという箱の中に、スタックという情報セットを入れる、という使い方が多いです。
メリット：
細かく位置を決められるのでレイアウトは自由自在
中の要素は重ねることもできる
デメリット：
レイアウトを自分で設定しなければならない
レスポンシブ対応も全て自分で設定する必要がある
「細かく調整したい人向け」の方法です。
ただし、操作に慣れた人であればAIを使うよりも速く柔軟にレイアウトを構成できます。
原因② パーツの大きくなり方がバラバラ
次の原因は、
大きさの変わり方の設定がバラバラなことです。
画面が広がったときに、
文字は大きくなる
ボタンは大きくならない
画像は縦だけ伸びる
こんな状態になると、間隔がそろっていても見た目が不格好になり、レイアウト崩れが起きているように見えます。
この原因には設定パターンがありますので、ご紹介いたします。
崩れやすいパターン
パターン①比例してスケーリング+固定幅
中身は伸びるのに、外側は固定の状態
よくあるのがヘッダーです。
ヘッダーは高さ固定なのに、中の文字/画像/ベクターなどの要素が比例してスケーリングに設定されているとはみ出してしまいます。
解決方法：
中身の比例してスケーリングを固定や相対幅にし、伸び方を揃える
解決後
パターン②比例してスケーリング+相対幅
横だけ伸びるものと、縦横伸びるものを混ぜる
こちらもパターン①と原理は同じです。
ですので、原因②パーツの大きくなり方がバラバラの対策方法は、 スケーリング設定を揃えることです。
レイアウトが崩れない制作フロー
では、せっかく作ったのに、レイアウト崩れが起きて作り直すという悲劇を回避するためのおすすめの制作フローをお伝えいたします。
ポイントはたったの3つ！
① まず要素をまとめる
まとめる方法
スタック
セックショングリッド
コンテナの高度なCSSグリッド
② 要素のスケーリング設定を揃える
比例してスケーリングとは比例してスケーリング
固定や相対幅の要素と比例してスケーリングは避ける
③ PC版でパーツをきちんとまとめる
大きな画面サイズからしっかりとレイアウトを決めましょう
※Wix studioでは大きな画面の設定が小さい画面へと設定が反映されます。
上記の順番と内容を意識するだけでグッとレイアウトが安定します！
これだけで、スマホでのレイアウト崩れはかなり減ります。
結果として、
修正が少なくなる
作業時間が短くなる
どの画面でも安定する
なんといっても、ユーザーに優しい情報を届けられるというメリットが生まれます。
まとめ
Wix Studioは、Lighthouseスコア100点を出せるほど、技術的には非常に優れたCMSです。
システム面で優れたアドバンテージを、デザインで更に優れたものにするためにレイアウトもしっかりと整えていくこともいいと思いませんか？
スマホでレイアウトが崩れる原因は、
パーツをまとめていない
大きさの設定がバラバラ
対策は、
スタックなどでまとめる
伸び方を揃える
このステップを意識してみてください。
ここを押さえれば、
Wix Studioのレイアウトは驚くほど安定します！
