20代で知りたかったお金・節約・生活の役立つ情報をあなたに

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

Wixサイトがスマホ表示だとレイアウトが崩れるんだけど、スマホ表示って必要なの?

 

なんで崩れるんだろう?

 

スマホ表示を簡単に綺麗に整える方法はない?

ころにぃ
ころにぃ

 

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

 

本記事の内容
 Wixサイトのスマホ表示は超重要

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

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

 それでも解決できないテキストの不自然な改行を解消する小技

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

Wix歴8年、クラウドワークス、ランサーズ、ココナラでwixサイトの制作を請け負って副収入を得ています。

ろにぃ
ろにぃ

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

 

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


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

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

 

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

 

Wix テキスト1
 

 

Wix テキスト2

 

こんな経験ありませんか?
僕は初めてWixサイトを作った時、ここで絶望感を味わいました。

 

これを見て、

 

『スマホでもPC版表示させればいいんじゃない?』

 

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

 

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

 

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

 

スマホグラフ

 

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

 

『このサイト見にくいな』

 

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

 

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

 

今やgoogleの評価で重要視されるモバイル版サイトの利便性
スマホで適切に表示されなければ、検索順位で上位を目指すことが難しくなるのです。

 

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

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

 

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


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

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

 

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

 

  •  テキストボックスを分けていない
  •  ストリップやボックスを使用していない

 


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

 

Wix テキスト3

 

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

 

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


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

 

Wix テキスト4

 

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


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

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

 

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

 

Wix テキスト6

 

Wix テキスト7

 

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

 

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


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

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

 

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

 

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

 

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

 

例えばこの文章

 

Wix テキスト8

 

 

『より豊かな』が『よ』で切れてしまっています。
モバイルエディターでは改行できないWixでよく発生する不自然改行

 

これを、

 

Wix テキスト9

 

 

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


テキストをコピーする

Wix テキスト10

デスクトップ版、モバイル版両方のテキストを確認します。
不自然な改行を見つけたら、デスクトップ版のテキストをコピー&ペーストで複製します。


改行を整える

Wix テキスト11

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


見えないように隠す

Wix テキスト12

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

 

右クリック⇒アレンジ⇒最背面へ移動

 

で隠します。

 

うまく隠れない場合、

 

  •  文字の色を背景と同色にする
  •  ストリップやボックスの裏に配置する

 

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


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

Wix テキスト13

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


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

Wix テキスト14

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

 

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

 

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


まとめ

 

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

 

改行が不自然なままだと、それだけで素人感が出てしまいます。
今回の方法で綺麗で見やすい、ユーザー目線の作りをしてみてください。

 

本記事を読んだけど、

  • 自分で出来そうな気がしない
  • 自分でやるなんて面倒

という方向けにココナラにて作業代行を承っております。

検索順位NO.1の実績 Wixサイトを修正します 自身で作ったサイトが高品質に生まれ変わる

お知らせ欄設置に限らず、他の機能追加、デザイン修正、サイトのお悩み相談なども承っております。
あなたのWixサイトがより便利で魅力的に変わりますので、ぜひご検討ください!

 

 

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

 

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

関連記事

  ころにぃ 企業サイトなどでよくある『News』とか『お知らせ』をwixサイトに導入したいんだけどできるの? どうやって設置したらいいんだろう? 更新は簡単にできるのかなぁ?   こういった疑[…]

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

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

関連記事

[word_balloon id="5" position="R" size="M" balloon="talk" name_position="under_avatar" radius="true" avatar_border="fals[…]

Twitterタイムライン 埋め込む

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

関連記事

[word_balloon id="5" size="M" position="R" name_position="under_avatar" radius="true" balloon="talk" balloon_shadow="tru[…]

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

【スマホでも美しく】Wixサイトのテキストを綺麗に整える方法
最新情報をチェックしよう!