# AX - ギャラリー

## 概要

**AX - ギャラリー** Experience Cloud コンポーネントで、Experience Sites ページ上に画像とコンテンツを 4 つのレイアウトスタイルで表示します。カルーセル（スライドショー）、タブ（整理されたセクション）、グリッド（多列）、ギャラリー（画像の展示）です。

製品写真、プロジェクトポートフォリオ、ケーススタディ画像、リソースコレクション、またはポータルユーザーが閲覧する必要のあるあらゆるビジュアルコンテンツを表示するために使用します。コードなしで、Experience Builder でレイアウトスタイル、ナビゲーション、画像ソースを設定できます。

商品カタログ、ビジュアルポートフォリオ、画像ライブラリ、ビフォーアフターの展示など、ポータルに魅力的な画像やコンテンツ表示が必要なあらゆる場面に最適です

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJToiKLlnA4RZIeE7I0Ni%2F2024-02-07_21-13-18%20(1).gif?alt=media&#x26;token=76515588-cbb1-4dcc-9004-5001d1189ff5" alt=""><figcaption></figcaption></figure>

***

## はじめに

このシンプルなチュートリアルを使って、ギャラリーコンポーネントの基本を学び、ユースケースの構築を始めましょう。

{% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="<https://app.arcade.software/share/QrGyk84126ycSIM6P0oX>" %}

***

## Salesforce データに接続する

データソースは、カルーセルのコンテンツを定義する場所です。データソースには主に 2 種類あります。 **手動** と **クエリ**.

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F81HTiPtGZjjWPmHbMDF5%2F2024-02-07_21-14-11.png?alt=media&#x26;token=2179494c-b3d0-4570-b763-3f336626fb55" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>データソース種別</th><th width="248.33333333333331">説明</th><th>使用するタイミング</th></tr></thead><tbody><tr><td><strong>手動データソース</strong></td><td>ギャラリー項目のデータを手動で入力します。静的コンテンツや事前定義された項目に便利です。</td><td>頻繁に変更されないコンテンツや、特定の項目を使って素早く設定したい場合に最適です。</td></tr><tr><td><strong>クエリデータソース</strong></td><td>クエリを通じてデータを取得し、Salesforce からさまざまなレコード/データポイントを読み込めるようにします。</td><td>複雑なデータ取得や、ソースが必要な場合に最適です。</td></tr></tbody></table>

## **バリアントの設定**

### **カルーセル**

カルーセルバリアントは、コンテンツ、画像、カードを動的かつ魅力的に紹介する方法を提供します。項目をスライドショー形式で順番に表示するよう設計されており、注目のコンテンツ、製品画像、重要なお知らせを強調するのに最適です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FSDPeJtaR0mY1bFLE2Dic%2F2024-02-07_21-17-09.png?alt=media&#x26;token=76edae56-e5be-4800-9299-e0ce0c69c213" alt=""><figcaption></figcaption></figure>

**使用するタイミング:** 次のような場合にカルーセルバリアントを使用します:

* 視覚的に魅力的なプレゼンテーションでユーザーの注意を引く。
* 複数の項目や画像を省スペースで表示する。
* サイト上に回転バナーや注目コンテンツのセクションを作成する。

**機能:**

* **ナビゲーションコントロール:** 矢印ボタンやページネーションのドットなど、直感的なコントロールでカルーセルを操作できます。
* **自動再生オプション:** 項目を自動的に循環するように設定し、一時停止や再開も可能です。
* **カスタマイズ可能な外観:** トランジション効果や表示時間などの要素を調整して、サイトのデザインに合うようカルーセルの見た目を調整できます。

### **タブ**

タブバリアントは、整理されたタブ形式のコンテンツ表示を実現します。このバリアントは情報を分類するのに最適で、ユーザーがさまざまなコンテンツセクションをすばやく移動してアクセスできる、すっきりした構造化レイアウトを提供します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXPjifQ0PqC8J5k1SVBrq%2F2024-02-07_21-18-03.png?alt=media&#x26;token=88201252-88f4-4360-8cf7-135bab8bf714" alt=""><figcaption></figcaption></figure>

**使用するタイミング:** 次のような必要がある場合は、タブバリアントを検討してください:

* 分類された情報を、明確で区切られた形式で提示する。
* ユーザーがページを離れずに、異なるコンテンツセクションを簡単に切り替えられるようにする。
* 製品仕様、サービスカテゴリ、案内タブなどのコンテンツを、使いやすく整理する。

**機能:**

* **区分されたコンテンツ:** コンテンツを明確に定義されたタブに整理し、ユーザーが各セクションを見つけて表示しやすくします。
* **ユーザーフレンドリーなナビゲーション:** ユーザーがタブ間をシームレスに切り替えられるようにし、スムーズで直感的な操作を実現します。
* **カスタマイズ可能なデザイン:** タブラベル、レイアウト、配色などの要素を調整して、ブランドやサイトの美観に合わせてタブの外観を変更できます。

### **グリッド**

構造化された多列レイアウトでコンテンツを表示します。各項目はグリッド内のセルを占めます。

**使用するタイミング:** 次のように、各項目を同じ重みで見せたいコレクションの表示に最適です。

* 製品一覧
* チームメンバープロフィール
* ブログ記事のプレビュー

**機能**

* 列数をカスタマイズ可能
* 項目間の間隔（ギャップ）を定義可能
* 各グリッドセル内に画像、タイトル、説明、CTA ボタンを配置するオプション

### **ギャラリー**

画像を中心に目立たせる、ビジュアル重視のレイアウトです。

**使用するタイミング:** 次のような画像ベースのコンテンツを強調するのに最適です。

* 写真ポートフォリオ
* 製品ギャラリー
* 画像中心の注目コンテンツ

**機能**

* 大きく高品質な画像に重点を置く
* 画像を拡大表示するためのキャプションやライトボックス機能を含めるオプション
* クリエイティブなレイアウトやホバー効果の可能性

## インタラクション

「リンク先」セクションでは、ユーザーが Avonni ギャラリー内の項目をクリックしたときに何が起こるかを決定します。これを使って、ユーザーを詳細ページに誘導したり、新しいコンテンツを開いたり、他のアクションをトリガーしたりできます。

**例:**

* たとえば、注目の住宅をギャラリーで紹介し、各画像をクリックすると別ページで詳細を表示できるようにします。

***

## スタイルと外観

Avonni ギャラリーのスタイル属性を確認しましょう。カルーセルバリアントでもタブバリアントでも、コンテンツの見た目を洗練させるために設計されています。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtiBUANZLlzY5aTG4C29z%2F2024-02-07_21-18-53.png?alt=media&#x26;token=5eb49b41-6c43-4f90-bc97-acc5b1fabce7" alt=""><figcaption></figcaption></figure>

1. **サイズ:** ギャラリーの全体寸法を調整し、レイアウトにぴったり収まるようにします。
2. **境界線:** 境界線のスタイル、幅、色をカスタマイズして、ギャラリーコンテンツを効果的に縁取ります。
3. **キャプション:** 各項目に関連付けられたキャプションテキストのスタイルを整え、明確さと強調を高めます。
4. **タイトル:** 各ギャラリー項目のタイトルテキストを変更して、目立たせたりサイトのテーマに合わせたりできます。
5. **各ギャラリー項目のメインコンテンツ領域の外観を調整して、** 統一感のあるビジュアル表現を確保します。
6. **メディア:** メディア（画像または動画）の表示方法をカスタマイズし、ギャラリー全体のデザインに調和させます。
7. **スライドショー項目:** 背景、配置、間隔を含め、カルーセル内の個々の項目をスタイル設定します。
8. **スライドショー項目タイトル:** カルーセル項目内のタイトルの外観をカスタマイズし、即時の印象と認識性を高めます。
9. **スライドショー項目説明:** 読みやすさを向上させるため、カルーセル項目の説明文のフォント、サイズ、色を調整します。
10. **スライドショー画像:** 視覚的な一貫性のため、カルーセル内の画像のサイズと境界線を調整します。
11. **スライドショーアクティブインジケーター:** 現在表示中の項目のインジケーターを目立つように、かつ明確にスタイル設定します。
12. **スライドショー非アクティブインジケーター:** 非アクティブな項目のインジケーターをカスタマイズし、カルーセル内をスムーズに移動できるようにします。
13. **スライドショーナビゲーションボタン:** ナビゲーションボタンの外観を調整し、使いやすく、ギャラリーのスタイルに合うようにします。
14. **タブ:** アクティブなコンテンツセクションと非アクティブなコンテンツセクションを区別するために、個々のタブをスタイル設定します。
15. **タブ境界線:** 各タブの境界線をカスタマイズして、明確な区切りと視覚的な魅力を持たせます。
16. **アクティブ/ホバー時のタブ境界線:** アクティブまたはホバー中のタブの境界線をスタイル設定し、ユーザーの操作を視覚的に誘導します。
17. **タブ背景:** サイト全体のテーマに合わせて、タブの背景色や画像を調整します。
18. **タブラベル:** 明瞭さと視覚的な調和のために、タブラベルのフォント、サイズ、色をカスタマイズします。
19. **タブサブタイトル:** 補足的な文脈や情報を一体感のある形で提供するために、タブのサブタイトルの外観を調整します。

***

## ユースケース例

### 例 1: 顧客ニュースカルーセル

{% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="<https://app.arcade.software/share/pOjxSsq8rQ3YgZFvjMgr>" %}

Experience Cloud のホームページに最新の記事を直接表示して、顧客に情報を提供し、関心を維持しましょう。AX Gallery コンポーネントを使うと、新しいコンテンツが公開されるたびに自動更新される、画像豊富な動的ニュースカルーセルを簡単に表示できます。

***

#### **実現できること**

* **ひと目でわかる新鮮なコンテンツ:** 画像付きで最新の Knowledge 記事をホームページに表示し、訪問者が更新を見逃さないようにします。
* **簡単な閲覧:** 会社ニュースを、すっきり整理されたカルーセルレイアウトで顧客に見せます。
* **対象を絞ったフィルタリング:** カスタムピックリストフィールドを活用して News 記事のみを表示し、カルーセルを集中した関連性の高い内容に保ちます。

***

#### **始める前に**

* **`ImageId__c` フィールド:** Knowledge オブジェクトに Text フィールドを作成し、各記事の画像の Content Document ID を保存します。
* **`Type__c` フィールド:** Knowledge オブジェクトに Picklist フィールドを作成して記事を分類し、 **News** 値が存在し、記事に適用されていることを確認します。

***

#### **セットアップ方法**

{% stepper %}
{% step %}

#### **コンポーネントをページに追加する**

* 次をドラッグします **AX Gallery** コンポーネントを Experience Builder の目的のページに配置します。
  {% endstep %}

{% step %}

#### **コンポーネントの表示をカスタマイズする**

* を設定 **タイトル** を `ニュースカルーセル`.
* を設定 **キャプション** を `毎週の記事をご覧ください`.
* を設定 **列数** を `3`.
  {% endstep %}

{% step %}

#### **データソースを設定する**

* データソース設定で新しいクエリを作成します。
* 選択 **Knowledge** をオブジェクトとして指定します（一覧の 2 つ目の Knowledge オプションを必ず選択してください）。
* フィルターを追加: **Type\_\_c が次と等しい** `News`.
* 並び順を次に設定します **作成日、降順** これにより、最新の記事が常に最初に表示されます。
  {% endstep %}

{% step %}

#### **データマッピングを設定する**

* をマップする **タイトル** Knowledge の `タイトル` フィールドに。
* をマップする **メディアソース** を `ImageId__c` を使って記事画像を取り込みます。
* を設定 **再生レート** を `5`.
  {% endstep %}

{% step %}

#### **作業をプレビューする**

* 公開前に Experience Builder のプレビューを使って、カルーセルに正しい記事、画像、レイアウトが表示されることを確認します。
  {% endstep %}
  {% endstepper %}

***

### 例 2: 顧客向け製品ギャラリー

{% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="<https://app.arcade.software/share/aIu9ZNuteXdewe19LJL0>" %}

ホームページから直接、製品カタログを視覚的に魅力的に発見できる体験を顧客に提供します。AX Gallery コンポーネントと Product データを組み合わせることで、注目製品を強調し、訪問者を製品詳細ページへ直接誘導する、目を引くカルーセルを作成できます。

***

#### **実現できること**

* **ビジュアルな製品展示:** 豊富な画像を前面に出したカルーセルで注目のヘッドホンを表示し、閲覧を促します。
* **シームレスなナビゲーション:** 顧客がカルーセルから個々の製品詳細ページへ簡単に移動できるようにします。
* **厳選されたホームページ体験:** ホームページに注目のカタログだけを表示し、最も重要な製品を強調します。

***

#### **始める前に**

* **`Type__c` フィールド:** Product2 オブジェクトに Picklist フィールドを作成し、 **Headphone** 値が存在することを確認して、カルーセルを適切な製品に絞り込めるようにします。
* **`ContentDocumentId__c` フィールド:** Product2 オブジェクトに Text フィールドを作成し、各製品の画像 URL を保存します。

***

#### **セットアップ方法**

{% stepper %}
{% step %}

#### **コンポーネントをページに追加する**

* 次をドラッグします **AX Gallery** コンポーネントを Experience Builder の目的のページに配置します。
  {% endstep %}

{% step %}

#### **コンポーネントの表示をカスタマイズする**

* を設定 **タイトル** を `製品カルーセル`.
* を設定 **キャプション** を `注目の製品をご覧ください！`
* を設定 **列数** を `3`.
  {% endstep %}

{% step %}

#### **データソースを設定する**

* データソース設定で新しいクエリを作成します。
* 選択 **Product** をオブジェクトとして。
  {% endstep %}

{% step %}

#### **データマッピングを設定する**

* をマップする **タイトル** を `製品名` フィールドに。
* をマップする **メディアソース** を `ContentDocumentId__c` に設定して、各製品の画像を表示します。
* を設定 **再生レート** を `5`.
  {% endstep %}

{% step %}

#### **作業をプレビューする**

* 公開前に Experience Builder のプレビューを使用して、製品、画像、カルーセルのレイアウトが期待どおりに表示されることを確認します。
  {% endstep %}
  {% endstepper %}