こんにちは！
Wixパートナーレベル最上位 レジェンドを取得しています、合同会社アクトワン代表 和田英也です！
今回は「Wixモバイルエディタ編集 スマホ対応サイト制作」 というテーマで解説致します！
前回の記事でWixの基本的なホームページ制作の方法を解説いたしました。
しかし、前回制作したのはPCで見た時のデザインのみです。
Wixの場合はPCで見た時のデザインのレイアウトと スマートフォンなどのモバイルデバイスで見た時のレイアウトを個別に作る必要があります。
これはWixの大きなメリットの1つと言えます。
PCはPC、スマートフォンはスマートフォンにそれぞれ適したデザインを施すことができるからです。
基本的にはでPCったデザインに使用されたパーツをモバイル エディタの中で位置調整して行くことになるのですが 、モバイルでサイトを見たときだけに表示されるパーツを置くこともできます。
またモバイルのページメニューやアクションバーのような モバイルエディター独自の設定もありますので 、そちらも紹介したいと思います。
それでは早速始めましょう！
▼ 目次
モバイルエディタ編集の基本
モバイルエディタで調整したモバイルのレイアウトを表示するには、まず設定の所で、モバイル最適化がオンになっていることを確認しましょう。
何もない状態だとテンプレートから追加したコンテンツは位置がずれてしまっています。
これを全てドラッグ&ドロップで調整していきます。
PCで見たときは背景画像が横長になっていたので、背景に設定していた画像もちょうど見れるようになっていました。
が、このままだと両端が切れてしまっています。
なので背景が入っているストリップを選択した状態で、ハンドルを上にあげていきます。
すると背景画像が丁度良い位置に調整されてきました。
またモバイルにしたときに「Wix専門Web制作」の文字が少し小さいので、こちらも調整していきます。
モバイル版もこのように文字調整が可能です。
ボタンの大きさや文字も編集します。
ボタンの大きさはドラッグアンドドロップで調整できます。
中の文字の大きさは、デザインの変更でテキストを選択し、文字サイズの箇所で編集します。
それからヘッダー部分です。
ヘッダー部分のテキストや文字幅、画像のサイズや位置などの編集も基本的にはドラッグ&ドロップでできます。
モバイルメニュー
ちなみにモバイルの場合は画面のサイズ上の問題でパソコンのようなグローバルメニューは表示できません。
よって、よく皆さんもお見掛けするようなメニューを縮小した3本線の折り畳みのメニューを使うことになります。
これはモバイル独自の設定ですので、詳しく解説していきます。
メニューを開いたときの設定は、メニューを編集から行います。
モバイルでメニューボタンを押したときにこのように通常のメニューが表示されます。
これらを調整していきましょう。
基本的にモバイルにおいては、通常の文字サイズは12ぐらいに設定したらいいのではないかと思います。
このように展開したメニューが全幅で表示されていますが、レイアウトを使って右寄せにしたり左寄せにすることもできます。
またメニューページの表示の幅や文字の位置の調整もできます。
また、この画面ではメニューページの色は濃い藍色ですが、「背景を変更」で自由に背景画面もカスタマイズできます。
単色で色を選んだり
このように自分の好きな背景画像を設定することもできます。
それからメニューページの展開の仕方ですが、これもアニメーション設定することができます。
モバイルメニューボックスを選んだ状態でアニメーション効果を選択すると様々なアニメーションが表示されますので、好みのものを設定してみてください。
そしてこのアニメーション効果の中にカスタマイズというものがあります。
カスタマイズではアニメーションの表示方向や表示時間など、さらに細かい設定を行うことができます。
以上がモバイルメニュー設定のアニメーション設定についてでした。
ちなみにメニューアイコンも3本線がデフォルトにはなっていますが、自由に変更することができます。
マウスオーバーすると、どのようなアクションをするのかもチェックすることができるので、好きなものを選んで使ってみてください。
モバイルでだけ表示させるパーツの設定
続いてはモバイルでだけ表示させるパーツの設定を行います。
どういうことかというと、モバイルエディタの状態でテキストや画像、ボックスや埋め込みなどの装飾パーツを設置することです。
これを設置すれば、「パソコン画面では表示されないけどモバイル上では表示される」、というパーツを置くことができます。
こちらも先ほどのモバイル編集同様文字の大きさや色、レイアウトなどの細かい設定の編集も行えるようになっています。
PC上ではこれらの内容は表示されません。
テキストに限らず、画像やボタン、装飾やボックス、URLの埋め込みなどもできます。
モバイルでだけ表示させないパーツの設定
また逆にパソコンでは表示させているけど、モバイルでは表示させたくない内容は、そこを選択して削除します。
その表示されていないパーツに関しては、画面左上の非表示マークの中に格納されています。
また表示させたい場合などはこちらから編集できます。
モバイル背景
続いてはモバイル独自の設定についてお話したいと思います。
まずは背景画面
こちらも自由に設定することができます。
パソコンとは違う背景を選ぶこともできます。
例えば上図矢印の画像を背景に設定します。
すると、このページ全体の背景、ということでこのセクションが透過されてる部分に選択された背景画像が表示されてきます。
モバイルアクションバー
次はモバイルツールについて。
画面左側のモバイルツールからモバイルアクションバーを追加します。
するとモバイルで見た時の最下部に下図のようなモバイルのメニューが出てきます。
こちらはモバイルにのみ表示されるメニューです。
プレビューで確認すると、上図のような…のマークになっていて、ここをクリックすると、
このようにメニューが展開するようになっています。
これを編集します。
メニューを開いた状態でモバイルアクションを設定です。
すると上図のように各アイコンが出てきます。
これは標準で設定されているものですが、例えば、"Phone"は電話番号のアイコンになっている通り、こちらに電話番号を入れればスマートフォンでこのアイコンをクリックした時に電話をかけられるようになります。
以下、メールマークのアイコンの箇所に送信先のメールアドレスを入力すれば、スマートフォンでこのアイコンを押せばメール送信画面が表示されて、Facebookのアイコンの箇所にFacebookのリンクを載せておけば、Facebookのページに遷移する、といった感じです。
これらはデフォルトのアイコンですので、これらを削除して別の項目を追加することもできます。
項目を追加する際はその他をクリックすると様々なコミュニケーションツールが表示されます。
こちらでTwitterやTikTokなども追加することができます。
また既定のもの以外にもオリジナルのものを作ることもできます。
アクションを編集をクリックします。
すると好きなアイコンを選べるようになっています。
自分でパソコンからアップロードしたものでも大丈夫です。
その際の形式はベクターアートです。
例えば、上図のアイコンにして、色を設定、名前を変更し、リンク先も設定すれば、
オリジナルのアイコンを設定することもできます。
それから設定のアイコンでモバイルメニューのラベルの有り無しを選ぶことができます。
レイアウトではツールバーの表示位置の左右を選ぶことができます。
さらにデザインを変更で様々なパターンを作ることもできます。
カスタマイズではページの色を変えることもできます。
このように細かなデザイン設定ができますので、色々と試してみてください。
トップへ戻るボタン
続いてはモバイルツールからトップへ戻るボタンをチェックします。
すると上図の矢印のようなトップへ戻るボタンが表示されます。
モバイルサイトですと、レイアウト的にどうしても縦長になってしまうので、このようなクリックすると一気にサイトのトップへ戻れるボタンを表示させておくととても便利です。
こちらを設定していきます。
こちらもアイコンを変更することができます。
上図のような様々なデザインから選ぶことができます。
自分でカスタマイズもできます。
サイズ、色の変更も可能です。
また画面の左右どちらに設定するかや、縦位置、横位置の選択もできます。
トップへ戻るボタンも基本的にスクロールでついてくるのですが、ページが止まっている状態だとアイコンは消えています。
スクロールした時に表示されるようになっています。
続いてはアニメーション。
ページを表示する際にどのようなアニメーションで表示されるかを設定します。
アニメーションの動きはプレビューでも確認することができるので、実際に動かしてみて気に入ったものを入れてみて下さい。
ウェルカム画面
続いてはウェルカム画面です。
こちらはホームページを開いた時に表示される画面をカスタマイズすることができます。
こちらもモバイル独自のメニューで、モバイルでページを開いた時にアニメーションを出すことができます。
画像も自由に設定することができます。
他にも背景、視覚効果、アニメーションの方向などを設定することができます。
アニメーションが起動した後は通常のトップページが表示されます。
以上がウェルカムページについてでした。
スタイルカラーを見る
最後はスタイルカラーです。
スタイルカラーではアドレスバーの色をサイトに適した色に変更することができます。
色が選べるので青にしてみます。
するとクロームで見るときの色が青に変更されます。
このような細かな設定もできるといった感じです。
以上がモバイルの設定です。
モバイル編集は基本的には文字の大きさやレイアウトを調整したりなどの細かい作業の繰り返しになります。
地味な作業ではありますが、今はモバイル中心でみられることが多いので、しっかりと見やすいレイアウトにしておくことをおすすめします。
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!