# ユーザーインターフェース概要 (/ja/docs/verdent-for-vscode/getting-started/interface) > Verdent のインターフェースコンポーネントとナビゲーションを理解する Verdent for VS Code は、余計な気を散らすものを抑えるように設計された、3つの部分からなるシンプルなインターフェースを備えています。すべての操作は Visual Studio Code サイドバー内で行われ、コードのすぐそばで作業できます。 *** ## Verdent へのアクセス [#verdent-へのアクセス] 次のいずれかの方法で Verdent を開きます。 * **サイドバーアイコン** - Visual Studio Code のアクティビティバー（左サイドバー）にある Verdent アイコンを選択します * **キーボードショートカット** - `Cmd+L`（macOS）または `Ctrl+L`（Windows/Linux）を押します * **コマンドパレット** - `Cmd+Shift+P` / `Ctrl+Shift+P` を押して「Verdent」を検索します パネルは Visual Studio Code サイドバーに開き、必要に応じてサイズ変更、移動、ドッキングができます。 Verdent パネルの端をドラッグしてサイズを変更すると、会話履歴をより多く表示したり、エディターのスペースを広げたりできます。 *** ## インターフェースコンポーネント [#インターフェースコンポーネント] 主要機能にすばやくアクセスできます。 | ボタン | 機能 | | --------------- | ------------------------------------ | | New Session | クリーンなコンテキストで新しい会話を開始します | | Project History | 過去のセッションを閲覧・復元します | | User Center | アカウント情報とクレジット残高を表示します | | Feedback | フィードバックの送信や問題の報告を行います | | Settings | MCP サーバー、サブエージェント、ルール、モデルプリセットを設定します | メインの会話エリアには次の内容が表示されます。 * **AI の応答** - シンタックスハイライト付きのコードブロックを含む整形済みテキスト * **コードの差分** - ファイル変更のインタラクティブな変更前/変更後の比較 * **プラン** - Plan Mode 使用時の構造化されたタスク分解 * **検証結果** - テスト実行の出力とデバッグ情報 * **ファイル操作** - ファイルの作成、編集、削除の確認 * **サブエージェントの出力** - 委任したタスクの結果 チャットビューは会話履歴を完全に保持し、過去のやり取りをスクロールして遡れます。 下部の入力エリアには、リクエストを作成するためのコントロールがあります。 **テキスト入力エリア:** 自然言語のプロンプトを入力するメインのテキストフィールド **アクションボタン:** | ボタン | 機能 | | ------------------------- | --------------------------------------------------------- | | Add Context | @メンションでファイルを参照したり、サブエージェントを呼び出したりします | | Add Images or Files | スクリーンショット、図、ドキュメントを分析用に追加します | | Add Subagent | 専門のサブエージェントにタスクを委任します | | Switch Mode | Agent、Plan、Chat の各モードを切り替えます | | Switch/Customize AI Model | Performance、Balance、Efficiency のプリセットや特定のモデルを選択します | | Think Hard Mode | 複雑な推論のために最大の思考予算を有効にします | | Switch Permission | 権限モード（Manual Accept、Auto-Run、Plan、Skip Permissions）を変更します | | Send | プロンプトを AI モデルに送信します | *** ## ステータスインジケーター [#ステータスインジケーター] Verdent は、視覚的なインジケーターでシステムの状態を伝えます。 チャットビューは、明示的なラベルではなく視覚的な手がかりでステータスを伝えます。 * **処理中インジケーター** - Verdent が実際に動作しているときに視覚的なインジケーターが表示されます。AI がファイルを読み込んだり、コードを分析したり、応答を準備したりしているときに表示されます。 * **生成中のテキスト** - AI が説明、コードの提案、プランを作成する際に、Verdent の応答がリアルタイムで表示されます。ストリーミングされるテキストは、モデルが実際に出力を生成していることを示します。 * **何も起きていない状態** - チャットビューが静止して何の動きもないときは、Verdent が待機しています。つまり、ファイル変更を承認したり、確認の質問に答えたり、次のリクエストを入力したりする必要があります。 入力ボックスのテキストカーソルは、Verdent が新しいリクエストを受け付ける準備ができているかどうかを示します。 * **点滅するカーソル** - 入力ボックスがアクティブで、テキスト入力の準備ができています。リクエストを入力して Send を押せます。これは Verdent が処理を完了し、次のプロンプトを待っているときに表示されます。 * **カーソルなし/無効** - Verdent がリクエストを処理している間、入力ボックスは無効になります。これにより現在のタスクへの割り込みを防ぎ、各リクエストが完了してから次を開始するようにします。 **ワークフローのパターン:** リクエストを送信するとカーソルが消えます（入力が無効になります）。Verdent がタスクを完了するとカーソルが再び表示され、次のリクエストを入力できることを示します。 入力ボックスには、現在の設定を示すインジケーターが表示されます。 * **Switch Permission ボタン** - 現在の権限モードをボタン上のラベルとして表示します。「Manual」「Auto」「Plan」「Skip」のいずれかが表示されます。これにより、リクエストを送信する前にどの実行モードがアクティブかを確認できます。ボタンを選択すると、利用可能なモードを順に切り替えられます。 * **Switch/Customize AI Model ボタン** - 現在選択されているモデルまたはプリセットを表示します。プリセットの場合は「Performance」「Balance」「Efficiency」が、個別のモデルを選択した場合は「Claude 4.5 Sonnet」のような具体的なモデル名が表示されます。これにより、次のリクエストをどの AI モデルが処理するかを確認できます。 これらのインジケーターは現在の設定を一目で確認でき、プロンプトを送信する前に正しい設定になっているかを確かめるのに役立ちます。 ステータスインジケーターはリアルタイムで更新され、Verdent が何をしているかを正確に示すことで、エージェントの動作を把握できます。 *** ## ナビゲーションパターン [#ナビゲーションパターン] トップバーは、機能に応じて異なるナビゲーションパターンを使用します。 **ボタン:** * **New Session** - このボタンを選択すると、現在の会話がすぐにクリアされ、クリーンなコンテキストの新しいチャットビューに戻ります。別のページやポップアップはなく、同じビュー内で瞬時に行われます。 **ページ:** * **Project History** - 過去のすべてのセッションや会話を閲覧できる専用のフルページビューを開きます。チャットビューから移動してセッション履歴を表示します。**X** ボタンを選択するとチャットビューに戻ります。 **ポップアップ（オーバーレイダイアログ）:** * **User Center** - アカウント情報、クレジット残高、使用状況の詳細を表示するオーバーレイポップアップを開きます。ポップアップの背後にはチャットビューが表示されたままです。 * **Feedback** - フィードバックの送信や問題報告を行うフォームのオーバーレイポップアップを開きます。チャットビューは背景に残ります。 ポップアップを閉じるには、ポップアップ領域の外側を選択するか、ポップアップの隅にある **X** ボタンを使用します。 **ドロップダウンメニュー:** * **Settings** - MCP サーバー、サブエージェント、ルール、モデルプリセットのオプションを持つインラインのドロップダウンメニューを開きます。メニューからオプション（例:「MCP Servers」）を選択すると、その設定用の専用フルページビューが開きます。**X** ボタンを選択するとチャットビューに戻ります。 入力ボックスのすべてのボタンは、すばやくインラインで設定できるドロップダウンメニューを開きます。 **ドロップダウンメニューのパターン:** 入力ボックスのすべてのボタン（Add Context、Add Images or Files、Add Subagent、Switch Mode、Switch/Customize AI Model、Think Hard Mode、Switch Permission）は、ボタンのすぐ下にドロップダウンメニューを開きます。これらのメニューを使うと、チャットビューから移動せずにリクエストを設定できます。 **なぜドロップダウンなのか:** この設計により、すべての一般的な操作でチャットビューに留まれます。会話を見失ったりワークフローを中断したりせずに、設定の調整、モデルの選択、モードの変更、コンテキストの追加ができます。 **ドロップダウンを閉じる:** ドロップダウンメニューは、選択を行うかメニューの外側のどこかを選択すると自動的に閉じます。これにより、設定をすばやく構成してリクエストの作成に戻れます。 ナビゲーション要素によって、メインのチャットビューに戻る方法は異なります。 **ページから（Project History、Settings）:** * ページ上部の隅にある **X** ボタンを選択します * 作業していたチャットビューに戻ります **ポップアップから（User Center、Feedback）:** * ポップアップの隅にある **X** ボタンを選択するか、 * ポップアップオーバーレイの外側のどこかを選択します * ポップアップの背後には常にチャットビューが表示されているため、ポップアップを閉じるとすぐにフォーカスが戻ります **ドロップダウンメニューから:** * 選択を行うとメニューは自動的に閉じます * メニューの外側のどこかを選択すると、選択せずに閉じます * チャットビューから離れることはないため、「戻る」必要はありません **ナビゲーションの考え方:** ほとんどの操作はチャットビューに留まれるドロップダウンメニューを通じて行われます。**Project History** と **Settings オプション** は別ページに移動し、**User Center** と **Feedback** は会話を隠さないオーバーレイポップアップを使用します。 @メンションとスラッシュコマンドを使ってナビゲーションを誘導します。これにより Verdent があなたの意図を理解し、適切なツールを選べます。 *** ## ルールでカスタマイズする [#ルールでカスタマイズする] **Settings** → **Rules** にアクセスして、Markdown ファイルを使って Verdent の動作をカスタマイズします。 **ファイル:** `VERDENT.md` **適用範囲:** すべてのプロジェクトに適用されるグローバルな設定 **目的:** すべてのワークスペースでのチャット中に Verdent が適用する、個人的な使用設定を行います。これらはグローバル設定であり、どのプロジェクトで作業していても、すべてのセッションにわたって保持されます。 **よくあるユースケース:** * デフォルトの出力言語（例:「常にスペイン語で応答する」） * コードコメントの設定（例:「生成するコードに詳細なコメントを含める」） * 応答の書式（例:「すべての JavaScript の例で TypeScript を使用する」） * 個人的なコーディングスタイルの設定 **編集方法:** トップバーで **Settings** を選択します ドロップダウンメニューから **Rules** を選択します **User Rules** を選択して、Markdown 形式で `VERDENT.md` を作成または編集します **ファイル:** `AGENTS.md` **適用範囲:** 現在のワークスペースのみに適用されるプロジェクト固有のルール **目的:** 現在のプロジェクトに特化して適用される、コーディング規約、アーキテクチャパターン、開発ワークフローを定義します。これらのルールはこのワークスペースで作業する際に User Rules を上書きし、Verdent がプロジェクト固有の要件を理解するのに役立ちます。 **よくあるユースケース:** * プロジェクト固有のコーディング規約（例:「すべてのファイル名に kebab-case を使用する」） * アーキテクチャパターン（例:「データアクセスにはリポジトリパターンに従う」） * 技術スタックの要件（例:「クラスコンポーネントではなく React Hooks を使用する」） * チームの慣習（例:「すべての API の応答にエラーコードを含める」） **編集方法:** トップバーで **Settings** を選択します ドロップダウンメニューから **Rules** を選択します **Project Rules** を選択して、ワークスペースのルートに `AGENTS.md` を作成または編集します このファイルはプロジェクト固有であり、通常はバージョン管理にコミットします。 **ファイル:** `Plan.md` **適用範囲:** Plan Mode の出力形式と内容を制御します **目的:** Plan Mode を使用する際に、プランに表示される情報、その詳細度、従う形式をカスタマイズします。これらのルールは、Verdent が複雑なタスクを実行する前に生成するプランの構造と内容を決定します。 **よくあるユースケース:** * プランの詳細度（例:「各ステップに所要時間の見積もりを含める」） * プランの構造（例:「常に『リスク』セクションを含める」） * 内容の要件（例:「変更されるすべてのファイルを列挙する」） * 出力形式（例:「順序立てたステップには番号付きリストを使用する」） **編集方法:** トップバーで **Settings** を選択します ドロップダウンメニューから **Rules** を選択します **Plan Rules** を選択して、Markdown 形式で `plan_rules.md` を作成または編集します *** ## 関連項目 [#関連項目] 最初のタスクでインターフェースを使い始める インターフェースの動作と設定をカスタマイズする