生理の悩み 相談しようプロジェクト｜ツムラ

1. 01

   ファーストビュー（受付）

   中央カラムにツムラのロゴ、悩みの吹き出しを背景にした家型の「生理の悩み 相談しようプロジェクト」ロゴ。受付カウンターからキャラクターが顔を出し、音声ボタンを添える。PCでは左右に待合室のイラストが広がり、右にMENUパネルを置く。

2. 02

   導入・お知らせ

   「あなたの生理の『あたりまえ』は、実は『あたりまえじゃない』のかも!?」のカードと、お知らせ一覧、コラボムービーへの導線。

3. 03

   データで見る生理のあたりまえ問題

   ピンクのリングノート風カードに、調査結果の円グラフ（対処しなかった人 75.8% など）をスライドで見せる。

4. 04

   生理に伴うさまざまな不調

   「症状から／病名から」のタブと、「イライラ」「腹痛」「頭痛」などの吹き出し型ボタンを2列で並べる。

5. 05

   受診の目安・相談メモ

   クリップボード風のチェックリストで受診の目安を示し、受診時に使える「生理の悩み相談メモ」の作成へ誘導する。

6. 06

   はじめて漢方ガイド

   漢方のキホン・体質のタイプ・Q&Aをスライドで紹介し、ピンクの面で「体質タイプチェック」へ誘導する。

7. 07

   婦人科の先生に聞いてみた・医師動画

   悩みと先生からのアドバイスを吹き出しでスライド表示し、医師からのメッセージ動画を並べる。

8. 08

   病院を探す・フッター

   「生理の悩み医師に相談してみませんか？」から医療機関の検索へ。画面下には「応援してくれている医療機関」「医師からのメッセージ動画」の2ボタンを固定表示。

• PCでは左右の待合室イラストとMENUを position: fixed で固定し、中央カラムだけがスクロールする
• 画面下に2つのボタンを固定表示し、医療機関と医師動画への導線を常に見せる
• データ・漢方ガイド・医師Q&Aは、左右の矢印とドットで切り替えるスライダー
• 「症状から／病名から」はタブ切り替えで、同じ枠の中身を入れ替える

スクロールのコマ撮り200–60000ms

検出された技術:Google Fonts

• 01PCでは中央に400px前後のカラムを置き、左右を固定背景のイラストで埋める（スマホ前提の設計をPCでも崩さない）
• 02配色は #8cafff の青と #ff86af のピンクの2系統に絞り、白いカードに角丸と小さなハートの飾りを付ける
• 03書体は Zen Maru Gothic 1本にし、丸みのある語り口にそろえる
• 04キャラクターはライセンス作品のため流用しない。自社のマスコットやオリジナルのイラストに置き換える

1---
2title: "生理の悩み 相談しようプロジェクト｜ツムラ 再現用デザイン仕様書"
3source: https://www.tsumura.co.jp/seirino-nayami/
4katapick: https://katapick.com/sites/tsumura-seirino-nayami
5category: LP
6region: 国内 (JP)
7tags: [イラスト, ブルー基調, 角丸, 固定ナビ, ロングページ]
8launched: 2025-10
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# 生理の悩み 相談しようプロジェクト｜ツムラ — 再現用デザイン仕様書
17 
18> PCで開くと、画面の両脇が病院の待合室になる。ツムラの特設サイト「生理の悩み 相談しようプロジェクト」は、中央のコンテンツを受付に見立て、クロミが待つパステルの待合室で、受診へのハードルを下げている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22