> ## Documentation Index
> Fetch the complete documentation index at: https://ai-kb.automationanywhere.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> プロジェクトリソースを活用した、ノーコードのドラッグ＆ドロップビルダーによるカスタムマルチページアプリケーションを構築しましょう。

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

<CardGroup cols={2}>
  <Card title="マルチページアプリケーション" icon="layer-group">
    各ページが異なる機能を提供し、カスタムナビゲーションで構成された、複数ページのインターフェースを作成します。
  </Card>

  <Card title="ドラッグ＆ドロップキャンバス" icon="objects-column">
    AI、データ、アクション、コンテンツのウィジェットライブラリを使用した12カラムグリッドでページを構築します。
  </Card>

  <Card title="カスタムブランディング" icon="palette">
    ロゴ、カラー、ナビゲーションレイアウト、favicon、CSS をブランドに合わせてカスタマイズします。
  </Card>

  <Card title="公開と共有" icon="globe">
    パブリック URL 経由でインターフェースを公開し、メンバーのアクセスを管理します。
  </Card>
</CardGroup>

## 主要コンセプト

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

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

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

  <Accordion title="ウィジェット" icon="puzzle-piece">
    ウィジェットは、ページの構成要素であり、12カラムのドラッグ＆ドロップグリッドに配置されます。完全な一覧については、下記の[ウィジェットライブラリ](#widget-library)セクションを参照してください。
  </Accordion>
</AccordionGroup>

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

<Tabs>
  <Tab title="AI">
    | ウィジェット         | 説明               |
    | -------------- | ---------------- |
    | **Chat**       | エージェントとの AI チャット |
    | **Agent Card** | エージェント選択カード      |
  </Tab>

  <Tab title="Data">
    | ウィジェット             | 説明                           |
    | ------------------ | ---------------------------- |
    | **Smart Table**    | テーブル、レビュー、カンバン、またはダッシュボードビュー |
    | **Dashboard**      | Smart Table 分析ダッシュボード        |
    | **Knowledge Base** | ナレッジの閲覧と検索                   |
    | **Analytics**      | 使用状況分析とフィードバック               |
    | **Chart**          | データ可視化チャート                   |
    | **Data Grid**      | Smart Table からのテーブルデータ       |
    | **Filter**         | ドロップダウンまたは検索フィルター            |
    | **Form Field**     | テキスト、数値、日付、またはチェックボックス入力     |
    | **Record Picker**  | Smart Table からレコードを選択        |
  </Tab>

  <Tab title="Actions">
    | ウィジェット                | 説明               |
    | --------------------- | ---------------- |
    | **Actions**           | 利用可能なアクションの一覧    |
    | **Action Form**       | フォームとしての単一アクション  |
    | **Workflow Runs**     | ワークフロー実行ステータスと履歴 |
    | **Execution History** | ワークフロー実行履歴       |
  </Tab>

  <Tab title="Content">
    | ウィジェット           | 説明                 |
    | ---------------- | ------------------ |
    | **Document**     | ドキュメントビューアおよびエディタ  |
    | **Meetings**     | 会議の文字起こしとメモ        |
    | **JSON Builder** | 構造化 JSON エディタ      |
    | **Text**         | リッチテキストコンテンツ       |
    | **Button**       | アクション付きインタラクティブボタン |
    | **Image**        | 画像の表示              |
    | **Number / KPI** | 指標または KPI の表示      |
  </Tab>
</Tabs>

## はじめに

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

<Steps>
  <Step title="Interfaces に移動する">
    プロジェクトサイドバーで **Interfaces** をクリックします。
  </Step>

  <Step title="新しいインターフェースを作成する">
    * まだインターフェースが存在しない場合は、ページ中央の **+ Create Your First Interface** をクリックします。
    * 既にインターフェースが存在する場合は、右上の **+ New Interface** をクリックします。
  </Step>

  <Step title="インターフェースに名前を付ける">
    **New Interface** モーダルが表示されます。名前を入力し、**Create** をクリックします。Interface Builder に移動します。
  </Step>
</Steps>

### Interface Builder のレイアウト

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

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

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

<CardGroup cols={2}>
  <Card title="元に戻す / やり直す" icon="rotate-left">
    変更を段階的に遡行または先行します。
  </Card>

  <Card title="レスポンシブビュー" icon="mobile">
    デスクトップ、タブレット、モバイルのプレビューを切り替えます。
  </Card>

  <Card title="編集 / プレビュー" icon="eye">
    編集モードとビルダー内プレビューを切り替えます。
  </Card>

  <Card title="フルプレビュー" icon="arrow-up-right-from-square">
    エンドユーザーが表示するのと同じ形式で、新しいタブでインターフェースを開きます。
  </Card>

  <Card title="コマンドパレット (⌘K)" icon="terminal">
    キーボードでビルダーアクションに素早くアクセスします。
  </Card>

  <Card title="公開 / 保存" icon="cloud-arrow-up">
    作業を保存するか、インターフェースをパブリック URL に公開します。
  </Card>
</CardGroup>

## ページの構築

### ページの追加

<Steps>
  <Step title="新規ページモーダルを開く">
    左サイドバーの **PAGES** の横にある **+** をクリックします。
  </Step>

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

    <CardGroup cols={2}>
      <Card title="Blank Page" icon="file">
        空のキャンバスからゼロから始めます。
      </Card>

      <Card title="Analytics Dashboard" icon="chart-bar">
        KPI カード、チャート、および最近のアクティビティテーブル。
      </Card>

      <Card title="Action Form" icon="bolt">
        アクションをトリガーする中央揃えフォーム。
      </Card>

      <Card title="Table View" icon="table">
        ヘッダー付きのフル幅データテーブル。
      </Card>

      <Card title="Chat Workspace" icon="message">
        サイドバーコンテキスト付きの埋め込みチャット。
      </Card>

      <Card title="Agents Hub" icon="robot">
        ヘッダーとフィルター付きのエージェントカードグリッド。
      </Card>

      <Card title="Actions Panel" icon="list">
        利用可能なすべてのアクションの検索可能なグリッド。
      </Card>

      <Card title="Chat + Table" icon="table-columns">
        サイドバイサイドのチャットとデータビュー。
      </Card>
    </CardGroup>
  </Step>

  <Step title="ページに名前を付ける">
    モーダルの下部にページ名を入力します（デフォルトではテンプレート名になります）。
  </Step>

  <Step title="ページを作成する">
    **Create Page** をクリックします。ページがインターフェースに追加され、キャンバスで開かれます。
  </Step>
</Steps>

### ウィジェットの追加

<Steps>
  <Step title="ウィジェットを見つける">
    左側の **Widgets** パネルで、カテゴリ別に閲覧するか、検索バーを使用します。
  </Step>

  <Step title="キャンバスに追加する">
    ウィジェットをキャンバスにドラッグするか、クリックして自動的に配置します。
  </Step>

  <Step title="配置とリサイズ">
    12カラムグリッド上でウィジェットを移動およびリサイズし、目的のレイアウトを実現します。
  </Step>

  <Step title="ウィジェットを設定する">
    ウィジェットを選択すると、右パネルで設定が開かれます。
  </Step>
</Steps>

### ページの管理

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

<AccordionGroup>
  <Accordion title="名前の変更" icon="pen">
    **Rename** をクリックすると、ページ名がサイドバー内でインライン編集可能なテキストフィールドに変わります。新しい名前を入力して確定します。
  </Accordion>

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

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

  <Accordion title="ページの並べ替え" icon="arrows-up-down">
    ページリストのページをクリックしてドラッグし、並べ替えます。この順序は、公開されたインターフェースのナビゲーション順序を決定します。
  </Accordion>

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

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

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

  <Tab title="フルプレビュー">
    右上の **Full Preview** をクリックすると、エンドユーザーが表示するのと同じ形式で、新しいブラウザタブでインターフェースが開きます。これは、ビルダー環境の外で、サイドバーナビゲーション、ブランディング、およびすべてのページを含む完全なインターフェースをレンダリングします。
  </Tab>
</Tabs>

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

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

<Tabs>
  <Tab title="General">
    | 設定                | 説明                      |
    | ----------------- | ----------------------- |
    | **Display title** | サイドバーヘッダーに表示されるテキスト     |
    | **Logo URL**      | 正方形画像、256×256 の PNG を推奨 |
  </Tab>

  <Tab title="Navigation">
    **Navigation layout** — エンドユーザーがページ間を移動する方法を制御します：

    | レイアウト        | 説明                                   |
    | ------------ | ------------------------------------ |
    | **Sidebar**  | 左側の縦型メニュー — ページが多いアプリに最適             |
    | **Top bar**  | コンテンツの上の横型ナビゲーション — ランディングページ風のデザインに |
    | **Floating** | ドロワーハンバーガーメニュー — キャンバススペースを最大化       |
    | **No nav**   | シングルページモード — ページ内のボタンを使用してナビゲート      |

    **Initial state** — サイドバーが **Expanded**（展開）か **Collapsed**（折りたたみ）かを設定します。

    **Active page indicator** — 選択されたページのビジュアルスタイル：

    * **Pill**: 塗りつぶし背景
    * **Soft**: 薄色背景
    * **Bar**: 左侧アクセントライン
  </Tab>

  <Tab title="Colors">
    | 設定                         | 説明                                                   |
    | -------------------------- | ---------------------------------------------------- |
    | **Primary color**          | ボタン、リンク、アクティブステートに使用 — 16進数値を入力するか、プリセットスウォッチから選択します |
    | **Accent color** *（オプション）* | サイドバーのアクセントカラー。デフォルトはプライマリカラー                        |

    **Live Preview** は変更がリアルタイムで更新されます。
  </Tab>

  <Tab title="Advanced">
    | 設定              | 説明                          |
    | --------------- | --------------------------- |
    | **Favicon URL** | ブラウザタブアイコン — ICO または PNG 形式 |
    | **Custom CSS**  | 高度なスタイリング用にランタイムルートに適用      |
  </Tab>
</Tabs>

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

## 公開

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

<Steps>
  <Step title="公開モーダルを開く">
    Interface Builder の右上の **Publish** をクリックします。
  </Step>

  <Step title="パブリック URL を設定する">
    インターフェースの URL スラッグを入力します。小文字の英数字とハイフンのみ使用できます。
  </Step>

  <Step title="メンバーのアクセスを管理する">
    **Manage Member Access** の下で、このインターフェースへのアクセス権を持つユーザーを確認または追加します。
  </Step>

  <Step title="Web に公開する">
    **Publish to web** をクリックします。インターフェースが公開され、パブリック URL からアクセスできるようになります。
  </Step>
</Steps>

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

## コマンドパレット

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

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

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

## ユースケース

<CardGroup cols={3}>
  <Card title="カスタマーサポート" icon="headset">
    **Chat Workspace** — エージェントコンテキスト付きのサポートチャット

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

    **Action Form** — チケットまたはリクエストの送信
  </Card>

  <Card title="データ管理" icon="database">
    **Analytics Dashboard** — KPI カードとチャート

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

    **Custom Page** — レポート用チャートと KPI ウィジェット
  </Card>

  <Card title="ワークフロー自動化" icon="gears">
    **Actions Panel** — ワークフローの閲覧と実行

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

    **Analytics Dashboard** — 主要指標と実行履歴
  </Card>
</CardGroup>

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

<AccordionGroup>
  <Accordion title="インターフェースが表示されない" icon="circle-question">
    **考えられる原因：**

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

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

  <Accordion title="ページが読み込まれない" icon="triangle-exclamation">
    **考えられる原因：**

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

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

  <Accordion title="未保存の変更の警告" icon="floppy-disk">
    保留中の変更があると、トップバーに**未保存の変更**インジケータが表示され、**Save** ボタンがオレンジ色に変わります。

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

  <Accordion title="公開モーダルの警告バナー" icon="bell">
    未保存の変更を公開しようとした場合に表示されます。

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

## 次のステップ

<CardGroup cols={2}>
  <Card title="Agents" icon="robot" href="/agents/agents">
    Chat ウィジェットを駆動するエージェントを設定します。
  </Card>

  <Card title="Smart Tables" icon="table" href="/knowledge-base/smart-tables">
    データウィジェットやダッシュボード用の Smart Table を設定します。
  </Card>

  <Card title="Workflows" icon="gears" href="/tools/workflows-v2">
    Action ウィジェットで使用するワークフローを構築します。
  </Card>

  <Card title="Knowledge Base" icon="book" href="/knowledge-base/kb-overview">
    KB ウィジェット用のナレッジベースを管理します。
  </Card>
</CardGroup>