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

# Workspace Branding

> アーティファクトのPDFエクスポートとアプリ内グラフに会社のロゴ、名称、カラーパレットを適用する

ワークスペースレベルで一度ブランディングを設定すると、それ以降のすべての[アーティファクト](/ja/guide/artifacts/overview)エクスポートに自動的に適用されます — PDFヘッダーにロゴ、フッターに会社名、すべてのグラフに6色パレットが使用されます。ブランディングが設定されていないワークスペースでも、CloudThinkerのデフォルトで整ったPDFが生成されます。

## 前提条件

* **Scale**、**Scale +**、または **Enterprise** プラン — [Pricing & Plans](/ja/guide/billing/pricing) を参照してください。
* **Workspaceオーナー**または**org admin**ロール。ワークスペースメンバーはBrandingページを表示専用モードで確認できます: 入力フィールドは無効化され、Saveボタンは非表示になります。
* ロゴファイル: PNG、JPEG、WebP、またはSVG形式、5MB未満。透過性のある横長レイアウトで、ラスター形式の場合は幅400px以上が最適です。

## ブランディングを設定する

<Steps>
  <Step title="Workspace Settings → Brandingを開く">
    上部ナビゲーションバーの **ワークスペース名** をクリックし、**Workspace Settings** を選択してから **Branding** タブ（パレットアイコン）を選択します。ページは左側にエディター、右側にライブPDFプレビューで開きます — 入力するとプレビューが再描画されるため、確認のためにテストエクスポートする必要はありません。

    <Frame>
      <img src="https://mintcdn.com/cloudthinker/-4m9DUjwzDxHfABz/images/workspace-branding/05-branding-page-layout.png?fit=max&auto=format&n=-4m9DUjwzDxHfABz&q=85&s=93e6b6baca8142b02243e40a7d36d940" alt="左側にエディター、右側にライブPDFプレビューを表示する全Brandingページ設定画面" width="3078" height="1478" data-path="images/workspace-branding/05-branding-page-layout.png" />
    </Frame>

    <p style={{textAlign: 'center', fontSize: '0.9em', color: '#666', marginTop: '8px'}}>Brandingページ全体のレイアウト — エディターとライブプレビューが並んで表示される</p>
  </Step>

  <Step title="ロゴをアップロードする">
    ファイルをアップロードゾーンにドラッグするか、**Upload Logo** をクリックしてファイルを選択します。アップロードが完了すると、透過性を確認できるようチェッカーボード背景にロゴが表示され、**Remove** ボタンが現れます。

    ロゴを置き換えるには、新しいファイルをアップロードします — 古いファイルはストレージから自動的に削除されます。

    <Note>
      ロゴのアップロードはすぐに反映されます — Saveボタンを待ちません。**Save Brand Settings** は会社名と色のみをカバーします。
    </Note>
  </Step>

  <Step title="会社名を入力する">
    **Company Name** 入力欄に名前を入力します（最大255文字）。すべてのPDFページのフッターで "CloudThinker" の代わりに *"Generated by \<Your Company Name>"* として表示されます。特殊文字は安全にエスケープされます。
  </Step>

  <Step title="グラフの色を設定する">
    6つのスロット — Primary、Secondary、Tertiary、Accent 1〜3 — には、それぞれシステムカラーピッカーを開くカラースウォッチと、同期されたhex入力（`#RRGGBB`）があります。ブランドガイドラインからhexコードを貼り付けるか、OSピッカーでロゴからスポイトツールで採取できます。

    1つのブランドカラーだけが重要な場合は、**Primary** を設定して残りの5つはデフォルトのまま — デフォルトは調和するように設計されています。**Reset to defaults** で6つのスロットすべてが元に戻ります（保存は別途必要）。
  </Step>

  <Step title="保存する">
    **Save Brand Settings** をクリックします。変更されたフィールドのみ送信されます。

    **成功状態:** 緑色のトーストに *"Workspace updated successfully."* と表示されます。失敗した場合は赤色のトーストに理由が示され、フォームの値は再試行のために保持されます。
  </Step>

  <Step title="実際のエクスポートで確認する">
    任意のアーティファクトを開いて **Download** をクリックします。PDFには各ページのヘッダー左上にロゴ（最大幅160px）、6色のグラフ、フッターに *"Generated by \<Your Company Name>"* が表示されます。

    <Frame>
      <img src="https://mintcdn.com/cloudthinker/-4m9DUjwzDxHfABz/images/workspace-branding/01-hero-before-after.png?fit=max&auto=format&n=-4m9DUjwzDxHfABz&q=85&s=bed262bf3c8e7f555d17874dcab7abd1" alt="デフォルトのCloudThinker PDFと完全にブランディングされたPDFの並べて比較" width="4071" height="1640" data-path="images/workspace-branding/01-hero-before-after.png" />
    </Frame>

    <p style={{textAlign: 'center', fontSize: '0.9em', color: '#666', marginTop: '8px'}}>ビフォー＆アフター: デフォルトのCloudThinker PDF（左）とカスタムロゴ、会社名、パレットを適用した完全ブランディング済みエクスポート（右）</p>
  </Step>
</Steps>

後ですべてをリセットする場合: ロゴの横の **Remove** をクリックし、会社名をクリアして、Chart Colorsの **Reset to defaults** をクリックしてから保存します。

## 6色パレットの選び方

グラフライブラリはスロットを順番に循環します — 4シリーズの棒グラフはPrimaryからAccent 1を使用し、8スライスの円グラフはスライス7と8でPrimaryに戻ります。いくつかの目安:

* **PrimaryスロットにはメインのブランドカラーをPrimaryに設定** — デフォルトのシリーズカラーになります。
* **明るさだけでなく色相も変える。** 6種類の青はマルチシリーズグラフを判読しにくくします。
* **白に対してコントラストを確保する。** PDFは白で描画されるため、非常に薄い色は棒グラフや折れ線グラフで見えなくなります。
* **色覚障害のある閲覧者を配慮する。** 赤と緑を隣接させることを避けてください。
* **ライブプレビューで反復する。** 色を編集してサンプルの棒グラフと円グラフを確認し、調整します。

## リファレンス: 制限と検証

### ロゴ

| プロパティ         | 値                                                       |
| ------------- | ------------------------------------------------------- |
| 受け入れ可能なフォーマット | PNG、JPEG、WebP、SVG                                       |
| 最大ファイルサイズ     | 5 MB                                                    |
| PDFでのレンダリング幅  | 最大160px（アスペクト比を維持）                                      |
| 推奨ソース幅        | ラスター形式は400px以上; SVGは任意のサイズにスケール                         |
| SVG処理         | サニタイズ: スクリプトと安全でない属性はストレージ前に除去                          |
| ファイル検証        | MIMEタイプとマジックバイトの両方を確認; 誤ったラベルのファイルは拒否                   |
| ストレージ         | セキュアなクラウドストレージのワークスペーススコープパス; 一回限りのpresigned URLでアップロード |
| キャッシュ         | ワークスペースごとに約10分のbase64エンベッド型キャッシュ; ロゴを置き換えるとキャッシュが無効化    |
| 自動クリーンアップ     | 新しいロゴをアップロードすると古いロゴが削除される                               |

### 会社名

| プロパティ | 値                                  |
| ----- | ---------------------------------- |
| タイプ   | プレーンテキスト、最大255文字                   |
| デフォルト | "CloudThinker"                     |
| エスケープ | HTMLエスケープ — `&`、`<`、引用符、アクセント記号は安全 |
| 表示場所  | PDFフッターのみ                          |

### グラフの色

| プロパティ   | 値                                                     |
| ------- | ----------------------------------------------------- |
| スロット    | 正確に6つ: Primary、Secondary、Tertiary、Accent 1〜3          |
| フォーマット  | `#RRGGBB` hex、大文字小文字を区別しない                            |
| 拒否されるもの | 3桁の省略形（`#fff`）、`#` の欠落、16進数以外の文字                      |
| 適用対象    | 棒グラフ、折れ線グラフ、エリアグラフ、ステップエリアグラフ、円グラフ、レーダーグラフ、ゲージグラフ、散布図 |
| 循環      | 6シリーズを超えるグラフはスロット1に戻る                                 |

デフォルトパレット（すべての新しいワークスペース）:

| スロット      | Hex       | 色       |
| --------- | --------- | ------- |
| Primary   | `#0d9488` | ティール    |
| Secondary | `#0369a1` | スカイブルー  |
| Tertiary  | `#15803d` | グリーン    |
| Accent 1  | `#60a5fa` | ライトブルー  |
| Accent 2  | `#5eead4` | ライトティール |
| Accent 3  | `#86efac` | ライトグリーン |

### ブランディングが適用される場所

| 要素     | アプリ内グラフ | PDFエクスポート   |
| ------ | ------- | ----------- |
| 6色パレット | ✓       | ✓           |
| ロゴ     | —       | ✓ 各ページのヘッダー |
| 会社名    | —       | ✓ 各ページのフッター |

### プランとロール

| プラン                      | 表示 | 編集             |
| ------------------------ | -- | -------------- |
| Free、Team                | ✓  | — （アップグレードが必要） |
| Scale、Scale +、Enterprise | ✓  | ✓              |

| ワークスペースロール            | 表示 | 編集 |
| --------------------- | -- | -- |
| Member                | ✓  | —  |
| Owner                 | ✓  | ✓  |
| Org admin / org owner | ✓  | ✓  |

## FAQ

<AccordionGroup>
  <Accordion title="新しいPDFにまだ古いロゴが表示される">
    埋め込まれたロゴはワークスペースごとに最大10分間キャッシュされますが、ロゴを置き換えるとキャッシュが無効化されるため、新しいエクスポートはすぐに反映されるはずです。数分後も古いロゴが表示される場合は、ワークスペースページを更新して再度エクスポートしてください。それでも続く場合は、ワークスペースIDをサポートにお知らせください。
  </Accordion>

  <Accordion title="ロゴがぼやけている、または白い四角が表示される">
    ぼやけている場合: ソース画像が160pxのレンダリング幅より小さいため拡大されています — 400px以上の幅で再エクスポートするか、SVGを使用してください。白い四角の場合: ファイルに透過性がありません — 透過キャンバスでエクスポートしてください（alpha付きPNGまたはSVG）。SVGがデザインツールとは異なって表示される場合は、サニタイズで除去されたスクリプトやアニメーションに依存している可能性があります。代わりに静的なPNGをエクスポートしてください。
  </Accordion>

  <Accordion title="以前にダウンロードしたPDFにまだ古いブランディングが表示される">
    これは正常な動作です。各PDFはエクスポート時に有効なブランディングで生成され、既存のアーティファクトにはキャッシュされたPDFがありません — 最新のブランディングを適用した新しいPDFを取得するには、任意のアーティファクトを再ダウンロードしてください。
  </Accordion>

  <Accordion title="組織内の異なるワークスペースに異なるブランディングを設定できますか？">
    はい。ブランディングはorganizationではなく各ワークスペースにスコープされているため、顧客、環境、ビジネスユニットごとに一つのワークスペースを持つorganizationは、それぞれに独立したブランディングを設定できます。
  </Accordion>

  <Accordion title="下書きや内部レビュー用にブランディングなしでエクスポートできますか？">
    現在はできません — すべてのエクスポートはアクティブなブランディングを使用します。回避策として、ロゴを削除して会社名をクリアし、エクスポートしてから、ブランディングを元に戻してください。
  </Accordion>

  <Accordion title="アップロードしたロゴは非公開ですか？">
    はい。ロゴはワークスペーススコープのストレージパスに保存され、短期間有効なpresigned URLで提供されます。他のワークスペースのメンバーはアクセスできません。共有リンクで公開共有するアーティファクトには、ロゴと色が含まれます。
  </Accordion>
</AccordionGroup>

## 次のステップ

<CardGroup cols={2}>
  <Card title="Artifacts" icon="file-chart-column" href="/ja/guide/artifacts/overview">
    ブランディングが適用されるダッシュボードとレポートを生成する
  </Card>

  <Card title="ワークスペースの管理" icon="building" href="/ja/guide/workspaces">
    Organization内のワークスペースを作成・管理する
  </Card>

  <Card title="Organizationの管理" icon="building-columns" href="/ja/guide/organization">
    Organization設定、請求、エンタープライズ機能を設定する
  </Card>

  <Card title="Pricing & Plans" icon="credit-card" href="/ja/guide/billing/pricing">
    ワークスペースブランディングを含むプランを確認する
  </Card>
</CardGroup>