Webスライドとは？提案書をAIでHTMLスライドに｜動画埋め込み・パスワード共有・PPTX書き出しの実例【2026年10月】

提案書は、商談の場より相手の社内で読まれる時間のほうが長い資料です。決裁する人が商談に出ていないことも珍しくありません。担当の方が上司や経営陣に回し、そこで読まれて、初めて話が進みます。

Claude Motionの記事では、この「決裁者が商談にいない」問題に、動画プレゼンという答え方を紹介しました。では、作った動画はどこに置いて、どう渡せばいいのか。この記事はその「入れ物」の話です。

カトルセでは2026年10月から、会社紹介や提案書、セミナー資料をWebスライドで作っています。作ったのはAI（Claude Code）に頼んで組んだ仕組みです。この記事では、その実例をもとに、Webスライドでできること、PowerPointや既製の機能との使い分け、社外に渡すときに気をつけることをまとめます。

1. Webスライドとは ── URLで渡す、動く提案書

Webスライドは、1枚1枚のスライドをHTML（Webページの言葉）で作った資料です。カトルセの場合は、PowerPointのワイド画面と同じ1280×720の大きさで作り、ブラウザの大きさに合わせて拡大・縮小して見せます。

同じ1つのファイルを、3つの見せ方で開けるのが特徴です。

• スライド表示：発表用。矢印キーや画面の端のクリック、スマホならスワイプでページを送ります。
• 2画面表示：左にページの縮小画像（サムネイル）の列、右にスライド。オンライン会議の画面共有に向きます。
• 読みもの表示：全ページを縦に並べ、スクロールで読みます。スマホで受け取った人が、指で流しながら読めます。

PDFやPowerPointとの違いを表にすると、次のとおりです。

「渡した後も同じURLのまま直せる」は、地味ですが効きます。誤字を直すたびに「先ほどの資料は破棄してください」とメールを送り直す必要がありません。

2. PowerPoint・画像スライド・Webスライド・Claude Slidesの使い分け

Webスライドが万能というわけではありません。カトルセが展示会のセミナーでお伝えしている考え方は、「出力の形は用途で選ぶ」です。

迷ったら、早く形に＝画像、共有して直す＝Web、正式に提出＝PowerPointと覚えておくと決めやすくなります。

Claude Slidesで足りる場面、足りない場面

AnthropicのClaudeでは、2026年10月8日の発表で、Docs・Slides・Designがベータ版を終え、無料プランを含む全プランで使えるようになりました（Claudeの発表）。発表によると、スライドはPowerPointやPDFで書き出せ、Googleスライドに編集できるファイルとして送れます。管理者が許可していれば組織の外やリンクを知っている人とも共有でき、チームとClaudeが同じ資料を一緒に直せます。

社内で回す資料なら、まずはこれで十分です。一方で、次のような場面では自作のWebスライドに分があります。

• Claudeを使っていない社外の人に渡したい：Claudeのヘルプでは、共有されたArtifact（Claudeが作る成果物のページ）は原則として、開く人もClaudeにサインインしている必要があると説明されています（Claudeヘルプ）。
• パスワードを掛けたい・動画を流したい：10月8日の発表記事には、パスワードによる保護や動画の埋め込みについての記載はありません。
• 誰がどのページを読んだかを知りたい：自社のサーバーに置けば、閲覧の記録を自社で持てます（7章）。

なお、Claude Codeから作ったHTMLのページをclaude.aiに公開する機能もあります。公式ドキュメントでは、Pro・Maxプランは公開リンクを作れ、Team・Enterpriseプランは組織のOwnerが許可するまで公開の共有はオフです。また、公開されるページは裏側の仕組み（サーバー）を持たない1枚の静的なページで、閲覧する人をページ自身で認証することはできないと書かれています（Claude Codeのドキュメント）。パスワードを掛けたいなら、自社側に置き場所が要るということです。

3. カトルセの実例3つ ── 会社紹介28枚・顧問の提案書9枚・展示会セミナー

カトルセで実際に作ったWebスライドは、次の3つです。

1. 会社紹介とサービスのご提案（28枚）：「はじめに → カトルセについて → AI活用の現在地（課題提起）→ AI教育・伴走支援・開発・マーケ営業の4つのサービス → 進め方」の流れです。25枚目には会社紹介のPR動画を埋め込んでいます。
2. AI顧問・伴走支援の提案書（9枚）：会社紹介の後に見せる、顧問サービスだけの汎用版です（料金はAI顧問のページをご覧ください）。
3. 展示会セミナー「提案作成が10倍速」（本編26枚＋参考）：展示会で話す20分のセミナー資料です。11枚目に約3分のPR動画を入れ、ページに入ると自動で再生が始まるようにしました。セミナーの参加者には、後からURLで見返してもらえるようにしています。

3つとも、同じ部品と同じビューアー（表示の仕組み）で作っています。最初に1回、ビューアーとページの部品を作り込んでおけば、2本目以降は中身を書くだけで、3つの表示・メモ・編集・PowerPoint書き出しが全部ついてきます。提案書の「型」を作っておく考え方は、資料の見た目だけでなく中身にも使えます。中身の型づくりはトップ営業の思考をAIで標準化する方法で詳しく書いています。

4. 動画を埋め込む ── ページを開くと流れ、離れると止まる

Webスライドのいちばん分かりやすい利点は、ページの中で動画がそのまま再生できることです。会社紹介の28枚では、25枚目に完成版のPR動画（3分51秒）を埋め込みました。

埋め込むときに気をつけたのは、次の3点です。

• ページを離れたら止める：次のページに進んでも音が鳴り続けると、発表の邪魔になります。ページを離れたら一時停止するようにしました。展示会セミナーの版では、11枚目に入ると再生が始まり、離れると止まります。
• キー操作がぶつからないようにする：動画を操作しているときの矢印キーやスペースキーは、動画の操作（早送り・一時停止）に使い、ページは送らないようにしました。
• PowerPointに書き出したときの形を決める：PowerPointに書き出すと、動画の場所には表紙の静止画が入ります。正式に提出するファイルでも、どこに動画があったかが分かります。

動画のファイルは重くなりがちです。カトルセの例では、置き場所の容量の都合で、PR動画を720p（HD画質）・約14MBまで圧縮して入れました。提案書の中で見せる動画なら、この程度の画質で困ることはまずありません。

長さの目安も決めておくと迷いません。セミナーでは、展示会のつかみなら2〜3分、商談の前に送るなら60〜90秒とお伝えしています。動画そのものの作り方は、ホワイトボード動画を1本1時間で作った実例と、Claude Motionの記事にまとめています。

5. PowerPointとの往復 ── 「Webにしたら直せない」は無い

Webスライドの話をすると、必ず出るのが「お客様はPowerPointで欲しいと言うのでは？」という質問です。答えは、PowerPointに書き出せばいいです。

Web → PowerPoint：1枚絵にしない

カトルセのWebスライドには、PowerPoint（.pptx）に書き出すボタンが付いています。書き出しで決めたルールは「スライドを1枚の画像にしない」ことです。

• 文字は、直せるテキストボックスに
• 枠・帯・丸などの飾りは、PowerPointの図形に
• イラスト・写真・アイコンは、画像に
• 発表者のメモは、PowerPointのノートに

こうしておけば、受け取った人がPowerPointで文字を直し、自社の稟議の書式に貼り込むこともできます。ひとつ注意があるとすれば書体です。書き出すパソコンに入っている書体に置き換わるので、画面とまったく同じ見た目にはなりません。

PowerPoint → Web：手元の資料をそのまま変換

逆向きもできます。いま手元にあるPowerPointを、見た目（位置・大きさ・色・書体）をそのままに、Webスライドに変換する仕組みも作りました。文字は直せる文字のまま、ノートはメモ欄に入ります。

変換と、Webスライドの部品で作り直すのとでは、向くものが違います。

迷ったら、まず変換します。よく使うページだけ、あとから作り直せば十分です。

6. メモと編集 ── 台本は相手に見せず、文字はその場で直す

ページごとのメモは「編集できる人」にだけ見える

Webスライドには、ページごとのメモ欄があります。話す内容や、参考に共有したいURLを書いておく場所です。メモは右のパネルに出て、開いたままページを送ると、そのページのメモに切り替わります。

大事なのは、このメモは資料を編集できる人にしか見えないことです。閲覧するだけの人（資料を受け取ったお客様）には表示されません。

顧問の提案書を作ったとき、ここで1つ判断をしました。商談で話す内容や、相手の反応によって出し分ける条件を、閲覧する人にも見える「ノート」ではなく、編集する人だけに見えるメモに入れたのです。PowerPointで作った提案書を送るとき、ノート欄に社内向けの台本が残ったまま送ってしまうことは起こりえます。Webスライドでも同じことが起きえます。「渡す資料に台本を残さない」は、形式を問わず守りたいルールです。

文字はその場で直し、版の履歴で戻せる

編集モード（Eキー）に切り替えると、スライドの文字をクリックしてその場で直せます。保存すると1つの「版」として残り、履歴から前の版に戻せます。商談の直前に数字を1つ直す、といった作業がPowerPointを開かずに済みます。

閲覧するだけの人が編集モードに入った場合は「お試し編集」になり、画面に「保存されません」と出ます。閉じれば元に戻るので、共有している資料が書き換わる心配はありません。お客様が「ここをこう変えたら？」と手元で試せる、という使い方もできます。

7. 社外に渡すときの鍵 ── 先頭5枚は誰でも、6枚目から先はパスワード

展示会セミナーの資料は、参加された方に後から見返してもらうため、URLを知っていれば誰でも開けるようにしました。ただし、見られる範囲を分けています。

• 先頭5枚：誰でも見られる。
• 6枚目から先：会社名・お名前・役職・メールアドレス・パスワードを入れた人だけが見られる。
• パスワードを変えると：それまでに入った人も、もう一度入り直しになる（一時的に共有する資料のため）。
• ブラウザを閉じると：鍵が掛かり直す（開いたままでも最長12時間まで）。

あわせて、誰がどのページを見たかが社内で分かるようにしました。セミナーのどのページがよく読まれたかが分かれば、次の資料づくりに生かせます。

鍵を掛けるときに気をつけること

作ってみて分かった注意点を、一般的な形でまとめます。自社で同じことをするときの確認リストとして使ってください。

2つ目の注意点は、実際につまずいたところです。公開した直後に本番の画面を確かめたところ、本文は鍵の先にきちんと隠れていたのに、ページの中の別の場所に、鍵の先のページの題名が書き残されていました。中身そのものは見えなくても、「どんな話が載っているか」は分かってしまう状態です。すぐに消しましたが、「本文を隠したから大丈夫」ではなく、公開した後に、閲覧する人の立場でページの中身を確かめるところまでが鍵の掛け方だと学びました。

8. 作った記録と、自社で始める3ステップ

カトルセの作業の記録

カトルセのWebスライドは、Claude Codeに頼んで作りました。作業の記録（コミットの日付）から言えるのは、次の流れです。

1. 10/11〜13Webスライドの仕組みづくり（3つの表示、メモ、編集と版の履歴、PowerPointの書き出しと変換）
2. 10/18会社紹介とサービスのご提案（28枚）を作成。同じ日の別の作業で、25枚目にPR動画を埋め込み。同じ日に、顧問の提案書（9枚）も追加
3. 10/23展示会セミナーのWebスライドを、パスワード付きの公開スライドとして公開

仕組みを先に作っておくと、資料を1本足すたびに、ほぼ中身だけを考えればよくなります。これがWebスライドを「型」として持つ利点です。

自社で始める3ステップ

1. 手元のPowerPointを1本、Webにして社内で回す：まずは社内向けの資料で十分です。Claude Slidesのような既製の機能から始めても構いません。URLで渡す・スマホで読む感覚をつかみます。
2. 動画を1本足す：会社紹介や製品の説明動画が手元にあれば、提案書の1ページに埋め込みます。尺は商談前に送るなら60〜90秒が目安です。
3. 社外に渡す1本だけ、鍵を付ける：全部に鍵を掛ける必要はありません。展示会の後に送る資料など、1本に絞って7章の確認リストを当てはめます。

大切なのは、Webスライドという形式そのものより、相手の社内で回ったときに伝わる資料かどうかです。形式を変えても中身が伝わらなければ、決裁は進みません。中身づくりの実例は、お客様から「感動しました」の声をいただいた資料作成の事例で紹介しています。

カトルセの支援

営業の方がAIで提案書を作れるようになるための研修として、生成AI×営業実務研修を用意しています。リサーチや商談準備から、提案書の構成案・本文・修正まで、自社の商材を題材に手を動かして身につける講座です。

職種別AI研修シリーズ（全9講座・各11時間）。受講料は全講座共通で1名あたり36万円（税抜）。ライブ形式（対面／オンライン同時双方向）のため人材開発支援助成金の活用をご検討いただけます。支給の可否は都道府県労働局の審査で決まります。申請手続きは社会保険労務士の独占業務のため、必要な場合は提携社労士をご紹介します。

「自社の提案書の型を作りたい」「Webスライドのような仕組みを社内に置きたい」といったご相談は、AI顧問・伴走支援でお受けしています。研修全体のご案内は法人向け生成AI研修のページをご覧ください。

よくある質問

Webスライドは、PowerPointを持っていない相手にも渡せますか？

渡せます。Webスライドはブラウザで開くページなので、相手に必要なのはブラウザだけです。スマホでも、全ページを縦に並べた読みもの表示で読めます。相手がPowerPointで直したい場合は、PowerPoint形式に書き出して渡します。

Claude Slidesがあれば、自作のWebスライドは要りませんか？

社内で回す資料なら、まずはClaude Slidesで十分です。2026年10月8日の発表で全プランで使えるようになり、PowerPointやPDFにも書き出せます。一方、Claudeの共有機能は原則として開く人もClaudeにサインインしている必要があり、発表記事にはパスワード保護や動画の埋め込みの記載がありません。Claudeを使っていない社外の人に、動画つき・パスワード付きで渡したい場合は、自作のWebスライドが向きます。

動画を入れると、資料が重くなりませんか？

動画の分だけ重くなるので、画質を落として入れます。カトルセの例では、PR動画を720p・約14MBに圧縮しました。また、ページを離れたら動画を止め、PowerPointに書き出したときは動画の代わりに表紙の静止画を入れています。

パスワードを掛ければ、本当に安全ですか？

鍵の掛け方しだいです。画面の上で隠すだけでは、ページの中身を読めば見えてしまいます。鍵の先のページはサーバー側で中身ごと差し替え、画像やページの題名など本文以外から漏れる道もふさぎ、公開した後に閲覧する人の立場で確かめることが大切です。

Webスライドを作るのに、プログラミングの知識は要りますか？

カトルセでは、仕組みづくりもスライドの作成もClaude Codeに頼んで進めました。HTMLを自分で書く必要はありませんが、出来上がりを確かめ、直してほしい点を言葉で伝える力は要ります。社内で同じ仕組みを作りたい場合は、研修や顧問・伴走支援でお手伝いしています。

まとめ ── 「速く作る」の次は「相手の社内で動く資料」

1. Webスライドは、URLで渡せて動画が流れる提案書です。スライド・2画面・読みものの3つの表示で、スマホでも読めます。
2. 形は用途で選びます。早く形に＝画像、共有して直す＝Web、正式に提出＝PowerPoint。まずはClaude Slidesなど既製の機能からで構いません。
3. PowerPointとは往復できます。書き出しても文字は直せるまま。手元のPowerPointをWebに変換することもできます。
4. 台本は相手に見せません。話す内容は編集する人だけのメモに入れ、渡す資料に残さないようにします。
5. 社外に渡すなら、鍵は「隠す」ではなく「渡さない」。本文以外から漏れる道もふさぎ、公開後に閲覧する人の立場で確かめます。

動画プレゼンを作るならClaude Motionの記事、入れ物はこの記事、中身の型は提案書の品質を標準化する記事へ。3つを組み合わせると、商談にいない決裁者にも届く提案書になります。

参考

1. Claude：Dashboards and Motion（2026年10月8日。Docs・Slides・Designの正式版）
2. Claudeヘルプ：Artifactの共有について
3. Claude Codeドキュメント：Share session output as artifacts

※ 本記事は2026年10月24日時点で確認した情報にもとづいています。Claudeの機能・提供範囲・共有の条件は、上記の公式ページ（2026年10月24日確認）によるもので、プランや管理者の設定、段階的な展開によって変わることがあります。カトルセの事例は、社内の作業記録にもとづく自社の実例です。本記事に登場する製品名・サービス名は、それぞれの提供元の商標または登録商標です。