Wix Harmony エディタ：モバイル用にサイトを調整する
この記事内
- モバイル版のサイトを自動で作成する
- モバイル専用のパーツを追加する
- モバイルからパーツを非表示にする
- モバイルサイトをプレビューする
- よくある質問
この記事では、2026年1月にリリースされた新 Wix Harmony エディタについて説明します。Wix Harmony エディタまたは Wix エディタのどちらを使用しているか不明な場合は、
こちらで詳細を確認してください。
多くの訪問者がスマートフォンでサイトを閲覧するようになった現在、モバイル用にサイトをデザインすることは、今まで以上に重要になっています。Wix Harmony エディタでは、デスクトップ用のサイトがあらゆる画面サイズに合わせて自動的に調整されるため、モバイル用のサイトを手動で作成する必要はありません。
モバイル表示にアクセスすると、サイト訪問者のスマートフォンでサイトがどのように表示されるかを確認することができます。デバイスに関わらず適切に表示されるよう、モバイル用のサイトは自由にデザインを調整することができます。
始める準備はできましたか？
ページ右上の「
モバイル」アイコン
をクリックしましょう。
をクリックしましょう。
モバイル版のサイトを自動で作成する
サイトを構築する際は、まずデスクトップ版でレイアウトやスタイルを作成します。デスクトップ版に加えた変更内容は、モバイル版にも自動的に同期・反映されます。つまり、1つのサイトをデザインするだけで、デスクトップ、タブレット、スマートフォン用のサイトがすべて自動で作成されます。
デスクトップ版サイトのパーツのサイズ、色、配置を変更・調整すると、デスクトップ版に影響を与えることなく、モバイルでサイトを適切に表示させることができます。
重要：
モバイル表示では、セクション間やコンテナ間でのパーツの移動など、一部の操作に制限があります。このような場合は、デスクトップ表示に切り替えることで、作業を行えるようになっています。
モバイル専用のパーツを追加する
モバイル専用のパーツを追加すると、訪問者にモバイル独自のサイト体験を提供することができます。モバイル表示に切り替えると、「パーツを追加」パネルから追加したパーツはすべてモバイル専用パーツになります。
これらのパーツはデスクトップには表示されないため、自由にデザインをカスタマイズしたり、レイアウトを調整したりすることができます。これは、モバイルの画面サイズには適さないデスクトップ用のパーツを置き換える場合などに便利です。
ヒント：
「レイヤー」パネルの、モバイル専用パーツ横にアイコン
が表示されます。
が表示されます。
モバイルからパーツを非表示にする
デスクトップには表示してモバイルには表示したくないパーツは、いつでも非表示にすることができます。モバイル表示に切り替えてレイヤーパネルを開き、パーツまたはセクション横の「
その他のアクション」アイコン
をクリックし、「
非表示」を選択すると、そのパーツがモバイルには表示されなくなります。
をクリックし、「
非表示」を選択すると、そのパーツがモバイルには表示されなくなります。
レイヤーパネル上部の「
モバイルで非表示」をクリックすると、非表示のパーツの一覧が表示されます。ここで「
モバイルで表示する
」アイコン
をクリックすると、いつでも非表示にしたパーツを再度表示することができます。
をクリックすると、いつでも非表示にしたパーツを再度表示することができます。
モバイルサイトをプレビューする
サイトを調整中または調整後は、プレビューして適切に表示されるかを確認することができます。エディタ右上の「
プレビュー」をクリックし、上部のスライダーをドラッグして画面サイズを調整すると、モバイルやタブレットでの表示をリアルタイムで確認することができます。
公開したら、エディタに表示される QR コードをスキャンして、モバイルデバイスで直接サイトを表示することができます。
よくある質問
詳細については、以下の質問をクリックしてください。
モバイル表示でコンテナ間のパーツをドラッグすることができないのはなぜですか？
モバイルで一部のパーツがヘッダーからハンバーガーメニューに移動したのはなぜですか？
変更を加えていないのに、モバイルでテキストの折り返しが異なるのはなぜですか？
モバイルで一部のパーツが小さく表示される場合はどうすればよいですか？