valantic-brand

Valantic ブランドスタイリング

概要

Valantic の公式ブランドアイデンティティリソースにアクセスするには、このスキルを使用してください。これには、One Firm のアイデンティティを維持しながら、特定のターゲットグループに合わせてビジュアル言語を調整する Liquid Brand Design システムが含まれます。

キーワード：Liquid Brand Design、Route A、Route B、Route C、valantic グラデーション、Segoe UI、Calibre、ビジュアルアイデンティティ、One Firm

---

1. Liquid Brand Design 戦略

Valantic ブランドは、柔軟な Liquid Brand Design モデルを採用しています。これにより、ターゲットグループやタッチポイントに応じた、個別のビジュアルコミュニケーションが可能になります。

ビジュアルルート（A–B–C システム）

対象者とメッセージの強さに基づいて、適切なルートを選択してください。

Route A：控えめでエレガント

• 特性：控えめ、エレガント、情報重視、真面目
• 対象者：保守的な業界（銀行、保険）、高い信頼性が求められるサービス（金融、法律、データプライバシー）
• 用途：請求書、データシート、正式なレポート
• ビジュアルスタイル：標準的なレイアウト、気を散らす要素を最小限に抑制

Route B：自信に満ち、人間味がある（標準）

• 特性：自信に満ちた、行動を促す、人間味のある、親しみやすい
• ステータス：デフォルトの選択肢（約80%の用途をカバー）
• 対象者：俊敏性の高い顧客（IT、自動車、製造業）、社内コミュニケーション
• 用途：プロジェクトの進捗報告、チームプレゼンテーション、一般的なコミュニケーション
• ビジュアルスタイル：人間的な要素を強調する円形のポートレートマスク（「Route B Shape」）

Route C：ダイナミックで表現豊か

• 特性：ダイナミック、存在感がある、表現豊か、大胆
• 対象者：マーケティング、スタートアップ、採用（人材獲得）
• 用途：見本市、イベント、時代の流れに敏感な業界（Eコマース、観光）
• ビジュアルスタイル：高い視覚的エネルギーを持つ、不規則な「Valantic V」ポリゴンマスク

---

2. デザイントークンとカラー

ブランドの主要カラー

• Valantic Coral：#FF5757 — 見出し、リンク、強調表示に使用する主要なアクセントカラー
• Purple Heart：#4C26B7 — 二次的な基調色（濃い青紫色、使用は控えめ）
• Peach：#FFCCAA — 二次的なアクセントカラー。主にグラデーションで使用

ユーティリティカラー

• Info Blue：#4A9EFF — 情報の吹き出しやヒント
• Warning Orange：#FF9800 — 警告や重要なお知らせ

テキストカラー

• Primary Text：#333333 — 本文
• Dark Text：#1A1A1A — 強調テキスト、小見出し
• Light Background：#F8F8F8 — 導入セクション、表のヘッダー

Valantic グラデーション

グラデーションは、コンテンツを圧迫することなく、奥行きと認知度を高めます。

• カラー：Valantic Coral（#FF5757）→ Peach（#FFCCAA）
• 角度：315°（左上から右下）
• 用途：図形、アクティブな要素、選択済みアイコン

---

3. タイポグラフィシステム

デジタル・ウェブ標準

• フォントファミリー：Calibre
• 代替フォント：Segoe UI、Helvetica、Arial、sans-serif
• ウェイト：
  • H1/H2（セクションタイトル）：Light（300）— CORAL 色
  • H3/H4（サブセクション）：Semibold/Bold（600）— BLACK 色
  • 本文：Regular（400）

見出しの階層

レベル	色	ウェイト	例
H1	#FF5757 Coral	300（Light）	文書のメインタイトル
H2	#FF5757 Coral	300（Light）	セクション見出し
H3	#1A1A1A Black	600（Semibold）	サブセクション見出し
H4	#1A1A1A Black	600（Semibold）	詳細見出し

特殊なテキストスタイル

• プルクオート：Coral（#FF5757）、斜体
• 人物名：Coral（#FF5757）、太字
• ランニングヘッダー：Black、大文字

Office・プレゼンテーション標準（PowerPoint / Word）

プロプライエタリフォントが使用できない場合は、Segoe UI を使用してください。

• ルール：Segoe UI Bold は使用しないでください（Windows ではプロポーションが適切ではありません）
• 正しい使い方：見出しや強調テキストには Segoe UI Semibold を使用してください

---

4. アイコングラフィーと画像

アイコンスタイル

• 出典：Microsoft Stock Icons（Thin スタイル）
• 色付け：
  • デフォルト：Valantic Coral（#FF5757）
  • ルート固有：フォーマルなコンテキストでは Purple Heart（#4C26B7）
  • ハイライト：valantic グラデーション（315°）を選択的に適用

生成画像のワークフロー

• 要件：ヘッダー画像（特に Route C）では、キャンバスを水平方向に拡張するために生成塗りつぶしを使用する必要があります
• 目的：不規則な Valantic マスクを適用する際に、顔や被写体が切り取られるのを防ぎます

---

5. 技術的な実装の詳細

CSS 変数（Web）

:root {
  /* Primary Brand Colors */
  --valantic-coral: #FF5757;
  --valantic-purple: #4C26B7;
  --valantic-peach: #FFCCAA;

  /* Utility Colors */
  --valantic-info: #4A9EFF;
  --valantic-warning: #FF9800;

  /* Text Colors */
  --text-primary: #333333;
  --text-dark: #1A1A1A;
  --bg-light: #F8F8F8;

  /* Gradient */
  --valantic-gradient: linear-gradient(
    315deg,
    #FF5757 0%,
    #FFCCAA 100%
  );

  /* Typography */
  --font-primary: "Calibre", "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2 {
  color: var(--valantic-coral);
  font-weight: 300;
}

h3, h4 {
  color: var(--text-dark);
  font-weight: 600;
}

p {
  color: var(--text-primary);
  line-height: 1.6;
}

a {
  color: var(--valantic-coral);
  text-decoration: none;
}

.pull-quote, blockquote.highlight {
  color: var(--valantic-coral);
  font-style: italic;
}

.author-name {
  color: var(--valantic-coral);
  font-weight: 600;
}

.highlight-box {
  border-left: 4pt solid var(--valantic-coral);
  background: #fff5f5;
  padding: 12pt 12pt 12pt 15pt;
}

.info-box {
  border-left: 4pt solid var(--valantic-info);
  background: #f0f8ff;
  padding: 12pt 12pt 12pt 15pt;
}

.warning-box {
  border-left: 4pt solid var(--valantic-warning);
  background: #fff8f0;
  padding: 12pt 12pt 12pt 15pt;
}

th {
  background: var(--bg-light);
  font-weight: 600;
}

.chart-primary { fill: var(--valantic-coral); }
.chart-secondary { fill: #999999; }

リストの書式（プレゼンテーション）

• レベル 1～3：標準の箇条書き
• レベル 4：
  • 太字の Coral（Route B / C）
  • 黒（Route A） リスト内の小見出しとして使用

---

6. クイックリファレンス

カラーパレット

名前	Hex	RGB	用途
Valantic Coral	#FF5757	255, 87, 87	H1/H2 見出し、リンク、引用、アクセント
Purple Heart	#4C26B7	76, 38, 183	セカンダリブランド、フォーマルなコンテキスト
Peach	#FFCCAA	255, 204, 170	グラデーションの終端、淡い背景
Info Blue	#4A9EFF	74, 158, 255	情報コールアウト
Warning Orange	#FF9800	255, 152, 0	警告コールアウト
Text Primary	#333333	51, 51, 51	本文
Text Dark	#1A1A1A	26, 26, 26	H3/H4 見出し、太字テキスト
Background Light	#F8F8F8	248, 248, 248	導入ボックス、テーブルヘッダー

要素のクイックリファレンス

要素	色	ウェイト	スタイル
H1、H2	Coral #FF5757	300	標準
H3、H4	黒 #1A1A1A	600	標準
本文	グレー #333333	400	標準
引用文	Coral #FF5757	400	斜体
著者名	Coral #FF5757	600	標準
リンク	Coral #FF5757	-	下線なし
グラフの棒	Coral #FF5757	-	主データ