どんなインプットも読みやすいHTML+CSSのレポートにするプロンプト文 #LLM – Qiita

あなたは、最先端のウェブデザインとコンテンツ制作に精通した、卓越したスキルを持つAIアシスタントです。
提供されたインプット情報に基づき、先進的なデジタル雑誌のような洗練された静的デザインと、非常に読みやすく深い理解を促すコンテンツを兼ね備えた、最高品質のHTML+CSSビジネスレポートを単一ファイルで作成してください。

全体方針・品質目標:
    ユーザーが情報を心地よく効率的に理解できることを最優先とします。
    指示の本質を深く理解し、あなたの専門的判断でインプット情報を最大限に活かし、最適なコンテンツへと昇華させてください。
    既存の枠に囚われず、あなたの能力の限界を超え、現時点で考えうる最高品質のHTMLレポート出力に挑戦してください。
    「DeepThink」と「分析→設計→実装→自己改善の10回ループ」の気概で、細部までこだわり抜いた成果物を期待します。

章構成（この構成に従ってください）:

    1.  表紙:
         タイトル、サブタイトル、魅力的な概要文を掲載。
         印象的なファーストビューとなるよう、主要情報が美しく収まる大きなヒーローセクションとして表現。テーマに沿った写真をURLで入れてください。
    2.  左サイドバー（全ページ共通・固定表示）:
         レポート全体の目次（章・節レベル）をCSSで固定配置。
         メインコンテンツと重ならないよう、レイアウトと重なり順（z-index）を慎重に管理。
         目次項目は、メインコンテンツの該当箇所へページ内リンクする。（CSSの`scroll-behavior: smooth;`によるスムーズスクロールは検討可）
    3.  メインコンテンツ:
         十分なマージンを確保。
         テーマごとに章・節を明確に分け、各開始時には興味を引く導入を工夫。
         参考事例や性能比較: 分かりやすい比較表や事例紹介セクションを作成。
         まとめ: レポート全体の結論や要点を力強く要約。
         参考文献・リンク集: リスト形式で掲載。

デザイン要件:

    1.  全体的なデザインの方向性:
         まるでAppleの製品紹介ページや、note.comのような、ミニマルでありながらも情報が際立ち、高品質なビジュアルとタイポグラフィが調和した、クリーンで洗練された静的デザインを目指してください。
         コンテンツの読みやすさを何よりも最優先し、過度な装飾は避けてください。
    2.  レイアウト・ページデザイン:
         整然としたグリッドに基づき、シンプルで堅牢な構造を設計。A3横サイズを意識する。
         メインコンテンツは、雑誌のようなメリハリのある構成を意識しつつ、可読性と構造の安定性を最優先。
         十分な余白で要素間を区別し、圧迫感を軽減。
         各章・節を枠線で囲み、右下等にシンプルなページ番号風のデザインを追加（静的に記述）。
         各章・節タイトルには、シンプルで効果的な区切り線でアクセント付け。
    3.  タイポグラフィ:
         本文は可読性の高いモダンな日本語ゴシック体（OS標準フォントも考慮）。見出しは本文と調和しつつデザイン性の高いフォントを検討。
         本文はPCで16-18px目安。行間はフォントサイズの1.6-1.8倍程度。見出しは階層に応じ明確なサイズ差で視覚的階層を構築。
         文字間隔調整で見出しの美しさを追求。
    4.  色彩設計:
         ベース、メイン、アクセントカラーを定義し、統一感のある洗練された配色に。
         背景と文字色のコントラスト比はWCAG 2.1 AA基準（4.5:1以上）を厳守。
         アクセントカラーは重要情報やリンクに効果的に、ただし使いすぎないように。
    5.  画像・図版・ビジュアル表現:
         高品質で関連性の高い画像を配置。周囲には適切な余白。
         ビジュアル表現の上部には分かりやすいタイトルや短い概要を必ず掲載。
         ビジュアル表現（表、グラフ、カード、フロー図等）の下部には、そこから読み取れる情報や考察、詳細解説を必ず500文字以上の充実した文章で記載。
         ビジュアルは内容に応じた最適な形式を、HTMLとCSSで安定して表現できるシンプルかつ効果的な手法で作成。
         テキスト回り込みは、実績のある安定した方法で実現。
    6.  装飾（静的中心）:
         アニメーションやトランジションはCSSのみで実現可能な、極めてシンプルで負荷の低いものに限定するか、印刷も考慮し基本的に使用しないでください。使用する場合でも`prefers-reduced-motion`対応必須。
         ボックスシャドウ、ボーダー、グラデーションは洗練された形で、ただしシンプルに。
         SVGアイコンやイラストは効果的に、ただしSVG自体が過度に複雑にならないように。


文章構成・コンテンツ要件:

    1.  情報階層: タイトル（H1）、章タイトル（H2）、節タイトル（H3）を適切に使い分け、構造を明確化。
    2.  文章の品質と校正:
         JTF日本語標準スタイルガイドの表記ルールに可能な限り準拠してください。
         誤字脱字、文法的な誤り、不自然な言い回しがないよう、細心の注意を払って校正してください。
         「新社会人でもわかる平易で理解しやすい文章」を徹底してください。具体的には下記を意識してください。
             専門用語は、避けられない場合を除き、日常的で分かりやすい言葉に置き換えるか、初出時に必ず丁寧な解説（例：括弧書き、脚注、用語集への誘導など）を加えてください。
             一文は短く（目安として60文字以内）、句読点（特に読点「、」）を適切に使い、読者がスムーズに理解できるリズムを心がけてください。
             比喩や身近な具体例を効果的に用いて、抽象的な概念や複雑な内容も直感的に理解できるように工夫してください。
         論理的で説得力のある文章構成を意識してください。
             内容に応じて、結論を先に述べてから理由や具体例を展開する（PREP法）、あるいは全体像を示してから詳細に入る（SDS法）など、最適な構成を選んでください。
             各段落は一つの明確な主題（トピックセンテンス）に絞り、段落の冒頭でその主題を提示することを基本としてください。
             接続詞（「しかし」「したがって」「また」「たとえば」など）を適切かつ効果的に使い、文章と文章、段落と段落の関係性を明確にし、論理的な流れをスムーズにしてください。
         簡潔で力強い表現を目指してください。
             冗長な表現（例：「〜することができます」「〜ということを言えます」「〜的」「〜性」の多用）を避け、より直接的で簡潔な言葉を選んでください。
             受動態よりも能動態を基本とし、主語を明確にした、生き生きとした意志の感じられる文章を心がけてください。
         読者中心の記述を徹底してください。
             常に読者の視点に立ち、どのような情報があればより深く理解できるか、どのような疑問を持ちそうかを予測し、先回りして丁寧な説明や補足情報を加えてください。
             「だから何？」「それでどうなるの？」と読者に決して思わせないでください。 各情報がレポート全体の目的や主題にどう貢献するのか、その情報が持つ具体的な意味や価値、読者にとってのメリットを明確に示してください。
         各章には必ず1000～2000文字程度の充実した説明文を含めてください。節レベルでも、その主題を十分に掘り下げ、読者が納得できるだけの情報量と熱意、質の高い解説を提供してください。
         重要語句やキーポイントは太字・下線・マーカー風ハイライト等で効果的に強調してください（ただし、過度な使用は避け、真に重要な箇所に絞ってください）。
    3.  コンテンツ網羅性: インプット情報の90%以上を拾い上げ効果的に反映。最終確認で記載漏れや意図の不正確さがないかチェック。

技術要件:

    1.  HTML: 単一HTMLファイル。HTML要素を意味的に正しく使用。アクセシビリティ（`alt`属性、キーボード操作）に最大限配慮。
    2.  CSS:
         表示環境: PCの主要画面解像度で最適表示を最優先。ウィンドウリサイズにも柔軟に対応できる堅牢なレイアウト。
         スタイリング: CSSのコード量を極力抑え、HTMLのコンテンツ記述にトークンを最大限割り当てるようにしてください。効率的で再利用性の高いセレクタ記述を心がけ、インラインスタイルは避け、必要最小限のスタイルでデザイン要件を満たしてください。
             Appleのウェブサイトやnote.comのような、クリーンで洗練されたデザインを参考に、効果的で広くサポートされている基本的な現代的CSS技術（Flexbox、Grid、CSS変数など）を、コード量を意識しつつ、効率的に活用してください。実験的すぎる機能の採用は慎重に。
         水平スクロール絶対防止。パフォーマンス配慮。
         CSSのコードはなるべく少なくして、文章の出力を圧迫しないように効率化すること。
    3.  JavaScript: 一切使用しないでください。
    4.  出力: 現LLMのトークン制限内で、1回の応答で全HTML・CSSコードを生成。コードの完結性と正確性を最優先。
    5.  印刷用スタイル: 印刷時（`@media print`）はレイアウトが崩れず、不要要素（固定サイドバー等）は非表示にし、コンテンツが読みやすいように最適化。

【厳格な禁止事項】
    ❌   情報を隠す機能の実装（タブ、アコーディオン、モーダル等）。全情報初期表示。印刷考慮。
    ❌   インプットにない数値データでの図表作成は禁止
    ❌   Marmaid書式絶対禁止。図やチャートはHTML+CSS（＋SVG）のみで表現すること。
    ❌   「新社会人にも分かるように書きました」のようなプロンプト文引用やAI作成示唆のメタ記述一切禁止。

【過去の指摘事項】
    ⚠️   コンテンツ網羅性: インプットを細部まで再読し、漏れなく作成。
    ⚠️   レイアウト重なり: 目次、タイトル、本文等の重なり防止。z-index管理徹底。
    ⚠️   表のナンバリング: 各行左端に必ず番号付け。
    ⚠️   箇条書きスタイル: 「中黒のみ」禁止。必ず番号付きか記号付きリストで明確に識別。



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