32
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-05-25

*2025/5/30更新:
 ・プロンプト文をすごく短くしました

1. 実行例

どんなインプットでも、左サイドバーに目次がついてきれいなレポートに仕上がるプロンプト文を作りました。いろんな情報を整理するときに役に立ちます。

以下の実行例をご覧ください。

2. プロンプト文

1)以下を生成AIに貼り付けます。
2)2回目のチャットで、インプットを追加で貼り付けてください。
3)HTMLが出力されますので、メモ帳などで拡張子を.htmlにしてください。

インプットの情報を網羅的に理解して、デジタル雑誌の特集記事を作るイメージで、
洗練された単一HTMLお客様向けのビジネスレポートを作成してください。左サイドバーの固定目次が最重要です。

Appleのサイトやnoteを参考に、ミニマルかつ高品質な静的デザインのレポートを目指してください。
提供情報に基づき、読者が情報を心地よく深く理解できるような非常に読みやすく論理的なコンテンツを生成してください。

【主要構成】
   サイズ:A3横。縦幅は自由。
   表紙: 魅力的なタイトル、概要、ヒーローセクション(テーマに沿った写真を外部URLから探す)。
   左固定目次: 章・節レベルで、該当箇所へページ内リンク。メインコンテンツと重ならないよう配置。
   メインコンテンツ: 
  章ごとの導入、比較表や事例紹介、全体のまとめ、参考文献リストなど。各章は1000~2000字程度、高品質な画像には500字以上の解説を加えてください。十分な余白を確保。
  テーマが変わるごとに章や節を分ける。各章・節を枠線で囲み右下にページ番号のデザイン。
  各章・節タイトルには、シンプルで効果的な長い区切り線でアクセント付け
  要点は太字やアンダーラインやマーカー、類似する最適な表現を採用し強調する
  内容に応じて、表やグラフ、フローなどのビジュアル表現を加える。モダンなwebデザインテクニック50などを参考にビジュアル表現を積極的に採用する
  ビジュアル表現の上部は概要(150文字程度)と下部には解説(1000文字程度で具体的にする)を入れる

【技術・品質】
   セマンティックHTML、効率的なCSS(Flexbox/Grid活用、PC・印刷対応、CSS量抑制)。
   テーマに沿った落ち着いたカラーの選択。WCAG 2.1 AA基準のコントラスト比。
   JTF日本語標準スタイルガイドを意識した、新社会人でも読みやすい平易な文章。
   本文は可読性の高いモダンなゴシック体を採用する

【厳守事項】
   JavaScript、Mermaid、情報隠蔽UI(タブ等)、プロンプト文の書き写しやAI作成を示唆する記述は禁止。
   入力情報にない数値での図表作成禁止。
   レイアウトの重なり(特に目次と本文)絶対防止。
   表の各行左端に番号付け。
   箇条書きは中黒(・)は禁止。箇条書きは番号付きリストにする。
   `cite:`のような参照記載をしないこと。
   入力情報の90%以上を網羅すること。
 表紙を1章にカウントしないこと。

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

インプットは、以下がおすすめです。

1)会議の音声文字起こし
2)Deep Researchの結果
3)教科書や資格試験のスクショ

気に入って頂けましたら、「いいね」を押してください。
今後とも、よろしくお願いいたします。

▼ 議事録バージョンはこちらです ▼

▼ プロンプト集を用意しています。ぜひご覧ください ▼

32
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?