デザインガイドライン

1. 信頼感
理由：健康管理・診療導線を扱うため、安心して情報入力・相談できる印象を最優先する必要がある。
表現方法：青・白を基調にした配色、十分な余白、見出し階層の明確化、実績や監修情報を上部に配置する。

2. 伴走感
理由：忙しい飼い主が「ひとりで判断しなくてよい」と感じる体験が継続利用につながるため。
表現方法：ミント系の補助色、ガイド文・次アクションの明示、ステップ表示で進行状況を可視化する。

3. 俊敏性
理由：体調不安時は素早い判断・予約が必要で、迷うUIは離脱や不安増大につながるため。
表現方法：主CTAを目立たせる、1画面1目的の構成、入力項目の最小化、検索/予約導線を固定配置する。

選定理由（色彩心理を考慮）

・メイン（#FF8FB1）と濃色（#FF6E9A）でCTAの通常/ホバーを明確化し、行動しやすさを担保する。

・サブ（#8C6EE6）とアクセント（#C9F7EF / #FFE6D6）で、情報の区切りと柔らかい印象を両立する。

・背景（#FFF9FB）とカード（#FFFFFF）、境界線（#F2DBE7）で、可読性と立体感を安定させる。

・テキスト（#4A2D3C / #7A6170）はコントラストを維持しつつ、全体トーンを統一する。

実装では「安心感」と「行動しやすさ」を両立するため、やわらかい配色の中でCTAを明確に目立たせる設計とする。

Google Fonts 運用方針（日本語対応）
見出しフォント：Fredoka（wght 500/600/700）
本文フォント：M PLUS Rounded 1c（wght 400/500/700/800）

letter-spacing 実装値
h1：0.01em / brand：0.01em / h2：指定なし（0相当） / h3：指定なし（0相当） / 本文：指定なし（0相当） / ボタン：指定なし（0相当）

見出しは親しみやすい丸みを保ち、本文は可読性を優先。行動導線に使うボタンは太字で視認性を高める。

デザイン条件
角丸：999px / 文字サイズ：14px / 太さ：700 / 主ボタン背景：#FF8FB1 / ホバー：#FF6E9A / 副ボタン背景：#FFFFFF

実装クラス
`.btn`, `.btn-primary`, `.btn-secondary`

HTML（実装準拠）

<div class="actions">
  <a class="btn btn-primary" href="https://line.me/R/ti/p/@434idigg" target="_blank" rel="noopener noreferrer">LINE お友達登録</a>
  <a class="btn btn-secondary" href="f_service.html#pricing">機能と料金を見る</a>
</div>

CSS（主要部分）

.btn {
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 700;
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-secondary { background: #fff; }
.btn-secondary:hover { background: #fff3f9; }

表示サンプル

デザイン条件
入力高さ：40px前後 / 枠線：1px solid #F2DBE7 / 角丸：16px / フォント：14px / エラー文字：12px

実装クラス
`.field`, `.field input`, `.field textarea`, `.error`

HTML（実装準拠）

<form class="contact-form">
  <div class="field">
    <label for="name">お名前</label>
    <input id="name" type="text" placeholder="例：山田 花子">
  </div>

  <div class="field">
    <label for="category">お問い合わせ種別</label>
    <select id="category">
      <option>選択してください</option>
      <option>サービスについて</option>
      <option>料金について</option>
    </select>
  </div>

  <div class="field">
    <label for="message">内容</label>
    <textarea id="message" rows="4" placeholder="お問い合わせ内容を入力"></textarea>
  </div>

  <label><input type="checkbox"> 利用規約に同意する</label>
  <label><input type="radio" name="contactMethod"> メール連絡を希望</label>
  <label class="switch">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-slider"></span>
    通知を有効にする（トグルスイッチ）
  </label>
  <div class="field">
    <label for="email">メールアドレス（エラー表示例）</label>
    <input id="email" type="email" value="sample@" aria-invalid="true">
    <p class="error">メールアドレスの形式が正しくありません。</p>
  </div>
</form>

CSS（主要部分）

.field label { display: block; font-weight: 700; margin-bottom: 4px; }
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 9px 10px;
  font: inherit;
  background: #fff;
}
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider { width: 44px; height: 24px; background: #cbd5e1; border-radius: 999px; position: relative; }
.switch-slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.switch-input:checked + .switch-slider { background: #FF8FB1; }
.switch-input:checked + .switch-slider::after { transform: translateX(20px); }
.error { min-height: 1.1em; margin: 4px 0 0; color: #b91c1c; font-size: 12px; }

表示サンプル

お名前 お問い合わせ種別 選択してください サービスについて 料金について 内容 利用規約に同意する メール連絡を希望 通知を有効にする（トグルスイッチ） メールアドレス（エラー表示例） メールアドレスの形式が正しくありません。

デザイン条件
ヘッダー：sticky固定 / 最小高さ：56px / 境界線：1px solid #F2DBE7 / モバイルはメニュー展開式 / 768px以上で横並び常時表示

実装クラス
`.site-header`, `.nav-wrap`, `.menu-toggle`, `.global-nav`, `.global-nav.open`, `.skip-link`

・`site-header` は sticky（上部固定）
・`global-nav` はモバイル初期非表示、`.open` 付与で展開
・`@media (min-width: 768px)` で常時表示の横並びへ切替

表示サンプル

デザイン条件
カード角丸：26px / 枠線：1px solid #F2DBE7 / 影：0 10px 20px rgba(221,136,170,0.12) / テーブル見出し背景：#EEF7FB / アラート角丸：10px

HTML（実装準拠）

<!-- カード -->
<article class="card">
  <h3>サービス紹介カード</h3>
  <p>健康記録・AI症状チェック・オンライン診療を一体化した導線を提供します。</p>
</article>

<!-- テーブル -->
<table class="price-table">
  <thead>
    <tr><th>プラン</th><th>月額</th><th>主な機能</th></tr>
  </thead>
  <tbody>
    <tr><td>ベーシック</td><td>¥980</td><td>健康記録・基本通知</td></tr>
    <tr><td>プレミアム</td><td>¥2,980</td><td>AI症状チェック・オンライン相談</td></tr>
  </tbody>
</table>

<!-- アラート -->
<div class="ui-alert info">情報：プロフィールが更新されました。</div>
<div class="ui-alert success">成功：登録処理が完了しました。</div>
<div class="ui-alert warning">警告：未入力項目があります。</div>
<div class="ui-alert error">エラー：通信に失敗しました。</div>

CSS（主要部分）

.card {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 10px 20px rgba(221, 136, 170, 0.12);
}
.price-table thead th { background: #eef7fb; font-weight: 700; }
.ui-alert { border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ui-alert.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.ui-alert.success { background: #ecfdf3; border: 1px solid #86efac; color: #166534; }
.ui-alert.warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.ui-alert.error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

表示サンプル

デザイン条件
カード角丸：26px / カード余白：18px / 枠線：1px solid #F2DBE7 / 影：0 10px 20px rgba(221,136,170,0.12) / バナー角丸：16px

実装クラス
カード系：`.hero-card`, `.card`, `.image-card`, `.stat`
バナー系：`.value-banner`, `.value-track`, `.value-pill`

HTML（実装準拠）

<div class="card-grid">
  <article class="card">
    <h3>健康記録</h3>
    <p>体重・食事・運動・ワクチン情報をまとめて管理します。</p>
  </article>
  <article class="card">
    <h3>AI症状チェック</h3>
    <p>受診目安を可視化し、判断時の不安を軽減します。</p>
  </article>
</div>

<div class="value-banner">
  <div class="value-track">
    <div class="value-group">
      <span><strong class="value-pill">提供価値</strong> 日常記録・症状チェック・オンライン相談をひとつにつなぐ。</span>
    </div>
  </div>
</div>

CSS（主要部分）

.hero-card, .card, .stat, .image-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 10px 20px rgba(221, 136, 170, 0.12);
}
.value-banner {
  overflow: hidden;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.value-track { animation: value-scroll 22s linear infinite; }

表示サンプル

デザインコンセプト：信頼感 / 伴走感 / 俊敏性

項目	提案値	意図
コンテンツ最大幅	min(960px, 82vw)	視認性と可読性を維持しつつ、カードUIの密度を安定させる。
グリッドシステム	基本1カラム。PC（768px以上）で hero: 1.2fr / 0.8fr、card/stats: 3列	同一コンポーネントを保ったまま、画面幅で情報量のみを調整する。
セクション間の余白	36px（`.section`）	縦スクロール時のテンポを保ち、連続閲覧時の疲労を抑える。
要素間の余白	space-token基準：14px / 22px（tight / block）	カードUIの視線移動を短くし、必要情報にすぐ到達できるようにする。
角丸	カード系：26px / 画像：18〜20px / ボタン：999px	親しみやすさを出しつつ、情報ブロック境界を明確にする。
シャドウ（box-shadow）	カード：0 10px 20px rgba(221, 136, 170, 0.12)	背景からカードを浮かせ、タップ可能領域を直感的に示す。
ブレークポイント	単一主要BP：768px（未満=モバイル / 以上=PC）	実装複雑度を抑えつつ、ナビ・カード列・CTA配置を明確に切替する。

実装補足（CSS変数例）

:root {
  --space-section: 36px;
  --space-block: 22px;
  --space-tight: 14px;
}
.container { width: 82vw; max-width: 960px; }
.card { border-radius: 26px; box-shadow: 0 10px 20px rgba(221, 136, 170, 0.12); }
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 24px; }
  .card-grid, .stats-grid { grid-template-columns: repeat(3, 1fr); }
}