← プロジェクトトップ認証パートナー DESIGN

認証パートナー（ninsho-partner.com）DESIGN.md

現行サイトのデザインシステム調査ドキュメント。

TOP改修・新規ページ・LP制作・バナー等で「認証パートナーらしさ」を再現するための正本。

調査日: 2026-06-11（実サイトのHTML/CSS全量から抽出）
対象: WordPress カスタムテーマ 3acwp
関連: TOP改修要件は ninsho_top_brief.html（本書はビジュアル面の補完）

1. トーン&マナー（ひとことで）

「堅い認証業界を、赤×丸ゴシックで親しみやすく」

ベースは白。メインの赤で信頼感・力強さ、淡い黄色のマーカー強調で「読みやすい解説」感
フォントは丸ゴシック系（モリサワ）で、士業的な堅さを和らげている
実績数字（シェアNO.1・認証率100%等）を大きく見せるのが訴求の軸

2. カラーパレット

テーマCSS変数（`:root` に定義済み・そのまま使う）

変数	値	用途
`--main-color`	#CA2922	メインの赤。見出しボックス・CTAボタン・強調テキスト
`--second-color`	#F8B500（PC）/ #FFC204（タブレット・SP）	ゴールド系アクセント
`--second-alittle-light-color`	#FFF699	黄色系の淡色階調
`--second-light-color`	#FEE799	マーカー強調の黄色（#FDE799と併用）
`--second-very-light-color`	#FEF4D9	淡黄背景
`--third-color`	#3366FF	第3色（リンク系）

変数化されていない頻出色（実CSSから抽出）

色	値	用途
バッジ赤	#DE231D	NEWバッジ・ニュース/セミナーのカテゴリタグ枠線（2px solid）
実績数字の赤	#D43A3A	実績カウント数字（56px）・インタビューのタブ/ページネーション
紺（予約系）	#004890	「オンライン相談予約」ボタン・CTA見出し帯・olマーカー。赤と並ぶ第2のアクションカラー
マーカー黄	#FDE799	蛍光ペン風ハイライト（後述のシグネチャー表現）
クリーム	#FFFAED	補足ボックス・資料請求・お悩みボックスの背景
本文テキスト	#333333	全文共通
補助グレー	#666 / #999 / #CCC / #DDD / #EEE / #F3F3F3	罫線・薄背景・サブテキスト

色の役割ルール（観察から）

赤（#CA2922）＝主役・行動：見出し・問い合わせ系CTA・強調
紺（#004890）＝もうひとつの行動：予約・相談系CTA（赤と役割分担して共存）
黄（#FDE799/#F8B500）＝強調・補助：マーカー・アイキャッチ。背景に薄く敷く
白背景が基本。色面で塗りつぶすのは見出しボックスとCTA周りだけ

3. タイポグラフィ

フォントファミリー（モリサワ Webフォント）

用途	フォント	備考
本文	新丸ゴ（"Shin Maru Go Regular"）	body指定。line-height 1.7
見出し・キャッチ	じゅん501（"Jun 501"）	丸ゴシック。使用箇所最多（x57）
まれに明朝	小塚明朝（Kozuka Mincho Pro/Std）	ごく一部のみ
アイコン	Font Awesome 5/6 Pro	※有償ライセンス。改修時は契約確認が必要

フォントサイズシステム（vwベースの独自スケール）

--font-01〜--font-35 が定義済み。固定pxではなくビューポート連動。

PC（≥1080px）: --font-NN = calc(100vw / 80 × NN/10) → 1280px幅なら --font-10 = 16px、--font-20 = 32px
タブレット（640–1079px）: 基準が 100vw / 60
SP（≤639px）: 基準が 100vw / 25（375px幅なら基準15px）

> 新規ページもこの変数を使えば自動でレスポンシブ追従する。px直書きしない。

ブレークポイント

区分	範囲
PC	min-width: 1080px
タブレット	640px 〜 1079px
SP	max-width: 639px

4. シグネチャー表現（"らしさ"の正体）

新規ページ・バナーで再現すべき特徴的パターン。

① 蛍光マーカー強調（最重要・サイト全域で使用）

strong に下半分だけ黄色を敷き、文字色をメイン赤に。


strong {
  background: linear-gradient(180deg, #fff 0%, #fff 50%, #fde799 50%, #fde799 100%);
  color: var(--main-color);
}

バリエーション: 70%/30%比率（.feature__box_catch）、背景色が#eeeのセクション用（#eee→#fde799）など。

② 赤ボックス見出し＋吹き出し三角

セクション見出し（例「選ばれる理由」）は赤背景・白文字・中央寄せ・fit-content、直下に三角。


h2 {
  background-color: #ca2922; color: #fff;
  padding: 1.25rem 5rem; width: fit-content; margin: 0 auto;
  font-size: var(--font-20); text-align: center; position: relative;
}
/* 下三角 = .triangle:after（border-top 25px solid 赤 / 左右50px transparent） */

③ カテゴリタグ・NEWバッジ

タグ: 白背景＋ 2px solid #DE231D 枠・中央寄せ・小さめフォント（ニュース/セミナー一覧）
NEW: 赤背景＋白文字＋同枠線

④ 実績数字の見せ方

数字だけ大きく赤（#D43A3A・56px級）、単位や説明は小さく。カウント系セクションで使用。

⑤ クリーム色の補足ボックス

補足・資料案内・お悩み列挙は #FFFAED の面で区切る（枠線なし、padding広め）。

5. ボタン・CTA

種類	スタイル
基本形	pill型（border-radius: 50px）・太字・幅19rem・中央寄せ・transition .7s
問い合わせ（ヘッダー）	白背景＋メイン赤の枠線（hoverで反転系）
オンライン相談予約	紺 #004890 塗り＋白文字
お見積もり	赤塗り（--main-color）＋ 3px solid #DE231D 枠
CTAブロック見出し帯	紺 #004890 帯＋白文字（`.cta__container__title`）
ホバー	色反転 or opacity .6

> CTAは「赤＝問い合わせ/見積」「紺＝予約/相談」の2色運用。新規制作でもこの対応を崩さない。

6. 角丸・影

要素	値
カード・ボックス	border-radius: 5px（最頻・x132）
ボタン	50px（pill）
円形（アイコン・番号）	50%
タブ	5px 5px 0 0
大きめカード	10px / 15px
影	`rgb(0 0 0 / 30%)` 系が標準（やや強め・x63）。薄い順に 10%〜30%

7. ロゴ・画像資産（テーマ内パス）

ベース: https://ninsho-partner.com/wp-content/themes/3acwp/images/

ファイル	内容
`common/logo.webp`	認証パートナーメインロゴ
`common/hand_logo.svg`	ハンドマーク（SVG）
`common/logo_3ac.webp`	スリーエーコンサルティングロゴ（グループ表記用）
`common/logo_assist.png`	アシストシリーズロゴ
`common/NEXT_logo.jpg`	ISO NEXTロゴ
`common/pmark_logo.webp`	Pマークロゴ（信頼マーク）
`common/security_action_logo.webp`	SECURITY ACTIONロゴ（信頼マーク）
`top/logo/*.webp`	導入企業ロゴ（aquaclala 等・お客様の声/実績で使用）

> Pマーク・SECURITY ACTION等の認証マークは規程上の表示ルールがあるため、リニューアル時も削除・改変しない。

8. 実装メモ（新規ページ・改修時の約束ごと）

1. 色は必ずCSS変数を参照（var(--main-color) 等）。hex直書きしない — SP/PCで --second-color の値が違うため直書きすると破綻する

2. フォントサイズも --font-NN を使う。px直書きはレスポンシブから外れる

3. 本文=新丸ゴ・見出し=じゅん501 の使い分けを維持（モリサワWebフォントの読み込みはテーマ側で設定済み）

4. Font Awesome Pro は有償。外部制作物に流用する場合はライセンス範囲を確認。代替はFA Free or SVG

5. マーカー強調（#FDE799）は「1画面に1〜2箇所」が現状の密度。乱用すると安っぽくなる

6. 赤・紺のCTA色役割（5章）を崩さない

7. キャッシュ: Autoptimize稼働中。CSS修正が反映されないときはAutoptimizeのキャッシュ削除

8. 既知の課題（参考）: H1欠落・schema未実装・OGタイトル二重 — 詳細は 3ac_diagnosis_report.html / 改修条件は ninsho_top_brief.html

9. デザイン会社への伝え方（要約）

> 現行は「白ベース＋赤（#CA2922）＋蛍光マーカー黄（#FDE799）＋丸ゴシック（じゅん501/新丸ゴ）」のシステム。

> リニューアルでトーンを進化させるのは歓迎だが、①赤を基調としたブランド認知、②赤/紺のCTA色役割、③実績数字を大きく見せる文化、④認証マーク表示——の4点は継承してほしい。

> 技術面はCSS変数・vwフォントスケールが既に整備されているので、新テーマでも同じ仕組み（変数化）を踏襲すること。