DOCUMENT 05

ワイヤーフレーム

calendar_today 作成日：2026-05-13 person 作成者：清水宏美 push_pin Ver 1.0
link 詳細ドキュメント（Google スプレッドシート）
このページは概要のみを記載しています。詳細なワイヤーフレームは以下のリンクからご確認ください。
open_in_new 開く
目次
  1. ワイヤーフレーム作成方法
  2. トップページ
  3. 下層ページ
  4. Webアプリケーション画面
  5. スマートフォン版

1 ワイヤーフレーム作成方法

2 トップページ

トップページ ワイヤーフレーム（PC版） 必須
Figmaで作成したワイヤーフレームのスクリーンショットを配置

【PCワイヤー（12カラム基準）】

・コンテナ幅：min(960px, 82vw)
・PC切替：768px以上
・セクション間余白：36px
・構成：2カラム + 3カラムカードの組み合わせ

1. ヘッダー（min-height 56px / sticky）
左：ブランド名 / 右：横並びナビ（トップ / 総合案内 / 導入事例と実績 / ログイン / お問い合わせ）

2. ヒーロー（`.hero-grid`）
左右比率：1.2fr / 0.8fr、gap 24px
左：見出し・説明・CTA / 右：ビジュアルカード

3. サービス紹介・主要機能（`.card-grid`）
PCでは3列（`repeat(3, 1fr)` / gap 22px）

4. 実績・KPI（`.stats-grid`）
KPIカード3列表示（記録継続率 / 受診判断時間 / 相談満足度）

5. CTA導線（`.actions`）
PCでは横並び（`display:flex` / `gap:10px`）で主導線を上段に配置

6. フッター（`.footer-grid`）
リンク群を横方向に配置し、運営情報・法務・サポートへ到達しやすくする

ワイヤーフレーム画像配置：
<img src="../images/wireframe/top-pc.png" alt="トップページ PC版 ワイヤーフレーム">

top.html のスクリーンショット（PC版）

配置意図の説明 必須
各セクションの配置理由とユーザーへの効果

【ヘッダー】
なぜその位置か：全ページ共通で最上部に固定し、どの閲覧タイミングでも主要導線（サービス紹介・ご利用の流れ・運営情報・お問い合わせ・ログイン）へ即アクセスできるようにするため。
ユーザーへの効果：迷子になりにくく、比較検討中でもすぐに必要情報へ戻れる。行動（相談/ログイン）への心理的ハードルが下がる。

【ヒーローセクション】
なぜその位置か：ファーストビューに配置し、サービス価値と対象ユーザーへの適合性を最初の数秒で伝えるため。CTAも同時配置して初動離脱を防ぐため。
ユーザーへの効果：「自分向けサービスか」を短時間で判断でき、次の行動（詳細閲覧・相談予約）へ自然に進める。

【サービス紹介】
なぜその位置か：ヒーロー直下に置き、興味を持った直後に機能の具体像（健康記録・AIチェック・診療連携）を提示するため。
ユーザーへの効果：抽象的な魅力だけでなく、利用時のイメージが明確になる。比較検討時の理解コストが下がる。

【実績】
なぜその位置か：機能理解の後段に配置し、導入判断の直前で信頼情報（事例・数値）を提示するため。
ユーザーへの効果：「本当に効果があるか」という不安を軽減し、意思決定を後押しできる。

【CTA】
なぜその位置か：実績セクションの直後に配置し、納得感が高まったタイミングで行動喚起を強めるため。
ユーザーへの効果：検討から申込みへの遷移がスムーズになり、離脱前にアクションを取りやすくなる。

【フッター】
なぜその位置か：ページ末尾に法務情報・運営情報・補助リンクを集約し、最終確認ニーズに対応するため。
ユーザーへの効果：信頼性確認（規約・プライバシー・運営者情報）がしやすくなり、安心して申込み判断できる。

3 下層ページ

下層ページ ワイヤーフレーム 必須
各下層ページのワイヤーフレームを順に配置

（ここに各下層ページのワイヤーフレーム画像と説明を配置） 【ページ名1】 <img src="../images/wireframe/page1-pc.png" alt="ページ名1 ワイヤーフレーム"> 配置意図：（説明） 【ページ名2】 <img src="../images/wireframe/page2-pc.png" alt="ページ名2 ワイヤーフレーム"> 配置意図：（説明）

4 Webアプリケーション画面

Webアプリ画面 ワイヤーフレーム 必須
主要な画面（ログイン・一覧・登録・詳細・編集）のワイヤーフレーム

バックエンドの Thymeleaf テンプレートから、実装済み画面の構造をワイヤーフレーム化する。公開側ログイン画面はヘッダー・フォーム・フッター構成、ログイン後画面は共通サイドバー・トップバー・カード型コンテンツ構成を基準にする。

生成元 HTML：`auth/login.html` / `dashboard/index.html` / `pets/list.html` / `pets/form.html` / `pets/detail.html` / `health/list.html` / `health/form.html` / `appointments/index.html` / `calendar/index.html` / `admin/users/list.html` / `appointments/slot-management.html`
ログイン画面（auth/login.html）
ブランド / グローバルナビ / お問い合わせ
ログイン トップへ戻る
トップ / 総合案内 / 導入事例と実績 / 規約
ダッシュボード（dashboard/index.html）
🐾 Pet Life Plus
📊 ダッシュボード
🔔 通知
🐶 ペット管理
📅 カレンダー
📋 診療予約
ダッシュボードユーザー挨拶
ペット一覧ペット登録健康記録
バックアップ管理画面
一覧画面：ペット管理（pets/list.html）
共通サイドバー
ペット・健康
🐶 ペット管理
ペット管理
ListGridTable＋登録
名前
種別
操作
ポチ / 画像
犬・柴犬
詳細 / 健康記録
ミケ / 画像なし
猫
編集 / 削除
登録・編集・詳細画面（pets/form.html / pets/detail.html）
共通サイドバー
🐶 ペット管理
📝 健康記録
ペット登録・編集
保存戻る
基本情報
健康記録
AI症状チェック
健康記録画面（health/list.html / health/form.html）
共通サイドバー
🐶 ペット管理
📁 健康記録
健康記録
＋記録追加
記録日
体重・体温
操作
2026/06/02
スコア・メモ
編集 / 印刷
食欲運動睡眠
診療予約・カレンダー画面（appointments/index.html / calendar/index.html）
共通サイドバー
📅 カレンダー
📋 診療予約
💬 相談
診療予約 / カレンダー解説
前日翌日
来院オンライン
10:0010:3011:0011:30
対象ペット💉🩺🗑️
日
月
火
水
木
金
土
1
2 📁
3
4 10:00
5
6 💉
7
管理系画面（admin/users/list.html / slot-management.html）
共通サイドバー
👥 ユーザ管理
📢 お知らせ
💳 請求
🗓️ 予約枠
管理画面
新規作成
対象
状態
操作
ユーザー / 予約枠
ACTIVE / 空き
編集 / 無効化
請求 / 通知
未払い / 配信
詳細 / 送信

5 スマートフォン版

スマートフォン版 ワイヤーフレーム 任意
主要ページのスマートフォン版ワイヤーフレーム

【スマホワイヤー（1カラム基準）】

・コンテナ幅：82vw（max 960px）
・基本グリッド：1カラム
・セクション間余白：36px
・構成：1カラム縦スクロール（カード型UI）

1. ヘッダー（高さ 56px / sticky）
左：ブランド名「ペットライフプラス」 / 右：メニューボタン（☰）
ナビは開閉式（トップ / 総合案内 / 導入事例と実績 / ログイン / お問い合わせ）

2. ヒーロー
上：eyebrow・見出し・説明文 / 中：CTA2種（縦並び） / 下：イメージカード

3. サービス紹介・主要機能
各カードは1列積み（健康記録 / AI症状チェック / オンライン診療 など）

4. 実績・導線セクション
導入事例導線カード、KPIカード（記録継続率/受診判断時間/相談満足度）を縦積み

5. お問い合わせ導線（CTA）
ボタンは幅100%の縦配置を維持し、タップ領域を確保

6. フッター
主要リンクを縦方向に配置し、モバイルでの到達性を優先

切替ルール：768px未満は1カラム（ドロワーナビ）。768px以上でPCレイアウト（ナビ常時表示、カード3列、ヒーロー2カラム）へ切替。

ワイヤーフレーム画像配置：
<img src="../images/wireframe/top-sp.png" alt="トップページ スマートフォン版 ワイヤーフレーム">

top_sp.html のスクリーンショット（スマートフォン版）