Wixのスマホ時に必須と言ってもいいモバイルツールの設定。
モバイルツールの設定の存在を知らないとスマホ時のデザインに大きな損失がでることでしょう。

今回はモバイルツールの設定で何ができるのか？加えて各項目の編集の仕方も解説をしていきます！

Wix モバイルツール

WixではPC時とスマホ時のサイト編集ができ、モバイルツールはスマホ時の編集をするときのみ編集できます。

画像の「モバイルツール」アイコンをクリックすると4つの項目がでてきます。

• モバイルアクションバー
• 「トップ」へ戻るボタン
• ウェルカム画面
• スタイルカラーを見る

それぞれの使い方を解説していきます。

モバイルアクションバー

モバイルツール　→　モバイルアクションバー　を選択。

すると編集画面がでます。
「モバイルアクションを設定」の他に下記が左から順にあります。

• 設定
• デザインを変更
• カスタマイズ
• ヘルプ

それぞれ解説します。

モバイルアクションを設定

「モバイルアクションを設定」ではモバイルアクションバーにLINEやSNS・電話番号・メールアドレスなどの入れ込みを5つまで設定できます。

「その他」から追加したい項目を選択しクリックするとモバイルアクションバーに追加されます。
あとはURLの設定をし、アイコンの名前も変更することができます。

設定

ラベルのあり、なしを選択します。

デザインを変更

モバイルアクションバーのデザインを選べます。

カスタマイズ

モバイルアクションバーのカラーや枠線、影の編集などができます。

「トップ」へ戻るボタン

モバイルツール　→　「トップ」へ戻るボタン　を選択。

すると編集画面がでます。
「アイコンを変更」の他に下記が左から順にあります。

• レイアウト
• デザインを変更
• アニメーション
• ヘルプ

それぞれ解説します。

アイコンを変更

アイコンの変更ができます。

良いアイコンがない場合は、「＋ボタン」から自分のフォルダ内のアイコンをアップロードして使うこともできますし、「Wix画像・動画素材」からも選ぶことができます。

レイアウト

ボタンの配置・位置を編集できます。

デザインを変更

ボタンのカラーや影を編集できます。

アニメーション

アニメーションを設定できます。
デフォルトで設定されているので基本的にはイジらなくてOKです。

ウェルカム画面

モバイルツール　→　ウェルカム画面　を選択。

すると編集画面がでます。
大きく分けて「ロゴ」と「背景」の編集ができます。

それぞれ解説します。

ロゴ編集

ロゴを追加

「ロゴを追加」から自分のフォルダ内のアイコンをアップロードして使うこともできますし、「Wix画像・動画素材」からも選ぶことができます。

ロゴアニメーション

ロゴにつけるアニメーションを選択します。
プレビューを見ながら動きを確認することができます。

方向

アニメーションの動きの方向を選択できます。

背景編集

背景色

背景色を編集できます。

背景用アニメーション

背景につけるアニメーションを選択します。
プレビューを見ながら動きを確認することができます。

方向

アニメーションの動きの方向を選択できます。

スタイルカラーを見る

スタイルカラーを変更できます。こちらは特に使うことがありません。

まとめ

今回はWixのモバイルツールの使い方を解説いたしました。
モバイルアクションバー、「トップ」へ戻るボタン、ウェルカム画面はサイトのデザインや機能の幅を大きく向上してくれる設定になるので、ぜひ設定してみることをオススメします！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】 は なまはげブログ に最初に表示されました。