【スマホでも美しく】Wixサイトのテキストを綺麗に整える方法

[word_balloon id=”5″ size=”M” position=”R” name_position=”under_avatar” radius=”true” balloon=”talk” balloon_shadow=”true”]Ｗixサイトがスマホ表示だとレイアウトが崩れるんだけど、スマホ表示って必要なの？

なんで崩れるんだろう？

スマホ表示を簡単に綺麗に整える方法はない？[/word_balloon]

 

こういった疑問にこたえます。

 

 

[word_balloon id=”2″ size=”M” position=”L” name_position=”under_avatar” radius=”true” balloon=”talk” balloon_shadow=”true”]

こんにちは、ろにぃ（@ronnie_2020)です。

Webサイト制作歴10年、現在はSEOのコンサルを事業として、サイト運営のお手伝いをさせていただいています。

ひとクセあって決して優等生ではない。手はかかるけど憎めないWixと付き合い始めてはや10年…。現在も新サイトを作り続けているほどWixを愛しています。

[/word_balloon]

 

こういった僕が、解説していきます。

 

スマホ表示、テキスト、改行でリサーチしてこの記事に辿り着いた方は、テキストの不自然な改行を解消する小技　まで飛ばしてご覧ください。

Wixサイトのスマホ表示は超重要

 

Wixで時間をかけて作ってはみたサイト、スマホで表示したらレイアウトが崩れている…。

 

 

 

こんな経験ありませんか？

僕は初めてWixサイトを作った時、ここで絶望感を味わいました。

 

これを見て、

 

[word_balloon id=”5″ size=”M” position=”R” name_position=”under_avatar” radius=”true” balloon=”talk” balloon_shadow=”true”]スマホでもPC版表示させればいいんじゃない？[/word_balloon]

 

と考える方もいるかと思いますが、それはおすすめできません。

 

なぜならスマホ対応していることは、あなたのサイトを人に見てもらえるかどうかに大きな影響を与えるからです。

 

総務省のインターネット利用状況調査　によると、インターネット利用者の63％以上の人はスマホでインターネットを利用しています。

 

 

スマホであなたのサイトを見る人が、

 

[word_balloon id=”5″ size=”M” position=”R” name_position=”under_avatar” radius=”true” balloon=”talk” balloon_shadow=”true”]このサイト見にくいな[/word_balloon]

 

と感じれば、すぐに閉じてしまったり、二度とアクセスしてくれません。

また、googleの検索順位においてもスマホ表示は大きな影響を与えます。

 

今やgoogleの評価で重要視されるモバイル版サイトの利便性

スマホで適切に表示されなければ、検索順位で上位を目指すことが難しくなるのです。

Google は全世界でモバイル フレンドリー アップデートを開始します。
これにより、モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。

※googleウェブマスター向け公式ブログより引用

 

PCとスマホ表示、それぞれのデザインをするのはとても大変ですが、見られるサイトを作る為には必要不可欠です。

---

スマホ表示でWixサイトのレイアウトが崩れる原因

 

Wixサイトのレイアウトが崩れてしまう原因として、よくあるものが以下の2つです。

 

 

テキストボックスを分けていない

 

 

小まめにテキストボックスを分けないと、スマホ表示ではレイアウトが崩れる原因となります。

特に１つのテキストボックス内でサイズを変えると、スマホ表示では崩れ、サイズ調整もできないため、全てやり直すことになります。

ストリップやボックスを使用していない

 

ストリップやボックスを使用せずに、背景にテキストと画像を並べただけのサイトはスマホ表示では、どこになにがあるかわからない程崩れます。

Wixサイトでスマホ表示を簡単に整える方法

 

Wixには『モバイル最適化』、『レイアウト最適化』という機能があります。

 

 

 

テキストや画像のサイズ、レイアウトを１クリックで自動調整してくれるので非常に便利です。

 

しかしあくまで自動。

思い通りにならない部分もあるので、最適化後の微調整は自身で行う必要があります。

テキストの不自然な改行を解消する小技

 

最後に１つ、必ずぶち当たるであろうwixの壁、

 

『テキストが不自然な改行となってしまう』

 

について解決方法をお伝えします。

例えばこの文章

 

 

『より豊かな』が『よ』で切れてしまっています。

モバイルエディターでは改行できないWixでよく発生する不自然改行。

これを、

 

 

このようにフォントサイズや文章の幅を変えずに、自分の好きなところで改行し、綺麗に整える方法です。

---

テキストをコピーする

デスクトップ版、モバイル版両方のテキストを確認します。

不自然な改行を見つけたら、デスクトップ版のテキストをコピー＆ペーストで複製します。

改行を整える

 

複製したテキストをモバイル版で自然な改行となるように整えます。

見えないように隠す

 

整えたテキストを見えないように、

 

 

で隠します。

うまく隠れない場合、

 

 

上記の２つの方法を試してみてください。

元のテキストを非表示にする

 

モバイル版で元のテキストを非表示にします。

コピーしたテキストのサイズを整える

 

コピーしたテキストの文字サイズを調整します。

テキストの色を変えて隠した場合は、元の色に戻してください。

以上で綺麗に改行された文章の完成です。

まとめ

 

以上Wixサイトのスマホ表示でテキストを綺麗に整える方法を解説してきました。

 

改行が不自然なままだと、それだけで素人感が出てしまいます。

今回の方法で綺麗で見やすい、ユーザー目線のサイト作りをしてみてください。

 

その他にもWixがもっと便利になる情報を公開しています。
気になった方はチェックしてみてください！

 

【これを求めてた！】wixサイトにお知らせ欄を設置する方法をついに発見

【誰でも簡単】WixサイトにTwitterタイムラインを埋め込む

【簡単】Wixでgoogleカレンダーを使いたい　スマホ表示も解説します！