デザインシステム

医療系（YMYL）メディアとしての中立・誠実・清潔感を最優先に設計しています。美容広告的な華やかさ（ピンク過多・キラキラ装飾・ビフォーアフター写真の多用）は使いません。アクセントはくすみローズ1色に限定し、情報の階層はウェイト差・罫・余白で作ります。

カラー

トークンは src/styles/tokens.css の :root で定義。色を直接書かず、必ずトークン経由で参照します。

  • ページ背景

    --c-bg #fbfaf8

    オフホワイト。純白を避け長文でも目が疲れにくい

  • カード・表の地

    --c-surface #ffffff

    情報の塊を背景から持ち上げる

  • 補助ブロック

    --c-surface-2 #f4f1ed

    目次・フッター・引用

  • 表ヘッダー

    --c-surface-3 #ebe6e0

    比較表の見出し行

  • 境界線

    --c-border #e4ded6

    カード枠・区切り線

  • 強い境界線

    --c-border-strong #cdc4b9

    入力欄・引用の罫

  • 本文テキスト

    --c-text #1f2a3c

    ダークネイビー。黒よりやわらかく医療寄りの硬質さ

  • 補足テキスト

    --c-text-2 #4d5767

    リード・説明文

  • メタテキスト

    --c-text-3 #737d8c

    日付・キャプション

  • アクセント

    --c-accent #a8617a

    くすみローズ。CTA塗り・強調罫

  • アクセント文字

    --c-accent-ink #8c4a62

    明るい地の上のテキスト（コントラスト確保）

  • アクセント地

    --c-accent-soft #f7eef1

    直接回答ボックス・バッジ

  • アクセント罫

    --c-accent-line #e0c5cf

    H3の罫・CTAボックス枠

  • 注記の地

    --c-note-bg #f1f4f3

    注意コールアウト（中立なグレーグリーン）

  • PR表記の地

    --c-pr-bg #f4f1ed

    PRバー。主張しすぎない

タイポグラフィ

本文16px（SP）／17px（PC）・行間1.8を基準に、日本語長文の可読性を優先。フォントは端末標準の日本語ゴシックを使い、Webフォントの読み込み遅延で本文が見えない状態を作りません。

フォント
Hiragino Sans / Noto Sans JP / BIZ UDPGothic / Meiryo（システムフォント）
本文行間
1.8（--lh-body）
見出し行間
1.55（--lh-heading）
本文一行長
最大46rem（736px）

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-4xl · 40px · w700 · ヒーロー見出し（PC）

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-3xl · 32px · w700 · 記事タイトル（PC）/ ヒーロー（SP）

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-2xl · 26px · w700 · 記事タイトル（SP）

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-xl · 22px · w700 · H2 / セクション見出し

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-lg · 19px · w700 · H3

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-md · 17px · w400 · 本文（PC）

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-base · 16px · w400 · 本文（SP）

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-base-s · 14px · w400 · 表・補足

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-sm · 13px · w400 · キャプション

  • 脂肪注入豊胸を、工程と費用で比べる

    --fs-xs · 12px · w400 · メタ情報・PR表記

共通コンポーネント

ボタン / バッジ

無料カウンセリングを見る8院の比較表を見る小サイズバッジ脂肪注入豊胸特集

設計意図: CTAはアクセント色の単色塗り。グラデーション・光沢・影を使わず、押しつけがましさを出さない。副次導線はアウトラインで同じ高さに揃える。

PR表記バー / 更新日バッジ

PR本記事にはプロモーション(アフィリエイトリンク)が含まれます。

最終更新

設計意図: PR表記は記事タイトル直下に固定。隠さないが、読者の読み始めを邪魔しない彩度に抑える。

直接回答ボックス（AIO対策）

この記事の結論

自分の脂肪を移すため仕上がりが自然な豊胸術。定着率としこりリスクは脂肪の加工方式と注入技術で変わります。

設計意図: 40〜60字の結論だけを冒頭に置く。読者が「で、結論は?」に最短で到達できるようにし、強調スニペット・AI検索での引用にも対応する。

注意コールアウト（3種）

設計意図: ガイドライン注記は全記事の同じ位置（本文末〜FAQ前）に出す。読者が「このサイトは何を書かないか」を毎回確認できる状態にする。

比較表（ヘッダー固定・1列目固定・SP横スクロール）

項目脂肪注入シリコンバッグヒアルロン酸
自然さ◎ 自分の組織△ 輪郭が出ることも○
持続性◎ 定着分は半永続的○ 入れ替え推奨あり× 数ヶ月〜数年で吸収
費用相場約70〜150万円約60〜150万円約20〜60万円

記号（◎○△×）は一般的な傾向の相対評価で、個々の症例の結果を示すものではありません。

設計意図: 比較が主機能のサイトなので、表はSPで必ず横スクロールさせ、見出し行と項目名列を固定して「何と何を比べているか」を見失わせない。 Markdown本文中の表にも同じ挙動をrehypeプラグインで一括適用する。

FAQアコーディオン

よくある質問

脂肪注入豊胸のしこりは必ずできますか？

必ずできるものではありませんが、脂肪の加工や注入の質によりリスクは変わります。術前後のエコー検査で経過を確認できる体制のクリニックが安心とされています。

何カップ上がりますか？

1回の施術で1〜2カップが目安とされています。定着率に個人差があるため仕上がりは変動します。

設計意図: details/summary でJSなしに開閉。frontmatterのfaqから FAQPage構造化データも同時に生成する。

CTAボックス

設計意図: 残枠表示・カウントダウン・期限の煽りは使わない。「急がなくてよい」と明記することが、100万円級の判断では信頼につながる。

レイアウト / ブレークポイント

SP基準
390px（左右余白16px）
PC基準
1280px（コンテナ最大1200px・左右余白24px）
40rem (640px)
カードを2カラムに
48rem (768px)
本文17px・比較表のスクロールヒント非表示
64rem (1024px)
グローバルナビ展開・記事に右サイド（目次+CTA）追加・SP追従バー停止

記事ページはPCで「本文（最大736px）＋ 右サイド19rem」の2カラム。 SPでは目次を本文上部に、CTAを追従バーに移し、同じ要素を画面幅で置き換える方針です。

豊胸ジャーナルのデザイントークン定義: src/styles/tokens.css ／共通スタイル: src/styles/global.css ／コンポーネント: src/components/