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

Wix 【スマホでも美しく】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サイトのスマホ表示でテキストを綺麗に整える方法を解説してきました。

 

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

 

Wixでのホームページ制作は、奥が深く、
作っているうちに、

この表現はどうしたらできるのだろう?

ころにぃ
ころにぃ

と気になるものが出てくると思います。

 

全てを覚えるのはとても大変で非効率的。
僕が実践した効率の良い勉強法は、

 

『人からホームページ制作の依頼を受け、わからないことは調べながら学ぶ』

 

です。

ろにぃ
ろにぃ

クラウドソーシングを利用して、需要のある表現を把握し、学習しました。

 

稼ぎながらスキルが身につくのでとてもおすすめです。
興味がある方は挑戦してみてください。

【おうち副業で稼ぐ】クラウドソーシングであなたのスキルをお金に換えよう

関連記事

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

副業ビルディングSTEP5 お家で副業 クラウドソーシングであなたのスキルをお金に換える

 

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

 

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

関連記事

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

【これを求めてた!】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サイトのテキストを綺麗に整える方法
最新情報をチェックしよう!