アユーラ（AYURA） DESIGN.md

アユーラ（https://www.ayura.co.jp/）のデザイン仕様書。 「ストレスに着目した」スキンケアブランドの公式サイト兼オンラインストア。 塗りボタンが 1 つもない。CTA はすべて白地 + #c8c8c8 の 1px 枠 + border-radius: 25px の pill。面で押さず、線で示す 地が白ではない。#f8f5f5 — わずかに赤みを含んだオフホワイトで、下層ページは全面がこの色（商品一覧は 9/9 サンプル一致） 和文はヒラギノ ProN 先頭、欧文見出しは Poppins。ラベル・セクション見出しの Poppins には letter-spacing: 0.15em 前後という極端な字間が当たる リード文だけ明朝（"Noto Serif JP", serif 22px w500）。本文はゴシックのまま、惹句だけ書体を変える 実サイトの computed style 実測（2026-08-23 取得。トップ ＋ 商品一覧）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 静けさと余白。彩度をほぼ持たず、#f8f5f5 の温かいオフホワイトの上に商品写真と細い線だけを置く。線が細く、字間が広い
• アユーラについて: 1994 年創業のスキンケアブランド。「メディテーション」「インナーバランス」といった語彙を持ち、騒がしくない画面設計がそのままブランドの語り口になっている
• 密度: 低。1 セクション 1 メッセージ。カードは並べるが、要素間の余白を大きく取る
• キーワード: #f8f5f5 オフホワイト、#3c3c3c 墨、Poppins の広い字間、pill アウトライン、Noto Serif JP のリード、影ゼロ
• 特徴:
  • 塗り CTA が存在しない。主要導線（View More / ショッピングガイドはこちら / アユーラについて / Mail Magazine）はすべて白地 + 1px solid #c8c8c8 + border-radius: 25px。面色で優先度をつける設計を持たない
  • 地が #f8f5f5。html / body はどちらも透明で、セクション側が塗る。トップはヒーローが写真なので白く見えるが、下層ページは全面が #f8f5f5
  • 欧文の字間が極端に広い。Poppins の見出しは 0.155em（24px → 3.72px）、View More は 0.155em（16px → 2.48px）。和文の字間は 0.04em 程度に抑えるという非対称
  • リード文だけ明朝。"Noto Serif JP", serif 22px w500 / 行間 1.35 / 字間 0.015em。本文には使わない
  • 行間が詰まっている。line-height が font-size と同値（16px → 16px = 1.0）の要素が多い。1 行で収まるラベル・見出しに限って行間を殺す設計
  • 円が繰り返しモチーフ。カート個数バッジ、スライダーのドット、メニューアイコンがすべて border-radius: 50%
  • 影を使わない。すべての要素で box-shadow: none
  • 画像リンクが多い。<a> の直下が <img> だけの構造が頻出する（後述の注意点）

2. Color Palette & Roles

地は #f8f5f5（pageBackground.resolved = rgb(248,245,245)。商品一覧ページで 12 点サンプル中 9/9 が一致）。 ただし html / body は透明で、塗っているのは各セクション（section.top-topics など）。トップのヒーロー部は写真のため白く見える。

Base（地）

• #f8f5f5 と #f5f1f0 は別トーン。前者が地、後者が地の上に置く一段濃い面

Neutral（ニュートラル）

• #3c3c3c が全文字色。見出しも本文もキャプションもこの 1 色で、濃淡はサイズと #87877d の 2 段階だけ
• #c8c8c8 が「ボタンの形」を作っている。塗りがないため、この線色を変えると CTA が消える
• グレーがわずかに黄緑に振れている（#87877d / #878782）。純グレーにしない

使ってはいけない色

• #06c755（LINE グリーン）が h2 に 1 件出るが、これは LINE 公式アカウント誘導ブロックの外部指定。ブランドカラーではない
• rgb(0, 0, 238)（UA 既定のリンク青）が <a> の computed に出るが、計測失敗ではない。後述

3. Typography Rules

3.1 和文フォント

• ゴシック体: Hiragino Kaku Gothic ProN → Hiragino Kaku Gothic Pro → 游ゴシック体 → YuGothic → 游ゴシック Medium → Yu Gothic Medium → 游ゴシック → Yu Gothic → sans-serif

• 明朝体: Noto Serif JP（リード文専用）

• ヒラギノは ProN が先頭（Pro ではない）。ProN と Pro は別物なので順序を守る

• 游ゴシックを 4 表記並べている。游ゴシック体 / YuGothic / 游ゴシック Medium / Yu Gothic Medium / 游ゴシック / Yu Gothic の順で、Windows の游ゴシック細すぎ問題を Medium 指定で回避している

3.2 欧文フォント

• サンセリフ: Poppins（幾何学サンセリフ）。セクション見出し・英字ラベル・数値

• セリフ: serif（Noto Serif JP のフォールバック）

• Poppins は和文より前に置かれる（Poppins, "Hiragino Kaku Gothic ProN", …）。欧文グリフを Poppins に取らせる意図

3.3 font-family 指定

css/* 本文・既定 */
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
             游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic", sans-serif;

/* セクション見出し・英字ラベル（欧文を Poppins に取らせる） */
font-family: Poppins, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
             游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック, "Yu Gothic", sans-serif;

/* 英字のみのラベル（バッジ・数値） */
font-family: Poppins, sans-serif;

/* リード文（惹句）だけ明朝 */
font-family: "Noto Serif JP", serif;

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

• 和文優先が既定（ヒラギノ ProN が先頭）
• 欧文を目立たせたい見出しだけ Poppins を先頭に足す。和文チェーンはそのまま後ろに残す
• 游ゴシックは Medium 表記を必ず含める

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

• line-height が font-size と同値（= 1.0）の要素が非常に多い。これは1 行で収まる見出し・ラベル・ナビに限った設計で、複数行の本文にそのまま適用してはいけない
• ウェイトは 400 が基本。600 は和文見出し（28px）、700 はメニューの親項目（14px）、500 は明朝リードのみ

3.5 行間・字間

• 本文の行間: 1.0〜1.4。1 行ラベルは 1.0、明朝リードは 1.35
• 見出しの行間: 1.0
• 和文の字間: 0.04em（12〜16px 帯で一貫）
• 欧文見出し（Poppins）の字間: 0.155em ← 和文の約 4 倍
• 明朝リードの字間: 0.015em（ほぼベタ）

ガイドライン:

• 和文は 0.04em、欧文見出しは 0.15em という 2 段構えを守る。混ぜない
• line-height: 1.0 は 1 行要素専用。段落を組むときは 1.7〜1.8 に上げる（実サイトの段落組みは画像内に収まっているため、Web テキストの本文組み値は持たない）
• 明朝リードだけはベタ組みに近づける（字間 0.015em）

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• 商品名に「インクリーゼ モイストローション II」のようなカタカナ + ローマ数字が入るため、word-break: break-all は使わない

3.7 OpenType 機能

• font-feature-settings は全要素で normal。palt を使っていない
• 字詰めは letter-spacing で明示的に行う（和文 0.04em / 欧文 0.155em）

css/* このサイトの方針 */
font-feature-settings: normal;
letter-spacing: 0.04em;  /* 和文 */

3.8 縦書き

• ヒーローのコピーは縦組みだが、画像として焼き込まれている（「ゆらぎに、凛と。芽吹きの生命水。」）。CSS の writing-mode は使っていない
• Web テキストで縦組みを再現する場合は writing-mode: vertical-rl; text-orientation: mixed;

4. Component Stylings

Buttons

このサイトに塗りボタンは存在しない。すべてアウトラインの pill。

Primary（白地 pill） — View More / ショッピングガイドはこちら / アユーラについて / Mail Magazine

• Background: #ffffff
• Text: #3c3c3c
• Border: 1px solid #c8c8c8
• Padding: 17px 0（幅は親に対して 100%、テキストは中央揃え）
• Border Radius: 25px
• Font Size: 14px（和文）/ 16px（Poppins 英字）
• Letter Spacing: 0.04em（和文）/ 0.155em（英字）

Secondary（濃い面の上） — オンラインメンバー登録

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding: 7.5px 15px
• Border Radius: 15px
• Font Size: 13px / ls 0.04em

Notification Bar — 税込 5,500円以上購入で送料無料!!

• Background: rgba(135, 135, 130, 0.9)
• Text: #ffffff
• Border Radius: 0px
• Padding: 0 50px 0 15px
• Font Size: 14px / ls 0.04em

Badges

• Background: #ffffff
• Text: #87877d
• Border: 1px solid #c8c8c8
• Border Radius: 0px ← バッジだけ角丸を持たない
• Padding: 4.5px 6.13px
• Font Size: 11px / ls 0.04em
• 例: NEW / キャンペーン

Count Badge（カート個数）

• Background: #87877d
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 50%
• Font: Poppins 10px

Circle Buttons（アイコン・スライダードット）

• Border Radius: 50%
• 枠線タイプ: 1px solid #878782
• 塗りタイプ: #3c3c3c（現在地）/ #c8c8c8（非現在地）

Inputs

• Background: #ffffff
• Border: 1px solid #ffffff（検索欄は枠を白にして消している）
• Border Radius: 2px
• Padding: 6.5px 0
• Font Size: 12px

Cards

• Background: #ffffff
• Border: なし（区切りは #c8c8c8 の罫線）
• Border Radius: 0px
• Shadow: なし

5. Layout Principles

Spacing Scale

Container

• max-width をほぼ使わない。幅は % と固定 width で組む
• グリッドの gap: 18px

Grid

• 商品カード: 3〜4 カラム（デスクトップ）
• カテゴリリンク: 横一列 8 項目（下線付きテキストリンク）

6. Depth & Elevation

• 実測したすべての要素で box-shadow: none
• 階層は面色（#ffffff / #f8f5f5 / #f5f1f0）と #c8c8c8 の罫線だけで表現する
• モーダル・ドロワーも影を持たない

7. Do's and Don'ts

⚠ rgb(0, 0, 238) は計測失敗ではない

interactive / computedStyles の <a> に UA 既定のリンク青 rgb(0,0,238) が現れるが、これはサイトの不具合でも計測ミスでもない。

• 該当する <a> は直下に <img> しか持たない画像リンクで、テキストノードを持たない。CSS が color を当てていないため UA 既定色が残る
• 子要素まで辿ると正しい色が当たっている（例: カート個数の <span> は rgb(255,255,255)）
• 判別法: 当該 <a> の子要素の computed color を見る。子に色が当たっていれば正常、子まで青なら計測が効いていない

実装時の注意: <a> の直下にテキストノードを置く場合は必ず color を明示する。置かないと UA 青に落ちる。

Do（推奨）

• CTA は白地 + 1px solid #c8c8c8 + border-radius: 25px の pillにする。塗りボタンを作らない
• 地は #f8f5f5。下層ページは全面この色で塗る
• 文字色は #3c3c3c。補足は #87877d。この 2 色以外を使わない
• 和文は letter-spacing: 0.04em、欧文見出し（Poppins）は 0.15em 前後に開く
• ヒラギノは ProN を先頭に置く（Pro ではない）
• 游ゴシックは Medium 表記を含めて 6 段書く（Windows で細くなるのを防ぐ）
• 惹句（リード文）だけ "Noto Serif JP", serif 22px w500 / 行間 1.35 にする
• box-shadow は使わない。階層は面色と罫線で
• 円形要素（アイコン・ドット・個数バッジ）は border-radius: 50% で統一

Don't（禁止）

• 塗りの CTA を作らない。優先度はサイズと配置でつける
• バッジに角丸を付けない（border-radius: 0px。pill CTA と対比させている）
• palt を使わない。字詰めは letter-spacing で明示する
• line-height: 1.0 を複数行の本文に使わない。1 行で収まるラベル・見出し専用
• 和文と欧文で同じ letter-spacing を使わない（0.04em と 0.155em を混同しない）
• #06c755 を使わない。LINE 誘導ブロックの外部指定であってブランド色ではない
• 純黒 #000000 を文字に使わない（#3c3c3c を使う）
• <a> の直下にテキストを置いて color を省略しない（UA 青になる）

8. Responsive Behavior

Breakpoints

media query に実在する値:

• ルート font-size は 16px 固定（375px〜1920px で変化なし）

タッチターゲット

• 最小 44px × 44px
• pill CTA の padding: 17px 0 は高さ約 48px を確保しており基準を満たす

フォントサイズの調整

• 本文 16px はブレークポイントを跨いでも固定
• モバイルではセクション見出しの Poppins を 24px → 20px 前後に落とし、字間 0.155em は維持する

9. Agent Prompt Guide

クイックリファレンス

Background:      #f8f5f5   （下層ページは全面。トップはセクション面）
Surface:         #ffffff / #f5f1f0
Text Color:      #3c3c3c
Text Secondary:  #87877d
Border / CTA枠:  #c8c8c8
Font (和文):     "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
                 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
                 游ゴシック, "Yu Gothic", sans-serif
Font (欧文):     Poppins
Font (リード):   "Noto Serif JP", serif  22px / w500 / lh 1.35
Body Size:       16px
Letter Spacing:  0.04em（和文） / 0.155em（Poppins 見出し）
CTA:             白地 + 1px solid #c8c8c8 + border-radius: 25px（塗りなし）
Badge:           白地 + 1px solid #c8c8c8 + border-radius: 0px
Box Shadow:      none
font-feature-settings: normal（palt を使わない）

プロンプト例

アユーラのデザインシステムに従って、商品一覧ページを作成してください。
- 背景: #f8f5f5（ページ全面）、カード面は #ffffff
- 文字色: #3c3c3c、補足は #87877d。純黒は使わない
- フォント: "Hiragino Kaku Gothic ProN" 先頭の和文チェーン
  セクション見出しは Poppins を先頭に足し、letter-spacing: 0.155em
  和文の letter-spacing は 0.04em
- リード文だけ "Noto Serif JP", serif / 22px / w500 / line-height: 1.35
- CTA は塗らない: 背景 #ffffff、border: 1px solid #c8c8c8、
  border-radius: 25px、padding: 17px 0、中央揃え
- バッジは border-radius: 0px、白地に 1px solid #c8c8c8、文字 #87877d、11px
- box-shadow は一切使わない。階層は面色と #c8c8c8 の罫線で表現する
- font-feature-settings は normal のまま（palt を使わない）