diff --git a/docs/chapters/chapter-introduction/index.md b/docs/chapters/chapter-introduction/index.md index 236d6d5..8c4ea22 100644 --- a/docs/chapters/chapter-introduction/index.md +++ b/docs/chapters/chapter-introduction/index.md @@ -22,7 +22,7 @@ chapter: introduction 多くの人が経験する光景: -``` +```text プロジェクト/ ├── index.html ├── index_修正版.html diff --git a/docs/diagram/ai_diagram_guidelines.md b/docs/diagram/ai_diagram_guidelines.md index 0bc6d88..5deb7b9 100644 --- a/docs/diagram/ai_diagram_guidelines.md +++ b/docs/diagram/ai_diagram_guidelines.md @@ -3,7 +3,7 @@ ## プロンプト構成原則 ### 基本構造 -``` +```text 1. 図表種別の明確化 2. 技術仕様の指定 3. 美的要求の定義 @@ -12,14 +12,14 @@ ``` ### 必須前置詞 -``` +```text "Create a clean, professional SVG diagram that follows modern technical documentation standards." ``` ## 美的品質指示 ### デザイン原則 -``` +```text - Minimalist design with generous white space - Consistent geometric proportions using golden ratio (1.618) - Professional typography with clear hierarchy @@ -28,7 +28,7 @@ ``` ### 視覚的洗練度 -``` +```text - Use rounded corners (4px radius) for modern appearance - Implement subtle gradients for depth (10〜15% opacity difference) - Apply consistent stroke weights (1px, 2px, 3px hierarchy) @@ -39,7 +39,7 @@ ## 色彩指示テンプレート ### 基本指示 -``` +```text Use this exact color palette: - Primary: #3B82F6 (blue) - Success: #10B981 (green) @@ -54,7 +54,7 @@ Apply colors semantically, not decoratively. ``` ### グラデーション指示 -``` +```text For depth, use subtle gradients: - Start: base color at 100% opacity - End: base color at 85% opacity @@ -66,7 +66,7 @@ For depth, use subtle gradients: ## レイアウト問題防止策 ### 要素重複防止 -``` +```text Strict layout requirements: - Calculate exact coordinates for each element - Maintain minimum 16px clearance between all elements @@ -76,7 +76,7 @@ Strict layout requirements: ``` ### 文字はみ出し防止 -``` +```text Text containment rules: - Text elements must fit within parent container with 8px padding - Use text-anchor="middle" for centered alignment @@ -87,7 +87,7 @@ Text containment rules: ``` ### 座標計算指示 -``` +```text Use explicit coordinate calculation: - Define grid: 800x600 viewBox with 40px margins - Working area: 720x520 pixels @@ -99,7 +99,7 @@ Use explicit coordinate calculation: ## 厳密配置テンプレート ### 水平配置(3要素例) -``` +```text For 3 elements in 720px width: - Element width: 200px - Spacing: 60px @@ -109,7 +109,7 @@ For 3 elements in 720px width: ``` ### 垂直配置(4要素例) -``` +```text For 4 elements in 520px height: - Element height: 80px - Spacing: 40px @@ -119,7 +119,7 @@ For 4 elements in 520px height: ``` ### テキスト配置計算 -``` +```text For text in rectangular container: - Container: width=120px, height=60px - Text position: x=60 (center), y=35 (vertical center + font-size/2) @@ -131,7 +131,7 @@ For text in rectangular container: ## タイポグラフィ指示 ### フォント指定 -``` +```text Use system fonts only: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif @@ -143,7 +143,7 @@ Size hierarchy: ``` ### テキスト配置 -``` +```text - Use sentence case, not ALL CAPS - Align text to 8px baseline grid - Maintain 1.4 line height @@ -154,7 +154,7 @@ Size hierarchy: ## 図表種別テンプレート ### アーキテクチャ図 -``` +```text Create a system architecture diagram with: - Rectangular components with 4px rounded corners - Hierarchical layout showing data flow @@ -165,7 +165,7 @@ Create a system architecture diagram with: ``` ### フローチャート -``` +```text Generate a flowchart using: - Start/End: rounded rectangles (rx="20") - Process: rectangles with 4px radius @@ -176,7 +176,7 @@ Generate a flowchart using: ``` ### シーケンス図 -``` +```text Design a sequence diagram featuring: - Vertical lifelines with 3px dashed strokes - Activation boxes as subtle rectangles @@ -186,7 +186,7 @@ Design a sequence diagram featuring: ``` ### データフロー図 -``` +```text Create a data flow diagram including: - Circular data stores - Rectangular processes @@ -198,7 +198,7 @@ Create a data flow diagram including: ## 品質強化指示 ### 詳細度レベル -``` +```text Level 1 (Concept): Basic shapes, minimal detail Level 2 (Design): Refined shapes, proper spacing Level 3 (Production): Full styling, shadows, gradients @@ -207,7 +207,7 @@ Default to Level 2 unless specified. ``` ### 洗練度チェック -``` +```text Ensure the diagram meets these criteria: - Would this appear professional in a technical presentation? - Are visual relationships immediately clear? @@ -219,7 +219,7 @@ Ensure the diagram meets these criteria: ## プロンプト例 ### 基本テンプレート -``` +```text Create a clean, professional SVG diagram of [DIAGRAM_TYPE] showing [CONTENT_DESCRIPTION]. Requirements: @@ -240,12 +240,12 @@ Viewport: 800x600 or appropriate aspect ratio ## 問題回避プロンプト例 ### 改良前(問題発生しやすい) -``` +```text ❌ "Create a diagram with boxes and arrows showing the system flow" ``` ### 改良後(問題回避) -``` +```text ✅ "Create an SVG diagram (viewBox="0 0 800 600") with exactly 3 rectangular boxes: Box 1: x=50, y=100, width=180, height=80, containing text 'Frontend' @@ -265,7 +265,7 @@ Verify no overlapping elements and all content within margins." ``` ### システム図の厳密指示例 -``` +```text Create a microservices architecture SVG (viewBox="0 0 800 600"): Layout calculation: @@ -304,7 +304,7 @@ Verification checklist: ## 検証指示の強化 ### 必須検証項目 -``` +```text Before outputting SVG, verify: 1. Bounding box check: all elements x+width ≤ viewBox width 2. Collision detection: no element overlaps another @@ -315,7 +315,7 @@ Before outputting SVG, verify: ``` ### デバッグ指示 -``` +```text Include calculation comments in SVG: -``` +```text ### シンプルなコンポーネント例 ```xml @@ -175,7 +175,7 @@ font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; values="0,0; 100,0" dur="2s" repeatCount="indefinite"/> -``` +```text ## アクセシビリティ @@ -188,7 +188,7 @@ font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; ### ARIA対応 ```xml -``` +```text ### 代替手段 - テキスト形式の説明併記 @@ -198,13 +198,13 @@ font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; ## ファイル管理 ### 命名規則 -``` +```text {章番号}_{図番号}_{図表名}.svg 例: 03_02_database_architecture.svg ``` ### ディレクトリ構造 -``` +```text /assets/ /images/ /diagrams/ @@ -288,7 +288,7 @@ document.documentElement.setAttribute('data-theme', savedTheme); 4. **色使い最小化**: 基本4色+グレーのみ ### 視覚的単純化 -``` +```text 線種: 実線(主要)、破線(補助)、点線(関連) 太さ: 1px(通常)、2px(強調)、3px(最重要) 図形: 矩形、円、菱形の3種のみ @@ -296,7 +296,7 @@ document.documentElement.setAttribute('data-theme', savedTheme); ``` ### テキスト最適化 -``` +```text 文字数: ラベル最大12文字 行数: 1要素につき最大2行 言語: 英数混在時は半角統一 @@ -304,7 +304,7 @@ document.documentElement.setAttribute('data-theme', savedTheme); ``` ### レイアウト原則 -``` +```text 余白: 要素の50%以上確保 整列: グリッドベース配置 グルーピング: 近接による関連性表現 @@ -355,4 +355,4 @@ document.documentElement.setAttribute('data-theme', savedTheme); 2. **WAVE**: アクセシビリティ検証 3. **Lighthouse**: パフォーマンス測定 -この仕様により、技術書として適切な品質と一貫性を確保できます。 \ No newline at end of file +この仕様により、技術書として適切な品質と一貫性を確保できます。 diff --git a/project-management/structure-review-round1.md b/project-management/structure-review-round1.md index ae239f3..5a6213e 100644 --- a/project-management/structure-review-round1.md +++ b/project-management/structure-review-round1.md @@ -9,7 +9,7 @@ - GitHub Actions / セキュリティ機能など、実務で頻出する主要機能の導入と基本操作を理解する。 - 典型的なトラブルとコマンドを把握し、ドキュメント参照しながら自力で解決を試みられるようになる。 -# 2. 現状の章構成サマリ +## 2. 現状の章構成サマリ ## 第1部: 基礎編(`docs/index.md` の目次順) @@ -121,7 +121,7 @@ - 学習リソースと参考文献(`manuscript/appendix-resources/`) - 狙い / 主なトピック: 公式・学習・実践・コミュニティを含む参考リンク集。 -# 3. 構成上の気になる点(候補) +## 3. 構成上の気になる点(候補) - 目次(`docs/index.md`)の章名と本文ページタイトルの不一致 - 第3〜7章で、目次表示と本文ページのタイトル・内容が一致していない(例: 目次「GitHubアカウント作成と初期設定」だが本文は「初めてのリポジトリ作成」)。 @@ -143,7 +143,7 @@ - `docs/index.md` 末尾に `\\n` が残っている - 文字として `\\n` が混入しており、テンプレート差分の意図だとしても可読性を落とす(要確認)。 -# 4. 構成改善の提案(案) +## 4. 構成改善の提案(案) - 目次表示と本文ページタイトル/内容を一致させる - 【案A】`docs/index.md` と `docs/_includes/sidebar-nav.html` の章名を、現状の本文ページタイトルに合わせて更新する(最小差分)。 diff --git a/src/chapter-introduction/index.md b/src/chapter-introduction/index.md index 236d6d5..8c4ea22 100644 --- a/src/chapter-introduction/index.md +++ b/src/chapter-introduction/index.md @@ -22,7 +22,7 @@ chapter: introduction 多くの人が経験する光景: -``` +```text プロジェクト/ ├── index.html ├── index_修正版.html diff --git a/tech-book-writing-6phases.md b/tech-book-writing-6phases.md index 526e35c..7accefa 100644 --- a/tech-book-writing-6phases.md +++ b/tech-book-writing-6phases.md @@ -90,7 +90,7 @@ ### 実施内容 #### 2.1 体系的な詳細目次の作成 -``` +```text 各章について以下を定義: - 章タイトル(読者の関心を引く明確な表現) - 節タイトル(5-8個程度、論理的な流れ) @@ -227,7 +227,7 @@ AI支援により全章のラフ原稿を作成し、全体構造の妥当性を ### 実施内容 #### 5.1 AI支援による精密執筆 -``` +```text 執筆アプローチ: 1. ラフ原稿を基にした詳細化 2. 概念と原理の説明を深化