# Highlite ブランドハーネス — AI向け制作ガイド

Version: 1.0
更新日: 2026-10-12
ブランド: Highlite / 株式会社Highlite
公式ガイド: https://highlite.co.jp/brand-guidelines/

## 1. このファイルの使い方

このMarkdownは、Highliteの文章・Web・スライド・広報物をAIと制作するときの判断基準です。AIにこのファイルを添付し、制作物の目的・対象・媒体・必要な内容を指定してください。末尾に依頼テンプレートがあります。

この文書は公開ブランドガイドラインを制作向けに整理したものです。依頼された作業範囲や、使用するAI・制作環境の規約を変更するものではありません。以下の「確定コピー」は原文を保持し、それ以外の制作ルールは媒体・読みやすさに合わせて適用します。新しいコピーの提案と、確定コピーの引用を区別してください。

事実の参照順は、今回の依頼で承認された情報、最新の公式ブランドガイド、公式サイトの該当ページ、このファイルの順です。矛盾や未確認事項は断定せず、確認が必要な箇所として示してください。承認済みのブランド表現を変更する案は、通常案と分けて理由を添えてください。

## 2. ブランドの核

### 表記と確定コピー

| 用途 | 原文 |
| --- | --- |
| ブランド名 | Highlite |
| 会社名 | 株式会社Highlite |
| ブランドステートメント | 戦略から制作まで。Highliteは、一緒に事業を作るブランドスタジオです。 |
| 英語タグライン | Branding for your value. |
| 日本語タグライン | ブランディングで思いに価値を。 |
| TOPの英語コピー | Deeper down, Higher light. |
| Vision | 人も事業も、 自らの価値を信じて 輝ける世界へ。 |
| Approach | 人の想いを聴き、時代を見渡し、ロジックで整理して、クリエイティブで超えていく。 |

上記の語句、大小文字、句読点を勝手に置き換えないでください。媒体に合わせた改行は、意味のまとまりと自然な読み順を優先します。

### 社名の由来

高める意味の「High」と、鉱物名につく接尾辞「-lite」。まだ光の当たっていない石を掘り当て、高く掲げて光を当てる。その意思を込めた名前です。

### Visionの背景

「自らの価値を信じる」には、信じるに足る根拠が必要です。人や事業の本質的な価値を定義・発見し、長く険しい事業成長の旅路を少しでも楽に、少しでも高い効果を作り出すために、ブランドの土台を作ることがわたしたちの役目です。

### Ethos

- 夢中になって、見つける。 熱量をもって、その事業ならではの価値の在り処を掘り当てる。
- あらゆる角度から、眺める。 市場の動きや時代の文脈を調べ、多面的に検証する。
- 心が動くまで、磨く。 誇れる状態になるまで、手を尽くす。

### 届ける相手と提供領域

- 事業立ち上げ期のStartUp、事業の転換期にあるEnterprise。相手のフェーズと判断したいことを明確にします。
- Brand Consulting、Service Design、Designを主な領域とし、戦略・言語化から制作までをつなげます。
- Design Review、AI DesignTeam Installについては公式Serviceページの最新の説明を参照します。提供内容・価格・納期を推測しないでください。
- Highlite自身のブランドを扱う文書です。クライアントの制作物へHighliteの配色や語り口を自動で適用せず、対象ブランドの依頼内容を優先してください。

## 3. 文章のトーンと編集

- 事業メンバーと一緒に考える立場で、主語・対象・行動を具体的に書きます。
- 一つの文に情報を詰め込みすぎず、段落を意味のまとまりで分けます。見た目の調整だけを理由に文の関係を切らないでください。
- 専門用語を使うときは、読み手が判断できる説明を添えます。抽象的な形容詞だけで価値を伝えようとしないでください。
- 鉱石・光の比喩はブランドの考え方を伝える場面に使います。サービス内容、開催日時、申込方法などの実務情報は具体的に示します。
- 実績・顧客名・効果・人数・受賞・価格・対応範囲は、確認済みの情報だけを記載します。「必ず成功する」「圧倒的」「業界No.1」などを根拠なく加えません。
- 重要な文章を小さな注記や画像の中だけに隠さず、読み順の中に置きます。

文体の例（公式コピーではなく、制作時の説明例）:

- 避ける例: 「革新的なソリューションで、圧倒的な成長を必ず実現します。」
- 推奨例: 「事業メンバーと話し、何を届ける事業なのかを整理します。」

## 4. VI・ロゴ

- ロゴとシンボルの縦横比、形状、文字の間隔を変えない。
- ロゴの高さをHとし、周囲にH/2以上の余白を確保する。シンボル単体も同じ基準とする。
- 画面上の横組みロゴは幅120px以上、シンボル単体は高さ32px以上を制作時の目安とする。実際の表示でも読みやすさを確認する。
- 明るい背景ではカラーまたは黒、濃い背景では白を使う。複雑な写真の上では読みやすい無地の面を確保する。
- 影・縁取り・独自のグラデーション、傾ける表現を加えない。
- ロゴをフォントで打ち直したり、AIで似た形を生成したりせず、公式の配布素材を使用します。
- カラー版ロゴのシンボル #5179CA、文字 #414450 は素材固有の値です。下記のWeb用カラーに置き換えません。
- 商標・著作権は移転しません。使用範囲が不明な場合はHighliteへ確認してください。写真・イラスト・3D原本とフォントファイルは配布キットに含まれません。

素材:

- [ブランドキット（ZIP）](https://highlite.co.jp/downloads/brand/highlite-brand-kit-v1.zip)
- [ブランドガイド（PDF）](https://highlite.co.jp/downloads/brand/highlite-brand-guidelines-v1.pdf)
- [カラーロゴ（SVG）](https://highlite.co.jp/downloads/brand/highlite-logo-color.svg)
- [白ロゴ（SVG）](https://highlite.co.jp/downloads/brand/highlite-logo-white.svg)
- [黒ロゴ（SVG）](https://highlite.co.jp/downloads/brand/highlite-logo-black.svg)
- [カラーシンボル（SVG）](https://highlite.co.jp/downloads/brand/highlite-symbol-color.svg)
- [白シンボル（SVG）](https://highlite.co.jp/downloads/brand/highlite-symbol-white.svg)
- [黒シンボル（SVG）](https://highlite.co.jp/downloads/brand/highlite-symbol-black.svg)

## 5. カラーと背景

画面用のRGB／HEXを基準にします。青を軸に、紫と桃色で色の移ろいを表現します。印刷用のCMYK・特色は未定義のため、推測値を正式な指定として扱わないでください。

| CSSトークン | 名称 | HEX | 用途 |
| --- | --- | --- | --- |
| --hl-brand | Brand blue | #4D70D3 | ブランドの基準色。主要リンク・アイコンに。 |
| --hl-deep | Deep blue | #1F4094 | 濃い背景や、明るい面上の強いアクセントに。 |
| --hl-blue | Landscape blue | #5B78DD | 風景・フッターなどの広い面に。 |
| --hl-lavender | Lavender | #B5A9EC | 背景のグラデーションや柔らかな色の変化に。 |
| --hl-peach | Peach | #EFC4B7 | 夜明けの背景や温度を感じるアクセントに。 |
| --hl-paper | Paper | #E9ECF8 | ページの基本背景。 |
| --hl-ink | Ink | #333333 | 見出し・本文の基本色。 |
| --hl-muted | Muted | #52618A | 補足説明・メタ情報に。 |
| --hl-light | Light | #DADFF2 | 淡い面や濃色背景上の表現に。 |
| --hl-rule | Rule | #A6B4D7 | 区切り線。文字色として使わない。 |
| --hl-startup | StartUp | #E27C65 | 事業立ち上げ期の入口を示す色。 |
| --hl-enterprise | Enterprise | #5466C7 | 既存企業の入口を示す色。 |

### 文字色のルール

| 役割 | HEX | 適用 |
| --- | --- | --- |
| 基本の文字 | #333333 | 見出し・本文・主要リンク。淡い背景では英語も日本語も同じInkを使います。 |
| 補足の文字 | #52618A | 日付・肩書き・補足説明。見出しや重要な本文を薄くする目的には使いません。 |
| 濃色背景の文字 | #FFFFFF | 濃い青などの上に置く主要な見出し・本文・操作ラベル。 |
| 装飾的な大見出し | #DADFF2 | 既存デザインのDeeper downやContact usなど。小さな本文・重要な操作には使いません。 |
| 可読性のための例外 | #000000 | 半透明のContactボタンは、背景とのコントラストを確認し純黒と白を切り替えます。 |

- エラーの色は #B42318。色に加え、何を修正すればよいかを文章で示します。
- 淡い背景の主要文字は英語・日本語ともInk。補足用のMutedを重要な本文へ使わないでください。
- 通常の本文はコントラスト比4.5:1以上を目安に、実際の背景と組み合わせて確認します。

### グラデーションの実装用定義

以下は既存Webと共通の値です。CSS変数は上のカラー表と併せて使用してください。

```css
:root {
  --hl-gradient-mv: linear-gradient(307.9734deg,#d7d9f5 45.385%,#637fe9 72.692%,#1f4094 100%);
  --hl-gradient-identity: linear-gradient(110deg,var(--hl-deep) 0%,var(--hl-deep) 30%,var(--hl-brand) 66%,#637fe9 84%,#d7d9f5 100%);
  --hl-gradient-service: linear-gradient(135deg,var(--hl-paper),var(--hl-peach));
  --hl-gradient-approach: linear-gradient(135deg,#cfbdd8,var(--hl-lavender),#9395ff);
  --hl-gradient-contact: linear-gradient(160deg,#324e9d,var(--hl-blue) 46%,var(--hl-lavender) 78%,var(--hl-peach));
  --hl-identity-gloss: radial-gradient(ellipse at 100% 0%,#fff3,transparent 35%);
  --hl-fade-down: linear-gradient(#fff,rgba(255,255,255,0));
  --hl-fade-right: linear-gradient(90deg,#fff,rgba(255,255,255,0));
  --hl-fade-left: linear-gradient(90deg,rgba(255,255,255,0),#fff);
}
/* Identityカバー: background: var(--hl-identity-gloss), var(--hl-gradient-identity); */
```

既存の背景・風景・素材を維持しながら使います。全面を別の背景に置き換えたり、人物写真・実績画像・イラスト・3Dの上に虹色の膜を重ねたりしないでください。虹のニュアンスを用いる場合は背景の層だけに抑え、文字の読みやすさを保ちます。

## 6. 書体・見出し

- 欧文見出し・ナビゲーション: Avenir / Avenir Next / sans-serif。
- 日本語見出し・本文: Zen Kaku Gothic New / Hiragino Kaku Gothic ProN / sans-serif。太さ400・500・700。
- 短い手書きのアクセント: Vujahday Script / cursive。長文・主要な見出しには使用しません。
- フォントファイルの利用・配布条件は導入時に確認します。この文書はフォントの利用許諾を付与しません。

| 用途 | PC | スマホ | 太さ | 行間 | 字間 |
| --- | --- | --- | --- | --- | --- |
| ページ・大きなセクション | 52–80px | 52px | 400 | 1.4 | .02em |
| 補助的なセクション | 32px | 32px | 400 | 1.4 | .02em |
| カード・小見出し | 24px | 24px | 500–700 | 1.4–1.7 | .02em |
| 本文 | 16px | 16px | 400–500 | 1.6–2 | .04–.08em |
| 補足・メタ情報 | 12–14px | 12–14px | 400–500 | 1.6–1.8 | .02em |

表は基準値です。狭い画面では文字の折り返し・読みやすさを確認し、必要に応じて調整します。文字を画面からはみ出させないでください。

## 7. 余白・構成・操作

- 余白系列: 8px / 16px / 24px / 32px / 40px / 60px / 80px / 120px。数値の機械的な丸めではなく、整列とまとまりを整えます。
- コンテンツ幅: 基本 1200px、広い面 1302px、長文 720px。
- 左右の余白: PCは画面に応じて24〜120px、スマホは24px。
- PCでは内容に応じて2〜3列、スマホではDOMの読み順を保って1列を基本にします。
- 実績サムネイルは1200:680を基準とし、写真・イラスト・ロゴの縦横比を伸縮させません。
- カードの面は白から透明へ。Service／Journalは上から下、Newsは左から右、Worksは右から左を基準にします。
- ページ移動はリンク、その場の開閉・送信・選択はボタン。リンク文言から移動先・操作がわかるようにします。
- 共通の山形矢印とリングを使い、別の矢印や装飾を混在させません。移動リンクは高さ57px、フォーム操作は48px以上を基準にします。
- メニューに下線・光彩を追加しません。背景は透明を保ち、文字とロゴの色を背景の明暗に合わせます。
- キーボードフォーカスを見える状態にし、スマホではホバーだけに情報や操作を依存させません。

## 8. 画像・3D・モーション

- 鉱石は価値の原石、風景はその旅路として扱います。既存の鉱石・鳥・鯨の素材と表現を基準にします。
- 人物写真を生成して実在のメンバーの写真として扱わないでください。写真が未確定の場合は公式の鳥の仮画像を使います。
- 2026-10-12時点の公開メンバー表示では、Daiki Hayakawaの写真を使用し、その他のメンバーの画像は鳥の仮画像です。氏名・役割・紹介文は画像変更と別に管理します。
- 写真・人物・ロゴ原本を変形させず、適切な比率でトリミングします。文字を3Dや装飾の後ろに隠しません。
- 動きは、情報の順番や連続性を伝えるために使います。見出しは1文字ずつ滑らかに現れ、英語と日本語の副題は少し時間をずらします。
- 見出しは約1.8秒。光は文字の内側を控えめに通過し、最終的に通常の文字色へ戻します。常時の光彩、大きなバウンド、点滅は加えません。
- リンクの変化は約0.35秒。大きく動かしすぎず、クリックできる範囲を保ちます。
- 動きを減らす設定（prefers-reduced-motion）では静止または最小限の変化にします。JavaScriptや3Dが動かなくても、重要な情報は読める状態にします。
- 長いTOPのスクロール演出を、すべての下層へ機械的に複製しないでください。

## 9. SEO・AIOと読みやすい構造

- h1はページの主題として1つ。h2は章、h3はその章の中の話題。文字の大きさだけで階層を選びません。
- 説明は段落、列挙はリスト、比較は表を使い、DOM順と見た目の読み順を一致させます。
- 主題・対象・提供価値が文章から読み取れるようにし、Highliteやサービス名などの参照先を曖昧にしません。
- 重要な文章をサーバーから出力するHTMLに含め、Canvas・画像・3D・操作後の表示だけに依存させません。
- 各ページのtitle・descriptionは内容に即して付けます。装飾画像のaltは空、情報を伝える画像には役割に合う説明を付けます。
- 構造化データを使う場合は、画面に表示する確認済みの事実と一致させます。未確認のFAQ・評価・レビュー・数値を作りません。
- SEOやAI検索向けに、確定したコピーを無断で言い換えたり、不自然なキーワードを足したりしません。

## 10. 制作結果の確認

- ブランド名・確定コピーの表記を守ったか。
- 誰に何を伝える制作物か、主語と次の行動が明確か。
- 事実と提案を分け、実績や効果を誇張していないか。
- 色・書体・余白を役割に沿って使い、ロゴの比率と余白を守ったか。
- PC・スマホで折返し・画像比率・整列・横はみ出し・操作領域を確認したか。
- 装飾やアニメーションが文章・写真の可読性を損なっていないか。
- キーボード、動きを減らす設定、見出し階層、画像の代替説明を確認したか。
- 未確認の情報や適用できなかった条件を、完成済みとして扱っていないか。

## 11. AIへの依頼テンプレート

```text
添付の「Highlite ブランドハーネス」を制作基準として使ってください。

制作物: [Webページ / スライド / 記事 / 広報文など]
目的: [読み手に理解・判断・行動してほしいこと]
対象: [どのフェーズの、どんな役割の人か]
媒体・サイズ: [掲載先、画面幅、ページ数、文字数など]
確認済みの情報: [固有名詞、内容、数値、日付、根拠URL]
必ず使うコピー・素材: [原文、素材、参照先]
変更できる範囲: [今回調整してよい箇所]
成果物の形式: [文章 / HTML・CSS / 構成案など]

事実と提案を分け、未確認の情報を補完しないでください。
ブランドコピー・ロゴ・配色の役割を守り、読みやすい構造で作ってください。
完成物に続けて、主な判断理由と確認が必要な点を短く記載してください。
```

## 12. 参照元・更新について

- [Brand Guidelines](https://highlite.co.jp/brand-guidelines/) — CI・VI・デザインと文章の共通基準。
- [About us](https://highlite.co.jp/about/) — Vision・Approach・Ethosと企業情報。
- [Service](https://highlite.co.jp/service/) — 対象・提供内容。
- [TOP](https://highlite.co.jp/) — 既存の視覚表現・コピー・モーション。
- [ブランド素材の問い合わせ](https://highlite.co.jp/contact/?kind=press)

これは更新日時点のスナップショットです。AIの生成結果が自動で公式見解になるわけではありません。公開前に、依頼者が事実・権利・表現を確認してください。