ギャラリー

概要

Avonni ギャラリーコンポーネントは、Experience Cloud サイト上でコンテンツを美しく表示するための4つの柔軟な方法を提供します：

• カルーセル： 画像やコンテンツカードの魅力的なスライドショーを作成します。

• タブ： コンテンツを明確にラベル付けされたセクションに整理して、簡単にナビゲーションできるようにします。

• グリッド： アイテムを整然としたマルチカラムレイアウトで表示します。

• ギャラリー： 視覚的に印象的なショーケースで画像を前面に表示します。

各表示オプションは、サイトのスタイルやニーズに合わせた豊富なカスタマイズを提供します。

Salesforce データへの接続

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

バリアントの設定

カルーセル

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

使用タイミング： カルーセルバリアントは次のような場合に利用してください：

• 視覚的に魅力的な表示でユーザーの注目を集める。

• 複数のアイテムや画像をスペース効率よく表示する。

• サイト上で回転バナーや注目コンテンツセクションを作成する。

機能：

• ナビゲーションコントロール： 矢印ボタンやページネーションドットなどの直感的なコントロールでカルーセルを操作します。

• 自動再生オプション： カルーセルを自動的にアイテムを切り替えるよう設定し、一時停止や再開が可能です。

• カスタマイズ可能な外観： トランジション効果や表示時間などの要素を調整して、サイトのデザインに合わせてカルーセルの見た目と雰囲気を調整します。

タブ

タブバリアントは整理されたタブ形式のコンテンツ提示を導入します。このバリアントは情報をカテゴリ分けして、クリーンで構造化されたレイアウトを提供し、ユーザーが異なるコンテンツセクションに素早くアクセスできるようにするのに最適です。

使用タイミング： タブバリアントは次のような場合に検討してください：

• カテゴリ分けされた情報を明確で区切られた形式で提示する。

• ページを離れることなくユーザーが簡単に異なるコンテンツセクションを切り替えられるようにする。

• 製品仕様、サービスカテゴリ、情報タブなどのコンテンツをユーザーフレンドリーな方法で整理する。

機能：

• セグメント化されたコンテンツ： コンテンツを明確に定義されたタブに整理し、ユーザーが異なるセクションを見つけて表示するのを簡単にします。

• ユーザーフレンドリーなナビゲーション： ユーザーがタブ間をシームレスに切り替えられるようにし、スムーズで直感的な操作を保証します。

• カスタマイズ可能なデザイン： タブラベル、レイアウト、カラースキームなどの要素を変更して、ブランドやサイトの美観に合わせてタブの外観を調整します。

グリッド

コンテンツを構造化されたマルチカラムレイアウトで提示します。各アイテムはグリッド内のセルを占めます。

使用するタイミング： 等しい重み付けで強調したいアイテムのコレクションを表示するのに最適です。例えば：

• 製品一覧

• チームメンバープロフィール

• ブログ投稿のプレビュー

機能

• カラム数をカスタマイズ可能

• アイテム間の間隔（ギャップ）を定義する機能

• 各グリッドセル内の画像、タイトル、説明、コールトゥアクションボタンのオプション

ギャラリー

画像を中心に据えた視覚的なレイアウト。

使用するタイミング： 写真を強調するコンテンツに最適です。例えば：

• 写真家のポートフォリオ

• 製品ギャラリー

• 画像中心の注目コンテンツ

機能

• 大きく高品質な画像に焦点を当てる

• キャプションやライトボックス機能（画像のズーム表示）を含めるオプション

• クリエイティブなレイアウトやホバー効果の可能性

インタラクション

"リンク先" セクションは、ユーザーが Avonni ギャラリーの項目をクリックしたときに何が起こるかを決定します。詳細ページへの誘導、新しいコンテンツの表示、または他のアクションのトリガーに使用します。

例：

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

スタイリングの外観

カルーセルやタブバリアントを使用している場合でも、Avonni ギャラリーの視覚的表現を洗練するために設計されたスタイリング属性を確認してください：

1. サイズ： ギャラリー全体の寸法を調整して、レイアウトにぴったり収まるようにします。

2. ボーダー： ギャラリーコンテンツを効果的にフレーム化するために、ボーダースタイル、幅、色をカスタマイズします。

3. キャプション： 各項目に関連するキャプションテキストをスタイル設定して、明瞭さと強調を図ります。

4. タイトル： 各ギャラリー項目のタイトルテキストを目立たせるか、サイトのテーマに合わせて調整します。

5. コンテンツ： 各ギャラリー項目内のメインコンテンツ領域の外観を調整して、一貫した視覚表現を実現します。

6. メディア： 画像や動画などのメディアの表示方法をカスタマイズし、ギャラリー全体のデザインに調和させます。

7. スライドショー項目： 背景、配置、間隔などを含めて、カルーセル内の個々の項目をスタイル設定します。

8. スライドショー項目のタイトル： 各カルーセル項目内のタイトルの外観をカスタマイズして、即時のインパクトと認識性を高めます。

9. スライドショー項目の説明： 可読性を高めるために、カルーセル項目の説明のフォント、サイズ、色を調整します。

10. スライドショー画像： 視覚的一貫性を保つために、カルーセル内の画像のサイズやボーダーを調整します。

11. スライドショーアクティブインジケーター： 現在表示中の項目のインジケーターを目立たせて区別されるようにスタイル設定します。

12. スライドショー非アクティブインジケーター： 非アクティブな項目のインジケーターをカスタマイズして、カルーセルのナビゲーションをスムーズにします。

13. スライドショーナビゲーションボタン： ナビゲーションボタンの外観を調整して、ユーザーフレンドリーでギャラリーのスタイルに合うようにします。

14. タブ： アクティブおよび非アクティブのコンテンツセクションを区別するために、個々のタブをスタイル設定します。

15. タブボーダー： 明確な区切りと視覚的魅力のために各タブのボーダーをカスタマイズします。

16. アクティブ/ホバー時のタブボーダー： アクティブまたはホバーされたタブのボーダーをスタイル設定して、ユーザーの操作を視覚的に案内します。

17. タブ背景： タブの背景色や背景画像を調整して、サイト全体のテーマに合わせます。

18. タブラベル： タブラベルのフォント、サイズ、色をカスタマイズして、明瞭さと視覚的調和を図ります。

19. タブサブタイトル： タブのサブタイトルの外観を調整して、追加の文脈や情報を一貫して提供します。