Menu
無料メールマガジン

デザインのコツがわかる!
無料メールマガジン配信中!

デザインの基礎がわかる!
全10回だから気軽にできる!
実際のデザイン案件ベースの実習あり!

yama
ひとり広報・デザイナー
デザインがちょっと得意な静岡県民。趣味はカメラと写真。将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。
デザインのコツがわかる無料メルマガ配信中!詳しくはこちら!

Wixサイトのスマホ表示は大丈夫?モバイル最適化と編集方法

当ページのリンクには広告が含まれています。
yama

こんにちは!広報デザイナーのyama(@ひとり広報)です

この記事では、Wixで作成したサイトのスマホ用の表示(モバイル最適化)について紹介します。

  • サイトのスマホ表示がなぜ重要なのか?
  • Wixで作ったサイトのモバイル最適化
  • スマホ用のレイアウトの調整

初心者さん向けに基本的な操作を書いています。
目次から必要部分を読んでいただき、ホームページ作成に役立ててください。

本記事では「グラフィックデザイナーB」のテンプレートをカスタマイズしたサイトを例に解説します。

Wixで作ったサンプルサイト
Wixギャラリーサイト

Wixの「グラフィックデザイナーB」のテンプレートをカスタマイズしたギャラリーサイトです。

目次

サイトのスマホ表示がなぜ重要なの?

スマホを見る女性

ホームページやブログの作成はパソコンで作業しますよね。
デザインやレイアウト確認もパソコンでする方が多いでしょう。

ですが、ユーザがパソコンでホームページを閲覧するとは限りません。
スマホやタブレットなど様々なデバイスで閲覧します。現在は、スマホで閲覧するのが一般的と言えます。

作成したホームページがスマホやタブレットの表示に対応していることは重要です。

サイト作成時は、モバイル端末で表示した時にレイアウト崩れがないか必ずチェックしましょう。

Wixの基本操作は、Wixのサンプルサイトで解説!Wixエディタでよく使う機能と操作方法 の記事で詳しく紹介しています。

Wixのスマホ用の表示って何をするの?

スマホやタブレットに対応した表示が重要と言われても、具体的に何をすべきかわかりませんよね。

本来、モバイル用のレイアウト調整はコーディングして最適化します。
要はHTMLとCSSの知識が必要なわけです。

ですが、Wixは基本的に自動作成してくれます。
これだけでもめちゃくちゃ楽です。

Wixの自動作成は精度も高いのですが、微調整は必要というのが個人的な感想です。
そこで、「これだけはやっておきたい」2つのことを紹介します。

  1. 文字や画像サイズの最適化
  2. レイアウトの最適化

それでは、順番に解説しましょう。

❶ Wixで作ったサイトをモバイル最適化を有効する

スマホやタブレットの画面サイズは、パソコンより小さく、画面比率も異なります。
そのため文字や画像サイズをモバイル用に調整する必要があります。

通常のサイト作成ではCSSで調整しますが、Wixではモバイル用の表示を最適化する機能を使います。

使用中のテンプレートが「モバイル最適化」が有効になっているかを確認しましょう。

wixのモバイル最適化

Wixエディタのトップバーから「設定」→「モバイル最適化」をクリックします。

モバイル最適化のチェック


モバイル最適化が「有効」になっていればOKです。

ポイント

「モバイル最適化」で文字や画像のサイズを自動調整

❷ Wixモバイルエディタでスマホ用のレイアウトを調整

Wixはスマホ用レイアウトを自動作成してくれますが、完璧ではありません。微調整は必要です。

Wixモバイルエディタに変更

Wixエディタをパソコン用の画面からモバイル用の編集画面に切替えレイアウトを調整します。
編集画面の切替えはWixエディタ上部のスマートフォンのマークをクリックします。

スマホ表示切り替え前と修正後

写真は、トップページをWixモバイルエディタに切り替えたものです。
編集前の画面(左)と編集後の画面(右)を並べています。

編集前はタイトル下の文字のレイアウトが崩れています。

文字サイズと位置を調整します。
トップページだけでなく、下層ページもモバイルエディタで表示して適時修正しましょう。

モバイルエディタの操作方法はパソコン用のレイアウトを編集する時と同じです。マウス操作で位置調整が可能です。

Wixエディタの基本操作がわからない方は、Wixのサンプルサイトで解説!Wixエディタでよく使う機能と操作方法 の記事で詳しく紹介しています。

ポイント

Wixはスマホ表示を自動作成するがレイアウトの微調整は必要

自動でモバイル用レイアウトの調整も可能

  • サイトのページ数が多い
  • 手動でレイアウト調整するのが面倒

という人は、自動でレイアウトを調整する機能があります。

自動で最適化

「左メニュー」→「ページレイアウトの最適化」をクリックします。
これだけで自動でレイアウトを調整してくれます。

yama

めちゃくちゃ楽です!

あくまで自動調整なので期待通りの結果にならないこともあります。
ボクは自動調整の結果が気に入らなかったので手動で調整しました。

自動調整した結果が気に入らない時は、トップバーの「元に戻す」で自動調整前の状態に戻れます。

手動で一つ一つ調整するのは初めてサイトを作る人には面倒に感じるかもしれませんが、大事な設定なので丁寧に調整しましょう。

ポイント

Wixエディタの「ページレイアウトの最適化」でスマホ用レイアウトの自動調整も可能

Wixサイトのスマホ表示のまとめ

Wixエディタを使ったスマホ用(モバイル)のレイアウトの最適化について紹介しました。

  • モバイル最適化を「有効」にする
  • 「モバイルエディタ」でレイアウト崩れをチェック
  • 「ページレイアウトを最適化」で自動調整も可能

パソコン・タブレット・スマホなど、端末ごとに最適な表示をさせるのはホームページの作成で重要なことです。
最初はパソコン用のレイアウト作業だけでも大変だと思いますが、動作確認の一つとしてモバイル用の表示もチェックましょう。

それでは、今回はこのへんで。

Wixの使い方まとめ記事はこちら

Wixサイトのモバイル最適化

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

コメント

コメント一覧 (4件)

  • こんにちは!
    wixでHPを作成しまして、スマホでの表示がおかしいので、解決方法はないかと、検索していたら、たどりつきました!
    PCでサイト編集からスマホ表示用の画像の位置を微調整したのですが、上手くいきません・・・(>_<)
    wixのお問い合わせ先を探したりもしているのですが、見つからず・・・
    こちらにコメントさせていただきました!
    PC上では綺麗に見えているのですが、スマホでみると、画像がおかしな場所で表示されます。。。
    どうしたらよいのでしょう・・・?

    • トモエル 様

      コメントありがとうございます。
      Wixのサイト編集でスマホ表示がうまくいかないとのことですね。

      作成状況を見ているわけではないので、原因と対処を言及することはできませんが、 PC版で複雑なレイアウトをしているとスマホ版で崩れることはあると思います。
      ブログ記事でも書いていますが、スマホ版への変換は基本的にWixによる自動変換です。
      そのためボックスなどを複雑に並べるとスマホで崩れる可能性は高いと思います。

      Wixへの問い合わせを利用されるが良いかもしれません。
      「Wix カスタマーケアへのお問い合わせ」で検索してみてください。
      私は上記サービスを使用したことはありませんが、カスタマーケアに問い合わせが可能なようです。

      ご希望に沿う回答にならず申し訳ありません。
      よろしくお願いします。

  • ありがとうございます。

    とても参考になりました。

    モバイル版に切り替えて→公開→サイトを見る

    そこで私スマホ持っていないんですけどパソコンでF12を押して、スマホサイズでみると画像が切れてしまっているんですけどスマホではちゃんと見えてるということでだいじょうぶでしょうか?

    • wixer 様

      スマートフォンをお持ちでないとのことですね。
      パソコンのブラウザで見る場合、画面が切れて見えることはあると思います。
      ですが、スマホでは大丈夫か?というのは、実際に確認する以外はないかなと思います。
      私もサンプルサイトを作った時はスマートフォンで確認しながら作業しています。

コメントする

CAPTCHA


目次