# 生理の悩み 相談しようプロジェクト｜ツムラ｜LPのWebデザイン参考

> PCで開くと、画面の両脇が病院の待合室になる。ツムラの特設サイト「生理の悩み 相談しようプロジェクト」は、中央のコンテンツを受付に見立て、クロミが待つパステルの待合室で、受診へのハードルを下げている。

- URL: https://www.tsumura.co.jp/seirino-nayami/
- 解説ページ: https://katapick.com/sites/tsumura-seirino-nayami
- カテゴリ: LP / 地域: 国内（JP）/ 業種: 製薬（漢方）・ヘルスケア啓発
- テイスト: イラスト、ブルー基調、角丸、固定ナビ、ロングページ
- 公開・リニューアル: 2025-10 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

## 編集部のひとこと（Pip）
え、待って、右のソファでクロミがずっと寝てる…！ 重めの話を読んでても、ふと横を見るとゆるい寝顔があって、ちょっと救われる。この気づかい、推せる！！

## デザインの見どころ
- PCでも本文はスマホ幅の1カラム。左右を待合室のイラストで埋め、読む場所を受付カウンターに絞る
- 右側にMENUを常設し、データ→不調→受診の目安→漢方の順に並べる。悩みの段階ごとに入口がある
- 症状は「イライラ」「腰痛」などの吹き出しボタンに。自分の言葉で選べるから、相談の一歩目が軽い

## 配色
- #8cafff Periwinkle（カウンター / 背景）
- #e9f0ff Pale Lavender Blue（背景）
- #ffe3ef Blush Pink（セクション背景）
- #ff86af Candy Pink（アクセント / 強調テキスト）
- #5a7ac3 Denim Blue（テキスト）
- #ffffff White（カード）

## フォント
- 見出し・本文: Zen Maru Gothic（代替: Zen Maru Gothic）

## よくある質問
### ツムラ「生理の悩み 相談しようプロジェクト」のフォントは？
見出しから本文まで Zen Maru Gothic で統一されています。Google Fonts で無料で利用できます。

### PCでもスマホ幅のサイトに見せるにはどうする？
本文を max-width 400px 前後の中央カラムに収め、左右の余白に position: fixed の背景イラストやメニューを置きます。スマホでは左右の要素を非表示にし、カラムを全幅にします。

### どんな業種の参考になる？
製薬・ヘルスケアの啓発サイト、フェムテック、自治体の健康キャンペーンなど、デリケートなテーマをやわらかく伝えたい特設サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/tsumura-seirino-nayami からダウンロードできます。
出典: Katapick（https://katapick.com）