# DESIGN.md — BIOTOP（ビオトープ） > BIOTOP（https://www.biotop.jp/）のデザイン仕様書。 > 東京・大阪・福岡・神戸・札幌に展開する、アパレル／フラワーショップ／カフェを内包した複合セレクトショップ（JUN グループ／WordPress ベース）。 > 最大の特徴は **画像を全面に敷き、その上に白文字を直接置く「雑誌の見開き」構成**、**din-2014 の大文字英字タイポグラフィ**、そして差し色をディープグリーン `#354443` ただ一色に絞った設計。角は基本的に立て（radius 0）、唯一 **タグ／ラベルだけが完全なピル（radius = 1.5em）** になる。 > 実サイトの computed style 実測（2026-07-20 取得）に基づく。 --- ## 1. Visual Theme & Atmosphere - **デザイン方針**: **画像が主役、UI は文字だけ**。全面写真の上に白の din-2014 を直接重ね、枠・影・装飾を持たない。ショップサイトというよりカルチャー誌のレイアウト - **BIOTOP について**: 南貴之がディレクションした複合ショップ。アパレル・フラワー・カフェ・ギャラリーが同居する空間性を、Web でも「異なる写真ブロックの並置」で表現する - **密度**: 低密度。1 ブロック＝1 ビジュアル＋数語の英字。スクロールするほど大判の写真パネルが切り替わる - **キーワード**: din-2014、全面写真、白抜き文字、ディープグリーン #354443、大文字英字、ピルタグ、palt、余白、エディトリアル - **特徴**: - 書体は **din-2014（Adobe Fonts）＋和文 游ゴシック系** の一系統。明朝は使わない - **`font-feature-settings: "palt"` がグローバル適用**（body から全要素へ継承）。和文は常に詰め組み - **`letter-spacing` もグローバルに約 0.05em**。英字大文字を広めに送って誌面感を出す - 有彩色は **ディープグリーン `#354443` のみ**。それ以外は白・黒・グレー - 面は **radius 0 の矩形パネル**。ただし **タグ／カテゴリラベルだけはピル（radius 1.5em、透明地＋1px 白枠）** - ウェイトは **300（Light）と 400（Regular）の二択**。太字（700）を使わない - 見出しは **フルードサイズ**（ビューポート連動）。1440px で 72px、日付や補助ラベルは 9px 台まで落ちる --- ## 2. Color Palette & Roles > 実測値。CSS Custom Properties は WordPress のプリセット（`--wp--preset--color--*`）のみで、ブランド専用の変数は定義されていない。色は各コンポーネントに直接指定されている。 ### Brand - **BIOTOP Green** (`#354443`): 唯一のブランドカラー。深い青みのグリーン（≒モスグリーン）。BIOTOP PEOPLE / ONLINE 等の特集パネルのベタ地に使い、上に白文字を置く - **Green Tint 15%** (`rgba(53, 68, 67, 0.15)` ≒ `#e1e3e3`): フッターの地。白地の上にブランドグリーンを 15% 敷いた淡いグレーグリーン ### Neutral（背景・面） - **White** (`#ffffff`): ページ背景（`body` / `--wp--preset--color--white`）。写真パネル以外はすべて白 - **Panel Grey** (`#eaeaea`): 二次パネル（BIOTOP ONLINE カード等）の地。黒文字と組む - **Black** (`#000000`): 本文・白地上の見出しテキスト ### Text - **Text on White** (`#000000`): 白地・グレー地でのテキスト（純黒を使う） - **Text on Image / Green** (`#ffffff`): 写真パネル・グリーンパネル上のテキスト。BIOTOP の主要テキストはほぼこちら - **Text Green** (`#354443`): 白地上の補助テキスト（`(LATEST POST: 14.07.2026)` 等）に使う控えめな有彩テキスト ### Semantic - 実サイトに独立したエラー／警告色は存在しない（フォーム UI が最小限のため） - 実装が必要な場合は無彩色基調を崩さない範囲で `#b23b32`（エラー）を控えめに当て、成功は `#354443` を流用する --- ## 3. Typography Rules > 全要素が同一の font-family を継承する単一スタック設計。**`palt` と `letter-spacing: 0.05em` がグローバルに効いている**のが最大の特徴で、和文・欧文とも常に詰め＋送りのかかった状態になる。 ### 3.1 和文フォント - **ゴシック体**: `游ゴシック` → `YuGothic` → `"Yu Gothic medium"` → `"Hiragino Sans"` → `Meiryo` の順 - macOS では 游ゴシック、Windows では Yu Gothic（Medium 指定を挟んでウェイト不足を回避）、フォールバックにヒラギノ角ゴ／メイリオ - 日本語名 `游ゴシック` と英語名 `YuGothic` を**両方**書くのが実装上のポイント - **明朝体**: 使用しない ### 3.2 欧文フォント - **サンセリフ**: `din-2014`（Adobe Fonts）。DIN 系のジオメトリック・グロテスク。BIOTOP の英字表現の核 - 見出し・ナビ・タグはほぼすべて **大文字（BIOTOP / ONLINE STORE / SHOP ALL / PICK UP）** - **セリフ／等幅**: 使用しない ### 3.3 font-family 指定 ```css /* 全要素共通（body から継承） */ font-family: din-2014, 游ゴシック, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; ``` **フォールバックの考え方**: - **欧文優先**。din-2014 を先頭に置き、ラテン字形は必ず DIN で出す - 和文は 游ゴシック系 → ヒラギノ → メイリオと OS を横断してカバーする - 実サイトでは末尾が `"sans-serif"` と**クォート付き**で書かれている（generic family としては無効な記法だが、前段のフォールバックが厚いため実害は出ていない）。**再実装時はクォートを外して `sans-serif` と書くこと** **preview.html での代替フォント**: - din-2014 は Adobe Fonts のドメインライセンスのためローカルでは表示できない。**Barlow（Google Fonts）** で代替する。Barlow は DIN 系の低コントラスト・グロテスクで、squarish な字面と大文字比率が din-2014 に最も近い - 次点の候補: **Archivo**（よりニュートラルなグロテスク。字幅は広め） - 和文は `游ゴシック` 系のスタックをそのまま維持し、非搭載環境向けに **Noto Sans JP** を末尾に足す ### 3.4 文字サイズ・ウェイト階層 > デスクトップ（1440px）実測 px。**基準 13px に対する em スケール＋ビューポート連動のフルードサイズ**の併用で、値が 9.1 / 14.95 / 19.89 のような端数になる。 | Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 | |------|------|------|--------|-------------|----------------|------| | Display / Feature Title | din-2014 | 72px（≒5vw） | 400 | 1.0 (71.89px) | 0.045em | `BIOTOP PEOPLE` 等の特集大見出し。白文字 | | Display Light | din-2014 | 60px（≒4.1vw） | 300 | 1.0 (59.67px) | 0.045em | ブランド名の Light ウェイト表示 | | Heading 1 | din-2014 | 29px | 300 | 1.2 (34.79px) | 0.045em | `PICK UP` 等のセクション見出し | | Heading 2 | din-2014 | 21px | 300 | 1.2 (25.12px) | 0.045em | `News` 等のサブ見出し | | Heading 3 | din-2014 | 19.9px | 400 | 1.0 (19.89px) | 0.033em | `ALL TOPICS` / `TOKYO` ナビ見出し | | Lead / Caption | din-2014 | 18px | 300 | 1.6 (28.70px) | 0.04em | `(LATEST POST: …)` 等。色 #354443 | | Nav Item (L) | din-2014 | 16px | 400 | 1.8 (28.78px) | 0.041em | メニューの主要項目（`ALL` 等） | | Nav Item (M) | din-2014 | 15px | 300 | 1.4 (20.93px) | 0.043em | メニューの下層項目（`ABOUT` 等） | | Body / Base | din-2014 | 13px | 400 | 1.8 (23.4px) | 0.05em | `body` の基準値。汎用テキスト | | Tag / Pill | din-2014 | 13px | 400 | 1.0 (13px) | 0.05em | `EVENT` `#exclusive` 等のピルラベル | | Small / Meta | din-2014 | 9.1px | 400 | 1.0–1.2 | 0.071em | `LATEST POST: 14.07.2026` / `Search` | - **ウェイトは 300 と 400 の二択**。見出しほど Light（300）に振り、小さい文字を Regular（400）にする**逆説的な使い分け**が BIOTOP らしさ - **700（Bold）は使わない**。強調はサイズと余白で作る - 数字・日付は `20.05.2026` のように **ドット区切りの欧文表記**で統一する ### 3.5 行間・字間 - **本文の行間 (line-height)**: **1.8**（13px に対し 23.4px）。和文本文としてゆったりした標準値 - **見出しの行間**: **1.0**（大見出し）〜**1.2**（中見出し）。大きな英字は行送りを詰めてブロックとして見せる - **字間 (letter-spacing)**: **グローバルに約 0.05em**。`body` に `0.65px / 13px = 0.05em` が指定され、全要素へ継承される - 大きな見出しでは相対的に 0.045em 前後まで下がる（px 固定ではなく em 系で追随している） - 小さいメタテキスト（9.1px）では 0.65px がそのまま効くため実効 **0.071em** と広くなり、結果的に極小文字の可読性が上がっている **ガイドライン**: - 白抜き文字は写真の上に置くため、字間を詰めすぎない（0.045em 以上を維持） - 和文本文は line-height 1.8 を基準にする ### 3.6 禁則処理・改行ルール ```css overflow-wrap: break-word; line-break: strict; ``` - 和文の標準的な行頭・行末禁則を守る - 行頭禁止: `）」』】、。・：；？！` ／ 行末禁止: `（「『【` - **英字の見出し（BIOTOP PEOPLE / ONLINE STORE）は改行位置を手動で制御する**。単語途中で折り返さない ### 3.7 OpenType 機能 ```css font-feature-settings: "palt"; ``` - **`palt` がグローバルに適用されている**（`body` に指定 → 全要素へ継承）。BIOTOP は本文も含めて和文をプロポーショナル詰めする - 実測上 `palt` が効いていないのは、ブラウザ既定のままの `