Contactお問い合わせ

Contents 目次

Highlite / Brand assets Version 1.0 ·

Brand Guidelines

ブランドガイドライン

思いに価値を。
その表現を、同じ基準で。

Highliteの考え方と、視覚表現の使い方。
言葉・色・かたち・動きを、ひとつのブランドとして伝えるためのガイドです。

ブランドキットをダウンロードZIP

AIとの制作には、ブランドの考え方・文章・デザインルールをまとめたMarkdownを。

mdファイルにしてブランドハーネスをダウンロードMD

Identity

CI — 私たちの考え方

戦略から制作まで。Highliteは、一緒に事業を作るブランドスタジオです。

社名の由来

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

表記

ブランド名は「Highlite」、会社名は「株式会社Highlite」。ロゴタイプは文字を組み直さず、配布素材を使用します。

Vision

人も事業も、 自らの価値を信じて 輝ける世界へ。

Approach

人の想いを聴き、時代を見渡し、ロジックで整理して、クリエイティブで超えていく。

Ethos

  • 夢中になって、見つける。
  • あらゆる角度から、眺める。
  • 心が動くまで、磨く。

Color

色を役割で使い分ける

青を軸に、紫と桃色で移ろいを表現します。淡い色は主に背景へ。本文はInkを基本に、背景との読みやすさを確かめます。

Brand blue

ブランドの基準色。主要リンク・アイコンに。

Deep blue

濃い背景や、明るい面上の強いアクセントに。

Landscape blue

風景・フッターなどの広い面に。

Lavender

背景のグラデーションや柔らかな色の変化に。

Peach

夜明けの背景や温度を感じるアクセントに。

Paper

ページの基本背景。

Ink

見出し・本文の基本色。

Muted

補足説明・メタ情報に。

Light

淡い面や濃色背景上の表現に。

Rule

区切り線。文字色として使わない。

StartUp

事業立ち上げ期の入口を示す色。

Enterprise

既存企業の入口を示す色。

Main visual

Approach

Service

Contact

画面用のRGB／HEXを基準にしています。印刷用のCMYK・特色は未定義です。通常の本文はコントラスト比4.5:1以上を目安にし、色だけで意味を伝えないようにします。

文字色の使い分け

言語やページではなく、情報の役割と背景に合わせて色を選びます。通常の見出し・本文には純黒を使いません。

  • Branding for your value.ブランディングで思いに価値を。
    基本の文字 #333333

    見出し・本文・主要リンク。淡い背景では英語も日本語も同じInkを使います。

  • Branding for your value.ブランディングで思いに価値を。
    補足の文字 #52618A

    日付・肩書き・補足説明。見出しや重要な本文を薄くする目的には使いません。

  • Branding for your value.ブランディングで思いに価値を。
    濃色背景の文字 #FFFFFF

    濃い青などの上に置く主要な見出し・本文・操作ラベル。

  • Branding for your value.ブランディングで思いに価値を。
    装飾的な大見出し #DADFF2

    既存デザインのDeeper downやContact usなど。小さな本文・重要な操作には使いません。

  • Branding for your value.ブランディングで思いに価値を。
    可読性のための例外 #000000

    半透明のContactボタンは、背景とのコントラストを確認し純黒と白を切り替えます。

ロゴ・シンボルの原本色、StartUp／Enterpriseのアクセント、エラーを伝える赤は別の役割として保持します。文字色の区別だけに頼らず、文言や形でも意味を伝えます。

Typography

書体・見出し・文章

Aa

Avenir / Avenir Next

欧文の見出し・ナビゲーション。端末にない場合はsans-serifへフォールバックします。

使用環境に合うライセンスを確認して導入してください。フォントファイルは配布しません。

あ

Zen Kaku Gothic New

日本語の見出し・本文。400・500・700を用途に応じて使います。代替はヒラギノ角ゴシック、sans-serifです。

Aa

Vujahday Script

For StartUPなどの短いアクセントに。長文や主要な見出しには使いません。

Zen Kaku Gothic New・Vujahday Scriptは同名でGoogle Fontsから入手できます。導入時に配布元のライセンスを確認してください。

ブランディングで思いに価値を。

事業の思いを言葉にし、その価値が伝わるかたちへ。見出しは短く、本文は意味のまとまりで分けます。

共通の文字組み基準（px）
用途PCスマホ太さ行間字間
ページ・大きなセクション52–80px52px4001.4.02em
補助的なセクション32px32px4001.4.02em
カード・小見出し24px24px500–7001.4–1.7.02em
本文16px16px400–5001.6–2.04–.08em
補足・メタ情報12–14px12–14px400–5001.6–1.8.02em

各ページの役割に応じた調整は許容します。見た目のサイズとHTMLの見出し階層は別に判断してください。

情報の階層

  • h1はページの主題として1つ。
  • h2は章、h3はその章の中の話題。
  • 段落・リスト・表を意味に合わせて選ぶ。
  • 画像の中だけに重要な文章を置かない。

文章のトーン

  • 主語と対象を明確にし、短い文で伝える。
  • 専門用語は、相手が判断できる言葉にする。
  • 実績や効果を誇張しない。
  • ブランドコピーは勝手に言い換えない。

Layout

余白で、情報の関係をつくる

詰め込まず、ひとつの内容にひとつのまとまりを。8pxを起点とした余白系列を共有します。

8px
16px
24px
32px
40px
60px
80px
120px
コンテンツ幅
基本1200px、広い面1302px、長文720px。
左右の余白
PCは画面幅に応じて24〜120px、スマホは24px。
段組み
PCは内容に応じて2〜3列。スマホは読み順を保って1列へ。
画像比率
実績のサムネイルは1200:680を基準に、比率を崩さず表示。

Components

共通パーツと状態

ページを移動する操作はリンク、その場で状態を変える操作はボタン。形と振る舞いを揃えます。

Service実績一覧へ

hover／キーボードフォーカスでは矢印が小さく動きます。下線や光彩をメニューに追加しません。移動リンクは高さ57px、フォームの操作は48px以上を確保します。

Service / Journal

上から下へ、白から透明へ。

News

左から右へ、白から透明へ。

Works

右から左へ、白から透明へ。

この見本は送信・保存しません。必須・エラーは色だけに頼らず、文章でも伝えます。

Expression

鉱石・風景・動き

素材の扱い

鉱石は価値の原石として、風景はその旅路として。現在のWebで使う立体的な鉱石・鳥・鯨の表現を基準にします。

写真やイラストを引き伸ばさず、文字の可読性を優先。人物写真がない場合は、鳥のダミーと準備中の説明を使います。

モーションの原則

情報が現れる順番を伝えるために動かします。見出しは1文字ずつ、英語と日本語はわずかな時間差で出現。光は文字の内側を控えめに通過します。

見出しは約1.8秒、リンクは約0.35秒。大きなバウンドや点滅を避け、動きを減らす設定では静止表示にします。

Branding for your value.

ブランディングで思いに価値を。

「見出しの演出を再生」で、現在のサイトと同じ見出しアニメーションを確認できます。写真・イラスト・3D原本は今回の配布セットに含みません。

Downloads

ブランド素材を使う

Highliteの紹介・広報・共同制作に。SVGは拡大して使う制作物へ、透過PNGはスライドや資料へ。最新の素材をお使いください。

Brand guidelines

CI・VI・カラー・書体・レイアウト・表現のガイド

PDF

Version 1.0 / 更新 2026-10-12。PNGはロゴ幅2400px、シンボル幅800px。商標・著作権は移転しません。利用範囲が不明な場合はご相談ください。

ブランド素材について問い合わせる

Contact us.

まずは話しましょう。
言葉になっていなくとも。