Primary
rgb(28, 61, 90)
#1C3D5A
見出し、主要CTA、キービジュアル、強い区切り
Main Color
- 推奨用途見出し / ボタン / 主要UI
- 印象信頼感 / 端正 / 落ち着き
- 使用量の目安全体の 10〜15%
Brand Guidelines
カラーガイドライン
指定のカラーを基準に、主役・補助・背景・文字の役割を整理し、画面上で迷わない設計にしています。
メインカラー
深いネイビーを基軸に、誠実さと設計品質を伝える。
#1C3D5A を主役にしつつ、#0B1F33 を締め色として使うことで、サイト全体に「堅さ」だけでなく「整っている印象」を与えます。 そのまま使うと少々重くなりますので、淡いブルーグレー系の補助色を差し込み、説明ページでも息苦しくならないトーンに調整しています。
Primary / #1C3D5A
Secondary / #0B1F33
Surface / #F1F5F9
Guideline
基本カラー
ブランドの中心となる色です。
基本はこの2色を軸に運用
Secondary
rgb(11, 31, 51)
#0B1F33
テキスト、フッター、強調テキスト、締め色
Support Core
- 推奨用途本文 / アイコン / 濃い背景
- 印象重心 / 精度 / 実務感
- 使用量の目安全体の 20〜25%
Extended Colors
拡張カラー
主役色を壊さずに“面・区切り・情報強調”を成立させるため、濃淡と役割で分解したトーンを定義しています。基本は「薄い面」「中間トーン」「アクセント」の3レイヤーで使用します。
面・区切り・強調の3レイヤーで使い分け
Surface Light
#F7FBFF
Soft Surface
#EFF4F8
Soft Accent
#DCE7F0
Mid Surface
#C7D8E6
Border
#B8CBDB
Muted Accent
#7E9CB7
Steel
#5C748B
Accent
#7FA8C9
Accent Soft
#A9C4DB
Sub Background
#F1F5F9
Neutral Line
#E6EDF3
運用ルール（Extended Colors）
- 面（背景）は「Primary 50〜150」か「Surface Gray」のみ使用
- 境界線は「Primary 200」か「Neutral 200」に限定
- アクセントは「Accent Sky」系のみ使用（多色禁止）
- 本文にアクセント色は使わない（必ず #0B1F33）
- ホバーや状態変化は“1段階だけ濃くする”に統一
Accent Variations
アクセントカラー一覧
Sakura
#FDECEC
Sakura
#E57373
Sakura
#C84545
Forest
#E8F5EE
Forest
#4FAF85
Forest
#2F8F6B
Citrus
#FFF4E5
Citrus
#F2A65A
Citrus
#D9822B
使用ルール
- 1画面で使用するアクセントは1系統まで
- 本文テキストには使用しない
- 背景 or ラベルなど用途を固定する
Examples
使用例
Primary CTA
主ボタンは Main Color をベースにし、文字は白。影やグラデーションは最小限に留めます。
Section Surface
説明セクションや比較表の背景は Sub Background を使い、本文可読性を優先します。
補足説明や補助情報の背景に使用
Data Highlight
数値や補助図形には Accent Sky を使い、主役色と競合しない情報強調を行います。
+38%
Rules
使用ルール
利用方法
- 見出し・主要導線には #1C3D5A を優先して使う
- 本文・細かなUI・濃い面には #0B1F33 を使う
- 薄い背景には #F1F5F9 や淡いブルーグレーを使う
- アクセント色は、数値や図表など限定用途に留める
禁止例
- 主役色を複数作って、ページごとに印象を変えない
- 濃色背景の上に細い文字を置いて視認性を落とさない
- アクセント色を本文テキストの基本色にしない
- 背景と境界線を同じ濃度にして、情報の層を潰さない