Chalkfile theme: 'chalkfile'
明るい教室の黒板を裏返した配色。文字は黒板の緑、色はチョーク、コードだけ黒板の面に書く。角の丸いゴシック。
Chalkfile
台本をコードで書くと、ナレーション付きの講座動画と講座サイトができあがります。
TypeScript の台本から、VOICEVOX の声と Remotion の動画、動画・台本・字幕・確認クイズの講座サイトまでをコマンドで作ります。台本を直せば、何度でも作り直せます。
台本content/stripe-billing/L02.ts
{
kind: 'concepts',
heading: '覚える 7 つのオブジェクト',
columns: 4,
cards: [
{ key: 'customer', en: 'Customer', ja: '顧客', … },
{ key: 'product', en: 'Product', ja: '商品', … },
{ key: 'price', en: 'Price', ja: '価格', … },
{ key: 'subscription', en: 'Subscription', ja: '契約', … },
Chalkfile で作った講座
講座ごとに、動画と講座サイトがひとそろいでできます。
Stripe サブスク課金 基礎講座
Stripe のサブスク課金を、概念からサンプル実装まで
- 13 レクチャー
- 約 56 分
- テーマ: Indigo
ナッジ理論をプロダクト改善に活かす
選ぶ自由を守る 行動デザインを、自分のサービスで
- 7 章 ／ 計画 7 章
- 約 51 分
- テーマ: Chalkfile
エンジニアのための UI・UX デザイン
目的と流れ から、画面を直せるエンジニアになる
- 8 章 ／ 計画 8 章
- 約 59 分
- テーマ: Paper
個人開発者のためのマーケティング
広告の前に、誰の何の課題かから始める
- 8 章 ／ 計画 8 章
- 約 60 分
- テーマ: Night
笑って覚えるナッジ理論
笑った瞬間が、わかった瞬間
- 1 章
- 約 9 分
- テーマ: Stage
笑ってわかる Rive アニメーション
動きを作って、そのまま動かす道具を、ざっくり
- 1 レクチャー
- 約 4 分
- テーマ: Stage
笑ってわかる pstack
速く進みたいなら、まず深くのスキル集
- 1 レクチャー
- 約 5 分
- テーマ: Stage
笑ってわかる Super-agent
人の注意を、ボトルネックにしないエージェントの設計
- 6 章
- 約 47 分
- テーマ: Stage
講座ごとにトンマナを選べる
色・書体・背景の飾りをテーマとしてまとめてあります。講座にテーマを 1 行書くと、動画もサイトもそのテーマで作られます。下は同じ場面を 3 つのテーマで描いたものです。
Chalkfile
Indigo theme: 'indigo'
白い地に紺の文字、紫の主役の色、角を斜めに切るグラデーションの帯。英字は Inter。
Night theme: 'night'
最初の版の暗いテーマ。濃紺の地に、ピンクから水色のグラデーションと光の粒。
Paper theme: 'paper'
生成りの紙のような地に、黒に近い文字と朱色の主役の色。方眼の点。英字は Inter。
Stage theme: 'stage'
お笑いの舞台のような配色。クリームの地に黒に近い文字、幕の赤と照明の黄色の帯。角の丸いゴシック。
// content/index.ts
export const STRIPE_BILLING: Course = {
id: 'stripe-billing',
theme: 'indigo',
…
};
作り方
調べ方、画面と話し方の決まり、テーマの作り方は Claude Code のスキルにまとめてあります。
- 調べる公式ドキュメントと一次情報を読み、確かめた日と版を残す
- 台本と図を書く場面ごとの台詞と、台詞に合わせて出す図を TypeScript で書く
- 声を付けるVOICEVOX で読み上げ、読みのカナを全部確かめる
- 動画にするRemotion で書き出し、BGM と効果音を合わせる
- 公開する講座サイトを組み立てて GitHub Pages に出す