ChatGPTでプレゼン資料を一瞬で作成する方法！グラフやアニメーションも自動設定！
動画で解説しているプロンプトを下記に記載しますので、必要に応じてご活用ください。
【プロンプトは下記】
添付資料を元に、reveal.jsを用いて詳細かつ視覚的に魅力的な分析レポートを作成、.htmlファイルを作成ダウンロードできるようにしてください。プレゼンテーションで効果的に情報を伝えるために、以下の要件を満たしてください。
アニメーション: 各スライドにはリッチなアニメーション（例えば、フェードイン、スライドイン、ズームインなど）を適用し、各要素が視覚的に引き立つようにしてください。
ビジュアルエフェクト: データはグラフやチャートを使用して視覚化し、それらには適切なアニメーション（例えば、グラフが段階的に描画される、データポイントが順次表示されるなど）を追加してください。各グラフやチャートは見やすく、色やレイアウトに工夫を凝らしてください。
カラーテーマ: 見やすく魅力的なカラーテーマを使用してください。背景色、テキスト色、グラフの色など全ての色の組み合わせが調和するようにデザインしてください。
統一感: 全体のデザインに統一感を持たせてください。フォント、フォントサイズ、マージン、パディングなどのスタイルを統一し、各スライドが一貫したデザインとなるようにしてください。また、スライド間の遷移も統一したスタイルで行うようにしてください。
日本語: 資料はすべて日本語で作成し、適切な日本語表現を使用してください。スライドのタイトル、データラベル、注釈などすべてのテキストが正確かつわかりやすい日本語であることを確認してください。
構成: プレゼンテーションの構成は、導入、主要な分析結果、詳細なデータ、結論、今後の展望の順序で整理してください。各セクションには明確な見出しを付けてください。
以下はサンプルコードです。こちらを参考に作成ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>令和５年通信利用動向調査の結果</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/moon.min.css">
<style>
.reveal section img { background:none; border:none; box-shadow:none; }
.highlight { color: #ff9999; }
.chart-container { width: 80%; margin: auto; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- Title Slide -->
<section data-auto-animate>
<h1>令和５年通信利用動向調査</h1>
<h3>総務省</h3>
<p>2023年8月末調査</p>
</section>
<!-- Information Communication Device Ownership -->
<section data-auto-animate>
<h2>情報通信機器の保有状況</h2>
<ul>
<li class="fragment fade-up">スマートフォン保有率: 90.6% <span class="highlight">（前年比+1.3%）</span></li>
<li class="fragment fade-up">パソコン保有率: 65.3% <span class="highlight">（前年比-2.0%）</span></li>
<li class="fragment fade-up">タブレット保有率: 36.4% <span class="highlight">（前年比-1.5%）</span></li>
</ul>
<div class="chart-container">
<canvas id="deviceOwnershipChart"></canvas>
</div>
</section>
<!-- Internet Usage Trends -->
<section data-auto-animate>
<h2>インターネット利用動向</h2>
<ul>
<li class="fragment fade-right">インターネット利用者の割合: 86.2%</li>
<li class="fragment fade-right">スマートフォンでの利用: 78.9%</li>
<li class="fragment fade-right">不安を感じる利用者: 69.2%</li>
</ul>
<div class="chart-container">
<canvas id="internetUsageChart"></canvas>
</div>
</section>
<!-- Telework Adoption -->
<section data-auto-animate>
<h2>テレワークの導入状況</h2>
<ul>
<li class="fragment fade-left">企業のテレワーク導入率: 49.9% <span class="highlight">（前年比-1.8%）</span></li>
<li class="fragment fade-left">最も多い導入形態: 在宅勤務</li>
<li class="fragment fade-left">導入目的: ワークライフバランス向上、事業継続</li>
</ul>
<div class="chart-container">
<canvas id="teleworkAdoptionChart"></canvas>
</div>
</section>
<!-- Cloud Services and IoT/AI Adoption -->
<section data-auto-animate>
<h2>クラウドサービスとIoT/AIの導入状況</h2>
<ul>
<li class="fragment fade-zoom">クラウドサービス利用企業: 77.7%</li>
<li class="fragment fade-zoom">IoT/AI導入企業: 16.9%</li>
<li class="fragment fade-zoom">導入目的: 業務効率化、顧客サービス向上</li>
</ul>
<div class="chart-container">
<canvas id="cloudIotAiChart"></canvas>
</div>
</section>
<!-- Internet Security Concerns -->
<section data-auto-animate>
<h2>インターネットの安全性と不安</h2>
<ul>
<li class="fragment roll-in">不安を感じる利用者: 69.2%</li>
<li class="fragment roll-in">主な不安: 個人情報漏えい、ウイルス感染</li>
<li class="fragment roll-in">セキュリティ対策実施率: 95.1%</li>
</ul>
<div class="chart-container">
<canvas id="securityConcernsChart"></canvas>
</div>
</section>
<!-- Closing Slide -->
<section data-auto-animate>
<h2>ご清聴ありがとうございました</h2>
<p>詳細情報は以下をご覧ください:</p>
<p><a href="https://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html">https://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html</a></p>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
Reveal.initialize({
transition: 'slide',
transitionSpeed: 'slow',
backgroundTransition: 'fade'
});
// Device Ownership Chart
var ctx1 = document.getElementById('deviceOwnershipChart').getContext('2d');
new Chart(ctx1, {
type: 'bar',
data: {
labels: ['スマートフォン', 'パソコン', 'タブレット'],
datasets: [{
label: '保有率 (%)',
data: [90.6, 65.3, 36.4],
backgroundColor: ['#FF9999', '#FFCC99', '#99CCFF']
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Internet Usage Chart
var ctx2 = document.getElementById('internetUsageChart').getContext('2d');
new Chart(ctx2, {
type: 'pie',
data: {
labels: ['インターネット利用者', 'スマートフォンでの利用', '不安を感じる利用者'],
datasets: [{
data: [86.2, 78.9, 69.2],
backgroundColor: ['#FF9999', '#FFCC99', '#99CCFF']
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Telework Adoption Chart
var ctx3 = document.getElementById('teleworkAdoptionChart').getContext('2d');
new Chart(ctx3, {
type: 'horizontalBar',
data: {
labels: ['テレワーク導入率', '在宅勤務', 'ワークライフバランス向上', '事業継続'],
datasets: [{
label: '割合 (%)',
data: [49.9, 90.0, 42.7, 42.0],
backgroundColor: ['#FF9999', '#FFCC99', '#99CCFF', '#CCFF99']
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Cloud and IoT/AI Adoption Chart
var ctx4 = document.getElementById('cloudIotAiChart').getContext('2d');
new Chart(ctx4, {
type: 'bar',
data: {
labels: ['クラウドサービス利用企業', 'IoT/AI導入企業'],
datasets: [{
label: '割合 (%)',
data: [77.7, 16.9],
backgroundColor: ['#FF9999', '#99CCFF']
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
// Internet Security Concerns Chart
var ctx5 = document.getElementById('securityConcernsChart').getContext('2d');
new Chart(ctx5, {
type: 'doughnut',
data: {
labels: ['不安を感じる利用者', '個人情報漏えい', 'ウイルス感染', 'セキュリティ対策実施率'],
datasets: [{
data: [69.2, 89.4, 61.1, 95.1],
backgroundColor: ['#FF9999', '#FFCC99', '#99CCFF', '#CCFF99']
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
</script>
</body>
</html>
【プロンプトここまで】
この記事が気に入ったらサポートをしてみませんか？