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

# AgencyHandy ワークスペースのカラースキームをカスタマイズする

> プライマリカラー、背景、テキスト、ホバー状態など、AgencyHandy のサイドバーとインターフェースにブランドカラーを適用します — すべてのユーザーに即座に反映されます。

外観設定では、AgencyHandy ワークスペースの見た目を完全に制御できます。プライマリカラー、サイドバーの背景、サイドバーのテキストカラー、サイドバーナビゲーション項目のホバーハイライトカラーをカスタマイズすることで、プラットフォームのカラースキームをエージェンシーのブランドアイデンティティに合わせることができます。保存した変更はページのリフレッシュなしに、すべてのユーザーのワークスペース全体に即座に反映されます。

<Note>
  外観設定にアクセスして変更できるのは**スーパー管理者**と**管理者**のみです。**ワークスペース設定**の下にこのオプションが表示されない場合は、スーパー管理者に役割の確認を依頼してください。
</Note>

## 外観設定へのアクセス

<Steps>
  <Step title="ワークスペース設定を開く">
    左ナビゲーションメニューから**ワークスペース設定**をクリックします。
  </Step>

  <Step title="外観を選択する">
    サブメニューから**外観**（**ビジュアル設定**と表示される場合もあります）をクリックします。
  </Step>
</Steps>

***

## 各ビジュアル要素のカスタマイズ

### プライマリカラー

プライマリカラーは、プラットフォーム全体のボタン、アクティブなリンク、ハイライト状態、主要なインターフェース要素に適用されます。

* コアブランドアイデンティティを反映するカラーを選択してください。
* UI 全体に表示されるため、最も影響力のあるカラー設定です。

### サイドバー背景色

サイドバーの背景色は左ナビゲーションパネルの基本的な色調を設定します。

* サイドバーとメインコンテンツエリアの間に明確な視覚的分離を生み出すカラーを使用してください。
* 一般的に、暗い背景に明るいテキストが視認性に優れています。

### サイドバーテキストカラー

サイドバーのテキストカラーは、左メニュー内のすべてのナビゲーション項目のラベルの色を制御します。

* サイドバーの背景色に対して強いコントラストを持つカラーを常に選択してください。
* コントラストが低いとリンクが読みにくくなり、アクセシビリティが低下します。

### サイドバーホバー背景色

このカラーは、ユーザーがカーソルをサイドバーのナビゲーション項目に重ねた際に背景ハイライトとして表示されます。

* インタラクティビティを示し、ユーザーがクリックしようとしている項目を理解するのに役立ちます。
* デフォルトのサイドバー背景色とアクティブな項目の色の両方から視覚的に区別できるカラーを選択してください。

***

## カラーの適用

<Steps>
  <Step title="各フィールドのカラーピッカーを開く">
    プライマリカラー、サイドバー背景、サイドバーテキストカラー、サイドバーホバー背景色の 4 つの外観フィールドのいずれかのカラースウォッチをクリックして、カラーピッカーを開きます。
  </Step>

  <Step title="16 進数カラーコードを入力するか色を選択する">
    ブランドの正確な 16 進数カラーコード（例：`#3B5BDB`）を入力フィールドに直接入力するか、ビジュアルピッカーを使用して色合いを選択します。
  </Step>

  <Step title="変更をプレビューする">
    保存する前に、更新されたカラーがサイドバーとインターフェース全体でどのように見えるかを確認します。
  </Step>

  <Step title="変更を保存をクリックする">
    結果に満足したら、**変更を保存**をクリックします。更新された外観がワークスペース内のすべてのユーザーにグローバルかつ即座に適用されます。
  </Step>
</Steps>

<Tip>
  ブランドの 16 進数カラーコードをどこかにメモしておいてください（ブランドスタイルガイドやメモファイルなど）。特に外観設定をリセット・再設定する必要がある場合に、まったく同じ値を一貫して使用したいと思うでしょう。
</Tip>

***

## デフォルトテーマにリセットする

すべてのカスタムブランディングを削除して元の AgencyHandy カラースキームに戻したい場合は、外観ページの**デフォルト設定にリセット**ボタンをクリックしてください。

<Warning>
  デフォルトにリセットすると、すべてのカスタムカラーの変更が永続的に破棄されます。この操作は元に戻せません。現在の設定を保持したい場合は、リセットする前に 16 進数カラーコードを控えておいてください。
</Warning>

***

## カラーコントラストのベストプラクティス

適切なカラーコントラストは単なるデザインの好みではなく、チームとクライアントの視認性とアクセシビリティに直接影響します。

<CardGroup cols={2}>
  <Card title="WCAG AA コントラスト比を目指す" icon="eye">
    通常の本文テキストの場合、テキストと背景の間に少なくとも **4.5:1** のコントラスト比を使用してください。大きなテキストやアイコンの場合は、**3:1** の比率が許容されます。[WebAIM コントラストチェッカー](https://webaim.org/resources/contrastchecker/)などのツールを使用して確認してください。
  </Card>

  <Card title="低コントラストの組み合わせを避ける" icon="triangle-exclamation">
    白背景に薄いグレーのテキスト、または白背景に黄色のテキストなどの組み合わせは使用しないでください — アクセシビリティ基準を満たさず、長時間の作業で目が疲れやすくなります。
  </Card>

  <Card title="ホバー状態を意図的にテストする" icon="arrow-pointer">
    ホバーカラーはデフォルト状態とアクティブ状態の両方から明確に区別できるものにする必要があります。同じように見えると、ユーザーは重要な視覚的フィードバックを失います。
  </Card>

  <Card title="ブランドとの一貫性を保つ" icon="paintbrush">
    ウェブサイト、提案書、請求書と同じプライマリカラーをここでも使用してください。一貫性はすべてのクライアントタッチポイントにわたって認知度とプロフェッショナリズムを高めます。
  </Card>
</CardGroup>

***

## 重要な注意事項

* **即時グローバル効果：** 保存されたすべての外観変更は、ワークスペース全体に即座に適用されます。ログイン中のすべてのユーザーが次のナビゲーション操作時に更新を確認できます。
* **単一アクティブテーマ：** マルチテーマのサポートはありません — ひとつのカラーセットがすべての役割のワークスペース全体に適用されます。
* **役割制限：** 外観の変更ができるのはスーパー管理者と管理者のみです。通常のチームメンバーとクライアントはカラーを変更できません。
* **リセットは永続的：** **デフォルト設定にリセット**ボタンは元に戻せないため、すべてのカスタムカラーを意図的に削除したい場合にのみ使用してください。
