DESIGN SYSTEM

Design System

DiSAのすべてのページは、この設計書に基づいて実装されています。カラートークン・コンポーネント・グリッド・アニメーションを1ファイルで一元管理することで、ブランドの統一感と実装の再現性を保証します。

🎨

Token First

色・サイズ・余白はすべて CSS 変数で定義。デザイン変更は1箇所の編集で全ページに反映されます。

🧩

Component Based

15 のコンポーネントパターンで構成。同じクラス名・同じ構造で、どのページも一貫した見た目を保証します。

📱

Mobile Ready

全グリッドは 960px 以下で自動的に 1カラムへ折り返し。追加実装なしにモバイル対応を実現します。

DESIGN TOKENS

1. デザイントークン

カラー — アクセント

--blue#3f8092アクセント・CTA

--blue-deep#2f6674ホバー・強調

--blue-soft#b9d7de背景・サブ強調

カラー — ベース & ニュートラル

--bg#edededページ背景

--panel#dfdfdfパネル背景

--c-surface#f5f5f5カード・行背景

--text#313338本文テキスト

--c-ink#111見出し・太テキスト

--c-muted#555補足テキスト

--c-dim#888薄いラベル

--surface-border#d0d0d0ボーダー・区切り

タイポグラフィスケール

変数	値 (clamp)	用途
--fs-1	38px〜64px	超大見出し (.h2-accent)
--fs-2	22px〜34px	セクション見出し (h2)
--fs-3	17px〜20px	カード見出し (h3)
--fs-4	14px〜17px	本文
--fs-5	12px〜14px	補足テキスト・ラベル

シャドウ

--surface-shadow

--surface-shadow-strong

--surface-shadow-deep

ボーダーラジウス

--radius-sm
8px

--radius-md
12px

--radius-lg
14px

pill
999px

BUTTONS

2. ボタン

標準 CTA — .cm-btn

お問い合わせはこちら

<a class="cm-btn" href="/inquiry">お問い合わせはこちら</a>

サービスカード内 CTA — .service-banner-btn

<a class="service-banner-btn" href="/inquiry">詳細はこちら →</a>

TYPOGRAPHY

3. タイポグラフィ

フォントファミリー

Inter

"Inter" — 欧文・数字・UI要素

Noto Sans JP

"Noto Sans JP" — 日本語テキスト

font-family: "Inter", "Noto Sans JP", sans-serif;

フォントウェイト

Regular 400 本文・読み物テキスト

Bold 700 見出し・カードタイトル・強調

Black 900 インパクト見出し・数字・.h2-accent

ページ最大見出し — h1.page-title

ページタイトル

<h1 class="page-title">ページタイトル</h1>

セクションラベル + 見出し — .eyebrow + h2

SECTION LABEL

セクション見出し

<p class="eyebrow">SECTION LABEL</p>
<h2>セクション見出し</h2>

補足見出し — .sub

サブ見出し・補足テキスト

<p class="sub">サブ見出し・補足テキスト</p>

本文テキストコンテナ — .content-stack

本文テキスト。複数段落はこの中に並べます。

2段落目。リスト要素も使えます。

リスト項目 1
リスト項目 2

<div class="content-stack">
  <p>本文テキスト。</p>
  <p>2段落目。</p>
</div>

LAYOUT

4. パネル & レイアウト

標準パネル — .panel

.panel（ページ背景と区別がつきにくいため枠線で表示）
背景: --panel (#dfdfdf), padding: clamp(20px, 3vw, 40px), border-radius: 14px

<section class="panel" data-aos="fade-up" data-aos-duration="700">
  <p class="eyebrow">LABEL</p>
  <h2>見出し</h2>
  <!-- コンテンツ -->
</section>

イントロパネル — .panel.about-intro-dark

.about-intro-dark: 背景・ボーダーが消えページ背景と一体化。ページ最初のパネルに使用。

<section class="panel about-intro-dark" data-aos="fade-up" data-aos-duration="700">
  <h1 class="page-title">ページタイトル</h1>
  <div class="content-stack">
    <p>概要文。</p>
  </div>
</section>

インナーパネル — .inner-panel

パネル内のサブエリア。背景色は --bg (#ededed) と同じ。パネル (#dfdfdf) の中で明るく浮き上がる。

<div class="inner-panel">
  <!-- ネストしたコンテンツ -->
</div>

CARDS

5. カード

汎用カード — .cards > .card（3カラム）

カード本文テキスト。グリッド内で使う汎用カードです。

カード本文テキスト。3カラムグリッドで表示されます。

カード本文テキスト。

<div class="cards">
  <div class="card" data-aos="flip-left" data-aos-duration="400"
       data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="card-banner"><h3>見出し</h3></div>
    <div class="card-body"><p>本文</p></div>
  </div>
</div>

MVVカード — .mvv-grid > .mvv-card（3カラム）

🏔️

Mission

ミッションの内容文が入ります。

🔭

Vision

ビジョンの内容文が入ります。

💡

Values

バリューの内容文が入ります。

<div class="mvv-grid">
  <div class="mvv-card" data-aos="flip-left" data-aos-duration="400"
       data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="mvv-icon">🏔️</div>
    <h3>Mission</h3>
    <p>テキスト。</p>
  </div>
</div>

コンセプトカード — .concept-grid--3 > .concept-card（アイコンあり）

🎯

見出し

説明文テキストが入ります。

🔑

見出し

説明文テキストが入ります。

📋

見出し

説明文テキストが入ります。

<!-- 3カラム -->
<div class="concept-grid concept-grid--3">
  <div class="concept-card" data-aos="flip-left" ...>
    <div class="concept-icon">🎯</div>
    <h3>見出し</h3>
    <p>説明文。</p>
  </div>
</div>

<!-- リンクカード -->
<a class="concept-card" href="/activity/spot">
  <div class="concept-icon">🎯</div>
  <h3>見出し</h3>
  <p>説明文。</p>
</a>

サポートカード — .support-grid > .support-card（4カラム）

DIRECTOR

ディレクター

説明文テキスト。

DESIGNER

デザイナー

説明文テキスト。

ENGINEER

エンジニア

説明文テキスト。

MARKETER

マーケター

説明文テキスト。

<div class="support-grid">
  <div class="support-card" data-aos="flip-left" data-aos-duration="400"
       data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="support-icon">
      <img src="/assets/wp/support-faces/director.webp" alt="ディレクター" loading="lazy">
    </div>
    <span class="en-label">DIRECTOR</span>
    <h3>ディレクター</h3>
    <p>説明文。</p>
  </div>
</div>

サービスカード — .service-grid > .service-card（3カラム）

スポット業務委託型プロ人材サポート。

ディレクション課題の専門窓口サポート。

LINE-CRM導入支援サービス。

<div class="service-grid">
  <article class="service-card" data-aos="flip-left" data-aos-duration="400"
           data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <div class="service-banner">
      <img class="service-banner-avatar" src="/assets/wp/photo.webp" alt="担当者名">
      <p class="service-banner-title">サービス名</p>
      <a class="service-banner-btn" href="/activity/spot">詳細はこちら →</a>
    </div>
    <div class="service-body"><p>説明文。</p></div>
  </article>
</div>

メンバーカード — .member-cards > .member-card（3カラム）

助田正樹（すけだ）

代表理事

プロフィール文が入ります。

↗詳細プロフィール 𝕏

<div class="member-cards">
  <article class="member-card" data-aos="flip-left" data-aos-duration="400"
           data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <img src="/assets/wp/photo.webp" alt="氏名" loading="lazy">
    <h3>氏名（ニックネーム）</h3>
    <p class="role">役職</p>
    <p>プロフィール文。</p>
    <div class="member-links">
      <a href="/member/...">↗詳細プロフィール</a>
      <a class="x-icon-link" href="https://x.com/handle" target="_blank"
         rel="noopener noreferrer">𝕏</a>
    </div>
  </article>
</div>

FAQカード — .faq-grid > .faq-card（2カラム）

Q：どんな人が対象ですか？: A：Webディレクター、デザイナー、エンジニアなど制作に関わる方が対象です。

Q：費用はかかりますか？: A：活動によって異なります。詳しくはお問い合わせください。

<div class="faq-grid">
  <dl class="faq-card" data-aos="flip-left" data-aos-duration="400"
      data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
    <dt>Q：質問文</dt>
    <dd>A：回答文。</dd>
  </dl>
</div>

FLOW

6. フロー

.flow-list > .flow-item（縦並び）

ステップ 1

最初のステップの説明文が入ります。

ステップ 2

次のステップの説明文が入ります。

ステップ 3

最後のステップの説明文が入ります。

<div class="flow-list">
  <div class="flow-item">
    <div class="flow-num">1</div>
    <div class="flow-content">
      <h3>ステップ見出し</h3>
      <p>説明文。</p>
    </div>
  </div>
</div>

TABLE

7. 法人概要テーブル

.law-grid > .law-table

法人名	一般社団法人ディレクションサポート協会
代表理事	助田正樹
設立	2022年

<table class="law-table">
  <tr>
    <th>法人名</th>
    <td>一般社団法人ディレクションサポート協会</td>
  </tr>
</table>

GRID SYSTEM

8. グリッドシステム

グリッドクラス一覧

クラス	カラム数	使用コンポーネント
.cards	3	汎用 .card
.member-cards	3	.member-card
.mvv-grid	3	.mvv-card
.service-grid	3	.service-card
.concept-grid--3	3	.concept-card（3列）
.concept-grid--2	2	.concept-card（2列）
.support-grid	4	.support-card
.faq-grid	2	.faq-card
.law-grid	2	.law-table + 地図

※ すべてのグリッドは 960px 以下で 1カラムに折り返します。

ANIMATION

9. AOS アニメーション

使用パターン

要素	属性
.panel（セクション）	data-aos="fade-up" data-aos-duration="700"
カード 1枚目	data-aos="flip-left" data-aos-duration="400" data-aos-delay="0" data-aos-easing="ease" data-aos-once="true"
カード 2枚目	data-aos-delay="100"
カード 3枚目	data-aos-delay="200"
カード 4枚目	data-aos-delay="300"

<!-- data-aos-once="true" は必須 -->
<div class="mvv-card" data-aos="flip-left" data-aos-duration="400"
     data-aos-delay="0" data-aos-easing="ease" data-aos-once="true">
<div class="mvv-card" data-aos="flip-left" data-aos-duration="400"
     data-aos-delay="100" data-aos-easing="ease" data-aos-once="true">
<div class="mvv-card" data-aos="flip-left" data-aos-duration="400"
     data-aos-delay="200" data-aos-easing="ease" data-aos-once="true">

Design System

Token First

Component Based

Mobile Ready

1. デザイントークン

2. ボタン

3. タイポグラフィ

ページタイトル

セクション見出し

4. パネル & レイアウト

5. カード

カード見出し 1

カード見出し 2

カード見出し 3

Mission

Vision

Values

見出し

見出し

見出し

ディレクター

デザイナー

エンジニア

マーケター

助田正樹（すけだ）

6. フロー

ステップ 1

ステップ 2

ステップ 3

7. 法人概要テーブル

8. グリッドシステム

9. AOS アニメーション

Design System

Token First

Component Based

Mobile Ready

1. デザイントークン

2. ボタン

3. タイポグラフィ

ページタイトル

セクション見出し

4. パネル & レイアウト

5. カード

カード見出し 1

カード見出し 2

カード見出し 3

Mission

Vision

Values

見出し

見出し

見出し

ディレクター

デザイナー

エンジニア

マーケター

助田 正樹（すけだ）

6. フロー

ステップ 1

ステップ 2

ステップ 3

7. 法人概要テーブル

8. グリッドシステム

9. AOS アニメーション

助田正樹（すけだ）