---
id: cloud-tencent-cloud-design-ja
service: Tencent Cloud
website: https://www.tencentcloud.com
category: cloud
document: DESIGN.MD
source_prompt: cloud-tencent-cloud-representative-ja
language: ja
generated: 2026-07-18
---

# Tencent Cloud DESIGN.MD

> クラウド基盤サイトやアプリを作る前に、この DESIGN.MD を継続的なデザイン基準として使います。デザイナー、フロントエンド開発者、AIビルダー、コードエージェントにそのまま渡せます。Tencent Cloudは情報設計の参考に限定します。

## 使用目的

- Tencent Cloud: https://www.tencentcloud.com
- クラウド基盤: デジタルサービスの展開と運用
- リソース・デプロイ・使用量
- コスト可視性・権限・可用性
- cloud

## デザインブリーフ

デジタルサービスの展開と運用を支える独自製品を設計します。リソース・デプロイ・使用量をすばやく読み、比較し、操作できるようにし、コスト可視性・権限・可用性を主要な設計制約として扱います。画面の出発点：運用コンソール · 分析的で精密な · 情報密度 高 · プロジェクトナビゲーション -> 主要指標 -> 運用表またはログ -> 対応操作 · #006EFF · Tencent Cloud。

## 公開インターフェースのデザイン分析

- 分析の基準: 公開トップ画面と代表的なタスクフローに繰り返し現れる視覚・構造パターンです。サービスは更新されるため、最終的には実サイトのキャプチャで確認します。
- 画面アーキタイプ: 運用コンソール
- トーン＆マナー: 分析的で精密な
- 情報密度: 高
- カラー戦略: ダークな表面上の高コントラストなブランドアクセント (#006EFF)
- ナビゲーション構造: サイドバー中心のコンテキスト切替
- 構造の順序: プロジェクトナビゲーション -> 主要指標 -> 運用表またはログ -> 対応操作
- 再利用するパターン: プロジェクトナビゲーション、主要指標、データ表またはログ、状態絞り込み、対応操作
- 独立して適用するルール: 順序と意思決定原則だけを参照し、ロゴ、文章、画像、アイコン、固有の画面構成は複製しません。

## 画面構造

- 現在地、アカウント、システム状態が明確なグローバルナビゲーション
- リソース・デプロイ・使用量の次の重要行動がすぐ分かる概要
- 意思決定コストを下げる場合に限った検索、絞り込み、並べ替え、分割表示
- 文脈、状態、根拠、主要行動を同時に保つ詳細画面
- コスト可視性・権限・可用性に対するヘルプ、回復、プライバシー、安全への常設導線

## デザイントークン

```css
:root {
  --color-primary: #006EFF;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #006EFF22;
  --color-danger: #DC2626;
  --radius-control: 6px;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --content-reading: 720px;
  --content-wide: 1280px;
}
```

## コンポーネント仕様

- ナビゲーション：現在、hover、focus、disabled、折りたたみ状態
- カードと行：安定した寸法、現実的な内容、メタ情報の階層、完全なクリック領域
- フォーム：ラベル、説明、検証、エラー要約、進捗、回復
- 操作：領域ごとに明確な主要操作を1つ。アイコンボタンにはアクセシブル名とツールチップ
- フィードバック：インライン状態、トースト、バナー、スケルトン、進捗、確認、破壊的操作ダイアログ

## 状態設計

各データ領域に loading、empty、partial-data、stale、error、offline、permission-denied、disabled、saving、success 状態を定義します。状態変更で周囲が動かないよう寸法を安定させます。

## レスポンシブルール

- 360px：主列は1つ、ページ横スクロールなし、44px以上のタッチ領域
- 768px：両方が読める場合のみ2ペインで文脈を保つ
- 1280px以上：読み幅を制限し、余白は比較または継続文脈に使う
- ビューポート幅で文字を拡縮しない。長いラベルは折り返し、翻訳による伸長に対応

## アクセシビリティ基準

- セマンティックなランドマークと見出し順
- 見えるフォーカスを含む完全なキーボード操作
- 全状態でWCAG AAコントラスト
- 機械可読なラベル、説明、エラー、ライブリージョン
- 200%拡大、動きの抑制、強制カラー、スクリーンリーダー検証

## AIビルダー向けデザイン指示

```text
[製品名]の独自クラウド基盤画面を設計してください。目標はデジタルサービスの展開と運用、主要オブジェクトはリソース・デプロイ・使用量、重要リスクはコスト可視性・権限・可用性です。この文書のトークンと画面ルールを使い、現実的な内容、コンポーネント契約、全データ状態、レスポンシブ、アクセシビリティ、受入条件を指定してください。Tencent Cloudのロゴ、固有文言、画像、正確な配置は複製しません。
```

## 完了チェックリスト

- [ ] デジタルサービスの展開と運用の重要フローを説明なしで理解できる
- [ ] リソース・デプロイ・使用量の階層、状態、操作が明確である
- [ ] コスト可視性・権限・可用性の予防と回復がある
- [ ] モバイル、タブレット、デスクトップ、キーボード、読上げ、拡大、動き抑制を検証した
- [ ] 読込、空、エラー、オフライン、部分データ、権限、成功状態がそろっている
- [ ] Tencent Cloudの保護されたブランド素材やピクセル単位の配置を複製していない