デスクトップに影響を与えないモバイル向けのデザインを最適化しますか?

モバイルの変更がデスクトップに影響を及ぼすのはなぜですか?

GemPagesは レスポンシブデザインの原則つまり、ページ上の要素はさまざまな画面サイズに合わせて自動的に調整されます。

モバイル用に要素を移動またはサイズ変更すると、コード内の同じ要素であるため、デスクトップのレイアウトも変更される可能性があります。

各デバイスの設計を分離するには、特定のテクニックを適用する必要があります。

モバイル専用カスタマイズの主要テクニック

デスクトップのレイアウトを崩さずにモバイル専用のレイアウトを設計するには、GemPages で次のいずれかのテクニックを使用することを検討してください。

• 可視性の設定
• レスポンシブレイアウトオプション
• （上級） カスタムCSS

1. 表示設定

この機能を使用すると、 さまざまな要素/セクションを非表示にする 特定のデバイス (デスクトップまたはモバイル) でストアを表示します。

例：

セクション A とセクション B の 2 つのセクションを作成します。セクション A はデスクトップ ユーザー向けに特別に設計され、セクション B はモバイル向けに最適化されています。セクション A をデスクトップでのみ表示し、セクション B をモバイルでのみ表示するように設定することで、各セクションが他のセクションに干渉することなく、それぞれのデバイスに合わせて調整されることが保証されます。

メリット：

• 各画面サイズに最適化された独自のレイアウトを作成できます。
• 他のセクションに影響を与えるリスクなしに簡単にカスタマイズできます。

制限事項：

ページのコンテンツは技術的に複製されています。読み込み速度に大きな影響はありませんが、注意が必要です。

注意： この手法の使用は、各デバイスで最もカスタマイズが必要な 1 ～ 2 つの重要なセクション (スクロールせずに見えるセクションなど) に限定するのが最適です。

各デバイスでの要素とセクションの表示/非表示の詳細については、 この記事.

2. 要素固有の調整

GemPagesを使用すると 要素の表示方法を調整する 画面サイズに基づきます。

これらの設定には、フォント サイズ、配置、色、余白、パディング、背景などを調整するオプションが含まれます。

例：

デスクトップ版はそのままに、モバイル デバイス上の見出しのフォント サイズを大きくして読みやすさを向上させます。

制限事項：

要素の位置ではなく、視覚的な外観のみを調整できます。 

モバイルで要素を移動すると、その要素は全体のレイアウト内で同じ位置にあるため、デスクトップ バージョンでも移動します。

3. レスポンシブレイアウト

GemPagesの列と行の設定を使用すると、 デスクトップ用の水平レイアウトとモバイルデバイス用の垂直レイアウトを切り替えます。 

これにより、あらゆる画面サイズで適切に機能する、すっきりと整理されたデザインが実現します。

例：

デスクトップでは列を並べて表示するように設定しますが、モバイルではナビゲーションを容易にするために列を縦に積み重ねます。

メリット：

• このアプローチにより、デスクトップとモバイル デバイスの両方で見栄えの良いレイアウトを簡単に作成できます。
• 行内の列を並べ替えることができるため、デザインの柔軟性が向上します。

制限事項：

列全体の位置のみを変更でき、列内の個々の要素を変更することはできません。

4. 高度なカスタマイズ: モバイル用のカスタムCSSを使用する

CSS をしっかりと理解している場合は、カスタム CSS コードを追加することで、モバイルの最適化を次のレベルに引き上げることができます。これにより、モバイル デバイス専用の特定の要素のスタイルと外観を微調整できます。

例：

カスタム CSS を記述して、ボタンのスタイルを変更したり、モバイル専用の要素の間隔を調整したりできます。

メリット：

あらゆる要素のスタイルを完全に制御し、非常に具体的な調整を行うことができます。

制限事項：

CSS の知識が必要です。これがないと、カスタマイズを効果的に実装することが難しい場合があります。

モバイル専用のデザインを最適化するにはどうすればいいですか?

デザインを効果的に最適化するには、次のアプローチをお勧めします。

• デスクトップから始める

まず、デスクトップ向けのレイアウトを設計します。モバイルレイアウトはデスクトップのコンテンツ構造を継承するため、ここから始めることで強固な基盤が築かれます。

• キー設定を調整する

要素固有の調整とレスポンシブ レイアウト手法を使用して、モバイルのフォント サイズ、色、余白、パディング、配置を変更します。

• 必要に応じて表示設定を適用する

デスクトップとは全く異なるモバイルレイアウトが必要な場合は、 可視性の設定 モバイル専用のセクションを作成します。

たとえば、詳細設定タブの可視性設定を使用する手順の例を次に示します。

ステップ1： モバイルビューに切り替える

デスクトップのデザインが完了したら、GemPages の上部ツールバーにあるモバイル アイコンをクリックして、ページがモバイルでどのように表示されるかをプレビューします。

ステップ2： セクションを複製する

モバイル用にカスタマイズしたいセクションを右クリックし、「重複ファイル

• 元のセクションはモバイル最適化に使用されます（セクションA).
• 複製されたセクションはデスクトップ専用になります（セクションB).

ステップ 3: 1 つの要素をモバイルで表示し、もう 1 つをデスクトップで表示するように設定します。これにより、それぞれに固有のスタイルを適用できます。

ステップ4： In 左側の設定パネルで、モバイル バージョンのフォント サイズ、間隔、その他の属性を調整します。

これにより、デスクトップのデザインに影響を与えることなく、要素が小さい画面向けに最適化されます。

よくあるご質問

1. GemPages でモバイル専用のページを編集するにはどうすればよいですか?

上部のツールバーにあるモバイルビュー切り替えボタンを使って、モバイルプレビューに切り替えます。その後、以下の操作を行います。

• 要素固有の設定を使用して、モバイルのフォント サイズ、パディング、マージンなどを調整します。
• 別々のデザインが必要な場合は、表示設定を使用して、モバイルとデスクトップのセクションを表示/非表示にします。

2. モバイルで行った変更がデスクトップのレイアウトにも影響するのはなぜですか?

GemPagesはレスポンシブデザイン構造を採用しており、要素はデバイス間で同じ位置を共有します。モバイル版の変更を分離するには、表示設定を使用してセクションを複製し、各バージョンを個別に調整します。

3. モバイル上でセクションの見た目を変える最適な方法は何ですか?

推奨されるオプションは 2 つあります。

• モバイルビューで直接スタイル設定（フォントサイズ、パディング、マージン、配置）を調整します
• 表示設定を使用して、ヒーローやCTAなどの主要セクションのモバイル専用バージョンを作成します。

4. モバイルとデスクトップに異なる背景画像を適用できますか?

はい。セクションを複製し、「表示設定」を使用してモバイル版とデスクトップ版を別々に表示します。そして、それぞれに異なる背景画像を設定できます。