ビジュアルピッカーリンク

Avonni Picker Link は、ユーザーを外部コンテンツ（ウェブサイト、ドキュメント、リソースなど）に視覚的に魅力的な方法でつなぐ動的でクリック可能なコンポーネントです。

Visual Picker Link の設定

ステップ 1: Picker Link を追加

用途: ここで Picker Link をフローに配置し、その役割を与えます。これは土台です—ただのリンクを、ユーザーが目に留めてクリックしたくなるものに変えます。

• 方法: ドラッグして Visual Picker Link コンポーネントを Elements パネルからフローのキャンバスへ移動します。

• 理由: 目立つクリック可能なスポットを用意します—外部コンテンツへと導くカラフルな道標のように。

• 例: トレーニング動画やサポートページへリンクするためにダッシュボードへ追加します。

得られるもの: フロー内で稼働しており、コンテンツとスタイルの適用を待つ、カスタマイズ可能なリンク。

ステップ 2: コンテンツを追加

コンテンツは Picker Link の核心です—ユーザーが見てクリックする対象です。タイトルと説明を追加すると、何へのリンクかが明確になり、謎のボタンから招き入れるゲートウェイへと変わります。

• 方法: 次を入力します タイトル 値を参照するフィルターを追加します： コンテンツ プロパティパネルのフィールド。

• オプション:

  • タイトル: 短くてキャッチーな名前を付けます。

    • 理由: タイトルは見出しであり、注意を引き、リンクの目的を要約します。

    • 例: 会社の記事へのリンクなら「ブログを見る」。

  • コンテンツ: タイトルの下に簡潔な説明を追加します。

    • 理由: 追加の背景を提供—クリック時に何が起こるかを伝え、信頼を築きます。

    • 例: 「ブログを見る」のタイトルの下に「最新のヒントと更新情報をご覧ください」。

• 設定例:

  • タイトル: 「ガイドをダウンロード」

  • コンテンツ: 「ベストプラクティスの無料PDFを入手」

  • 結果: ダウンロード可能なファイルへの明確で魅力的なリンク。

得られるもの: 自己説明的な Picker Link—ユーザーは行き先を正確に理解できます。

ステップ 3: アイコンを追加（任意）

アイコンは Picker Link に視覚的なきらめきを加え、より目を引き記憶に残るものにします。小さな旗のようにユーザーを視覚的に惹きつけ、リンクとその内容を結び付けます。

• 方法: プロパティパネルでアイコンを有効にし、配置を選択します。

• オプション:

  • 配置: アイコンをコンテンツの左または右に配置します。

    • 理由: 左側のアイコンは自然に視線を導き（強調に最適）、右側のアイコンはテキストを引き立てます（さりげない演出）。

    • 例: 「当社サイトを見る」では左に「地球」アイコンを置くと力強く感じられ、右側では穏やかな後押しになります。

  • アイコンの選択: Salesforce のアイコンライブラリから選びます（例: 「world」「document」「arrow」）。

    • 理由: リンクの目的に合うアイコンを選び、言葉なしで意味を補強します。

    • 例: 「アプリを入手」には「ダウンロード」矢印を使い、アプリストアへのリンクを示します。

• 例: 「リソースを探す」の左に「リンク」アイコンを追加して、外部コンテンツを示唆します。

得られるもの: 視覚的に映える Picker Link—アイコンで魅力的かつ素早く認識できます。

ステップ 4: インタラクションを追加

インタラクションは、ユーザーが Picker Link をクリックしたときの動作を決めます—静的なラベルを外部コンテンツへの能動的な橋に変えます。ここでアクションを定義し、フローにシームレスに組み込みます。

• 方法: 次を開いて Interactions Panel ユーザーの操作で何がトリガーされるかを設定します。

• 利用可能なインタラクション:

  • クリック時: Picker Link がクリックされたときにアクションを発火します。

    • 理由: クリックを意味のある動作に結び付けます—URL を開いたりフローのステップを実行したりして、目的を与えます。

    • 例: 「クリック時」を設定して、ユーザーが「リソースを探す」をクリックしたときに www.example.com/resources を新しいタブで開きます。

    • 設定方法:

      1. インタラクションパネルで「クリック時」を選択します。

      2. アクションを選びます（例: 「URL に移動」）。

      3. 遷移先を入力します（例: Web サイトやファイルのリンク）。

• その他のオプション: 追加の可能性について、インタラクション一覧を確認します（例: フローのトリガーやモーダルの表示）。

得られるもの: 何かを実行する Picker Link—クリックで狙いどおりの場所へ、スムーズかつ確実に移動できます。

---