Claude Designで作ったLTスライド、アニメ保ったままブログに埋め込んだ話
Claude Designで作ったLTスライド、アニメ保ったままブログに埋め込んだ話
Claude Designで作ったLTスライド、アニメ保ったままブログに埋め込んだ話
きっかけ
社内で10分のLT登壇することになった。テーマは「Claude Codeの Computer Use を本気で検証した話」。この話は検証の2日間それ自体がブログ1本分の濃さだったので、LT用のスライドも作る必要があった。
普段ならGoogleスライドでサクッと作るところを、「せっかくなら新しいツール触ってみよう」と思って Claude Design（2026年4月にAnthropic Labsからリリースされた新プロダクト）を使ってみることにした。
結論から言うと、これが想像以上に良くて、途中で予想外の展開になった。
Claude Design がめっちゃ良かった
Claude Design は、自然言語で指示するだけでプレゼンスライドやプロトタイプを作ってくれるツール。Claude Opus 4.7 のビジョン能力を活用していて、デザイン経験のないエンジニアでも対話でビジュアル作れる。
使い方はシンプルで、claude.ai/design にアクセスして、「こんな感じのスライド作って」と日本語で頼むだけ。
特に良かったのが アニメーション機能。数字が順番に現れるとか、スライド間のトランジションとか、**「動きがあるスライド」**が自然言語で作れる。
LTで「337ステップが自律実行された」みたいな数字を見せるシーンがあったんだけど、数字が1個ずつドーンと現れる演出にしたら、かなりインパクトある見た目になった。
PPTX書き出したらアニメ消えた
LT本番は Googleスライドで発表する予定だったので、Claude Design から PPTX書き出しを試してみた。
Claude Design のPPTX書き出しには 4つの形式 がある：
Editable · custom fonts：ブランドフォント保持、編集可
Editable · universal fonts（推奨）：Webセーフフォントに置換、広く共有用
Editable · Google Slides fonts：Googleスライド互換性重視
Screenshot-based PPTX：画像ベース、編集不可だが見た目そのまま
Googleスライドに持っていく予定だったので、まず「Editable · Google Slides fonts」を選択。Google Slides互換と書いてあるし、これが正解やろと思った。
PPTXファイルをダウンロードしてダブルクリックで開いてみる。
アニメーションが全部消えていた。
見た目のデザインやレイアウトはほぼそのまま再現されてたけど、動きは完全にゼロ。数字がドーンと現れる演出も、スライド間のトランジションも、静止したスライドになっていた。
「形式の選択ミスかも」と思って、推奨の「Editable · universal fonts」も試した。結果は同じで、アニメは失われていた。
どうやらPPTX形式自体がClaude Designのアニメ表現を再現できないらしい。つまり、どの形式でエクスポートしても Googleスライドに持っていくとアニメは失われる。
LT本番は Googleスライドでいい（ニュアンス変えた別バージョンで発表するので）。でも、せっかく作ったアニメーション付きのスライドをこのまま捨てるのはもったいない。
「じゃあブログで動かせばええやん」
ここで発想を切り替えた。
Claude Design には HTML書き出し 機能がある。HTMLファイルで書き出せば、アニメーションは完全に保持される。そのHTMLをどこかにホストして、ブログにiframeで埋め込めば、読者はブログ記事の中で動いているスライドを体験できる。
これは面白い。
LT発表用とブログ用で役割分担すれば、両方活かせる：
LT本番：Googleスライドで発表（画面切り替えで動画流す運用）
ブログ記事：HTMLのまま公開して読者に実物を見せる
実装：GitHub Pages でホスト
HTMLファイルをネットに公開するためのホスティングは、GitHub Pages を選んだ。理由は：
無料
GitHubアカウント持ってたら即使える
永続的に使える
HTTPS対応
手順
1. Claude Design から HTML を書き出し
Claude Designの画面で「Export → HTML」を選択。standalone HTMLとしてダウンロードされる。
2. GitHub で新規リポジトリ作成
公開用なのでPublicで作成。
3. HTMLファイルをアップロード
ブラウザから「Add file → Upload files」でドラッグ&ドロップ。
4. GitHub Pages を有効化
Settings → Pages で、Source を Deploy from a branch にして、Branch を main に設定して Save。
5. 数分待つ
「Your site is live at https://○○○.github.io/リポジトリ名/」と表示されたら完了。
所要時間は10〜15分程度。GitHub Pages 初めてでも、スクリーンショット見ながらやれば詰まらないはず。
Framer に埋め込む：これが意外とややこしかった
GitHub Pages でURL発行できたので、あとは Framer の ブログ記事にiframeを埋め込むだけ。と思ったら、ここで意外な壁にぶつかった。
壁①：CMSブログ本文には iframe を直接埋め込めない
FramerのCMSブログ記事編集画面で「+」ボタンを押しても、選択肢は：
Image & Video
YouTube
Code Block
Table
このくらい。Embedブロックがない。検索しても出てこない。
どうやらFramerのCMS本文（Rich Text型）には、セキュリティ上の理由でiframe等の外部埋め込みができない設計らしい。
壁②：別ページでEmbedコンポーネントを作る方式
調べた結果、以下の手順で回避できた：
通常のFramerページでEmbedコンポーネントを作成
そのEmbedコンポーネントのURLにGitHub PagesのURLを設定
コンポーネントをブログ記事内で読み込む
つまり、Embedを「コンポーネント化」してから本文内に呼び出すって感じ。
Framerのコンポーネント機能を活かした、やや回りくどいけど王道の手法。
Embedの設定（URL方式）
FramerのEmbedコンポーネントは「URL」と「HTML」の2つの方式がある。
URL方式：URL指定するだけで外部サイトを読み込む
HTML方式：HTMLコードを直接貼り付ける
どちらも使えたけど、URL方式の方が管理面で優れているのでそちらを採用：
Framerのページが軽くなる（HTMLを丸ごと持たない）
スライド修正時、GitHub Pages側のファイルを差し替えるだけで反映
他の場所でも同じURLを使い回せる
壁③：コンポーネントのサイズ調整
Embedコンポーネント作成時、Width/Heightの設定で少し苦戦した。FramerのコンポーネントのVariantはFixedサイズしか使えない仕様で、レスポンシブ化が難しい。
結果的には、コンポーネントの親サイズを16:9比率（例：1200x675）で固定し、ブログ記事側で表示される際は自動でフィットしてくれる設計に落ち着いた。
実物はこちら
↓↓ 実際に動いているスライドがこちら ↓↓
↑↑ 矢印キーで操作できます。Resetで1ページ目に移動します↑↑
Claude Design の強みと弱み
強み
自然言語でアニメーション付きスライドが作れる
デザインセンスなくても見栄えするものができる
HTML書き出しで自由度が高い
弱み
PPTX互換性が完璧ではない（アニメ消える問題）
まだベータ版なので今後仕様変わる可能性
GitHub Pages は軽いプロジェクトに最適
「ちょっとHTMLを公開したい」程度ならGitHub Pages で充分。10分程度で公開状態まで行けるのは便利。
次にやりたいこと
Claude Design の共有URLをそのまま埋め込めないか試す（今回はHTML書き出し経由だった）
Framer コンポーネントをもっとレスポンシブに改善する
カスタムドメイン（slides.visk.co.jp みたいな）を設定する
複数のLT資産をまとめたアーカイブページを作る
まとめ
Claude Design はアニメ付きスライドが自然言語で作れる良ツール
ただしGoogleスライドに移すとアニメ消える問題あり
HTML書き出し→GitHub Pagesでホスト→Framerに iframe 埋め込み、でブログで動くスライドが見せられる
LT用とブログ用で使い分ける発想は色んな場面で応用可能
**「作ったコンテンツを複数の形で活かす」**のが2026年のコンテンツ戦略の基本やと思う。
Claude Designで作ったLTスライド、アニメ保ったままブログに埋め込んだ話
きっかけ
社内で10分のLT登壇することになった。テーマは「Claude Codeの Computer Use を本気で検証した話」。この話は検証の2日間それ自体がブログ1本分の濃さだったので、LT用のスライドも作る必要があった。
普段ならGoogleスライドでサクッと作るところを、「せっかくなら新しいツール触ってみよう」と思って Claude Design（2026年4月にAnthropic Labsからリリースされた新プロダクト）を使ってみることにした。
結論から言うと、これが想像以上に良くて、途中で予想外の展開になった。
Claude Design がめっちゃ良かった
Claude Design は、自然言語で指示するだけでプレゼンスライドやプロトタイプを作ってくれるツール。Claude Opus 4.7 のビジョン能力を活用していて、デザイン経験のないエンジニアでも対話でビジュアル作れる。
使い方はシンプルで、claude.ai/design にアクセスして、「こんな感じのスライド作って」と日本語で頼むだけ。
特に良かったのが アニメーション機能。数字が順番に現れるとか、スライド間のトランジションとか、**「動きがあるスライド」**が自然言語で作れる。
LTで「337ステップが自律実行された」みたいな数字を見せるシーンがあったんだけど、数字が1個ずつドーンと現れる演出にしたら、かなりインパクトある見た目になった。
PPTX書き出したらアニメ消えた
LT本番は Googleスライドで発表する予定だったので、Claude Design から PPTX書き出しを試してみた。
Claude Design のPPTX書き出しには 4つの形式 がある：
Editable · custom fonts：ブランドフォント保持、編集可
Editable · universal fonts（推奨）：Webセーフフォントに置換、広く共有用
Editable · Google Slides fonts：Googleスライド互換性重視
Screenshot-based PPTX：画像ベース、編集不可だが見た目そのまま
Googleスライドに持っていく予定だったので、まず「Editable · Google Slides fonts」を選択。Google Slides互換と書いてあるし、これが正解やろと思った。
PPTXファイルをダウンロードしてダブルクリックで開いてみる。
アニメーションが全部消えていた。
見た目のデザインやレイアウトはほぼそのまま再現されてたけど、動きは完全にゼロ。数字がドーンと現れる演出も、スライド間のトランジションも、静止したスライドになっていた。
「形式の選択ミスかも」と思って、推奨の「Editable · universal fonts」も試した。結果は同じで、アニメは失われていた。
どうやらPPTX形式自体がClaude Designのアニメ表現を再現できないらしい。つまり、どの形式でエクスポートしても Googleスライドに持っていくとアニメは失われる。
LT本番は Googleスライドでいい（ニュアンス変えた別バージョンで発表するので）。でも、せっかく作ったアニメーション付きのスライドをこのまま捨てるのはもったいない。
「じゃあブログで動かせばええやん」
ここで発想を切り替えた。
Claude Design には HTML書き出し 機能がある。HTMLファイルで書き出せば、アニメーションは完全に保持される。そのHTMLをどこかにホストして、ブログにiframeで埋め込めば、読者はブログ記事の中で動いているスライドを体験できる。
これは面白い。
LT発表用とブログ用で役割分担すれば、両方活かせる：
LT本番：Googleスライドで発表（画面切り替えで動画流す運用）
ブログ記事：HTMLのまま公開して読者に実物を見せる
実装：GitHub Pages でホスト
HTMLファイルをネットに公開するためのホスティングは、GitHub Pages を選んだ。理由は：
無料
GitHubアカウント持ってたら即使える
永続的に使える
HTTPS対応
手順
1. Claude Design から HTML を書き出し
Claude Designの画面で「Export → HTML」を選択。standalone HTMLとしてダウンロードされる。
2. GitHub で新規リポジトリ作成
公開用なのでPublicで作成。
3. HTMLファイルをアップロード
ブラウザから「Add file → Upload files」でドラッグ&ドロップ。
4. GitHub Pages を有効化
Settings → Pages で、Source を Deploy from a branch にして、Branch を main に設定して Save。
5. 数分待つ
「Your site is live at https://○○○.github.io/リポジトリ名/」と表示されたら完了。
所要時間は10〜15分程度。GitHub Pages 初めてでも、スクリーンショット見ながらやれば詰まらないはず。
Framer に埋め込む：これが意外とややこしかった
GitHub Pages でURL発行できたので、あとは Framer の ブログ記事にiframeを埋め込むだけ。と思ったら、ここで意外な壁にぶつかった。
壁①：CMSブログ本文には iframe を直接埋め込めない
FramerのCMSブログ記事編集画面で「+」ボタンを押しても、選択肢は：
Image & Video
YouTube
Code Block
Table
このくらい。Embedブロックがない。検索しても出てこない。
どうやらFramerのCMS本文（Rich Text型）には、セキュリティ上の理由でiframe等の外部埋め込みができない設計らしい。
壁②：別ページでEmbedコンポーネントを作る方式
調べた結果、以下の手順で回避できた：
通常のFramerページでEmbedコンポーネントを作成
そのEmbedコンポーネントのURLにGitHub PagesのURLを設定
コンポーネントをブログ記事内で読み込む
つまり、Embedを「コンポーネント化」してから本文内に呼び出すって感じ。
Framerのコンポーネント機能を活かした、やや回りくどいけど王道の手法。
Embedの設定（URL方式）
FramerのEmbedコンポーネントは「URL」と「HTML」の2つの方式がある。
URL方式：URL指定するだけで外部サイトを読み込む
HTML方式：HTMLコードを直接貼り付ける
どちらも使えたけど、URL方式の方が管理面で優れているのでそちらを採用：
Framerのページが軽くなる（HTMLを丸ごと持たない）
スライド修正時、GitHub Pages側のファイルを差し替えるだけで反映
他の場所でも同じURLを使い回せる
壁③：コンポーネントのサイズ調整
Embedコンポーネント作成時、Width/Heightの設定で少し苦戦した。FramerのコンポーネントのVariantはFixedサイズしか使えない仕様で、レスポンシブ化が難しい。
結果的には、コンポーネントの親サイズを16:9比率（例：1200x675）で固定し、ブログ記事側で表示される際は自動でフィットしてくれる設計に落ち着いた。
実物はこちら
↓↓ 実際に動いているスライドがこちら ↓↓
↑↑ 矢印キーで操作できます。Resetで1ページ目に移動します↑↑
Claude Design の強みと弱み
強み
自然言語でアニメーション付きスライドが作れる
デザインセンスなくても見栄えするものができる
HTML書き出しで自由度が高い
弱み
PPTX互換性が完璧ではない（アニメ消える問題）
まだベータ版なので今後仕様変わる可能性
GitHub Pages は軽いプロジェクトに最適
「ちょっとHTMLを公開したい」程度ならGitHub Pages で充分。10分程度で公開状態まで行けるのは便利。
次にやりたいこと
Claude Design の共有URLをそのまま埋め込めないか試す（今回はHTML書き出し経由だった）
Framer コンポーネントをもっとレスポンシブに改善する
カスタムドメイン（slides.visk.co.jp みたいな）を設定する
複数のLT資産をまとめたアーカイブページを作る
まとめ
Claude Design はアニメ付きスライドが自然言語で作れる良ツール
ただしGoogleスライドに移すとアニメ消える問題あり
HTML書き出し→GitHub Pagesでホスト→Framerに iframe 埋め込み、でブログで動くスライドが見せられる
LT用とブログ用で使い分ける発想は色んな場面で応用可能
**「作ったコンテンツを複数の形で活かす」**のが2026年のコンテンツ戦略の基本やと思う。
