Wixの使い方と機能紹介vol.5—スマホ表示最適化のコツ

前回は、Wixエディタの基本操作を通じて、テキストや画像の差し替えなど「自分の色を出す」編集を学びました。

しかし今の時代、サイトを訪れる人の大半はスマートフォンからアクセスしています。

そこで今回は、スマホで見ても“美しく使いやすい”サイトに仕上げるためのコツをご紹介します。

Wixは自動でスマホ対応してくれる？

Wixでは、PC向けに作ったサイトを自動でスマホ向けに調整してくれる機能が備わっています。

ただし、自動調整だけでは見にくくなることも…。

• 文字が小さすぎる

• 余白がバラバラ

• 画像が切れてしまう

こうした細部を手作業で整えることが、見やすいスマホサイトのカギです。

ステップ1：スマホ表示モードに切り替える

1. エディタ右上の「モバイル表示」アイコンをクリック。

2. スマホ版の編集画面に切り替わります。

3. ここで調整してもPC版には影響しないので安心です。

💡 ポイント

PCとスマホは別画面で管理できるのがWixの強み。モバイルユーザーを意識した大胆な変更も可能です。

ステップ2：文字の見やすさをチェック

• 最低でも16px以上の文字サイズにする。

• 見出しは「短く・太く・シンプルに」。

• 改行を多めに入れて読みやすさを優先。

ステップ3：画像とレイアウトを整える

• 横幅いっぱいに広がる画像はスマホだと圧迫感が出る → 適度にトリミング。

• 2カラム（左右分割）のレイアウトは縦並びに変えると読みやすい。

• ボタンは指で押しやすいサイズ（40px以上）を意識。

ステップ4：不要な要素を隠す

スマホ表示では「見せたい情報を絞る」ことも重要。

• 長い文章や複雑な表は非表示にする。

• PC版では華やかな背景動画も、スマホ版では静止画に切り替え可能。

💡 tamaku.流アドバイス

「見せたいもの」と「今は隠していいもの」を分けると、スマホサイトは一気に見やすくなります。

💡 tamaku.流アドバイス

「見せたいもの」と「今は隠していいもの」を分けると、スマホサイトは一気に見やすくなります。

まとめ

• Wixは自動でスマホ対応してくれるが、必ず手動で最終調整を。

• 文字サイズ・レイアウト・画像の扱いはスマホ専用に最適化。

• 不要な要素を隠すことで、スッキリした見た目を実現できる。

💡 tamaku.からのひとこと

「スマホは“手のひらの中のショーウィンドウ”。小さい画面でも、あなたの魅力を大きく伝えましょう。」

次回（第6回）は、**「Wixアプリの追加と活用」**をテーマに、予約フォームやSNS連携など、機能を広げる方法をご紹介します。