ユーグレナ（euglena） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-07 / 対象: https://euglena.jp/, /companyinfo/

1. Visual Theme & Atmosphere

• デザイン方針: Web フォントを 1 本も読み込まない。 OS に入っている游ゴシックとシステム書体だけで組み、画になる部分（ヒーローの欧文ロゴタイプ・波形のマスク）は画像に逃がす
• 密度: 中。波形で切り抜いた写真を敷き詰めるビジュアル先行の構成。文字は補足に徹していて、本文の塊は少ない
• キーワード: Web フォント 0 本、游ゴシック、ターコイズ＋ピンク、line-height: 1、角丸 24px のピル

このサイトの核心は4つある。

1. Web フォントを一切使わない。 実測で フォントファイルの要求が 0 件。document.fonts に載っているのは下層の swiper-icons（unloaded）だけで、トップは @font-face が 1 つも無い。游ゴシック／ヒラギノ／Segoe UI といった OS ローカル書体で組むこと自体が設計
2. Windows の游ゴシック問題を「スタック順」だけで解いている。 @font-face による別名定義も上書きもせず、游ゴシック体, YuGothic の次に "游ゴシック Medium", "Yu Gothic Medium" を置く。macOS は 1〜2 番目（Regular）、Windows は 3〜4 番目（Medium）が当たる
3. body の line-height が 1。 行間はブロックごとに明示的に与える設計で、本文 1.75、カード見出し 1.42、リード 1.8 と使い分ける。**「何も指定しない要素は行間ゼロ詰め」**という前提で組まれている
4. ウェイトは 400 と 700 の2段だけ。 実測で font-weight は 400（97 要素）と 700（85 要素）しか出ない。500 や 600 は存在しない

CSS Custom Properties は実質ゼロ（トップ 0 個、下層 2 個は Swiper の既定値）。デザイントークンという層を持たないサイト。

ヒーローの Sustainability First は画像。 スクリーンショットに写っている Didone 系の大きな欧文セリフは、DOM 上にテキストとして存在しない（distributions.fontFamily にセリフ体が 1 要素も出ない）。.sbtimg クラスの要素が画像置換の代替テキストを持っているだけ。実装するときにセリフ体を Web フォントで足さないこと。

2. Color Palette & Roles

Primary（ブランドカラー）

ターコイズとピンクの 2 色構成。 ピンクは 通販（EC）導線にだけ使われ、コーポレート側の導線はすべてターコイズ。役割で色を分けているので、ピンクを汎用のアクセントに流用しないこと。

Neutral（ニュートラル）

ヒーローの面色

• rgb(188, 218, 210) — ヒーローの最大面積（794,453 px²）。波形マスクを通した写真の上に乗る半透明のターコイズで、トークン化された色ではない

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体（macOS）/ 游ゴシック Medium（Windows）/ ヒラギノ角ゴ（-apple-system 経由）
• 明朝体: 使用しない
• Web フォント: なし（フォントファイル要求 0 件）

3.2 欧文フォント

• OS のシステム書体をそのまま使う。macOS は SF Pro、Windows は Segoe UI、Android は Roboto
• 見出しの装飾的な欧文（Sustainability First など）は画像

3.3 font-family 指定

実サイトの CSS 宣言をそのまま記す。2 本のスタックを使い分けている。

css/* ① 既定（body）— 欧文を OS システム書体に寄せる */
font-family: -apple-system, BlinkMacSystemFont, Roboto,
             游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic",
             "Noto Sans CJK", "Hiragino Sans", "Segoe UI", sans-serif;

/* ② 和文優先（.def-jpfont など）— 欧文も游ゴシックのグリフで統一する */
font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic",
             "Noto Sans CJK", "Hiragino Sans", sans-serif;

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

• Windows の游ゴシック問題を @font-face ではなくスタック順で解く。 Windows には 游ゴシック体 も YuGothic（スペース無し）も存在しないので、3〜4 番目の "游ゴシック Medium" / "Yu Gothic Medium" が当たる。macOS は 1 番目の 游ゴシック体（Regular）
• 副作用として macOS は Regular、Windows は Medium になり、太さが揃わない。 厳密に揃えたい案件では @font-face の別名方式（src: local("Yu Gothic Medium")）を使うこと
• ① の -apple-system / BlinkMacSystemFont は欧文にしか効かない。 和文グリフを持たないのでフォールバックは文字単位で後続に落ち、和文は游ゴシックが当たる。和文の指定が死んでいるわけではない
• "Noto Sans CJK" は実在しないファミリー名。 正しくは "Noto Sans CJK JP" / "Noto Sans JP"。実サイトはこう書いているが、新規実装では正しい名前にすること

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

font-weight は 400 と 700 の 2 段だけ（実測 400 が 97 要素 / 700 が 85 要素）。游ゴシックは Regular と Bold の 2 本なので、500 や 600 を指定すると Windows で合成太字になる。使わないこと。

3.5 行間・字間

• body の line-height は 1。 行間は要素ごとに与える
• 使われている行間: 1.00（85 要素・最多）/ 1.42（46）/ 1.75（23）/ 1.50（9）/ 1.60（8）/ 2.00（7）/ 1.80（3）
• 本文の行間は 1.75。カード見出しは 1.42、リードは 2.00
• 字間は letter-spacing: 0.03em を body に 1 回だけ。 body が 16px なので 0.48px という px 値になり、可視 170 要素中 170 要素（下層は 107/109）にそのまま降りる
• 字間を打ち消しているのは枠線ピル（企業情報をみる など）の normal だけ

ガイドライン:

• letter-spacing: 0.03em は body に 1 回。 子要素で em を再宣言しない（px 継承前提）
• line-height: 1 を body に書いたら、テキストを持つブロックには必ず行間を与える。 与え忘れると行が密着する
• 日本語本文は 1.75 以上。1.00 はナビ・ボタンのような 1 行の要素にだけ使う

3.6 禁則処理・改行ルール

このサイトは word-break / line-break / overflow-wrap を一切宣言していない（CSS 全文で 0 件）。ブラウザ既定のまま。

css/* 新規実装で足すなら */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

3.7 OpenType 機能

font-feature-settings は 1 要素も使っていない（実測 0 件）。

• palt を足さないこと。 游ゴシックの素の字送りに letter-spacing: 0.03em を足すだけ、というのがこのサイトの字詰め

3.8 縦書き

該当なし（writing-mode: vertical-* は 0 要素）。

4. Component Stylings

Buttons

Solid（ヘッダーの導線・2 種）

右側のアキが広い（34px）のはアイコン分。 用途で色を分けている（EC＝ピンク / 問い合わせ＝ターコイズ）。

Outline Pill（本文中の CTA・最も多い）

• Background: transparent
• Text / Border: #009E8A（コーポレート導線）または #EE8AAA（EC 導線）
• Border: 1px solid
• Border Radius: 24px（ピル）
• Font: 16px / weight 700 / letter-spacing normal
• Padding: 0（幅と高さで形を決める）

Carousel Dot

• Border: 1px solid #009E8A / Border Radius: 100%
• 選択時のみ background: #009E8A
• Font: 13.3333px / Arial（ここだけ Arial 直指定）

Cards

• Background: #FFFFFF
• Border: なし
• Border Radius: 10px（24 要素）/ 20px（18 要素）/ 13px（下層 14 要素）
• Shadow: rgba(0,0,0,0.1) 1px 3px 6px（33 要素）

角丸の値が揃っていない（10 / 13 / 20 / 24 / 100%）。トークンを持たないサイトなので、新規実装では 10px（カード）と 24px（ピル）の 2 段に整理してよい。

Header

• Background: rgba(255, 255, 255, 0.95)（半透明の白）
• 最上部に #EE8AAA の帯（header::before）
• Shadow: rgba(0,0,0,0.1) 0 3px 6px

5. Layout Principles

Spacing Scale

宣言されたスケールを持たない。 実測で繰り返し出るのは gap: 0px 2.645%（％指定のカラム間）のみ。余白は % と rem（html が 62.5% ＝ 10px 基準）で個別に書かれている。

Container

• Max Width: 1140px（実測 8 要素。サイト全体でこの 1 値のみ）

ルート font-size

csshtml { font-size: 62.5%; }   /* = 10px。1rem = 10px で計算する */
body { font-size: 1.6rem; }  /* = 16px */

• 1440 / 1200 / 834 / 375px の 4 幅で測って html 10px / body 16px は不変。 流体タイポグラフィ（vw / clamp）は使っていない
• rem の数値は「px の 1/10」として読む（2.8rem = 28px）

6. Depth & Elevation

影は 1 種類とヘッダー用の 1 種類だけ。 カードの 1px 3px 6px は x に 1px オフセットがあるのが特徴で、これを 0 3px 6px に丸めると印象が変わる。 3 つ目に検出される rgba(0,0,0,0.3) 0 -4px 10px は **Cookie 同意バー（CMP）**のもの。

7. Do's and Don'ts

Do（推奨）

• Web フォントを読み込まない。 OS ローカル書体で組むのがこのサイトの設計
• 游ゴシックのスタックに "游ゴシック Medium" / "Yu Gothic Medium" を 游ゴシック体, YuGothic の直後に置く（Windows で Medium を当てる）
• letter-spacing: 0.03em を body に 1 回だけ書く（0.48px として px 継承される）
• body に line-height: 1 を置き、テキストブロックには必ず行間を与える（本文 1.75 / カード見出し 1.42 / リード 2.00）
• ウェイトは 400 と 700 の 2 段だけ
• ターコイズ #009E8A をコーポレート導線、ピンク #EE8AAA を EC 導線に使い分ける
• 本文色は #000000（純黒）
• CTA は border-radius: 24px のピル、カードは 10px
• カードの影は rgba(0,0,0,0.1) 1px 3px 6px（x に 1px）

Don't（禁止）

• ヒーローの Sustainability First をセリフ体の Web フォントで実装しない。 実サイトは画像
• font-weight: 500 / 600 を使わない（游ゴシックは 2 本しかなく合成太字になる）
• font-feature-settings: "palt" を足さない（実サイトは 0 要素）
• "Noto Sans CJK" をそのまま書かない。 実在しないファミリー名なので "Noto Sans JP" に直す
• line-height を省略しない。 body が 1 なので、指定を忘れた要素は行が詰まる
• ピンクをコーポレート側の CTA に使わない（EC 導線専用）
• CSS 変数を前提にしない（サイトは実質 0 個）
• rem を 16px 基準で換算しない（html が 62.5% なので 1rem = 10px）

8. Responsive Behavior

Breakpoints

• screen and ... を明示する古典的な記法。ホバー判定に (hover: hover) を 3 箇所で使っている

文字サイズは固定

• 4 幅（1440 / 1200 / 834 / 375px）で測って html 10px / body 16px / letter-spacing 0.48px はすべて不変
• サイズの出し分けはメディアクエリ内の個別指定で行う

タッチターゲット

• 公式通販（padding: 12px ... ＋ 16px）で高さ 約 45px — 44px を満たす
• お問い合わせ は左右の padding が 7.3px と狭い。モバイルでは幅を確保すること

9. Agent Prompt Guide

クイックリファレンス

Brand Green: #009E8A（コーポレート導線）
Brand Pink:  #EE8AAA（EC 導線）
Text:        #000000
Background:  #FFFFFF
Font (既定): -apple-system, BlinkMacSystemFont, Roboto, 游ゴシック体, YuGothic,
             "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic",
             "Noto Sans JP", "Hiragino Sans", "Segoe UI", sans-serif
Font (和文優先): 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
                 游ゴシック, "Yu Gothic", "Noto Sans JP", "Hiragino Sans", sans-serif
html: 62.5%（1rem = 10px） / body: 1.6rem（16px）
Line Height: body は 1。本文 1.75 / カード見出し 1.42 / リード 2.00
Letter Spacing: 0.03em（body に 1 回・0.48px として px 継承）
Font Weight: 400 と 700 のみ
Border Radius: 24px（CTA ピル）/ 10px（カード）/ 6px（ヘッダーの solid ボタン）
Shadow: rgba(0,0,0,0.1) 1px 3px 6px（カード）
Container: 1140px
Web フォント: 使わない

プロンプト例

ユーグレナのデザインシステムに従って、事業紹介ページを作成してください。
- Web フォントは読み込まない。html { font-size: 62.5% } / body { font-size: 1.6rem }
- body の font-family は -apple-system, BlinkMacSystemFont, Roboto, 游ゴシック体, YuGothic,
  "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", "Noto Sans JP",
  "Hiragino Sans", "Segoe UI", sans-serif
- body に line-height: 1 と letter-spacing: 0.03em を書き、本文には line-height: 1.75、
  カード見出しには 1.42、リードには 2.00 を明示的に与える
- font-weight は 400 と 700 だけ。500 / 600 は使わない
- font-feature-settings は使わない
- セクション見出しは 28px / weight 700 / line-height 1.00 / color #009E8A
- 本文中の CTA は transparent / 1px solid #009E8A / border-radius 24px / 16px weight 700 /
  letter-spacing normal。EC への導線だけ #EE8AAA にする
- ヘッダーの solid ボタンは #EE8AAA（通販）と #009E8A（問い合わせ）/ radius 6px
- カードは radius 10px / box-shadow rgba(0,0,0,0.1) 1px 3px 6px
- 本文色は #000000、コンテナ幅は 1140px
- 装飾的な欧文の大見出しはテキストではなく画像として扱う