Brand Design Guidelines

co-nect
デザインガイドライン

Version 1.1 ／ 2026-04-22

01 — Brand

ブランド概要

Identity

会社名株式会社co-nect

代表中山友貴

設立2021年2月4日

Brand Direction

ビジョンご健康に！を世界公用語に。

ミッション健康×行動=ミライ

ターゲットBtoB（主）BtoC（副）

人格熱量・挑戦・誠実

02 — Color

カラーシステム

#F85602

co-nect Orange

PANTONE 1665 C

CTA・強調・ロゴ

#000000

Rich Black

PANTONE Process Black C

ロゴ・メイン見出し

#1A1A1A

Charcoal

本文・小見出し

#666666

Mid Gray

キャプション・補足

#F7F5F3

Off White

セクション背景（交互）

#FFFFFF

Pure White

基本背景

#FFF0E8

Orange Tint

薄い強調・ハイライト

#E5E5E5

Light Gray

区切り線・カード枠

使用比率の目安

白・オフホワイト系 70%

黒系 20%

10%

オレンジはCTAや強調に限定して使用。PANTONEカラーは印刷時に現物チップで要確認。

03 — Logo

ロゴ使用規定

ロゴバリエーション

標準版

基本使用。最優先

マーク単体

SNS・ファビコン等

白抜き版

暗い背景・Orange背景

モノクロ版

白黒印刷・刻印等

クリアスペース

最低余白ロゴ高さの 1/2

例：高さ40px→ 四辺20px以上

保護エリア内にテキスト・画像・罫線を配置してはいけない

最小使用サイズ

デジタル（Web）横幅 80px 以上

印刷物横幅 25mm 以上

マーク単体・デジタル24px 以上

マーク単体・印刷8mm 以上

背景別の使用ルール

白・明るい背景（#FFFFFF / #F7F5F3）標準版（オレンジ＋ブラック）

暗い背景（#1A1A1A / 黒系）白抜き版

co-nect Orange（#F85602）背景白抜き版

写真・複雑な背景の上白抜き版（白ボックスを敷くことを検討）

禁止事項（NG例）

指定外の色に変更

縦横比を変えて変形

傾ける・回転

ドロップシャドウ

縁取りを付ける

半透明にする

背景との明度差が不足

テキスト

他要素と重ねて使う

04 — Typography

タイポグラフィ

Display

56〜72px / SemiBold
line-height 1.2

健康×行動=ミライ

40px / SemiBold
line-height 1.3

ページ大見出しのサンプル

28px / SemiBold
line-height 1.4

セクション見出しのサンプル

20px / SemiBold
line-height 1.5

小見出し・カード見出し

Body L

18px / Regular
line-height 1.8

リード文・重要説明テキストのサンプルです。

Body

16px / Regular
line-height 1.8

通常の本文テキストのサンプルです。読みやすさを重視した行間で設定しています。

Small

14px / Regular
line-height 1.7

注釈・補足テキストのサンプルです。

Caption

12px / Regular
line-height 1.6

図表キャプション・法的文言のサンプルです。

書体の使い分け

Noto Sans JP SemiBold 日本語見出し・強調 / Web・印刷共通

Noto Sans JP Regular 日本語本文 / Web標準

Gotham Book 英字・数字（印刷・デザインツール）

Montserrat 英字・数字（Web・Google Slides）

小塚ゴシック日本語本文（Adobe製品内のみ）

05 — Components

コンポーネント

ボタン

詳しく見る →

Primary CTA

背景：#F85602

テキスト：#FFF8F5

角丸：4px

Padding：14px 32px

Secondary CTA

背景：#FFFFFF

テキスト：#F85602

枠線：1px solid #F85602

角丸：4px

テキストリンク

テキスト：#F85602

末尾に「→」を付ける

アンダーライン：ホバー時のみ

カード

サービス

co-nect

マンツーマンストレッチジム。パーソナライズされた施術で身体の不調にアプローチします。

システム

バディフル

小規模店舗向け予約システム・AIコンサル。集客から予約管理まで一括サポート。

コンサル

WellCon

健康経営コンサルティング。組織の健康課題を経営戦略と連動して解決します。

06 — Layout

レイアウト・余白規定

基本ルール

余白の基本単位8px

コンテンツ最大幅1200px

左右パディング（PC）80px

左右パディング（SP）20px

セクション間余白（PC）120px

セクション間余白（SP）64px

LP 構成順序

1 Hero（キャッチコピー＋CTA）

2 課題提起（数字・ファクト）

3 サービス紹介

4 実績・数字

5 導入事例・お客様の声

6 FAQ

7 CTA（お問い合わせ）

07 — Photography

写真・ビジュアル規定

✓ 使うべき写真

人物中心（笑顔・現場感・前向き）

健康的・自然光・明るいトーン

実際のサービス・店舗の様子

洗練されたオフィス・都市（アクセントとして）

✗ 避けるべき写真

暗い・沈んだトーンの写真

過度に演出されたストック感

無機質すぎる空間のみの写真

文字とコントラストが取れないもの

画像上にテキストを置く場合： 暗いオーバーレイ（rgba(0,0,0,0.4)以上）またはオレンジオーバーレイ（rgba(248,86,2,0.7)）を敷き、テキスト色は #FFF8F5 を使用する。

08 — Voice & Tone

ボイス＆トーン

ブランドの人格

熱量があるが押しつけがましくない。誠実でファクトベース（数字・事実で語る）。「一緒に変えよう」という共感型。シンプルで力強い言葉を使う。

✓ DO：使ってよい表現

社会課題を数字で示す（「約11年もの不自由な時間」）

公式・方程式のような表現（「健康×行動=ミライ」）

「一緒に」「つながる」「変える」「つくる」

実績・数値を使ったファクト表現

「〇〇な方へ」という読者への語りかけ

✗ DON'T：避ける表現

過度な敬語・硬すぎるビジネス語

抽象的すぎるビジョン語り（中身のない理念語）

カタカナ多用（ソリューション、スキームなど）

根拠のない形容詞（最高品質、業界No.1など）

受け身の語尾（〜されております）

09 — AI Template

AIへの指示テンプレート

LP・資料作成時、AIへの冒頭指示としてコピーして使用してください。

【カラー】
Primary CTA        : #F85602
背景（メイン）     : #FFFFFF / #F7F5F3（セクション交互）
テキスト（本文）   : #1A1A1A
テキスト（見出し） : #000000
テキスト（補足）   : #666666
オレンジ上テキスト : #FFF8F5

【フォント（Web）】
見出し   : Noto Sans JP SemiBold
本文     : Noto Sans JP Regular
英数字   : Montserrat

【ボタン】
Primary  : 背景 #F85602 / テキスト #FFF8F5 / 角丸 4px / padding 14px 32px
Secondary: 背景 #FFFFFF / 枠線・テキスト #F85602 / 角丸 4px
リンク   : テキスト #F85602 + 末尾「→」

【レイアウト】
最大幅       : 1200px
余白基本単位 : 8px
セクション余白: PC 120px / SP 64px

【LP構成順序】
Hero → 課題提起 → サービス紹介 → 実績 → 事例 → FAQ → CTA

【トーン】
熱量があり誠実、数字で語る、シンプルで力強い言葉。

co-nectデザインガイドライン