DESIGN SYSTEM

Style Guide

2026年9月18日更新。トップと下層ページで採用したデザインを掲載しています。

COLORS

白とグレー、アクセント1色

アクセントは「塗り」に使います。ボタン・チップ・ニュース帯のラベル・企業支援の行のホバーはアクセント地に --on-interactive の文字（4.5:1以上）。暗い面の強調は --on-dark-accent（6.0:1以上）。明るい面の上ではアクセントを文字や細い線に使いません（読めないため）。明るい面のラベル・リンク・番号は --on-surface-accent（6.5:1以上）です。

色見本と比率は、いま効いている renewal.css の値をその場で読んで出しています（?accent= で試している色もそのまま映ります）。DiSAロゴのSVGは青緑 #438093 のままで、ほかの場所には青緑を使いません。色の実値は renewal.css の :root と「accent-theme: パレット」が正です。

TYPOGRAPHY

Inter ＋ Noto Sans JP

見出し・リード・ラベルは太く、説明本文は通常の太さにします。日本語本文の行高は約1.6〜1.95。旧ページ固有のサイズは共通ルールへの統合を継続します。

COMPONENTS

チップとカード

リンクチップは通常時にアクセントのベタ塗り。ホバー／キーボードフォーカス時に反射・浮き上がりを付けます。

状態を示すチップ（急募など）は .status-chip：急募 リンクではないので動きは付けず、見出しのラベルの横に置きます。

チップの角丸は999px。チップの標準は14px・余白12px 24px。TOPヒーローのチップだけ1段小さく13px・余白8px 18px。3タグカードのタグは16px。フォームの入力欄は12px。小さな開閉パネルは16px。カードの標準は24pxです。

NAVIGATION

サブメニュー

LAYOUT

背景をずらし、内容を揃える

白とグレーの背景面は、左右で幅・開始位置・角丸を変え、セクションをまたがせます。カードの上端やコンテンツの左右端は揃えます。

MOTION

文字と操作に動きを付ける

動画は素材確認用。TOPでは #444 を92%重ね、0.65倍速で再生します。画面外・非表示タブでは停止し、動き低減設定では自動再生せず静止画を表示します。

• TOP見出し：1文字65ms、初回のみ。
• 3タグ：画面に入ったら上から順に1文字50ms、1回のみ。
• チップ：2px浮き上がり。TOPの詳細表現には光の反射とわずかな拡大も使用。
• TOP「DiSAの活動」「企業支援」（PC）：見出しを上から148pxに固定し、大きい番号を画面中央の項目に合わせて切り替えます（活動は01→03。先頭のディレクションの要点カードは数えません。企業支援は01→04）。活動はカード左・見出し右、企業支援は見出し左・メニュー右の左右反対。項目は画面に入ると下から表示。スマホは固定なしの一覧です。
• スクロール量に合わせてJSで要素を拡大縮小する演出は使いません。
• 動き低減設定を尊重。AOSの一律適用は現行の標準にしません。

企業支援の行の見本。ホバー／キーボードフォーカスで左からアクセントに塗られ、文字は --on-interactive の色になります。

ASSETS

ロゴ・写真・アイコン

ブランドロゴ & ワードマークコンセプト

DiSAのブランドアイデンティティを表現したロゴとワードマークアセットです。コンセプト動画（縦型 4:5）は、SNSやプロモーション用としての活用を想定しています。

LIGHT BACKGROUND

メインロゴ

DARK BACKGROUND

メインロゴ

既存の正式なDiSAロゴを使用し、テキストで描き直しません。写真・イラストは既存サイトの素材を優先。助田正樹の写真はカラー、相談対象カードの人物イラストは中央寄せにします。

アイコンは Material Symbols Outlined。意味が伝わりやすくなる場所に使います。装飾用は aria-hidden、アイコンだけの操作には操作名を付けます。

Material Symbols（新しいタブで開きます） ／ 背景動画：tommyvideo / Pixabay（新しいタブで開きます）