比較画像要素

画像比較要素について

その 画像比較 この要素を使用すると、1つのフレーム内でビフォーアフター画像を比較することで、製品やサービスのメリットを強調できます。この要素は、以前のバージョンのビフォーアフター画像要素と同様に機能します。

使用例:

画像比較を使用して、製品のインパクトを強調し、顧客との信頼を構築します。

• 製品デモ: 改善前後を示します（例：スキンケア、洗浄効果）。
• ライフスタイルビジュアル: 実際の使用状況と未使用状況を比較します。
• デザインショーケース: 再設計、アップグレード、または変換を表示します。

ページに画像比較要素を追加するにはどうすればいいですか? 

画像比較は柔軟な要素であり、以下の手順に従ってページ上の任意の場所で使用できます。

ステップ1： アクセス GemPagesダッシュボード  > ページをクリックし、対象のページをクリックしてエディターを見つけます。

ステップ2： 左サイドバーから「比較"をタップし、その後、 目的のセクションにドラッグアンドドロップします。

ステップ3： 要素をクリックして設定パネルを開き、カスタマイズを開始します。

設定タブを構成する

下 設定タブでは、次のオプションを調整できます。

レイアウト

比較フレームで 2 つの画像をどのように表示するかを選択します。

• 水平： 画像は左から右に比較されます。

• 垂直： 画像は上から下まで比較されます。

画像

比較したい画像をアップロードして調整します。

1枚目の画像: 最初の画像をアップロードまたは選択します。

2枚目の画像: 次に、比較のために 2 番目の画像を選択します。

スケール：

• 画像を塗りつぶす: コンテナに合わせて画像を拡大します。アスペクト比が歪む場合があります。
• 画像を合わせる: 画像のアスペクト比を維持しながら、コンテナー内に収まるように画像を調整します。
  

訪問者が比較スライダーをどのように操作するかを決定します。

動作：

• ドラッグして移動: 訪問者はスライダーを手動でドラッグします。

• 移動するにはホバーしてください: スライダーはホバーすると自動的に動きます。

デフォルト比率: 初期の分割比率（％）を設定します。

バッジ

有効にします バッジ 訪問者が比較した 2 つの画像を明確に識別できるようにする機能です。

次に、テキスト バッジを次のようにカスタマイズできます。

1番目と2番目のテキスト: 1枚目と2枚目の画像の両方にラベルを付けます。例えば、「古い」と「新しい」、または「Before」と「After」などです。

テキストスタイル: ストアのデザインに合わせてタイポグラフィを調整できます。以下のことが可能です。

• 利用可能なテキスト スタイル (見出し、段落など) から選択します。
• フォント ファミリを選択します。
• フォントサイズを変更します。
• 太字、斜体、下線を適用します。
• フォントの色を選択します。
• 行の高さと文字間隔を制御します。
• テキスト変換（大文字、小文字、大文字化）を適用します。

パディング： バッジ内の間隔を定義して、バッジの周囲にテキストを配置するスペースを制御します。

背景： バッジの背景色を設定して視認性を高めます (例: 白いテキストの場合は暗い色の背景)。

境界： 境界線の太さ、スタイル、色をカスタマイズします。

コーナー： バッジの角を鋭角、丸角、丸い角から選択できます。半径を入力すると、より細かく指定できます。

影： 影の効果で奥行きを演出。影のサイズ、ぼかし、色、距離を調整できます。

ポジション： バッジを表示する場所を選択します (例: 左上、右上、左下、右下)。

サイズ

要素のフレームと幅を調整します。

フレーム： ドロップダウンからフレームのアスペクト比を選択します (例: 16:9、4:3)。

幅： デフォルトでは、幅は100%（フル）に設定されています。必要に応じて、ボックスに特定の数値を入力して幅を変更してください。

形状

比較フレームの全体的な外観をカスタマイズします。

• ボーダー: 境界線の色、太さ、線を変更できます。
• コーナー: セクションの角は、四角形、丸形、または丸い形にすることができます。また、正確な半径を入力して、要素の角を好みに合わせてカスタマイズすることもできます。
• Shadow: 影を追加し、その表示（サイズ、色、ぼかし、距離）を調整できます。

LCPを最適化する

この設定により、ページの 最大のContentful Paint（LCP） スコアは、パフォーマンスと SEO にとって重要な Core Web Vitals メトリックです。

プリロード： 画像がスクロールせずに見える範囲の上に表示され、ページ上の主要な視覚要素の 1 つである場合は、このオプションを有効にします。

• プリロード = はいの場合: 速度を向上させるために画像をプリロードします。
• プリロード = いいえの場合: 画像は正常に読み込まれます。

品質： 鮮明さと読み込み速度のバランスをとるために適切な画像圧縮レベルを選択します。

• 最高級品: 最高品質、ファイルサイズが大きい。
• 高（デフォルト）： バランスのとれた品質とパフォーマンス。
• 媒体： 読み込みが高速化しますが、画像の多いページでは品質が若干低下します。
• カスタム： 高度な制御のために圧縮設定を定義します。

SEO

画像情報を提供することで、ページランクの向上に役立ちます。 代替テキスト の三脚と 画像のタイトル 画像ごとに。

整列

コンテナー内の要素の配置を、左揃え、中央揃え、右揃えに調整します。

注意： 幅が 100% 以上に設定されている場合、Align はサポートされません。

詳細タブを設定する

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.

よくあるご質問

1. 画像比較要素に XNUMX 枚以上の画像を追加できますか?

いいえ。画像比較要素は比較のみを目的として設計されています。 一度に2枚の画像 （変更前と変更後）。さらに比較したい場合は、ページ上で要素を複製してください。

2. 画像比較要素はモバイルでも機能しますか?

はい。スライダーはレスポンシブ対応で、デスクトップとモバイルの両方で動作します。モバイルデバイスでは、指でハンドルをドラッグできます。

3. スライダーハンドルのスタイルを調整できますか?

はい。ハンドルの色、形、影をカスタマイズできます。 のセクションから無料でダウンロードできます。

4. 画像が引き伸ばされて見えないようにするにはどうすればよいですか?

画像を合わせる 下のオプション 規模 画像の元のアスペクト比を維持するためです。

5. 「Before」や「After」などのテキストラベルを追加できますか？

はい。 バッジ 各画像にカスタマイズ可能なラベルを追加するオプション。