どんなインプットも読みやすい左サイドバー目次付きの議事録にするプロンプト文 #HTML – Qiita

インプット情報を網羅的に理解し、デジタル雑誌のイメージで、
あなたが考える最高に洗練されたデザイン性の高い単一HTMLお客様向けビジネス議事録を作成してください。
Apple・note風のミニマルデザインで、左サイドバーの固定目次が最重要です。

必須構成（**A3横サイズ**・固定フォーマット）

【表紙セクション】
  - 魅力的なタイトル（h1タグ、中央揃え）
  - 会議概要（3-4行）
  - ヒーローエリア（背景）

【第1章 エグゼクティブサマリー】
  - 1.1 概要（500-1500文字）
  - 1.2 決定事項（表形式）：`|#|決定事項|決定内容|`
  - 1.3 アクションアイテム（表形式）：`|#|アクション|担当者|期限|備考|`

【第2章以降 詳細議事内容】
  各テーマごとに必ず以下構成：
  - 2.1 {テーマ1}
    - 概要：500-1500文字（小ヒーローエリア：CSS/SVG必須）
    - 議論内容：詳細を読み応えある文章で網羅的出力（文字数制限なし）
    - 図解：HTML+CSSで表・図・グラフ・チャート必ず作成
    - 結論：番号付きリスト（3-5項目）
  - 2.2以降同様継続

  【最終章 補足・参考情報】

デザイン仕様（厳守）
  左サイドバー目次（絶対要件）
  - position: fixed; left: 0; width: 250px; height: 100vh;
  - 本文は`margin-left: 270px`で重なり絶対禁止
  - クリック可能なアンカーリンク
  - 表紙と各章のヒーローセクションはテーマに沿った写真をimages.unsplash.comから探し背景にする。リンク切れ注意
  - 章・節タイトルの下に長い区切り線でアクセント

レイアウト安定化
  - 各章・節を枠線で囲み、右下にページ番号
  - `box-sizing: border-box`全要素適用
  - Flexbox/Grid使用時は`min-width: 0`設定
  - ヒーローエリア：`background: linear-gradient(135deg, #色1, #色2)`またはインラインSVG
  - 図表：各テーマで最低1つ、上部概要150文字・下部解説800-1000文字
  - テーマ沿った落ち着いたモダンカラー使用
  - 可読性の高いモダンなフォント
  - LLMの最大トークン数を出力する

内容の充実化
  - 参加していない人でも完全理解可能な網羅性と強調表示
  - 新社会人でも読みやすい好感の持てる平易な文章。
  - 音声文字起こしなどの不明瞭な単語は全体の文脈を理解して自然な文章に修正・補記
  - 全体テーマの意図を正確に反映し自然な文章に整形
  - 入力情報の90%以上の内容を網羅する

文章品質基準
  - 簡潔性：一文25語以内、能動態優先、結論→理由→詳細の構成
  - 明瞭性：専門用語は説明併記、重要情報は文頭配置
  - 国際性：ブラウザの機械翻訳で適切に変換されるような読みやすい文章

厳守事項
  禁止
  - JavaScript、Mermaid、外部画像URL
  - 箇条書き中黒（・）→番号付きリスト必須
  - 体言止め表現、AI作成示唆記述
  - インプットにない数値表現


出力前必須チェック
  1. [ ] 左サイドバー固定配置・本文重なりなし
  2. [ ] 全章節に番号、表紙は1章カウント外
  3. [ ] 各セクションにヒーローエリアが存在
  4. [ ] ヒーローエリアにリンク切れなし
  5. [ ] グラフやチャートの形崩れなし
  6. [ ] 要点に強調表示あり（マーカー、太字、アンダーライン）


出力形式：
　完全なHTMLコードで出力する。コードをそのまま別のシステムに使用するためコードのみを出力する。冒頭・末文は不要。
　
インプット：
　（次のチャットで指示をしますので、何も出力せずに待機しててください）