レスポンシブ設定アイコンの使い方

デスクトップで見栄えの良いページが、モバイルやタブレットで完璧に表示されるとは限りません。見出しはスマートフォンの画面では大きすぎると感じられ、ノートパソコンではバランスが取れているように見えるパディングはタブレットでは窮屈に感じられ、ボタンのサイズはデバイスによって異なる場合があります。そのため、GemPagesでは、 各デバイスごとに個別の設定をカスタマイズする レスポンシブ設定アイコン.

レスポンシブ設定アイコンとは何ですか？

その レスポンシブ設定アイコン GemPagesの設定パネルにある特定のオプションの横に表示される小さなアイコンです。これを使用すると、デバイスごとに特定の設定のデフォルト値を上書きできます。つまり、同じ要素に対して、デスクトップ、タブレット、モバイルでそれぞれ異なる値を設定できます。

これにより、要素を複製したり、カスタムコードを記述したりすることなく、画面サイズに応じてページがどのように適応するかを完全に制御できます。

レスポンシブ設定が重要な理由

レスポンシブデザイン ユーザーエクスペリエンスとSEOの両方にとって不可欠です。レスポンシブ設定アイコンを使用することが非常に重要な理由は次のとおりです。

• より良いモバイル体験： オンラインショッピング利用者の半数以上がモバイル端末で閲覧しているため、ページは小さな画面でも見栄え良く表示される必要があります。
• コンバージョン率の向上: 適切なサイズのテキスト、ボタン、間隔によって、訪問者は読みやすく、タップしやすく、購入しやすくなります。
• より高い SEO ランキング: Googleはモバイルファーストインデックスを採用しているため、最適化されたモバイル版は検索結果の表示順位に直接影響します。
• よりクリーンなワークフロー： セクションを重複させることなく、1つの要素をすべてのデバイス向けに1か所で微調整できます。

レスポンシブ設定アイコンの使い方

実際の例を見ていきましょう。 見出し デスクトップでは見栄えが良いのに、モバイルでは大きすぎる。レスポンシブアイコンを使ってこれを解決する方法をご紹介します。

ステップ1：要素を選択する

エディターキャンバス内の見出し（または任意の要素）をクリックします。右側の設定パネルに、その要素で使用可能なすべてのオプションが表示されます。

ステップ2：レスポンシブアイコンを探す

設定パネルをスクロールして、デバイスごとに調整したいオプションを見つけます。たとえば、 フォントサイズその横に小さなレスポンシブアイコンが表示されます。

ステップ3：ターゲットデバイスビューに切り替える

デバイス切り替え エディターの上部で切り替える デスクトップ, タブレット, モバイル 表示。まず、カスタマイズしたいデバイスを選択してください。

ステップ4：レスポンシブアイコンをクリックします

設定の横にあるレスポンシブアイコンをクリックします。これにより、現在選択されているデバイスのオーバーライドが有効になり、適用可能な値を入力できるようになります。 の そのデバイスへ。

ステップ 5: 新しい値を入力する

希望する値を入力してください（例：デスクトップのフォントサイズを48pxからモバイルのフォントサイズを28pxに変更）。変更は現在表示しているデバイスの画面にのみ反映されます。

ステップ 6: 他のデバイスに対して繰り返します

別のデバイスビューに切り替えて、必要に応じて同じ手順を繰り返してください。各デバイスの設定は個別に保存されます。

ステップ7：プレビューして公開する

デバイス切り替えを使用して、すべての画面サイズでページがどのように表示されるかをプレビューしてからクリックします。 Save or パブリッシュ 結果に満足したとき。

レスポンシブ設定を効果的に活用するためのヒント

レスポンシブ設定アイコンを最大限に活用するには、以下のベストプラクティスに従ってください。

• まずはデスクトップ向けに設定し、その後、より小さな画面向けに調整する。 ほとんどのユーザーはデスクトップを優先して設計しますが、問題を早期に発見するために、タブレットとモバイルも必ず確認してください。
• 可能であれば、実機でテストしてください。 エディターのプレビューは正確ですが、実際のスマートフォンで表示すると、ユーザーエクスペリエンスを最もよく理解できます。
• すべての設定を上書きしないでください。 本当に調整が必要な部分だけをカスタマイズしましょう。上書き設定が多すぎると、デザインの保守が難しくなります。
• タップ対象に注意してください。 ボタンやリンクは、モバイル端末でタップしやすいように、少なくとも44×44ピクセルのサイズにする必要があります。
• 読みやすいフォントを使用する。 モバイル端末で快適に読むためには、本文の文字サイズは一般的に14ピクセルから18ピクセルの間に保つべきです。