Claudeの「Artifacts」だけで社内セミナー資料を作ってみた

はじめに

こんにちは！コンサルティング部のヒスです。

社内向けにClaude / Claude Codeの使い方を説明するセミナーを開くにあたり、資料をPowerPointやGoogle Slidesではなく、Claudeの Artifacts（アーティファクト） 機能だけで作ってみました。できあがったのは、ブラウザで開くだけで動く自己進行型のスライドショー（経過時間表示・進捗バー・目次ジャンプ付き）です。

Artifactsは、claude.aiのチャット、Cowork、Claude Codeのいずれからでも作れます。今回は私が普段使っている Claude Code（VS Code上）から依頼して作りました。

「Artifactsって何？」「スライド作成ソフトなしでどうやって作るの？」という方に向けて、この記事では

• Claude Artifactsの基本的な仕組み
• 実際にClaude Codeでこのスライドを作った手順（ステップバイステップ）
• できあがったものの中身と、作る中で気づいたポイント

を順番に紹介します。プログラミングの知識やデザインツールの操作は一切不要で、自然な日本語でのやり取りだけで完結します。

Claudeのアーティファクト（Artifacts）とは

Artifactsは、Claudeに「まとまった1つの成果物」を作ってもらったときに、その成果物をWebページとして表示・共有できる機能です。

• コード・Webページ・図表・ドキュメントなど、ある程度まとまった分量のコンテンツを作るときに使われる
• 会話を続けながら修正を依頼すると、成果物が更新されていく
• 完成したものはそのままブラウザで動く（今回のように、スライドをめくったり進捗バーが動いたりする「アプリのようなもの」も作れる）
• 作ったものは自分のアカウントに保存され、共有範囲（自分だけ／組織内など）を決めてリンクを発行できる

つまり、「PowerPointを開いて1枚ずつスライドを作る」代わりに、「こういうものが欲しい」と会話しながら、Claudeにその場で組み立ててもらうイメージです。

どのClaudeで作れる？

今回は Claude Code（VS Code）に依頼して作成し、発行されたリンクをブラウザで開いて確認する、という流れで進めました。

今回作ったもの

社内セミナー「超初級から！Claude / Claude Codeの始め方を解説！」用に、以下の機能を持つ1本のスライド資料を作成しました。

• 表紙〜Q&Aまで、全13枚のスライド
• 画面上部に経過時間タイマーと、スライドごとの持ち時間に応じた進捗バー
• アジェンダのスライドから、各セクションへワンクリックでジャンプ
• PC・スマホどちらの画面幅でも見やすいレイアウト

発表中に時間配分を確認できる仕組み

セミナー資料としていちばん役に立ったのが、この時間管理まわりの表示です。

• 画面左上: 発表を開始してからの経過時間を、実際の時計として表示（00:00から自動でカウントアップ）
• 画面右上: 「今何枚目／全体何枚か」に加えて、そのスライドに割り当てた持ち時間と、開始からの累計予定時間（例: 5分・累計8/60分） を表示
• 上部の進捗バー: あらかじめ各スライドに設定しておいた「持ち時間（分）」に応じて、バーの区切り幅が変わるようになっている。発表し終えたスライドの区切りは色が変わるので、全体のどのあたりまで進んだかが一目でわかる

これは、スライドを作ってもらう際に「各スライドに何分使う想定か」をあらかじめ数値として持たせておくことで実現しています。実際に発表しながら、左上の「実際に経過した時間」と、右上・進捗バーの「予定していた時間配分」を見比べることで、「予定より押しているか、巻いているか」を途中で確認しながら話せるようになっています。

事前準備

特別な準備は少なめです。

• 使うもの: Claude Code（今回はVS Code上で利用）。claude.aiやCoworkでも同様に作れます
• 追加の契約プラン変更: 不要（利用中のClaudeのアカウントで、Artifactを公開・共有できる環境であればOK）
• 必要なスキル: プログラミング知識・デザインツールの操作いずれも不要。日本語で要望を伝えられればOK

作り方ステップバイステップ

STEP1. 「何を作りたいか」を最初にまとめて伝える

いきなり細かい内容まで指示するのではなく、「どんな仕組みのスライドか」という骨組みだけを先に伝え、Artifactとして公開して確認用のURLを返してもらうのがポイントです。各スライドの中身は、URLで動きを確認したあとに決めていきます。今回は、Claude Codeに次のような内容で依頼しました（実際の文言は要調整）。

セミナー用のスライド資料を、Artifactとして自己進行型のスライドショーで作りたい。
まずは骨組みだけ作ってください。細かい内容は後で私が指示します。

- 1枚目はタイトル、最後はQ&A（中身は仮のダミーでOK）
- 画面上部に経過時間タイマーと、各スライドの持ち時間に応じた進捗バーを表示
- アジェンダのスライドから各セクションへジャンプできるようにする
- 各スライドの持ち時間（分）を設定できる作りにする
- PCでもスマホ幅でも見やすくする

完成したらArtifactとして公開して、確認用のURLを教えてください。

ここで「細かい内容は後で」「仮のダミーでOK」と書いておくと、Claudeが内容を勝手に作り込まず、骨組みだけを出してくれます。

「各スライドの持ち時間（分）を設定できる作りにする」と伝えておくと、あとから「アジェンダのスライドは2分、失敗パターンのスライドは8分」のように各スライドにどれくらい時間を使う想定かを指定できます。この持ち時間の情報が、前述の経過時間タイマーや進捗バーの区切り幅にそのまま使われます。あとから「このスライドはもう少し時間を長めに」と伝えれば、その部分だけ配分を調整してもらえます。

STEP2. 出てきた叩き台をブラウザで確認する

依頼を送ると、Claude CodeがArtifactを作成して公開し、確認用のURL（https://claude.ai/artifact/... の形式）を返してくれます。そのURLをブラウザで開くと、最初のバージョンが表示されます。この時点ではスライドの中身は仮のダミーで構いません。タイマー・進捗バー・ジャンプなど、「全体の骨組みが動くかどうか」を確認する段階です。なお、公開直後のArtifactは自分だけが見られる状態です。

STEP3. 表示を見ながら、会話で少しずつ調整する

骨組みが動くことを確認できたら、ここからスライドの中身を決めていきます。ブラウザで実際に動く画面を見ながら、追加したい内容や気になった点をそのままClaude Codeに伝えていきます。今回は例えば次のようなやり取りをしました。

• 「スライドの内容を、Claudeの概要／拡張の仕組み（Skill・MCP・CLAUDE.md）／Skillの配置・構成／よくある失敗パターンと対策／Cowork・Claude Code on the webの説明、の流れに差し替えたい」
• 「アジェンダのスライドは2分、失敗パターンのスライドは8分にしたい」
• 「失敗パターンのスライドは5個をカード形式で並べたい」
• 「管理者向け設定は情報量が多いので、前半・後半の2枚に分けたい」
• 「実演パートは、コンソール風の見た目でステップ①②③を並べたい」
• 「注意喚起したい項目には赤系の色を、安全・推奨の項目には緑系の色をつけたい」

コードを直接書く必要はなく、「こう見せたい」を言葉にするだけで反映されていきます。修正のたびに全部作り直しているわけではなく、指定した部分だけがピンポイントで更新されるのも、この進め方のやりやすいところです。修正後は同じリンクをブラウザで再読み込みすれば、変更が反映されます。

STEP4. 実際に操作して動作を確認する

見た目だけでなく、「次へ」ボタンでの画面遷移、アジェンダからのジャンプ、進捗バーの動きなど、実際にクリックして動作確認します。おかしな挙動があれば、その現象をそのままClaude Codeに伝えれば修正してもらえます（例:「スマホ幅で見ると矢印の向きがおかしい」など）。

STEP5. 完成したら共有する

内容に問題がなければ完成です。Artifactは自分のアカウントに保存されており、共有範囲（自分だけ／特定の相手／組織内など）を設定してリンクを発行できます。今回は社内セミナー用のため、社内メンバーだけが開ける設定にしています。当日は、そのリンクをブラウザで開くだけで使えます。

STEP6.（応用）できあがったものを次回作成のたたき台にする

一度作ったスライドの構成やデザインが気に入った場合、「このデザインのまま、内容だけ別テーマに差し替えたバージョンを作って」のように頼めば、同じ見た目のまま別セミナー用の資料をベースにすることもできます。

完成したスライドの中身

最終的に、以下のような13枚構成のスライドになりました。

つまずいたポイント・Tips

• スライドからテキストがはみ出す問題: 文字量が多いスライドでは、決まった枠に収まりきらないことがありました。今回のArtifactでは、内容の高さを測って自動的に縮小表示する仕組みをClaudeが実装してくれており、画面サイズやフォント量に応じて自動調整されるようになっています。文字が多くなりそうなときは、「収まらない場合は自動的に縮小表示して」と最初に伝えておくとスムーズです。
• 持ち時間の可視化: 各スライドに「何分使う想定か」を持たせておくと、進捗バーの区切り幅にそのまま反映されるため、当日のタイムマネジメントがしやすくなりました。
• スマホ表示への配慮: 矢印アイコンなどは横向き（PC）と縦向き（スマホ）でレイアウトが自動的に切り替わるようになっており、投影だけでなく手元での閲覧にも対応しています。特に指定しなくても対応してくれる場合がありますが、心配な場合は「スマホ幅でも見やすいようにして」と一言添えると確実です。
• 一気に全部を伝えようとしない: 最初にすべての細部まで指示しようとすると、かえって意図が伝わりにくくなります。まず全体の骨組みを作ってもらい、ブラウザで確認しながら気になった箇所だけを直していく方が、結果的に早く完成に近づきました。

こんな用途にも応用できそう

スライド資料に限らず、Claude Artifactsは次のような「1つのまとまった成果物」を作る場面で応用できます。

• 提案資料やチェックリストのような、社内向けドキュメント
• 手順を1つずつ確認しながら進める、簡易的なガイド・診断ツール
• アンケートフォームや簡単な集計ツールの試作

いずれも共通しているのは、「完成形をゼロから細かく指示する」のではなく、「全体像を伝えて、実際の表示を見ながら会話で仕上げていく」という進め方です。

まとめ

スライド作成ソフトを使わずに、Claude Codeとの対話だけで「自己進行型・進捗表示付き・ジャンプ可能」なセミナー資料を作ることができました。ポイントは、最初から完成形をイメージして細かく指示するのではなく、実際の表示を見ながら少しずつ言葉で直していく進め方です。また、一度こだわって好みのデザインと形式でひな形（テンプレート）を完成させておけば、次回以降は「このひな形と同じ形式で、内容だけ〇〇に変えて作って」と依頼するだけで、すぐに同じ形式の資料を作ってもらえます。毎回ゼロから調整する必要がないので、セミナー資料に限らず、定期的に作る資料にも向いています。

Artifactsはclaude.aiやCoworkからも同じように作れるので、普段使っている環境から試してみてください。