AX - ギャラリー
概要
AX - ギャラリー は、Experience Sites のページ上で画像とコンテンツを 4 つのレイアウトスタイル（カルーセル（スライドショー）、タブ（整理されたセクション）、グリッド（複数カラム）、ギャラリー（画像ショーケース））で表示する Experience Cloud コンポーネントです。
製品写真、プロジェクトポートフォリオ、ケーススタディ画像、リソースコレクション、またはポータル利用者が閲覧する必要のあるあらゆる視覚コンテンツの表示に使用します。Experience Builder でコード不要でレイアウトスタイル、ナビゲーション、画像ソースを構成できます。
製品カタログ、ビジュアルポートフォリオ、画像ライブラリ、ビフォー/アフターのショーケース、あるいはポータルで魅力的な画像やコンテンツ表示が必要なあらゆる場所に最適です
Salesforce データに接続
データソースはカルーセルのコンテンツを定義する場所です。主に 2 種類のデータソースがあります: 手動 と クエリ.
手動データソース
ギャラリーアイテムのデータを手動で入力することが含まれます。静的コンテンツや事前定義されたアイテムに有用です。
頻繁に変更されないコンテンツや特定のアイテムで素早く設定したい場合に最適です。
クエリデータソース
クエリを介してデータを取得し、Salesforce からさまざまなレコード／データポイントを引き出すことが可能です。
複雑なデータ取得が必要な場合や外部ソースからの取得時に最適です。
バリアントの設定
カルーセル
カルーセルバリアントは、コンテンツ、画像、カードを動的かつ魅力的に表示する方法を提供します。アイテムをスライドショー形式で順次表示するよう設計されており、注目コンテンツ、製品画像、重要な告知を強調するのに優れています。
使用タイミング: 次の場合にカルーセルバリアントを利用してください:
視覚的に魅力的な提示でユーザーの注意を引きたいとき。
複数のアイテムや画像をスペース効率よく表示したいとき。
サイトの回転バナーや注目コンテンツセクションを作成したいとき。
機能:
ナビゲーションコントロール: 矢印ボタンやページネーションドットなどの直感的なコントロールでカルーセルを操作できます。
自動再生オプション: カルーセルを自動的にアイテム間で切り替えるよう設定でき、一時停止や再開も可能です。
外観のカスタマイズ: トランジション効果や表示時間などの要素を調整して、サイトのデザインに合わせてカルーセルの見た目をカスタマイズできます。
タブ
タブバリアントは、整理されたタブ形式でコンテンツを表示するアプローチを導入します。このバリアントは情報をカテゴリ分けするのに最適で、クリーンで構造化されたレイアウトによりユーザーが素早く異なるコンテンツセクションへ移動できます。
使用タイミング: 次の場合はタブバリアントを検討してください:
カテゴリ別に整理された情報を明確で区分された形式で提示したいとき。
ユーザーがページを離れずに異なるコンテンツセクションを簡単に切り替えられるようにしたいとき。
製品仕様、サービスカテゴリ、情報タブなどのコンテンツをユーザーフレンドリーに整理したいとき。
機能:
セグメント化されたコンテンツ: コンテンツを明確に定義されたタブに分け、ユーザーが異なるセクションを見つけやすく表示しやすくします。
ユーザーフレンドリーなナビゲーション: ユーザーがタブ間をシームレスに切り替えられるようにし、スムーズで直感的な操作を確保します。
カスタマイズ可能なデザイン: タブラベル、レイアウト、カラースキームなどの要素を変更して、ブランドやサイトの美観に合わせてタブの外観を調整します。
グリッド
コンテンツを構造化された複数カラムのレイアウトで表示します。各アイテムはグリッド内のセルを占有します。
使用タイミング: 均等な強調が望ましいアイテムのコレクションを表示するのに最適です。例えば:
製品一覧
チームメンバープロフィール
ブログ投稿のプレビュー
機能
カスタマイズ可能な列数
アイテム間の間隔（ギャップ）を定義する機能
各グリッドセル内での画像、タイトル、説明、コールトゥアクションボタンのオプション
ギャラリー
画像を目立たせる視覚重視のレイアウトです。
使用タイミング: 次のような画像ベースのコンテンツを強調するのに最適です:
写真ポートフォリオ
製品ギャラリー
画像中心の注目コンテンツ
機能
大きく高品質な画像に焦点を当てる
キャプションや拡大表示のためのライトボックス機能を含めるオプション
クリエイティブなレイアウトやホバー効果の可能性
インタラクション
"リンク先" セクションは、Avonni ギャラリーのアイテムがクリックされたときに何が起こるかを決定します。詳細ページへの誘導、新しいコンテンツの開放、その他のアクションのトリガーに使用します。
例：
たとえば、ギャラリーで注目の住宅を表示し、各画像をクリックすると別ページで詳細を表示できるようにする、といった使い方ができます。
スタイリング 外観
カルーセルまたはタブバリアントを使用する場合でも、Avonni ギャラリーの視覚表現を洗練するために設計されたスタイリング属性を確認してください:
サイズ： ギャラリーの全体寸法を調整してレイアウトにぴったり合うようにします。
ボーダー： ギャラリーコンテンツを効果的に額縁化するために、ボーダーのスタイル、幅、色をカスタマイズします。
キャプション: 各アイテムに関連するキャプションテキストのスタイルを、明瞭さと強調のために設定します。
タイトル： 各ギャラリーアイテムのタイトルテキストを、目立たせるかサイトのテーマに合わせるように変更します。
コンテンツ: 各ギャラリーアイテム内の主要コンテンツ領域の外観を調整して、統一感のある視覚表現にします。
メディア: メディア（画像や動画）の表示方法をカスタマイズし、ギャラリーの全体デザインと調和させます。
スライドショーアイテム: 背景、配置、間隔など、カルーセル内の個々のアイテムのスタイルを設定します。
スライドショーアイテムタイトル: 各カルーセルアイテム内のタイトルの外観をカスタマイズして、即時のインパクトと認識を高めます。
スライドショーアイテムの説明: 可読性を高めるために、カルーセルアイテム内の説明のフォント、サイズ、色を調整します。
スライドショー画像: 視覚的一貫性のために、カルーセル内の画像のサイズやボーダーを調整します。
スライドショーアクティブインジケーター: 現在表示されているアイテムのインジケーターを目立たせ、識別しやすくスタイル設定します。
スライドショー非アクティブインジケーター: 非アクティブなアイテムのインジケーターをカスタマイズして、カルーセルのナビゲーションをスムーズにします。
スライドショーナビゲーションボタン: ナビゲーションボタンの外観を調整し、使いやすくギャラリーのスタイルに合うようにします。
タブ: 個々のタブのスタイルを設定して、アクティブと非アクティブのコンテンツセクションを区別します。
タブボーダー: 明確な区切りと視覚的魅力のために各タブのボーダーをカスタマイズします。
アクティブ／ホバー時のタブボーダー: ユーザーの操作を視覚的に導くために、アクティブまたはホバーされたタブのボーダーをスタイル設定します。
タブ背景: サイトの全体テーマに合わせてタブの背景色や背景画像を調整します。
タブラベル: タブラベルのフォント、サイズ、色をカスタマイズして、明瞭さと視覚的調和を図ります。
タブサブタイトル: タブのサブタイトルの外観を調整して、追加の文脈や情報を統一的に提供します。
最終更新
役に立ちましたか？