Wixのエディタは、想像以上にレイアウトが崩れます

崩れの正体は「自由配置」です

Wixの従来のエディタは、要素をドラッグして好きな場所に置けることが最大の売りです。見出しをここ、写真をここ、ボタンをここ。紙にレイアウトを組むのと同じ感覚で作れます。専門知識がなくても思った通りの見た目にできる。これは本当に大きな長所です。

ただ、この「好きな場所に置ける」が、そのまま弱点になります。

ホームページというのは本来、要素どうしが上下の順番で結ばれているものです。見出しの下に本文、その下に画像。上の要素の背が高くなれば、下の要素は自動的に押し下げられます。だから中身が増えても崩れません。

自由配置では、この関係がありません。それぞれの要素が「画面のこの座標に置く」という指示だけを持っている状態です。隣に誰がいるかを知らないので、譲り合いも押し合いも起きません。重なるときは、そのまま重なります。

文字が1行増えると、なぜ重なるのか

実務でいちばん多い崩れ方がこれです。

たとえば「営業時間のお知らせ」というテキストボックスがあり、そのすぐ下に「アクセス」の見出しが置かれているとします。作った時点では、ぴったり収まっています。

そこに一文だけ足します。「年末年始は12月30日から1月3日まで休業いたします」。

テキストボックスの中身が1行分増えます。しかし下の「アクセス」は元の座標にいたままです。押し下げられません。結果、増えた1行が「アクセス」の文字の上に乗ります。

これは操作を間違えたわけではありません。更新という当たり前の行為が、そのまま崩れの引き金になるという構造です。だから「触るのが怖い」という状態になり、やがて更新が止まります。更新が止まったサイトがどう見えるかについては、放置されたホームページが信用を削る話で書きました。

PC版とスマホ版が、別のレイアウトである

もうひとつの原因が、こちらです。Wixではパソコン用の画面とスマートフォン用の画面を、別々に編集します。

これも一長一短で、スマホ専用の見せ方を作り込めるという利点があります。問題は、片方を直しても、もう片方には反映されないことがあるという点です。

起きがちなのは、次のような流れです。

• PC画面で文章を修正し、位置を整える
• PCで確認する。きれいに直っている
• 公開する
• スマホ側は、修正前の配置のまま崩れている

そして、ここが厄介なところです。サイトを見に来る人の多くはスマートフォンで見ています。業種によって差はありますが、店舗や個人向けのサービスであれば、スマホからの閲覧が過半を占めることは珍しくありません。つまり直したはずの側は誰も見ておらず、崩れている側を大半の人が見ているという事態になります。

いちばん崩れるのは「中間の幅」

自由配置は「この幅のときにこう見える」という前提で座標を決めます。そのため、前提から外れた幅で見たときに崩れます。

具体的に危ないのは、次のような環境です。

• タブレット——スマホ用にもPC用にも当てはまらない幅
• 小さめのノートパソコン——想定より横幅が狭い
• ブラウザを最大化していない人——画面の半分の幅で見ている
• 文字サイズを大きく設定している人——1行の文字数が減り、行数が増える

最後の項目は見落とされがちです。読みやすさのために端末側で文字を大きくしている方は相当な数いますが、文字が大きくなれば行数が増え、行数が増えれば重なります。自由配置には、この変動を吸収する仕組みがありません。

最悪なのは、崩れに気づけないこと

ここまでの話より深刻なのが、これです。

崩れは、自分の環境では見えません。作った本人は、作ったときと同じパソコン、同じブラウザ、同じ幅で確認します。その条件では正常に表示されます。だから「問題なし」と判断します。

一方で、崩れた画面を見た訪問者は、わざわざ連絡してくれません。読みにくいページを閉じて、次の会社を探すだけです。崩れは、クレームという形で届かないのです。

この静かさが、いちばん怖いところだと思っています。

5分でできる自己点検

難しい道具は要りません。今すぐ確認できます。

• 自分のスマホで、全ページを開く——PCの画面ではなく実機で。文字が重なっていないか、はみ出していないか
• パソコンのブラウザの幅を、ゆっくり狭める——窓の右端をつかんで縮めていくと、崩れる幅が見つかります
• いちばん文章の長いページを見る——お知らせ、料金表、よくある質問。文字量が多い場所から先に壊れます
• スマホを横向きにする——縦だけ確認して終わりにしないこと
• 端末の文字サイズを一段大きくして開く——設定から変更できます。ここで崩れるサイトは非常に多いです

ひとつでも当てはまったら、その箇所は今この瞬間も、誰かにそう見えています。

直す順番

全部を一度に直そうとすると挫折します。効果の大きい順に手をつけてください。

• 1. スマホ表示から——見ている人が多い側が先です。PC側は後でいい
• 2. 問い合わせ先・電話番号のまわり——ここが読めないと、他がどれだけ整っていても意味がありません
• 3. トップページの最初の画面——ここで判断されます
• 4. 文字量が変わりやすい場所——お知らせ、営業時間、料金。今後も崩れる場所なので、余白を多めに取り直す
• 5. その他のページ

直すときのコツは、ぴったり収めないことです。テキストボックスの下に、1〜2行ぶんの余白を意識して残しておく。そうしておけば、後で一文足したときに耐えられます。窮屈に詰めたレイアウトは、必ず後で壊れます。

Wixが悪い、という話ではありません

ここまで崩れる話を並べましたが、Wixというサービスが劣っているという主張ではありません。公平に書いておきます。

まず、自由配置は専門知識のない方が思った通りの見た目を作れるという点で、他に代えがたい長所を持っています。制作会社に頼まずに自分でサイトを持てる人を大量に生んだのは、この方式の功績です。

そして、新しい Wix Studio では配置の仕組みが変わっています。要素を画面幅に応じて伸縮させる方式が採用されており、この記事で挙げた「座標に固定されているから重なる」という崩れは起きにくい設計になっています。これから新しく作るのであれば、事情は変わります。

ただし注意点があります。旧エディタで作ったサイトが、自動で新しい方式に変わるわけではありません。数年前に作ったサイトをそのまま使っている場合、中身は旧来の自由配置のままです。ご自身のサイトがどちらなのかは、確認する価値があります。

もうひとつ正直に書いておくと、崩れの原因はツールだけではありません。作ったあと誰も実機で確認していない、という運用の側にも原因があります。どんな作り方をしても、見ていなければ崩れは残ります。

NextRayがHTMLとCSSを直接書いている理由も、この延長線上にあります。詳しくはWordPressも使わずに手で書いている理由に書きました。ただこれは「うちの方式が唯一の正解」という話ではなく、依頼先を選ぶときに確認すべきことのひとつとして読んでいただければと思います。

よくあるご質問

まとめ

整理します。

• 崩れは操作ミスではない——自由配置という仕組みの結果として起きます
• 更新が引き金になる——文字が1行増えるだけで、下の要素と重なります
• PCとスマホは別レイアウト——片方だけ直して公開すると、大半の人が崩れた側を見ます
• 崩れは自分の環境では見えない——だからクレームも来ないまま放置されます
• Wix Studio では改善されている——ただし旧エディタのサイトが自動で変わるわけではありません

いちばんお伝えしたいのは、最後から2番目の点です。崩れているかどうかは、確認しないと永久に分かりません。

スマホを取り出して、自社のページを上から下まで一度眺めてみてください。5分で終わります。それで何も問題がなければ、この記事はここで役目を終えます。