ミシマ社（MISHIMASHA） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-03 / 対象: https://mishimasha.com/, /books/, /company/

1. Visual Theme & Atmosphere

2006年創業、京都と東京に拠点を置く出版社。「原点回帰」を掲げ、 自社流通（直取引）で本を届けている。サイトは白地に緑 #009d4e 一色を差し、 文字はゴシック1本。本の書影が持つ強い組版に対して、UI 側は徹底して中立に振る。

• デザイン方針: 白地・ゴシック1本・緑1色。書影を主役にする
• 密度: 中。1画面に書影を2〜4点、説明は短く
• キーワード: 白地、緑、ゴシック1本、0.3emのナビ、1.6の行送り

このサイトの特徴的な癖（他サイトと違う点）

1. 出版社なのに明朝を1箇所も使わない。見出し・本文・ナビすべてゴシック。 明朝は書影の中（デザイナーの組版）にだけ存在する
2. 文字色が rgba(39, 30, 21, 0.88)。hex ではなくアルファ付きの黒茶。 白地上の実効色は約 #413931。純黒を避けて紙の印象に寄せている
3. letter-spacing: 0.3em（4.8px ÷ 16px）はグローバルナビだけ。 「本 の 一 覧」のように大きく開き、他の要素はすべて normal
4. line-height: 1.6 が全階層で共通。15/24、14/22.4、28/44.8、22.5/36、 12/19.2 とサイズが変わっても比率が動かない。読み物本文だけ 2.0
5. ヘッダーの高さを CSS 変数で持つ。--header-y: 128px / --header-y-low: 80px。スクロールで縮む固定ヘッダー
6. font-family に "Noto Sans JP" が2回書かれている （"Noto Sans Japanese", "Noto Sans JP", "Noto Sans JP", …）。 旧名からの移行の名残がそのまま残っている
7. 重版バッジが純赤 #ff0000。緑1色の面に、刷数だけが原色の赤で立つ
8. border-radius が 10px（ボタン）と 5px（バッジ）の2値しかない

2. Color Palette & Roles

Base（基調）

• Background (#ffffff): ページ地色
• Ink (rgba(39, 30, 21, 0.88)): すべての文字。白地上の実効色 ≒ #413931
• Ink Solid (#271e15): ボタンの罫線（アルファなしの同色）
• Text on Green (#ffffff): フッター・ページネーションの文字
• Copyright (rgba(255, 255, 255, 0.8)): フッター最下部

注意: 文字色を hex に置き換えない。rgba(39, 30, 21, 0.88) のまま使う。 色地・写真の上でも同じ指定が使われるため、透過があること自体が仕様。

Brand（ブランド）

• Brand Green (#009d4e): フッターの地色、ページネーション、アクセント
• Green Dark (#016c36): カレント状態（現在のページ番号）
• Link Green (#008000): 本文中のリンク文字（フッターの緑とは別の値）

Accent（1点だけの原色）

• Reprint Red (#ff0000): 「2刷」「6刷」等の重版バッジ

Neutral（面・罫）

• Divider (rgba(24, 24, 24, 0.06)): 区切り罫
• Top Gradient (linear-gradient(rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 100%)): ヘッダー直下に敷く極薄のグラデーション。境界を影ではなく階調でつくる
• Menu Overlay (rgba(39, 30, 21, 0.4)): メニュー展開時のオーバーレイ。 文字色と同じ黒茶を透過させている
• Search Panel (rgba(237, 237, 237, 0.96)): 検索パネルの面

3. Typography Rules

3.1 和文フォント

ゴシック1本のみ。明朝を持たない。

• ゴシック体: "Noto Sans Japanese", "Noto Sans JP"（Webフォント）→ ヒラギノ角ゴ ProN W3 → メイリオ → 游ゴシック のフォールバック

出版社サイトでありながら明朝を一切使わないのは、書影そのものが強い組版 （明朝・特太ゴシック・手書き）を持っているため、UI が書体で競合しないという判断。

3.2 欧文フォント

• サンセリフ: Avenir, Helvetica, Arial, sans-serif（和文チェーンの末尾）

欧文専用のフォント指定を持たない。Avenir を和文チェーンの後ろに置き、 和文Webフォントに欧文グリフがない場合のみ拾わせる。

3.3 font-family 指定

cssfont-family: "Noto Sans Japanese", "Noto Sans JP", "Noto Sans JP",
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, 游ゴシック, YuGothic,
             Avenir, Helvetica, Arial, sans-serif;

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

• 和文Webフォント優先。"Noto Sans Japanese"（旧名）→ "Noto Sans JP"（現行）の順
• "Noto Sans JP" が2回書かれているのは移行時の名残。害はないが、 新規に書くときは1回でよい
• 和文は Mac（ヒラギノ ProN）→ Win（メイリオ）→ 游ゴシック の順
• 欧文は最後。Avenir を先頭に置かない（和文優先チェーン）

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

ウェイトは 400 と 700 の2値。中間（500 / 600）を使わない。 **「読ませる文＝400 / 名前とラベル＝700」**で割っている。

3.5 行間・字間

• line-height: 1.6 がサイト全体の基準。15px→24px、14px→22.4px、 28px→44.8px、22.5px→36px、12px→19.2px。サイズが変わっても比率が動かない
• 読み物本文だけ 2.0（15px→30px）。会社概要・長文ページ
• 詰めるのは新刊見出しだけ（23px → 29px = 1.26）。 太く大きい見出しを1〜2行に収めるための例外
• letter-spacing は原則 normal。サイト全体でほぼ 0
• 例外はグローバルナビの 0.3em（4.8px ÷ 16px）だけ。 「本 の 一 覧」「書 店 様 へ」と一文字ずつ開いて看板のように見せる

css/* 基準 */
body {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  color: rgba(39, 30, 21, .88);
}

/* グローバルナビ — 唯一 letter-spacing を持つ */
.nav-link {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: .3em;
}

/* 読み物本文 */
.prose { font-size: 15px; line-height: 2.0; }

/* 新刊見出し — 唯一詰める */
.feature-title { font-size: 23px; font-weight: 700; line-height: 1.26; }

3.6 禁則処理・改行ルール

• 書名は『』で囲む。『』の中で改行しない （例:『ゼミはガチだと役に立つ』『新装版 超訳 古事記』）
• 新刊見出しは「7月の新刊『A』『B』」のように複数の書名を1つの見出しに並べる。 line-height: 1.26 で詰めて2行に収める
• 著者名（「内藤正典」「倉貫義人」）は途中で折らない
• ナビは letter-spacing: 0.3em を持つため、4〜5文字までのラベルに限る

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt を使わない。実測ですべての要素が normal
• 字間は letter-spacing のみで制御し、プロポーショナル詰めに依存しない
• Noto Sans JP のベタ組みをそのまま使う

3.8 縦書き

該当なし。全ページ横組み。縦組みは書影の中にのみ存在する。

3.9 preview.html でのフォント代替

代替が不要なサイト。Adobe Fonts / 商用Webフォントを使っていないため、 preview.html でも実サイトとほぼ同じ見え方になる。

4. Component Stylings

Buttons

Outline Tag Button（主要な誘導 — 塗らずに枠線1本）

• Background: transparent
• Text: rgba(39, 30, 21, 0.88)
• Border: 1px solid #271e15
• Border Radius: 10px
• Padding: 7px 12px
• Font: 14px / weight 700

css.btn-tag {
  display: inline-block;
  background: transparent;
  color: rgba(39, 30, 21, .88);
  border: 1px solid #271e15;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 700;
}

用例: 「展示」「ミシマ社ラジオ」「新刊」

塗りのCTAを持たない。誘導はすべて枠線ボタンかテキストリンク。

Badges

Reprint Badge（重版）

• Background: #ff0000 / Text: #ffffff
• Border Radius: 5px / Padding: 5px 8px
• Font: 12px / weight 700 / line-height: 1.0

書影の右下または上に重ねる。「2刷」「6刷」など刷数を出す。 サイト内で唯一の原色。

Pagination

• Background: #009d4e / Text: #ffffff
• Border Radius: 0px / Size: 33px 角
• Font: 15px / weight 400
• カレントは #016c36（濃い緑）

css.page-numbers          { background: #009d4e; color: #fff; width: 33px; height: 33px;
                         line-height: 33px; text-align: center; }
.page-numbers.current  { background: #016c36; }

Cards（書籍カード）

• Background: transparent
• Border / Shadow: なし
• 構成: 書影（そのまま・トリミングしない）→ 書名（16px / 700）→ サブタイトル（12px / 700）→ 著者（15px / 400）
• 書影に角丸・影・枠を付けない。本の表紙をそのまま置く

Header

スクロールで縮む固定ヘッダー。高さを CSS 変数で管理する。

css:root {
  --header-y: 128px;       /* 初期高さ */
  --header-y-low: 80px;    /* スクロール後 */
}
.l-header { height: var(--header-y); transition: height .3s; }
.is-scrolled .l-header { height: var(--header-y-low); }

• 左: ハンバーガー ＋ ナビ2項目（「本の一覧」「書店様へ」）
• 中央: ロゴ（丸い版元マーク ＋「ミシマ社 / MISHIMASHA」）
• 右: 検索フィールド（プレースホルダ「書名、キーワード」）
• 直下に linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0)) を敷いて境界をつくる

Navigation / Drawer

• ドロワー展開時のオーバーレイ: rgba(39, 30, 21, 0.4)
• ドロワー内リンク: 14px / weight 400 / line-height: 1.6
• 検索パネル: rgba(237, 237, 237, 0.96)

Footer

• Background: #009d4e（ブランドグリーンのベタ）
• リンク: 14px / weight 700 / #ffffff
• コピーライト: 12px / rgba(255, 255, 255, 0.8)

5. Layout Principles

Container

3段のコンテナを持ち、内容の種類で使い分ける。

Grid

• トップの新刊: 2カラム（書影を大きく2点並べる）
• 書籍一覧: 3〜4カラム
• 会社概要: 1カラム（760px）

Spacing Scale

Header Offset

固定ヘッダーぶんのオフセットは var(--header-y) を使う。 px を直接書かない（スクロールで 128px → 80px に変わるため）。

6. Depth & Elevation

影はほぼ使わない。境界は以下でつくる:

• ヘッダー直下の極薄グラデーション linear-gradient(rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 100%)
• 区切り罫 rgba(24, 24, 24, 0.06)
• フッターの緑ベタ

7. Do's and Don'ts

Do（推奨）

• ゴシック1本で組む（Noto Sans JP）。明朝を UI に持ち込まない
• 文字色は rgba(39, 30, 21, 0.88) をそのまま使う（hex に潰さない）
• line-height は 1.6 で全階層を統一。読み物本文だけ 2.0
• letter-spacing は normal。グローバルナビだけ 0.3em
• font-weight は 400 / 700 の2値。中間ウェイトを使わない
• ブランドグリーン #009d4e はフッターとページネーションに使い、 カレントは #016c36 に落とす
• 重版バッジは #ff0000 / border-radius: 5px。サイト内で唯一の原色
• ボタンは塗らず 1px solid #271e15 ＋ border-radius: 10px
• 書影はそのまま置く（角丸・影・枠を付けない）
• ヘッダー高さは --header-y / --header-y-low の変数で持つ

Don't（禁止）

• 明朝を UI に使わない（明朝は書影の中にだけ存在する）
• 塗りのCTAをつくらない（誘導は枠線ボタンかテキストリンク）
• 書影に角丸・影・トリミングを加えない
• letter-spacing: 0.3em をナビ以外に広げない
• line-height を階層ごとにバラバラにしない（1.6 で通す）
• 中間ウェイト（500 / 600）を使わない
• 緑と赤以外の有彩色を足さない
• 影で階層をつくらない（グラデーションと罫線でつくる）

8. Responsive Behavior

Breakpoints

980px が主境界（一般的な 768px ではない）。 さらに 900 / 984 / 1020 / 1140px の中間ブレークポイントで 2カラムを崩さずに書影サイズだけを削る。

モーション

@media (prefers-reduced-motion: reduce) を持つ。 ヘッダーの高さトランジションを無効化する配慮。

モバイルでの変化

• ナビ2項目 → ハンバーガーに格納。letter-spacing: 0.3em は維持する
• ヘッダー 128px → 80px 前後（--header-y を上書き）
• 新刊 2カラム → 1カラム。書影は幅いっぱい
• 本文 15px / 1.6 は変えない

タッチターゲット

• 最小 44px × 44px。枠線ボタンは 7px パディング ＋ 14px 文字で約 30px なので、 モバイルでは上下パディングを 13px に増やして確保する
• ページネーションの 33px 角も 44px に広げる

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff
Ink:             rgba(39, 30, 21, 0.88)（hex に潰さない）
Ink Solid:       #271e15（ボタンの罫線）
Brand Green:     #009d4e（フッター・ページネーション）
Green Dark:      #016c36（カレント）
Link Green:      #008000（本文中リンク）
Reprint Red:     #ff0000（重版バッジ）
Divider:         rgba(24, 24, 24, 0.06)
Overlay:         rgba(39, 30, 21, 0.4)
Top Gradient:    linear-gradient(rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 100%)
Font:            "Noto Sans Japanese", "Noto Sans JP",
                 "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
                 メイリオ, Meiryo, 游ゴシック, YuGothic,
                 Avenir, Helvetica, Arial, sans-serif
Base Size:       15px
Line Height:     1.6（全階層）/ 2.0（読み物本文）/ 1.26（新刊見出しのみ）
Letter Spacing:  normal / 0.3em（グローバルナビのみ）
Font Weight:     400 / 700 の2値
Border Radius:   10px（ボタン）/ 5px（バッジ）/ 0px（ページネーション）
Shadow:          none（既定）
palt:            off（font-feature-settings: normal）
Header:          --header-y: 128px / --header-y-low: 80px
Container:       1280px（ワイド）/ 960px（標準）/ 760px（読み物）

プロンプト例

ミシマ社（MISHIMASHA）のデザインシステムに従って、新刊一覧ページを作成してください。
- ページ背景は #ffffff、文字色は rgba(39, 30, 21, 0.88)（hex に置き換えない）
- フォントはゴシック1本
  "Noto Sans Japanese", "Noto Sans JP", "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, 游ゴシック, YuGothic,
  Avenir, Helvetica, Arial, sans-serif
  明朝は使わない（明朝は書影の中にだけ存在する）
- line-height は 1.6 で全階層を統一。読み物本文だけ 2.0、新刊見出しだけ 1.26
- letter-spacing は normal。グローバルナビだけ 0.3em（「本 の 一 覧」）
- font-weight は 400 と 700 の2値のみ
- 見出し 28px/700、セクション 22.5px/700、新刊見出し 23px/700/1.26、
  書名 16px/700、本文 15px/400、説明 14px/400
- 書籍カードは書影をそのまま置く（角丸・影・トリミングなし）。
  書影の上に重版バッジ（#ff0000 / #fff / border-radius 5px / padding 5px 8px /
  12px / 700）を重ねる
- 誘導は塗らない枠線ボタン
  transparent / 1px solid #271e15 / border-radius 10px / padding 7px 12px / 14px / 700
- ページネーションは #009d4e の 33px 角、カレントのみ #016c36、角丸なし
- フッターは #009d4e のベタ塗り、リンクは白 14px/700、
  コピーライトは rgba(255,255,255,0.8) 12px
- ヘッダーは固定で高さを CSS 変数にする（--header-y: 128px / --header-y-low: 80px）。
  直下に linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0)) を敷いて境界をつくる
- 影は使わない。区切りは rgba(24,24,24,0.06) の罫線
- 緑と赤以外の有彩色を足さない
- コンテナは 1280px（一覧）/ 960px（標準）/ 760px（読み物）