Wix Harmony エディタ：モバイル用にサイトを調整する

多くの訪問者がスマートフォンでサイトを閲覧するようになった現在、モバイル用にサイトをデザインすることは、今まで以上に重要になっています。Wix Harmony エディタでは、デスクトップ用のサイトがあらゆる画面サイズに合わせて自動的に調整されるため、モバイル用のサイトを手動で作成する必要はありません。

モバイル表示にアクセスすると、モバイル端末でサイトがどのように表示されるかを確認することができます。訪問者のデバイスに関わらず適切に表示されるよう、モバイル用のサイトは自由にデザインを調整することができます。

サイトを構築する際は、まずデスクトップ版でレイアウトやスタイルを作成します。デスクトップ版に加えた変更内容は、モバイル版にも自動的に同期・反映されます。つまり、1つのサイトをデザインするだけで、デスクトップ、タブレット、スマートフォン用のサイトがすべて自動で作成されます。

デスクトップ版サイトのパーツのサイズ、色、配置を変更・調整すると、モバイルでサイトを適切に表示させることができます。

モバイル表示では、セクション間やコンテナ間でのパーツの移動など、一部の操作に制限があります。このような場合は、デスクトップ表示に切り替えることで、作業を行えるようになっています。

モバイル専用のパーツを追加すると、訪問者にモバイル独自のサイトエクスペリエンスを提供することができます。これらのパーツはデスクトップには表示されないため、自由にデザインをカスタマイズしたり、レイアウトを調整したりすることができます。これは、モバイルの画面サイズには適さないデスクトップ用のパーツを置き換える場合などに便利です。

デスクトップには表示してモバイルには表示したくないパーツは、いつでも非表示にすることができます。モバイル表示に切り替えてレイヤーパネルを開き、パーツ横の「非表示」アイコンをクリックすると、そのパーツがモバイルには表示されなくなります。

レイヤーパネル上部の「モバイル上で非表示」をクリックすると、非表示のパーツの一覧が表示されます。ここで「モバイルで表示」アイコンをクリックすると、いつでも非表示にしたパーツを再度表示することができます。

サイトを調整中または調整後は、プレビューして適切に表示されるかを確認することができます。エディタ右上の「プレビュー」をクリックし、上部のスライダーをドラッグして画面サイズを調整すると、モバイルやタブレットでの表示をリアルタイムで確認することができます。

公開したら、エディタに表示される QR コードをスキャンして、モバイルデバイスで直接サイトを表示することができます。

詳細については、以下の質問をクリックしてください。