Ｗixサイトがスマホ表示だとレイアウトが崩れるんだけど、スマホ表示って必要なの？
なんで崩れるんだろう？
スマホ表示を簡単に綺麗に整える方法はない？
こういった疑問にこたえます。
こういった僕が、解説していきます。
スマホ表示、テキスト、改行でリサーチしてこの記事に辿り着いた方は、
テキストの不自然な改行を解消する小技 まで飛ばしてご覧ください。
Wixサイトのスマホ表示は超重要
Wixで時間をかけて作ってはみたサイト、スマホで表示したらレイアウトが崩れている…。
こんな経験ありませんか？
僕は初めてWixサイトを作った時、ここで絶望感を味わいました。
これを見て、
『スマホでもPC版表示させればいいんじゃない？』
と考える方もいるかと思いますが、それはおすすめできません。
なぜならスマホ対応していることは、
あなたのサイトを人に見てもらえるかどうかに大きな影響を与えるからです。
総務省のインターネット利用状況調査 によると、
インターネット利用者の63％以上の人はスマホでインターネットを利用しています。
スマホであなたのサイトを見る人が、
『このサイト見にくいな』
と感じれば、すぐに閉じてしまったり、
二度とアクセスしてくれません。
また、googleの検索順位においてもスマホ表示は大きな影響を与えます。
今やgoogleの評価で重要視されるモバイル版サイトの利便性
スマホで適切に表示されなければ、検索順位で上位を目指すことが難しくなるのです。
Google は全世界でモバイル フレンドリー アップデートを開始します。
これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。
※googleウェブマスター向け公式ブログより引用
PCとスマホ表示、それぞれのデザインをするのはとても大変ですが、
見られるサイトを作る為には必要不可欠です。
スマホ表示でWixサイトのレイアウトが崩れる原因
Wixサイトのレイアウトが崩れてしまう原因として、よくあるものが以下の2つです。
- テキストボックスを分けていない
- ストリップやボックスを使用していない
テキストボックスを分けていない
小まめにテキストボックスを分けないと、
スマホ表示ではレイアウトが崩れる原因となります。
特に１つのテキストボックス内でサイズを変えると、
スマホ表示では崩れ、サイズ調整もできないため、全てやり直すことになります。
ストリップやボックスを使用していない
ストリップやボックスを使用せずに、背景にテキストと画像を並べただけのサイトは
スマホ表示では、どこになにがあるかわからない程崩れます。
Wixサイトでスマホ表示を簡単に整える方法
Wixには『モバイル最適化』、『レイアウト最適化』という機能があります。
テキストや画像のサイズ、レイアウトを１クリックで自動調整してくれるので非常に便利です。
しかしあくまで自動。
思い通りにならない部分もあるので、最適化後の微調整は自身で行う必要があります。
テキストの不自然な改行を解消する小技
『テキストが不自然な改行となってしまう』
について解決方法をお伝えします。
例えばこの文章
『より豊かな』が『よ』で切れてしまっています。
モバイルエディターでは改行できないWixでよく発生する不自然改行
これを、
このようにフォントサイズや文章の幅を変えずに、
自分の好きなところで改行し、綺麗に整える方法です。
テキストをコピーする
デスクトップ版、モバイル版両方のテキストを確認します。
不自然な改行を見つけたら、デスクトップ版のテキストをコピー＆ペーストで複製します。
改行を整える
複製したテキストをモバイル版で自然な改行となるように整えます。
見えないように隠す
整えたテキストを見えないように、
で隠します。
うまく隠れない場合、
- 文字の色を背景と同色にする
- ストリップやボックスの裏に配置する
上記の２つの方法を試してみてください。
元のテキストを非表示にする
モバイル版で元のテキストを非表示にします。
コピーしたテキストのサイズを整える
コピーしたテキストの文字サイズを調整します。
テキストの色を変えて隠した場合は、元の色に戻してください。
以上で綺麗に改行された文章の完成です。
まとめ
以上Wixサイトのスマホ表示でテキストを綺麗に整える方法を解説してきました。
改行が不自然なままだと、それだけで素人感が出てしまいます。
今回の方法で綺麗で見やすい、ユーザー目線の作りをしてみてください。
本記事を読んだけど、
- 自分で出来そうな気がしない
- 自分でやるなんて面倒
という方向けにココナラにて作業代行を承っております。
検索順位NO.1の実績 Wixサイトを修正します 自身で作ったサイトが高品質に生まれ変わる
その他にもWixがもっと便利になる情報を公開しています。
気になった方はチェックしてみてください！
【これを求めてた！】wixサイトにお知らせ欄を設置する方法をついに発見
ころにぃ 企業サイトなどでよくある『News』とか『お知らせ』をwixサイトに導入したいんだけどできるの？ どうやって設置したらいいんだろう？ 更新は簡単にできるのかなぁ？ こういった疑[…]
【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む
[word_balloon id="5" position="R" size="M" balloon="talk" name_position="under_avatar" radius="true" avatar_border="fals[…]
【簡単】Wixでgoogleカレンダーを使いたい スマホ表示も解説します！
[word_balloon id="5" size="M" position="R" name_position="under_avatar" radius="true" balloon="talk" balloon_shadow="tru[…]