はじめてのバイブコーディング×業務アプリ開発

SlideTemplates ギャラリー

コースデータに依存せず、各テンプレートのサンプル SlideData を複数パターン表示しています。レイアウト上の横幅は実スライドでよくある 1200px 前後を想定してレンダリングしています（コンテナクエリ・19:10 の min-height はこの幅基準）。 一覧の見やすさのため 72% 縮小表示しており、画面上の見た目の幅は約 864px 相当です。ImageBlock / NoteBlock / ActionButtons / PromptBlock / LabeledTextBlock などの組み合わせの確認に使えます。

アクションボタンは開発環境ではコンソールにログが出ます。

タイトル（title）

title

ヒーロー・レッスン冒頭・まとめ向け。画像位置・ノート・アクションのバリエーション。

最小構成

title-minimal

画像・ノート・アクションなし

GALLERY
SlideTemplates ギャラリー

テキストとタグのみのシンプルなタイトルスライドです。

画像（上）+ ゴール

title-image-above

ImageBlock position: above（既定）

Lesson
画像を上に配置

ヒーロー画像をメインコンテンツの上に表示します。

サンプル画像
✓
レイアウトのバリエーションを確認する
📐
19:10 領域内での表示を確認する

画像（下）+ ノート + アクション

title-full-composables

ImageBlock below / NoteBlock / ActionButtons

COMPOSABLES
ノートとアクション付き

画像は下、補足ノートとボタンを併用できます。

サンプル
💡ノートには HTML を一部利用できます。
8
Templates
∞
組み合わせ

コンセプト（concept）

concept

カードグリッド（複数枚・列数可変）。画像・promptBlock・labeledTextBlocks・ノート・アクション。

最小構成

concept-minimal

カードのみ

🧩
コンセプト（最小）

説明文テキストとカードだけの例です。

1
項目A
説明テキスト
2
項目B
説明テキスト

カード6枚（2列グリッド）

concept-cards-6grid

columns: 2 → 2列×3行

📋
プロンプトの型（6観点）

カードを6つ並べる例です。columns: 2 で 2列×3行のグリッドになります。

🎯
成果物
何を作るかをはっきり書く。
🧩
要素
含めたいパーツを列挙する。
⚙️
制約
範囲・スタイルの条件を伝える。
📤
出力形式
返してほしい形を指定する。
📎
文脈
前提・背景・参照情報を添える。
💬
トーン
丁寧さ・簡潔さなど求める口調を伝える。

promptBlock + 画像（上）

concept-prompt-examples

promptBlock / ImageBlock above

📝
プロンプト例付き

カードの下にコピー付きプロンプトブロック（PromptBlock）を置けます。

サンプル
推奨
✓
良い例
具体的で指示が明確
注意
△
悪い例
曖昧で再現しづらい
プロンプト

「Next.js 14 の App Router で一覧ページを作って」

「上記に TypeScript と Tailwind を使って」

画像（下）+ ノート + アクション

concept-note-actions-below
🎨
補足とアクション

画像を下に回し、ノートとボタンで次の行動を促せます。

A
カード1
テキスト
B
カード2
テキスト
C
カード3
テキスト
サンプル
📌ノートで補足。カードは columns で調整可能。

ステップ（steps）

steps

タイムライン・進捗バー・画像・ノート。

最小構成

steps-minimal

ステップ（最小）

1

ステップ1

説明

2

ステップ2

説明

3

ステップ3

説明

進捗バー + 状態

steps-progress

showProgress / completed・current

📍
進捗付きフロー

プログレスバーとステータスを表示

1

準備

環境を整える

2

実装

コードを書く main

3

テスト

TODO
4

デプロイ

進捗
2 / 4

画像（下）+ ノート + アクション

steps-image-note-actions

画像とノート付き

1

手順1

完了

2

手順2

いまここ

サンプル
💡長いステップでも 可変高さで全体が見えます。

比較（comparison）

comparison

左右バッジ・色・divider・verdict・画像・ノート。

最小構成

comparison-minimal

比較（最小）

A
  • ✓メリット1
  • ✓メリット2
VS
B
  • △注意点1

divider + verdict

comparison-verdict-divider

dividerText / verdict

カスタム区切りと結論

中央テキストと下部 verdict

方式A
  • ✓学習コストが低い
VS
方式B
  • ✓拡張性が高い
用途に応じて使い分けましょう。

画像 + ノート + アクション

comparison-image-note-actions

画像（上）と補足

サンプル
旧
  • ✓項目
VS
新
  • ✓項目
📎比較スライドでも NoteBlock が使えます。

表（table）

table

ヘッダー・行・ノート・アクション。

最小構成

table-minimal
📊
表（最小）

説明文のみ。ノート・アクションなし。

列A列B
12
34

ノート + アクション

table-note-actions

NoteBlock / ActionButtons（画像は非対応）

表 + 補足

項目内容
型SlideData
用途レッスン
⚠️セル内は HTML の一部が使えます。

コード（code）

code

コードパネル・説明・画像・promptBlock（PromptBlock）・labeledTextBlocks（LabeledTextBlocks）・ノート・アクション。

最小構成

code-minimal
TS

コード（最小）

example.ts例
1export function hello() {
2 return "world";
3}

説明

1行ずつ HTML 可。

画像（上）

code-image-above

ImageBlock above

TS

画像を上に

サンプル
sample.ts例
1const x = 1;
2console.log(x);

メモ

コードの上に画像を置けます。

画像（下）+ promptBlock + ノート + アクション

code-full
TS

フル composables

app/page.tsx例
1export default function Page() {
2 return <main />;
3}

ポイント

説明ブロックは複数置けます。

サンプル
プロンプト

「上記にエラーハンドリングを追加して」

💡長いコードは 縦スクロール またはスライド高さで調整します。

AIチャット（ai-chat）

ai-chat

会話例パネル（ユーザー／AI）と説明カラム。コードは `<pre class="ai-chat-code"><code>…</code></pre>` 推奨。illustration で例示トーン。

最小構成

ai-chat-minimal

AIチャット（最小）

AIチャット
あなた
こんにちは。
AI

はい、何でも聞いてください。

説明

右カラムに補足を並べられます。

コード付き返答

ai-chat-code
会話例

コードを返す例

AIチャット
あなた
index.html を書いてください。
AI

例です。

const x = 1;

コピー

コードブロックを選択してコピーします。

illustration + ノート

ai-chat-illustration

例示トーン

以下は教材用の一例です。

AIチャット例
AI

短い返答の例です。

メモ

パネル高さが抑えられます。

💡実際のチャットとは異なる場合があります。

プロンプト（prompt）

prompt

PromptBlock（prompt / promptBlock）・listItems・labeledTextBlocks（LabeledTextBlocks）・ノート・アクション。

最小構成

prompt-minimal
✉️
プロンプト（最小）
プロンプト

あなたは親切なアシスタントです。

次の制約に従って回答してください。

listItems + labeledTextBlocks

prompt-list-examples

箇条書きと例

プロンプト内にリストと、下にプロンプト例を複数。

プロンプト

以下を満たすコードを書いてください。

  • TypeScript を使う
  • エラーは握りつぶさない
短い例
「ボタンを追加して」
長い例
「上記にアクセシビリティ属性を付与して」

ノート + アクション

prompt-note-actions

ノートとアクション付き

プロンプト

このプロンプトをコピーしてチャットに貼り付けてください。

📋ノートで注意事項を書けます。

チェックリスト（checklist）

checklist

項目の detail・preview（画像）・explanation・ノート・アクション。

最小構成

checklist-minimal

preview なし

✅
チェックリスト（最小）

確認項目だけのシンプル例。

項目1
項目2

detail + explanation

checklist-detail-explanation

items[].detail / explanation

詳細と説明文

設定ファイルを確認
.env のキーが揃っているか
ビルドが通る
ローカルで npm run build

すべてのチェックが付いたら次のレッスンへ進みましょう。

preview パネル + ノート + アクション

checklist-preview-full

preview.image（右列は画像のみ表示）

プレビュー付き

レイアウトを確認
レスポンシブを確認
プレビュー
💡右側のモックブラウザ風にプレビュー画像を表示できます。

クイズ問題（quiz-question）

quiz-question

ラジオボタン式の選択肢問題。questionId・correctAnswer でスコア計算に連携。画像・ノート対応。

最小構成

quiz-question-minimal

テキストのみ・画像なし

問題 1／3

HTMLで見出しを作るタグはどれですか？

画像付き

quiz-question-image

ImageBlock + NoteBlock

問題 2／3

UIパターン例

下の画像のUIパターンは何と呼ばれますか？

💡画像はオプションの上に表示されます。

長い選択肢

quiz-question-long

選択肢テキストが長い場合

問題 3／3

APIからデータを取得する際、fetch 関数の戻り値として正しいのはどれですか？

クイズ結果（quiz-results）

quiz-results

スコアに応じた感情フィードバック（絵文字・色・メッセージ）＋円形プログレスリング。tier: perfect / great / good / okay / low。

パーフェクト（3/3）

quiz-results-perfect

tier: perfect — 緑アクセント + 🎉

確認テスト — 結果

100%
3 / 3 問正解

各問題の回答

問題1✓ 正解
正解は <h1>。HTML の見出しタグは <h1>〜<h6> です。
問題2✓ 正解
正解は カルーセル。横にスワイプして複数アイテムを表示するUIです。
問題3✓ 正解
fetch() は Promise<Response> を返します。
🎉すべて正解！次のレッスンに進みましょう！

いい感じ（2/3）

quiz-results-good

tier: good — 青グラデ + 😊

確認テスト — 結果

67%
2 / 3 問正解

各問題の回答

問題1✓ 正解
<h1> は HTML の見出しタグです。
問題2✓ 正解
カルーセルは横スクロールで複数コンテンツを切り替える UI パターンです。
問題3✗ 不正解
あなたの回答: 選択肢3 / 正解: 選択肢1
fetch() は Promise<Response> を返します。

復習しよう（0/3）

quiz-results-low

tier: low — グレー + 📖

確認テスト — 結果

0%
0 / 3 問正解

各問題の回答

問題1✗ 不正解
あなたの回答: 選択肢1 / 正解: 選択肢2
<h1> は HTML の見出しタグです。
問題2✗ 不正解
あなたの回答: 選択肢1 / 正解: 選択肢3
カルーセルは横スクロールUIです。
問題3✗ 不正解
あなたの回答: 選択肢3 / 正解: 選択肢1
fetch() は Promise<Response> を返します。
📖間違えた問題の解説を読んで、もう一度チャレンジしてみましょう！