メインコンテンツへスキップ

プロジェクト用のカスタムインターフェースを作成する

Interfaces は、プロジェクト管理者が既存のプロジェクトリソース — エージェント、チャット、スマートテーブル、ダッシュボード、ナレッジベース、アクション、ワークフロー、ドキュメント、会議 — の上にカスタムのマルチページアプリケーションを作成できるノーコードアプリビルダーです。デフォルトのチャット体験の代わりに、複数のページ、ドラッグ＆ドロップウィジェット、カスタムブランディング、共有可能なパブリック URL を備えた、目的に合わせたインターフェースを構築できます。

マルチページアプリケーション

各ページが異なる機能を提供し、カスタムナビゲーションで構成された、複数ページのインターフェースを作成します。

ドラッグ＆ドロップキャンバス

AI、データ、アクション、コンテンツのウィジェットライブラリを使用した12カラムグリッドでページを構築します。

カスタムブランディング

ロゴ、カラー、ナビゲーションレイアウト、favicon、CSS をブランドに合わせてカスタマイズします。

公開と共有

パブリック URL 経由でインターフェースを公開し、メンバーのアクセスを管理します。

主要コンセプト​

インターフェース

インターフェースは、プロジェクトの完全なユーザーエクスペリエンスを構成するページのコレクションです。各プロジェクトは複数のインターフェースを持っています。

プロパティ説明
Nameインターフェースの表示名
Publishedパブリック URL 経由でエンドユーザーに利用可能かどうか
Brandingカスタムロゴ、カラー、ナビゲーションレイアウト、favicon、CSS
ページ

ページは、インターフェース内の単一の画面です。各ページには名前、アイコン、ナビゲーション内の位置があります。ページはウィジェットをキャンバスにドラッグして構築し、事前ビルドされたテンプレートから作成することもできます。

ウィジェット

ウィジェットは、ページの構成要素であり、12カラムのドラッグ＆ドロップグリッドに配置されます。完全な一覧については、下記のウィジェットライブラリセクションを参照してください。

ウィジェットライブラリ​

ウィジェット説明
Chatエージェントとの AI チャット
Agent Cardエージェント選択カード

はじめに​

インターフェースの作成​

  1. Interfaces に移動する

    プロジェクトサイドバーで Interfaces をクリックします。

  2. 新しいインターフェースを作成する
    • まだインターフェースが存在しない場合は、ページ中央の + Create Your First Interface をクリックします。
    • 既にインターフェースが存在する場合は、右上の + New Interface をクリックします。
  3. インターフェースに名前を付ける

    New Interface モーダルが表示されます。名前を入力し、Create をクリックします。Interface Builder に移動します。

Interface Builder のレイアウト​

Interface Builder 内では、3つの主要なエリアが表示されます：

エリア説明
Left Sidebarページリストと Widgets パネル
Canvasページの編集エリア — ウィジェットをここにドラッグして構築します
Right Panel選択されたウィジェットの設定

トップバーには、以下のコントロールがあります：

元に戻す / やり直す

変更を段階的に遡行または先行します。

レスポンシブビュー

デスクトップ、タブレット、モバイルのプレビューを切り替えます。

編集 / プレビュー

編集モードとビルダー内プレビューを切り替えます。

フルプレビュー

エンドユーザーが表示するのと同じ形式で、新しいタブでインターフェースを開きます。

コマンドパレット (⌘K)

キーボードでビルダーアクションに素早くアクセスします。

公開 / 保存

作業を保存するか、インターフェースをパブリック URL に公開します。

ページの構築​

ページの追加​

  1. 新規ページモーダルを開く

    左サイドバーの PAGES の横にある + をクリックします。

  2. テンプレートを選択する

    カテゴリでフィルター（All Templates、Start、Starter、Advanced）し、利用可能なテンプレートから1つ選択します。

    Blank Page

    空のキャンバスからゼロから始めます。

    Analytics Dashboard

    KPI カード、チャート、および最近のアクティビティテーブル。

    Action Form

    アクションをトリガーする中央揃えフォーム。

    Table View

    ヘッダー付きのフル幅データテーブル。

    Chat Workspace

    サイドバーコンテキスト付きの埋め込みチャット。

    Agents Hub

    ヘッダーとフィルター付きのエージェントカードグリッド。

    Actions Panel

    利用可能なすべてのアクションの検索可能なグリッド。

    Chat + Table

    サイドバイサイドのチャットとデータビュー。

  3. ページに名前を付ける

    モーダルの下部にページ名を入力します（デフォルトではテンプレート名になります）。

  4. ページを作成する

    Create Page をクリックします。ページがインターフェースに追加され、キャンバスで開かれます。

ウィジェットの追加​

  1. ウィジェットを見つける

    左側の Widgets パネルで、カテゴリ別に閲覧するか、検索バーを使用します。

  2. キャンバスに追加する

    ウィジェットをキャンバスにドラッグするか、クリックして自動的に配置します。

  3. 配置とリサイズ

    12カラムグリッド上でウィジェットを移動およびリサイズし、目的のレイアウトを実現します。

  4. ウィジェットを設定する

    ウィジェットを選択すると、右パネルで設定が開かれます。

ページの管理​

ページオプションにアクセスするには、サイドバーのページにカーソルを合わせ、表示される ⋯（3点メニュー）をクリックします。これにより、以下のオプションが利用できます：

名前の変更

Rename をクリックすると、ページ名がサイドバー内でインライン編集可能なテキストフィールドに変わります。新しい名前を入力して確定します。

アイコンの変更

Change icon をクリックすると、ページ名の下にアイコンピッカーが開きます。アイコンをクリックすると即座に適用されます — 保存ステップは不要です。

グループに追加

Add to group をクリックすると、テキスト入力付きのインラインパネルが開きます。グループ名（例：「Admin」、「Reports」）を入力し、Save をクリックすると、ナビゲーション内でページをラベル付きグループに整理できます。ページをグループから削除するには、フィールドを空のまま Save をクリックします。

ページの並べ替え

ページリストのページをクリックしてドラッグし、並べ替えます。この順序は、公開されたインターフェースのナビゲーション順序を決定します。

削除

Delete をクリックすると、ブラウザの確認ダイアログが表示されます：「Delete this page? This cannot be undone.」OK をクリックして確認するか、Cancel をクリックして中止します。インターフェースには常に少なくとも1つのページが必要です。

インターフェースのプレビュー​

トップバーの Edit / Preview トグルを使用して、編集モードと現在のページのビルダー内プレビューを切り替えます。これは、ビルダーを離れることなく、構築中のレイアウトを確認するのに便利です。

インターフェースブランディング​

トップバーのインターフェース名の横にあるパレットアイコンをクリックすると、Interface Branding モーダルが開きます。

設定説明
Display titleサイドバーヘッダーに表示されるテキスト
Logo URL正方形画像、256×256 の PNG を推奨

Save Branding をクリックして変更を適用します。

公開​

警告

保存と公開は別の操作です。公開する前に常に変更を保存してください。未保存の変更がある状態で公開モーダルを開くと、警告バナーが表示され、先に保存するよう促されます。

  1. 公開モーダルを開く

    Interface Builder の右上の Publish をクリックします。

  2. パブリック URL を設定する

    インターフェースの URL スラッグを入力します。小文字の英数字とハイフンのみ使用できます。

  3. メンバーのアクセスを管理する

    Manage Member Access の下で、このインターフェースへのアクセス権を持つユーザーを確認または追加します。

  4. Web に公開する

    Publish to web をクリックします。インターフェースが公開され、パブリック URL からアクセスできるようになります。

インターフェースを非公開にするには、公開モーダルを開き、非公開オプションを使用します。

コマンドパレット​

⌘K（Mac）または Ctrl+K（Windows）を押すか、トップバーの ⌘K ボタンをクリックして、コマンドパレットを開きます。

利用可能なコマンド
コマンドショートカット
変更の保存⌘S
Web に公開—
プレビュー切り替え—
ブランディング設定を開く—
テンプレートから新規ページ作成—
元に戻す⌘Z
やり直す⌘⇧Z
ページに切り替えすべてのページをリスト表示し、素早くナビゲート

コマンド、ページ名、またはウィジェット名を入力して検索します。Esc で閉じます。

ユースケース​

カスタマーサポート

Chat Workspace — エージェントコンテキスト付きのサポートチャット

Knowledge Base — ヘルプ記事とドキュメント

Action Form — チケットまたはリクエストの送信

データ管理

Analytics Dashboard — KPI カードとチャート

Table View — レコードレビューフルデータテーブル

Custom Page — レポート用チャートと KPI ウィジェット

ワークフロー自動化

Actions Panel — ワークフローの閲覧と実行

Workflow Runs — 実行ステータスと履歴の追跡

Analytics Dashboard — 主要指標と実行履歴

トラブルシューティング​

インターフェースが表示されない

考えられる原因：

  • インターフェースがまだ公開されていない
  • 異なるプロジェクトを表示している
  • 必要な権限がない

インターフェースの公開ステータスを確認し、正しいプロジェクトにいることを確認してください。

ページが読み込まれない

考えられる原因：

  • ウィジェットの設定が間違っている
  • 参照されているリソース（エージェント、テーブル、アクションなど）が存在しない、またはアクセスできない

右パネルでウィジェットの設定を確認し、参照されているすべてのリソースが利用可能であることを確認してください。

未保存の変更の警告

保留中の変更があると、トップバーに未保存の変更インジケータが表示され、Save ボタンがオレンジ色に変わります。

プレビューまたは公開する前に Save をクリックし、最新の変更が適用されるようにしてください。

公開モーダルの警告バナー

未保存の変更を公開しようとした場合に表示されます。

モーダルを閉じ、Save をクリックし、再度公開モーダルを開いて続行してください。

次のステップ​

Agents

Chat ウィジェットを駆動するエージェントを設定します。

Smart Tables

データウィジェットやダッシュボード用の Smart Table を設定します。

Workflows

Action ウィジェットで使用するワークフローを構築します。

Knowledge Base

KB ウィジェット用のナレッジベースを管理します。