MIMIGURI（ミミグリ） DESIGN.md

人と組織の経営コンサルティングファーム 株式会社MIMIGURI の公式サイト（https://mimiguri.co.jp/）のデザイン仕様書。 「創造性の土壌を耕す／Cultivate the Creativity」を掲げ、研究知（CULTIBASE）とコンサルティングを両輪で回す。 最大の特徴は 和文 Tazugane Gothic StdN ＋ 欧文 Palatino Sans LT Pro という珍しい組み合わせと、行間を --lh-s: 1.5 / --lh-m: 1.75 / --lh-l: 2 の 3 トークンだけで統率すること。サイト全体のほぼ全テキストが 1.75で組まれている。 色はほぼ #111 と #fff の 2 色。CTA も塗らず、1px の枠と radius 50px のピルだけで示す。 リンクの下線は text-decoration ではなく background-image のグラデーションを background-size: 0 1px → 100% 1px でアニメーションさせて引く。 実サイトの computed style 実測（2026-08-18 取得。トップページ + 提供サービスページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 絵が語り、UI は黙る。ファーストビューは全画面の絵画的イラスト（森・土・果実）で、その上に白文字だけを置く。以降のセクションは白地・黒文字に切り替わり、装飾を一切足さない
• MIMIGURI について: 「創造性の土壌を耕す」を掲げる経営コンサルティングファーム。「土壌を耕す」という比喩をビジュアルの中心に据えているため、ヒーローの絵が情報より先に立つ
• 密度: 低〜中密度・企業サイト型。セクション間を PC で margin-top: 160px〜320px 空ける（SP は 100px）。1 画面に 1 メッセージ
• キーワード: Tazugane Gothic、Palatino Sans、#111 と #fff、行間 1.75、ピル枠 CTA、グラデーション下線、余白 160/320px
• 特徴:
  • 色を持たない。CSS 変数に定義された色は #111 #707070 #ddd #444 #aaa #fff #d00 の 7 つで、うち有彩色は #d00（バリデーション用）だけ。ブランドカラーという概念を UI に持ち込まず、色の役割はイラストが担う
  • 行間トークンが 3 つしかない。--lh-s: 1.5 / --lh-m: 1.75 / --lh-l: 2。見出しも本文もキャプションも同じ 1.75 で、読み物本文だけ 2 に開く。日本語サイトとしてはかなり思い切った統一
  • 和文の太字は「別ファミリー」で切り替える。--font-jp: TazuganeGothicStdN-Regular と --font-jp-bold: TazuganeGothicStdN-Bold の 2 変数を持ち、font-weight: 700 と同時にファミリー名も差し替える
  • 欧文だけ Palatino Sans LT Pro に切り替える。「PICKUP EVENT」「Creative Cultivation」「Business & Service」といったセクションの英語ラベル専用。和文には一切かからない
  • CTA を塗らない。「お問い合わせ」は background: transparent ＋ 1px solid ＋ border-radius: 50px。濃色（ヒーロー）の上では枠と文字が白、白地では #111 に反転する
  • カードの角丸は 4px、影は 0 2px 6px rgba(0,0,0,.1) の 1 種類だけ。それ以外の面は影を持たない
  • リンクの下線がグラデーション。background-image: linear-gradient(#111, #111) を background-size: 0 1px で隠し、hover で 100% 1px に伸ばす（transition: background-size .2s cubic-bezier(.01,.65,.43,.98)）
  • 実装は Tailwind ベース。ブレークポイント名が md（≤768px）と mdMin（>768px）の 2 つという独自命名

2. Color Palette & Roles

CSS Custom Properties が :root に定義されている。そのまま使うこと。

Neutral（サイトの色はほぼこれだけ）

• Black1 (#111111) — --color-black1: 本文・見出し・ボーダー・下線のすべて。純黒 #000 は使わない
• Gray1 (#707070) — --color-gray1: 英語ラベル（PICKUP EVENT 等）、住所・コピーライト等のフッター補助テキスト
• Gray2 (#dddddd) — --color-gray2: 区切り線・淡いボーダー
• Gray3 (#444444) — --color-gray3: 補助テキストの濃いほう
• Gray4 (#aaaaaa) — --color-gray4: プレースホルダ・無効状態
• White1 (#ffffff) — --color-white1: ページ背景・カードの面・濃色上の文字

Semantic（意味的な色）

• Red1 (#dd0000) — --color-red1: サイト唯一の有彩色。フォームのエラー・必須マーク用
• Success / Warning は 定義されていない。実装で追加する場合は --color-red1 と同じ粒度で --color-green1 等を足し、UI に色を増やさない方針を守る

Overlay

• Scrim (rgba(0, 0, 0, .7)): ヒーロー画像の上に白文字を置くときの暗幕。SP のメニュー展開時にも使う

背景の扱い

• ページ背景は #ffffff。ただし html / body に塗り指定はなく、UA 既定のキャンバスが白として見えている状態（実測の根拠も ua-default-canvas）。実装では body { background: var(--color-white1); } を明示すること
• ヒーローは画像そのものが背景。色ではなくイラストが面を作る

3. Typography Rules

和文 Tazugane Gothic StdN ＋ 欧文 Palatino Sans LT Pro。palt は使わず、字間は原則 normal。行間は 3 トークンだけ。

3.1 和文フォント

• ゴシック体: Tazugane Gothic StdN（田附ゴシック / Monotype）
  • Regular: TazuganeGothicStdN-Regular
  • Bold: TazuganeGothicStdN-Bold
• Regular と Bold が別ファミリー名として定義されている。可変フォントでもウェイト指定でもなく、ファミリーを差し替えて太字にする実装
• 明朝体は使わない
• Tazugane Gothic は Neue Frutiger と字面・重心を合わせて設計された和文書体。ヒューマニスト系の欧文と混植したときに、和文だけが重く沈まないのが選定理由と考えられる

3.2 欧文フォント

• サンセリフ: Palatino Sans LT Pro（PalatinoSansLTPro-Regular）
  • Hermann Zapf 設計のヒューマニストサンセリフ。セクションの英語ラベル専用に使う
  • 例: 「PICKUP EVENT」14px / ls 0.7px、「Creative Cultivation」20px / ls 1px、「Business & Service」14px / ls 0.7px
• 欧文フォントを本文には使わない。和文中の英数字は Tazugane Gothic の欧文グリフに任せる
• 等幅フォントの指定はない

3.3 font-family 指定

css:root {
  --font-jp:      "TazuganeGothicStdN-Regular", sans-serif;
  --font-jp-bold: "TazuganeGothicStdN-Bold", sans-serif;
  --font-en:      "PalatinoSansLTPro-Regular", sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-s: 1.5;
  --lh-m: 1.75;
  --lh-l: 2;
}

/* 本文・UI */
font-family: var(--font-jp);
font-weight: var(--fw-regular);
line-height: var(--lh-m);          /* 1.75 */
letter-spacing: normal;
font-feature-settings: normal;     /* palt は使わない */

/* 太字（ファミリーごと差し替える） */
font-family: var(--font-jp-bold);
font-weight: var(--fw-bold);

/* 英語ラベル */
font-family: var(--font-en);
letter-spacing: .05em;

フォールバックの考え方:

• フォールバックは sans-serif の 1 段だけ。Web フォントが落ちたときに游ゴシックやヒラギノを挟まず、OS の既定サンセリフへ直接落とす割り切り
• Web フォントが必須の設計。ライセンス上 Tazugane Gothic を使えない実装では、同じヒューマニスト系の和文（例: Zen Kaku Gothic New、Noto Sans JP）に置き換え、行間 1.75 と letter-spacing: normal を守るほうが印象は近くなる
• --font-jp-bold を用意するのを忘れない。font-weight: 700 だけ指定して合成太字（fake bold）にすると、Tazugane の字面が崩れる

3.4 文字サイズ・ウェイト階層

• weight は 400 と 700 の 2 値運用（--fw-medium: 500 は定義だけあり、実測では使われていない）
• サイズだけで階層を作る。色や字間で見出しを強調しない

3.5 行間・字間

• 原則 1.75（--lh-m）。見出しからキャプションまで、実測したほぼ全要素がこの比率
• 読ませる本文だけ 2.0（--lh-l）。18px のリード文・説明文がこれに当たる
• 1.5（--lh-s）は密に詰めたいとき用のトークン。トップページの実測には現れない
• 字間は normal。例外は次の 2 つだけ
  • ヒーローのキャッチ（30px）に letter-spacing: 3px（0.1em）。1 行しかない短文を絵の上で伸ばすための処理
  • Palatino Sans の英語ラベルに 0.05em（14px→0.7px / 20px→1px）
• palt は使わない

ガイドライン:

• 見出しに 1.3 のような詰まった行間を持ち込まない。40px の見出しでも 1.75（＝70px）を維持するのが MIMIGURI の版面
• 0.1em の字間を本文に広げない。ヒーロー 1 箇所限定の演出
• 英語ラベルは 必ず Palatino Sans ＋ 0.05em ＋ #707070 の 3 点セットで使う

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
word-break: normal;
line-break: strict;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 「CULTIBASE Lab」「Creative Cultivation」など和欧混植が頻出する。word-break: break-all は使わない（英単語が途中で割れる）

• 見出しは 40px / 行間 1.75 で 2〜3 行に折り返す前提。<br> での手動改行に頼らない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全ページ共通 */

• palt を掛けない。Tazugane Gothic の字面をそのまま使い、詰めが必要な箇所だけ letter-spacing で調整する方針
• 欧文は Palatino Sans 側のカーニングに任せる（kern の明示指定なし）

3.8 縦書き

縦組みは使わない。 writing-mode の指定は全ページで 0 件。

4. Component Stylings

塗りボタンが存在しない。CTA は「枠だけのピル」1 種類。

Buttons

Primary CTA（枠だけのピル）— ヘッダー「お問い合わせ」

• Background: transparent
• Text: 白地では #111111 ／ 濃色（ヒーロー）の上では #ffffff
• Border: 1px solid currentColor（白地では #111、ヒーロー上では #fff）
• Border Radius: 50px（ピル）
• Padding: 6px 24px
• Font: 和文 Bold 14px / 700 / lh 1.75
• Transition: all .2s cubic-bezier(.01,.65,.43,.98)
• 背景を塗らないので、下のイラストが透けるのが要点

Text Link（グラデーション下線）— サイトの主要な導線

css.link {
  text-decoration: none;
  background-image: linear-gradient(#111, #111);   /* = --color-black1 */
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0 1px;                          /* 通常は見えない */
  transition: background-size .2s cubic-bezier(.01, .65, .43, .98),
              color        .2s cubic-bezier(.01, .65, .43, .98);
}
.link:hover { background-size: 100% 1px; }         /* 右から左へ伸びる */

• text-decoration: underline を使わない。下線の太さ（1px 固定）と伸びる方向を制御するため
• フッターの二次リンク（プライバシーポリシー、X(Twitter)、CULTIBASE Radio 等）はすべてこの方式
• body.win のときだけ padding-bottom: 0 に補正するルールがある（Windows で下線位置がずれる対策）

Cards

• Background: #ffffff
• Border Radius: 4px
• Shadow: 0 2px 6px rgba(0, 0, 0, .1)（サイトで唯一の影）
• overflow: hidden で画像を角丸に沿わせる
• 構成: 画像 → タイトル（18px / 700 / lh 1.75）→ 補足（14px / 400）
• PC は横並び、SP は flex-col-reverse（画像が下に回る）

Badges / Tags

• 面色を持たない。「会員サービス」等のラベルは 12px / weight 700 / #111 の素のテキスト
• 面で囲みたい場合もカードの radius 4px に揃える（ピル 50px は CTA 専用）

Inputs

• 実測できるフォームがトップ／サービスページに無いため、以下は変数から導いた推奨値
• Background: #ffffff
• Border: 1px solid var(--color-gray2)(#ddd) → focus は 1px solid var(--color-black1)(#111)
• Border Radius: 4px（カードに揃える）
• Padding: 12px 16px / Font: 16px / lh 1.75
• Placeholder: var(--color-gray4)(#aaa)
• Error: 枠と文言を var(--color-red1)(#dd0000)
• フォーカスリングは実サイトでは UA 既定のまま（outline: auto 1px #005fcc）。実装では必ず可視のリングを明示すること（この点はサイトの実装をそのまま真似しない）

Header

• Height: 97px（PC） / 64px（SP） — --header-height-pc / --header-height-sp
• position: fixed。--main-offset-pc: -97px で本文を持ち上げ、ヒーロー画像をヘッダーの裏に潜り込ませる
• ヒーロー上ではロゴ・ナビ・CTA がすべて白、スクロール後の白地では #111 に反転する

5. Layout Principles

Spacing Scale

実測値から起こしたスケール（Tailwind の任意値で指定されている）。

• セクション間の余白が 160px / 320px と極端に広い。これが「1 画面 1 メッセージ」の体感を作っている

Container

• Max Width: 1200px（box-content なのでこれがコンテンツ幅）
• Padding (horizontal): 40px（PC） / SP は左右 20px 相当
• 中央寄せ: margin-inline: auto

Grid

• 2 カラムが基本（mdMin:grid-cols-2）
• Gutter: 48px（サービスカード） / 40px 0（縦のみ空ける 2 カラム） / 20px（記事カード）
• SP では 1 カラムに落とし、gap を 10px〜15px に詰める

6. Depth & Elevation

• 影で階層を作らないサイト。奥行きは「余白」と「暗幕」で表現する

7. Do's and Don'ts

Do（推奨）

• 行間は 1.75 を既定にする。読ませる本文だけ 2.0 に開く
• 太字は --font-jp-bold にファミリーごと切り替える（font-weight: 700 と併用）
• 英語ラベルは Palatino Sans ＋ letter-spacing: .05em ＋ #707070 の 3 点セットで統一する
• CTA は塗らずに 1px 枠 ＋ border-radius: 50px。濃色の上では枠・文字ともに白に反転させる
• リンクの下線は background-size アニメーションで引く（0 → 100%、0.2s、cubic-bezier(.01,.65,.43,.98)）
• セクション間は PC で 160px 以上空ける
• 色は --color-* の 7 変数から選ぶ。足すなら理由を持って足す

Don't（禁止）

• 色を増やさない。ブランドカラーを新設して CTA を塗ると、このサイトの設計が崩れる
• text-decoration: underline を直接使わない（下線の太さと出方が変わる）
• palt を掛けない。字詰めは letter-spacing で行う
• 見出しの行間を 1.3 に詰めない。40px でも 1.75 を守る
• ヒーローの letter-spacing: 3px を他所へ持ち出さない
• カード以外に影を付けない。radius 50px は CTA 専用、radius 4px はカード専用
• フォーカスリングを UA 既定のまま放置しない（実サイトはそうなっているが、実装では明示する）

8. Responsive Behavior

Breakpoints

• md / mdMin という 2 分岐が実装の基本。中間のタブレット専用レイアウトを持たない

レイアウトの切り替え

• グリッド: grid-cols-2 → 1 カラム
• gap: 48px / 40px / 20px → 15px / 10px
• セクション間: 160px（PC）/ 320px（PC 大） → 100px（SP）
• ヘッダー: 97px → 64px（--header-height-sp）。ナビはハンバーガー ＋ 全画面ドロワー（暗幕 rgba(0,0,0,.7)）
• ドロワー内は 第 1 階層 18px / 700 / lh 2.0、第 2 階層 14px / 400

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• CTA のピルは 6px 24px パディングのため、SP では上下パディングを 12px 以上に増やして 44px を確保する

フォントサイズの調整

• 見出しは 48px → 28〜32px、40px → 24〜28px 程度に縮める
• 本文 16px / リード 18px は SP でも下げない（行間 1.75〜2.0 を保てば読める）

9. Agent Prompt Guide

クイックリファレンス

Text Color:   #111111   (--color-black1)
Sub Text:     #707070   (--color-gray1)
Border:       #dddddd   (--color-gray2)
Background:   #ffffff   (--color-white1)
Error:        #dd0000   (--color-red1)

Font (JP):        "TazuganeGothicStdN-Regular", sans-serif
Font (JP Bold):   "TazuganeGothicStdN-Bold", sans-serif
Font (EN label):  "PalatinoSansLTPro-Regular", sans-serif

Body Size:    16px
Line Height:  1.75  (読ませる本文は 2.0)
Letter Spacing: normal  (英語ラベルのみ .05em)
palt:         使わない

CTA:          transparent / 1px solid currentColor / radius 50px / padding 6px 24px / 14px 700
Card:         #fff / radius 4px / shadow 0 2px 6px rgba(0,0,0,.1)
Container:    1200px + padding 40px
Breakpoint:   768px (md / mdMin)

プロンプト例

MIMIGURI のデザインシステムに従って、サービス紹介セクションを作成してください。

- フォント: 和文 "TazuganeGothicStdN-Regular"、太字は "TazuganeGothicStdN-Bold" にファミリーごと切り替える
- 英語ラベル（"Our Service" 等）は "PalatinoSansLTPro-Regular" / letter-spacing: .05em / 色 #707070
- 見出し 40px / 700 / line-height 1.75、本文 18px / 400 / line-height 2.0
- letter-spacing は normal、font-feature-settings も normal（palt を掛けない）
- CTA は塗らない: background: transparent / border: 1px solid #111 / border-radius: 50px / padding: 6px 24px / 14px / 700
- カードは #fff / border-radius: 4px / box-shadow: 0 2px 6px rgba(0,0,0,.1)
- リンクの下線は background-image のグラデーションを background-size: 0 1px → 100% 1px でアニメーション
- コンテナは max-width 1200px + padding 0 40px、セクション間は margin-top 160px
- 768px 以下で 1 カラム、gap を 15px に、セクション間を 100px に詰める