WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。
Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、Wixでもスマホ時のレイアウトを調整する必要があります。
タブレット・スマホで見た時もサイトの見た目が良くなるよう、スマホ時のレイアウト調整のポイントをこの記事で解説していきます！
モバイル最適化
早速スマホ時のレイアウトを調整していきましょう！
まずはじめに「モバイル最適化」を行いましょう。
編集画面上にある「設定」→「モバイル最適化」を選択し、「モバイル最適化を有効にする」にチェックをいれます。
有効化することである程度、自動でスマホのレイアウトの見た目を調整してくれます。
モバイルツールの設定
続いてモバイルツールの設定をします。
編集画面左のツールバーに「モバイルツール」があるので選択。
モバイルツールでは下記の設定と編集ができます。
- モバイルアクションバー
- 「トップ」へ戻るボタン
- ウェルカム画面
- スタイルカラーを見る
スマホ時のレイアウトではよく使うパーツなのでサイト内に設定したい場合は編集をします。
編集方法は以下の記事で詳しく解説していますのでどうぞ。
→参考 : Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】
非表示になっているパーツを表示
モバイル最適化などを行うと、PC時で表示されていたパーツが自動で非表示になる場合があります。
編集画面左のツールバーに「モバイル上で非表示」があるので表示したいパーツがある場合は選択し表示します。
※稀にPC時でグループ化したパーツがスマホのサイト内と「モバイル上で非表示」のツール内のどこにもない場合があります。
→その場合はPCでグループ化したパーツのグループ化を解除することにより表示されます。
スマホのレイアウト崩れを調整
モバイル最適化をしただけではレイアウトは崩れたままなので、崩れている箇所を編集していきます。
ヘッダー → ファーストビュー → 各パーツ → フッター と上から順に編集します。
ツールバーの表示
編集画面右上の「ツール」→「ツールバー」にチェックを入れるとツールバーが表示されます。
個人的にスマホの編集ではツールバーから各パーツのサイズを変更することが多いため、ツールバーをすぐ横に置いておくのがオススメです。
ヘッダーの調整
主にヘッダーでは下記を調整します。
- 会社のロゴのサイズ
- ヘッダーの高さ
- ハンバーガーメニュー
- ハンバーガーメニューの中身
※ハンバーガーメニューはPC時に「模型メニュー」をヘッダーに入れていれば自動で表示されます。ただし、PCでヘッダー・フッターを非表示にしていると表示されません。
ファーストビューの調整
ファーストビューの高さなどを調整します。
スマホで見る場合は250px〜400pxあたりがちょうど良く見えます。
実際の見栄えをは実機（お手持ちのスマホ）で確認をしましょう。
→スマホで自サイトのURLからサイトを開いてレイアウトの見た目を確認
ファーストビューに画像ではなく動画を設定している場合
スマホ時ではデフォルトで動画が画像に変更されているため、スマホ時も動画を再生したい場合は
ファーストビュー選択 → 編集項目の「背景」 → 「スマホで動画を再生」にチェック
各パーツの調整
各パーツでは主に下記を調整します。
- インナー幅
- 文字サイズ
- ボタンサイズ
- 余白
- 画像や動画のサイズ
- 横並びのパーツの調整
- スマホ時、いらないパーツを非表示
順番に解説していきます。
インナー幅
各セクションをこのインナー幅に収め、揃えることでサイトの見栄えが綺麗に見えます。
PC時にはインナー幅が自動で設定されており、画像のような点線がインナー幅になります。
スマホ時にはインナー幅がないためご自身でインナー幅を仮で設定し、各パーツの横幅を揃えます。
Wixのスマホの編集画面が最大幅320pxなので、各パーツを280pxで揃えると綺麗に見えます。
文字サイズ
画像の＋とーのボタンで文字サイズを調整します。
改行したい場合やテキスト内の文字を編集したい場合はスマホの編集では出来ません。
そのため、以下の方法から編集をします。
・新しくテキストを追加し、既存のテキストは非表示にする
・PCのテキストを変更する
※新しくテキストを追加した場合は文字サイズ・行間・フォントの種類がデフォルトになるため、PC時に設定したものに変更する必要があります。（フォントサイズは13px以下は設定できません）
ボタンサイズ
ボタンのサイズを調整します。
- ボタンの高さや横幅
- ボタンの文字サイズ
- ボタンのアイコンサイズ
- ホバー時の各サイズ
余白
セクションなど、各パーツの上下の余白をドラッグして調整します。
画像や動画のサイズ
- 画面いっぱいに見せたい場合は横幅320px
- それ以外は基本、横幅280pxにすると良い
横並びのパーツの調整
横並びのパーツの場合は基本、スマホ時は1列で縦並びにすると綺麗に見えます。
PC時は3列で横並び（3カラム）
スマホ時は1列で縦並び（1カラム）
PC時は3列だったパーツをスマホ時は1列にするだけなので簡単ですね！
スマホ時、いらないパーツを非表示
スマホのレイアウトを編集していると、スマホの時は表示させたくないパーツも出てくるかと思います。
その場合は表示させたくないパーツを選択し、非表示アイコンを選択すると非表示にできます。
これで各パーツのおおまかな調整が完了です！
タブレットのレイアウトを綺麗にする
Wixでは、PCとスマホのレイアウト編集しか出来ないため、タブレットの見た目をよくしたい場合はPC時のインナー幅に収める必要があります。
PC時、インナー幅に収めることで検証ツールで確認したときにタブレットの時も画面からはみ出さずに綺麗に表示できます。
検証ツールでの確認方法（タブレットの見た目を確認する方法）
①自サイトのURLからサイトを開き、以下を実行
Mac → 「Command」 ＋ 「Option」 ＋ 「I (アイ)キー」で検証ツールを開く
Windows → 「Ctrl」 ＋ 「Shift」 ＋ 「I (アイ)キー」または「【F12】キー」で検証ツールを開く
②デバイスのマークを選択
③確認したいデバイスのサイズを選択し、リロードして確認
これでタブレットの見た目も綺麗に編集できます！
スマホレイアウト参考
PCとスマホでどのようにレイアウトが変わったかが分かるように自作した参考サイトをポートフォリオに載せております。
検証ツールでデバイスを変えながら確認してみて下さい。
まとめ
今回はWixでスマホレイアウトの編集の仕方を解説しました。
レスポンシブ対応までがWebサイト作成のマストな工程ですので、スマホレイアウトまで完結しましょう。
PCでのレイアウトが作れたらスマホでのレイアウト調整は簡単にできるので、この記事を活用してスマホ・タブレットでのサイトの見た目も綺麗に表示してみて下さい！
