設計仕様書 / 1ページ目のコード

実際のビルド結果 · 1/3ページ · 画像を選んで拡大

実際の3ページ作例の 1ページ目 に対応するソースです。内容は架空で、教育内容・設計要件は利用前に担当者が確認します。共通CSS・設定と参照ファイルを組み合わせて使います。

プレビュー一覧へ戻る共通CSSと設定次のページ

このページのMarkdown

document.md の明示的な区切りで分けた抜粋です。ページ間には <!-- wwpo:break --> を置きます。

document.md

<!-- wwpo:page flow=fixed -->
# 会議室予約デモ

**ソフトウェア設計仕様書 / 架空のアプリ**

設計文書の小さな作例です。実装済みのサービスや、本番利用できる仕様書ではありません。

## 目的と範囲

空き会議室を表示し、ローカルのデモで予約要求を記録します。実アカウント・決済・外部カレンダー・通知は作例の範囲外です。

## 要件定義

| ID | 提案する動作 | 確認の例 |
| --- | --- | --- |
| R1 | 会議室と空き枠を一覧表示 | 一つの枠を選べる |
| R2 | 保存前に要約を表示 | 会議室と時間を確認できる |
| R3 | 競合する要求を受け付けない | 競合メッセージが出る |

## 作例の流れ

<!-- wwpo:block width=85% align=center -->
![架空の予約の流れ](assets/diagrams/booking.mmd "提案するデモの流れ")

関連する図表定義とデータ

assets/diagrams/booking.mmd

flowchart LR
  accTitle: 架空の予約要求
  A[枠を選ぶ] --> B[内容を確認] --> C[要求を保存]

デザインと再生成

見出し・余白・色・表・ページ注記は共通CSSとbusinessプリセットによって整えられます。上に表示したページ固有の指示や図表定義も出力に影響します。作例一覧のソースZIPに、全体の文書と必要なファイルがあります。変更後は保存し、プレビュー・検証・書き出しで確認してください。

共通CSSと設定を見る · 作例全体の紹介へ