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

Wixサイトのモバイル最適化
yama
こんにちは!
静岡県沼津市在住、ブロガー&デザイナーのyama(@ひとり広報)です。

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

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

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

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

作例のサイトはこちら
ギャラリーサイト

ひとりギャラリー

作例はWixの「グラフィックデザイナーB」のテンプレートをカスタマイズしています。

スマホ用の表示がなぜ重要なの?

スマホを見る女性

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

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

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

パソコンで作業が完了した後は、モバイル端末で表示した時にレイアウトの崩れがないか必ずチェックしましょう。

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

スマホ用の調整って何をするの?

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

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

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

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

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

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

❶ Wixで作ったサイトはモバイル最適化を有効にしよう

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

通常のサイト作成ではCSSで文字や画像サイズを調整しますが、Wixはモバイル用の表示を最適化する機能があります。

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

wixのモバイル最適化

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

 

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

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

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

Wixはスマホ用のレイアウトを自動作成してくれるのでとても便利ですが、微調整は必要です。

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

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

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

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

編集前はタイトル下の文字のレイアウトが崩れています。
文字サイズと位置を調整したいですね。
トップページだけでなく、下層ページもモバイルエディタで表示して適時修正しましょう。

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

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

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

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

ページ数が少ないサイトは1ページずつ確認修正もできます。

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

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

自動で最適化

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

yama
めちゃくちゃ楽ですw

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

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

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

ポイント
「ページレイアウトの最適化」でレイアウトを自動調整

最後に、今回のまとめ

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

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

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

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

Wixエディタでよく使う機能

Wixのサンプルサイトで解説!Wixエディタでよく使う機能と操作方法

2019年11月25日

 

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

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

メルマガ登録

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

10回でマスターできる! レイアウトデザインのコツ
デザインの基礎について、実際の案件をベースにしたデザインワークを行う無料デザイン講座です。

個人・ブロガー向け
デザイン制作サービス

デザイン作成承ります

個人で活動している方、ブロガー向けのデザイン作成サービスです。

ロゴマークや名刺など、デザインでお悩みの方 !

自分で作る時間がない!」
「自分で作りたいけどまとまらない!」
「何をどうしていいのかわからない!!」

そんなデザインに関する悩みを解決します。
個人で仕事を依頼するって何だか難しく感じますが、メール等で打ち合わせしながらデザインを進めています。
料金設定も個人向けにわかりやすく設定しています。

お問い合わせフォームまたは、下記のページからご相談ください!
お待ちしております!

ひとり広報 Line@

デザインのコツに関する質問・疑問。デジカメの購入相談など。Line@も気軽に使ってください!

ひとり広報が「LINE@」始めたよって話

2017年9月18日

Line@友だち追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA