グラフィックレコーディング風スライドHTML作成プロンプト V1 爆誕!!!!
抽出サマリー
- 投稿日時: 2025-05-25 20:54:04 JST
- レコード種別: tweet + note
- canonical body: note
- summary: グラフィックレコーディング風スライドHTML作成プロンプト V1
Categorized Entry
- canonical doc: docs/graphic-recording/slide-infographics
- review status: classified
- confidence: high
- reviewer: manual:presentation-hand-curation
Source Post
投稿メモ
text
グラフィックレコーディング風スライドHTML作成プロンプト V1 爆誕!!!!
普通にプレゼンでイケそう、、、プロンプト本文
text
# グラフィックレコーディング風スライドHTML作成プロンプト V1
## 目的
以下の内容を、**プレゼンテーション形式のスライド**として、グラフィックレコーディング風のHTMLで作成してください。各スライドは**1つのメインメッセージ**に焦点を当て、**大きなFont Awesomeアイコン**と**手書き風の要素**を活用して視覚的にインパクトのあるデザインにします。
## スライドデザイン仕様
### 1. 基本構成
- **フルスクリーン対応**のスライド形式(16:9のアスペクト比)
- **1スライド1メッセージ**の原則
- **ナビゲーション機能**(前/次スライド、スライド番号表示)
- **キーボード操作**対応(矢印キー、スペースキー)
- **レスポンシブデザイン**(PC/タブレット/スマホ対応)
### 2. カラースキーム
```
<palette>
<color name='UI/UX-1' rgb='1B6C8C' r='26' g='108' b='140' />
<color name='UI/UX-2' rgb='BF8136' r='191' g='129' b='53' />
<color name='UI/UX-3' rgb='F2E8E4' r='242' g='231' b='227' />
<color name='UI/UX-4' rgb='260101' r='38' g='0' b='0' />
<color name='UI/UX-5' rgb='BF5656' r='191' g='86' b='86' />
<color name='背景' rgb='FFF8F5' r='255' g='248' b='245' />
</palette>
```
### 3. スライドレイアウトパターン
#### A. タイトルスライド
- **超大型アイコン**(fa-10x)をセンター配置
- **大きなタイトル**(60px)
- **サブタイトル**(30px)
- **日付・発表者情報**(20px)
- **手書き風装飾**(矢印、下線、囲み)
#### B. メインコンテンツスライド(3種類)
**パターン1: アイコン中心型**
- 中央に**巨大アイコン**(fa-8x〜fa-10x)
- 周囲に**吹き出し**でポイントを配置(最大4つ)
- **手書き風の矢印**でアイコンと吹き出しを接続
**パターン2: 分割レイアウト型**
- 左側:**大型アイコン**(fa-7x)+ メインメッセージ
- 右側:**詳細説明**(リスト形式、最大5項目)
- **手書き風の区切り線**
**パターン3: フロー・プロセス型**
- **3〜5ステップ**のフロー図
- 各ステップに**中型アイコン**(fa-4x)
- **手書き風の矢印**で接続
- 各ステップに**簡潔な説明**
#### C. コード・実装スライド
- **シンタックスハイライト**付きコード表示
- **実行結果プレビュー**エリア
- **ポイント解説**の吹き出し(3つまで)
- **使用技術アイコン**の表示
#### D. まとめスライド
- **要点リスト**(3〜5項目)
- 各項目に**アイコン**(fa-3x)
- **手書き風チェックマーク**
- **Call to Action**エリア
### 4. タイポグラフィ(スライド用に最適化)
```css
/* フォント読み込み */
@import url('https://t.co/fm6bxZWbHY');
@import url('https://t.co/BjYYKjd5vA');
/* スライド用タイポグラフィ */
.slide-title {
font-size: 60px;
font-weight: 900;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.slide-subtitle {
font-size: 30px;
font-weight: 700;
}
.main-message {
font-size: 48px;
font-weight: 700;
}
.content-text {
font-size: 24px;
line-height: 1.8;
}
.handwritten {
font-family: 'Yomogi', cursive;
font-size: 22px;
}
.code-text {
font-size: 18px;
font-family: 'Consolas', monospace;
}
```
### 5. グラフィックレコーディング要素(スライド版)
#### 手書き風装飾要素
- **矢印**:曲線、直線、太い/細いバリエーション
- **下線・波線**:重要語句の強調
- **囲み枠**:雲型、角丸、ギザギザ
- **吹き出し**:複数の形状とサイズ
- **アイコン装飾**:光彩、影、回転
#### アニメーション演出
- **スライド切り替え**:フェード、スライド、ズーム
- **要素の登場**:順次表示、バウンス、回転
- **アイコンアニメーション**:パルス、揺れ、点滅
- **手書き風描画**:SVGパスアニメーション
### 6. インタラクティブ要素
- **クリッカブルエリア**:詳細情報の表示/非表示
- **ホバーエフェクト**:要素の拡大、色変更
- **プログレスバー**:スライド進行状況
- **サムネイル表示**:スライド一覧(オプション)
## スライド構成テンプレート
### 基本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>
/* CSS変数定義 */
:root {
--ui-color-1: #1B6C8C;
--ui-color-2: #BF8136;
--ui-color-3: #F2E8E4;
--ui-color-4: #260101;
--ui-color-5: #BF5656;
--bg-color: #FFF8F5;
}
/* スライドコンテナ */
.slide-container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
background-color: var(--bg-color);
}
/* 各スライド */
.slide {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
/* ナビゲーション */
.navigation {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 1000;
}
.nav-btn {
padding: 10px 20px;
background: var(--ui-color-1);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-size: 18px;
transition: all 0.3s;
}
.nav-btn:hover {
background: var(--ui-color-2);
transform: scale(1.1);
}
/* スライド番号 */
.slide-number {
position: fixed;
top: 30px;
right: 30px;
font-size: 24px;
color: var(--ui-color-1);
font-weight: bold;
}
</style>
</head>
<body>
<div class="slide-container">
<!-- スライド1: タイトル -->
<div class="slide active" id="slide1">
<div class="title-slide">
<i class="fa-solid fa-rocket fa-10x animated-icon"></i>
<h1 class="slide-title">タイトル</h1>
<p class="slide-subtitle">サブタイトル</p>
<div class="handwritten-note">
<i class="fa-solid fa-calendar"></i> 2024年12月
</div>
</div>
</div>
<!-- 追加のスライド -->
<!-- ... -->
</div>
<div class="navigation">
<button class="nav-btn" onclick="previousSlide()">
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="nav-btn" onclick="nextSlide()">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="slide-number">
<span id="current-slide">1</span> / <span id="total-slides">1</span>
</div>
<script>
let currentSlide = 1;
const totalSlides = document.querySelectorAll('.slide').length;
function showSlide(n) {
const slides = document.querySelectorAll('.slide');
if (n > totalSlides) currentSlide = 1;
if (n < 1) currentSlide = totalSlides;
slides.forEach(slide => slide.classList.remove('active'));
slides[currentSlide - 1].classList.add('active');
document.getElementById('current-slide').textContent = currentSlide;
document.getElementById('total-slides').textContent = totalSlides;
}
function nextSlide() {
showSlide(currentSlide += 1);
}
function previousSlide() {
showSlide(currentSlide -= 1);
}
// キーボード操作
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') nextSlide();
if (e.key === 'ArrowLeft') previousSlide();
});
</script>
</body>
</html>
```
## アイコン活用ガイドライン(スライド版)
### スライドタイプ別推奨アイコンサイズ
- **タイトルスライド**: fa-10x〜fa-beat
- **メインポイント**: fa-7x〜fa-8x + アニメーション
- **サブポイント**: fa-3x〜fa-4x
- **リスト項目**: fa-lg〜fa-2x
- **装飾アイコン**: fa-1x〜fa-lg
### テーマ別アイコンセット
- **導入・開始**: fa-rocket, fa-flag-checkered, fa-play-circle
- **重要ポイント**: fa-exclamation-circle, fa-star, fa-bullseye
- **プロセス**: fa-arrow-right, fa-chevron-right, fa-angles-right
- **完了・成功**: fa-check-circle, fa-trophy, fa-thumbs-up
- **注意・警告**: fa-triangle-exclamation, fa-bell, fa-info-circle
- **技術・ツール**: fa-code, fa-terminal, fa-database, fa-cloud
- **協力・チーム**: fa-users, fa-handshake, fa-people-group
## 実装のポイント
### 1. レスポンシブ対応
```css
@media (max-width: 768px) {
.slide-title { font-size: 36px; }
.main-message { font-size: 28px; }
.content-text { font-size: 18px; }
.fa-10x { font-size: 6em; }
.fa-8x { font-size: 5em; }
}
```
### 2. アニメーション定義
```css
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated-icon {
animation: bounce 2s infinite;
}
```
### 3. 手書き風SVG要素
```html
<svg class="handwritten-arrow" width="200" height="100">
<path d="M10,50 Q50,10 100,50 T190,50"
stroke="var(--ui-color-2)"
stroke-width="3"
fill="none"
stroke-linecap="round">
<animate attributeName="stroke-dasharray"
from="0 1000" to="1000 0" dur="2s" />
</path>
</svg>
```
## 使用上の注意点
1. **1スライド1メッセージ**を厳守
2. **テキストは最小限**に(キーワード中心)
3. **視覚的階層**を明確に(大→中→小)
4. **アニメーションは控えめ**に(重要な要素のみ)
5. **色数は5色以内**で統一感を保つ
6. **余白を十分に**取る(情報過多を避ける)
## 変換手順
1. 元の文章から**キーメッセージを抽出**
2. **5〜10枚のスライド**に分割
3. 各スライドに**適切なレイアウトパターン**を選択
4. **アイコンとビジュアル要素**を配置
5. **手書き風の装飾**で温かみを追加
6. **アニメーション**で動きを付ける
## 変換する文章/記事
ーーー抽出ノート
- tweet ids: 1926607699996799239
- note ids: 1926607698151292928
- cluster items: tweet:1926607699996799239, note:1926607698151292928
- imported at: 2026-03-19T00:00:00+09:00