はじめに
- 最近は大規模言語モデルが進化し、「o1」や「o3-mini」ではミ長文プロンプトを扱えるようになりました。
- そこで今回は、HTML + CSSだけを使い、まるでPowerPointのように見栄えのするスライド資料を一撃で作成するプロンプト文をご紹介いたします。
プロンプト文
o1やo3-miniなどの長文が扱える生成AIに貼り付けてください。
**あなたは、プレゼンテーション資料のスペシャリストです。
以下の詳細仕様に基づき、HTMLとCSSのみで実装可能な、PowerPoint風のプレゼンテーション資料を作成してください。**
### 1. 基本仕様
- **HTML文書**
- `<!DOCTYPE html>` で始まり、文字コードは UTF-8 を使用すること。
- **フォント**
- メインフォントは「Yu Gothic UI」（フォールバック：sans-serif）。
- すべてのテキストは高い文字品質（最低でもフォントウェイト500以上）を保証すること。
### 2. スライドとレイアウト
- 各スライドは16:9の比率を維持し、ディスプレイ（例：1920×1080pxなど）に合わせて最適化すること。
- 十分なパディングと枠線を設け、全体レイアウトが崩れないように注意すること。
### 3. テキストと行間
- **フォントサイズの目安**
- メインタイトル：56px以上
- セクションタイトル：48px以上
- サブタイトル：42px以上
- 本文：28px以上
- 表内文字：24px以上
- 注釈：20px以上
- 行間はすべて1.8以上を確保し、読みやすさを追求すること。
### 4. カラースキーム
- **Primary:** ディープブルー（#0d47a1）
- **Secondary:** ダークブルー（#002171）
- **Accent:** ブライトブルー（#1e88e5）
- **Warning:** レッド（#d32f2f）
- **背景:** ホワイト（#ffffff）
- **表ヘッダー:** ライトブルー（#e3f2fd）
- 表の最左列には必ず連番を入れ、数値の増減や警告など、意味に応じた色付けを適用すること。
### 5. グラフと表の表示
- **（右上）表**
- 最左列に連番（番号）を必ず表示する。
- ヘッダー行の高さは約60px、データ行は約50px、各列の最小幅は120pxとする。
- 数値は右寄せ、文字列は左寄せとし、数値は3桁ごとのカンマ区切り、パーセンテージは小数点第1位、金額には単位を明記すること。
- **（右下）グラフ**
- SVG形式で作成し、各色に明確な意味を持たせる（例：業績向上＝ブルー、低下＝レッドなど）。
- 凡例、各軸の数値、および見やすいサイズ（最低16px）の数値ラベルを必ず表示すること。
### 6. ページ構成
- **タイトルページ**
- 中央にプロジェクトタイトル、サブタイトル、所属情報を配置。
- 作成日は右下に表示する。
- **目次ページ**
- タイトルと項目リストを配置し、各項目は左上に実際の目次名として表示（ページ番号は不要）。
- **セクション扉**
- 中央にメインタイトルとサブタイトルを配置し、次のセクションへの導入とする。
- **コンテンツページ**
- 左側には説明文や重要ポイント、箇条書き（例：1）2）の形式で番号付き）を配置。
- 右上にはデータ表などの視覚要素を配置する。
- 右下にはグラフなどの視覚要素を配置する。
- **共通要素**
- すべてのスライドの左上に、現在のセクション名（実際の目次名）を表示する。
### 7. アクセシビリティとエラー防止
- テキストと背景のコントラスト比は最低でも4.5:1を確保すること。
- 各要素のスタイル設定により、文字の崩れやレイアウトのズレが発生しないよう十分に注意すること。
### 8. 文章構成と表現
- 客観的かつ論理的な表現で、結論・詳細説明・補足・注釈を明確に示すこと。
- 重要箇所は、レッドや太字などの色や装飾で強調し、視認性を高めること。
### 9. コードサンプル（基本HTMLテンプレート例）
以下は、字崩れやレイアウト崩れの心配がない、汎用的なHTMLテンプレートの例です。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プレゼンテーション資料</title>
<style>
body { margin: 0; font-family: "Yu Gothic UI", sans-serif; font-weight: 500; line-height: 1.8; }
.slide {
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 60px;
border: 2px solid #1a237e;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* 表のスタイル */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #90caf9; }
th { background: #e3f2fd; height: 60px; }
td { height: 50px; }
/* グラフのスタイル */
.financial-graph { width: 100%; max-width: 800px; }
/* 箇条書きのスタイル */
.bullet-list { list-style-type: none; padding: 0; }
.bullet-list li::before {
content: counter(item) "） ";
counter-increment: item;
}
.bullet-list li { margin-bottom: 10px; }
/* カウンター初期化 */
.bullet-list { counter-reset: item; }
</style>
</head>
<body>
<!-- スライド例 -->
<div class="slide">
<h1 style="font-size:56px;">プロジェクトタイトル</h1>
<h2 style="font-size:48px;">セクション名</h2>
<h3 style="font-size:42px;">サブタイトル</h3>
<p style="font-size:28px;">ここに本文を入力してください。</p>
<!-- 表の例 -->
<table>
<tr>
<th>No.</th>
<th>項目</th>
<th>金額（百万円）</th>
<th>前年比</th>
<th>備考</th>
</tr>
<!-- データ行例 -->
<tr>
<td>1</td>
<td>売上高</td>
<td style="text-align: right;">1,234</td>
<td style="text-align: right; color: #d32f2f;">-2.3%</td>
<td>前年同期比減少</td>
</tr>
</table>
<!-- SVGグラフの例 -->
<svg class="financial-graph" viewBox="0 0 800 400">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#0d47a1;stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#1e88e5;stop-opacity:0.9" />
</linearGradient>
</defs>
<!-- グリッド線 -->
<g class="grid">
<line x1="50" y1="350" x2="750" y2="350" stroke="#e0e0e0" stroke-width="1" />
<!-- 他のグリッド線を追加 -->
</g>
<!-- データ -->
<g class="data">
<!-- 例：棒グラフ -->
<rect x="100" y="200" width="50" height="150" fill="url(#gradient)" />
<text x="125" y="190" font-size="16" text-anchor="middle">150</text>
</g>
<!-- 軸と数値ラベル -->
<g class="axes">
<line x1="50" y1="50" x2="50" y2="350" stroke="#000" />
<line x1="50" y1="350" x2="750" y2="350" stroke="#000" />
<text x="40" y="55" font-size="16">100</text>
<text x="40" y="350" font-size="16">0</text>
</g>
<!-- 凡例 -->
<g class="legend">
<rect x="650" y="20" width="120" height="40" fill="#ffffff" stroke="#1a237e" />
<text x="660" y="45" font-size="16" fill="#0d47a1">業績向上</text>
<text x="660" y="65" font-size="16" fill="#d32f2f">減少</text>
</g>
</svg>
<!-- 箇条書きの例 -->
<ul class="bullet-list" style="font-size:28px;">
<li>主要ポイントその1</li>
<li>主要ポイントその2</li>
</ul>
</div>
</body>
</html>
---
**【注意事項】**
- **（右下）グラフ**：各色に明確な意味を持たせ、必ず凡例、数値ラベル、各軸の数値を表示してください。
- **（右上）表**：最左列に番号を入れ、増加、減少、警告などの意味に応じた色付けを実装すること。
- **目次ページ**：各項目にはページ番号は不要。実際の目次名を左上に表示してください。
- **箇条書き**：段落番号は「1）」「2）」の形式で表示してください。
- 資料全体は、SlideShareのスライドに匹敵するほどのかっこよさと、表示不具合が発生しない設計を心がけてください。
**■ インプット**
（次のチャットで具体的な指示を行いますので、準備をお願いいたします。）
サンプルの資料作成指示
具体的なインプットデータを貼り付けてください。
お試しする場合は、下記のようなざっくりとしたテーマでも問題ないです。
2025年春の関東各県の天気予報と桜前線 というテーマで想像で内容と値をたくさん入れて資料を作成してください。
2025年3月のIT保守運用報告というテーマで、ITILのプロセスごとの報告書を想像でつくり資料を完成させてください
結果イメージ
メモ帳に作成されたコードを貼り付けて、.htmlで保存してブラウザで開きます。
出力した結果に「こんなグラフにしてください」のような追加指示をすると理想の形に近づくと思います。
お役に立ちそうでしたら「❤いいね」ください
皆さまの仕事の生産性が少しでも向上することを心から願っております。
