9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「技術はあるが時間がない」経営者の救世主!?ClaudeCodeを使って、研修動画作成のワークフローを最適化した話。

9
Posted at

データラーニングギルド代表の村上です。

この記事は、データラーニングギルドのアドベントカレンダー1日目の記事です。

なんと、データラーニングギルドのアドベントカレンダー、7回目になります。こんなに長くコミュニティが続けられて、メンバーの皆さんに感謝です。

以下から過去のアドベントカレンダー、記事などが確認できるので、他の方の記事も読んで頂けると嬉しいです!

皆さん、コーディングエージェントって使っていますか?

この1年、DeepResearchやエージェント、コーディングエージェント、Sora2を始めとした動画生成、Nano bananaでの資料・画像作成など、びっくりするくらいアップデートが多かったですよね。

変化が激しい生成AIですが、個人的に、この1年の一番衝撃を受けた生成AIのアップデート、それがClaudeCodeでした。

今回は、データラーニングスクールを運営する私が、時間がない中でClaudeCode等のAIツールをフル活用し、500万円程度かかるであろう規模の新規事業(研修サービス)を、実質1人・低コスト・本業の合間に3カ月で立ち上げた事例を紹介したいと思います。

技術的なバックボーンがある人であれば、生成AIをフル活用することで新規事業の立ち上げに関するコストが劇的に下がったなと感じますので、時間のない経営者ほど、スクールを使ってもらえると良いのかなと感じています。

今回作った新規事業については、ClaudeCodeを用いた研修事業になります。

以下のような研修カリキュラムで、約15時間程度の動画学習コンテンツとなっています。

image.png

image.png

image.png

研修を受けたいという方については、研修を提供しますので、以下のページよりお問合せください!

制作プロセス(Before)

今までのプロセスとしては、品質管理を行う村上が全体ディレクションを行い、以下のようなフローで研修動画を作成していました。

  • 研修のアウトライン(見出し)を作成
  • 研修アウトラインに対するフィードバック
  • 研修スライドを作成
  • 研修スライドに対するレビュー、修正
  • 研修スライドに対する読み上げ原稿を作成
  • 読み上げ原稿とスライドを渡して、動画を作成
  • 動画の内容をレビュー、修正

制作プロセスのイメージとしては、下記のような感じです。(この図解もGemini3で作りました。便利になりましたよね。)

制作プロセスBefore2.png

このプロセスは、研修のアウトライン~スライド作成を行う担当と、動画の編集スタッフは別の人員で研修コンテンツを作るようなフローとなっています。スライドの作成について、分業をして行うこともあったため、統一感を出すのが難しいという課題がありました。

また、編集者が動画を編集するという背景から、講座の完成後に講座の内容をアップデートしようと思うと、軽微な修正であっても動画の編集者さんに再発注をしないといけないため、更新に対してのコストとリードタイムの関係で、なかなかコンテンツをアップデートできないという課題も発生していました。これは、変化のスピードが早い生成AI時代では致命的です。

制作プロセス(After)

全体像

上記のプロセスに課題感を感じていたので、下記のような生成AIありきの制作フローにすることで、以下のようなステップで研修動画を作成することができるようになりました。

  • 研修のアウトライン(見出し)を作成(Chat-GPT)
  • アウトラインを元に、スライド構成案を作成(Chat-GPT)
  • スライドを作成、修正(Genspark)
  • 読み上げ原稿を作成(Genspark)
  • スライドと読み上げ原稿を元に研修動画を自動出力(自作ツール)

制作プロセスAfter.png

以下、それぞれのステップについて詳しく解説したいと思います。

研修のアウトラインを作成、スライド構成案を作成(ChatGPT)

Gensparkでスライドを作成するにあたって、以下のような内容のスライド構成案をChat-GPTを使って整理しました。Chat-GPTで研修内容について壁打ちをした内容をもとに、以下のようなプロンプトを使って、スライド構成案に落とし込むようなプロセスを取っています。

このプロセスが必要かは少し懐疑的で、構成案を挟むことによって、色々と情報の損失が起こってしまうようにも感じています。Genspark内でやりとりをして、その上で直接スライドを生成した方が上手くいくような気もしています。このあたりのベストプラクティスは、生成AIの性能、コンテキストとして使えるトークン数などによって最適な設計が変わって行く気がします。

スライド構成案を作るプロンプト

以下は、スライド構成を作成するためのプロンプトです。現在の最新版のスライドの内容に基づいて、スライドの構成案をテキストで出力してください。

# プロンプト
以下の情報を基に、Gensparkで使用するスライドの詳細な作成指示書を生成してください。生成される指示書は、誰が見ても同じようなアウトプットが作成できるよう、具体的かつ網羅的な内容にしてください。

デザインについては、デザインガイドラインがあるので、色情報などについては、メインカラー、サブカラーといった抽象的な表現で記載してください。

## 入力情報

1. 基本情報

- **講座タイトル**: スライドのタイトルを参照
- **対象者**: エンジニア
- **スライド枚数**:現在のスライド枚数を参照

2. 講座内容

スライドに記載する内容については、上記でやり取りした内容、整理した内容をふまえて、スライド作成指示書を作成してください。

## 出力指示

上記の情報を基に、以下の形式でスライド作成指示書を生成してください:

### スライド作成指示書フォーマット

1. **全体構成**
    - スライドの流れと各セクションの配分
    - 各セクションの目的と期待される学習効果
2. **各スライドの詳細指示**
    
    **スライド[番号]: [スライドタイトル]**
    
    - **目的**: このスライドで伝えたいメッセージ
    - **レイアウトタイプ**: (例: タイトルスライド、箇条書き、図解、比較表、etc.)
    - **記載テキスト**:
        - メインタイトル: [具体的なテキスト]
        - サブタイトル: [具体的なテキスト]
        - 本文/箇条書き項目:
            - [項目1の完全なテキスト]
            - [項目2の完全なテキスト]
            - [以下同様]
    - **視覚要素**:
        - 必要な図表の種類と内容
        - アイコンや画像の配置と意図
        - データがある場合は具体的な数値
        - 視覚要素は、ブロックの組み合わせでできるような、できる限りシンプルなデザインを使用する
3. **全体的な注意事項**
    - 一貫性を保つための指針
    - 受講者の理解を促進するための工夫

### 出力例(参考)

**スライド1: 講座タイトル**

- **目的**: 講座の第一印象を決定し、受講者の期待を設定する
- **レイアウトタイプ**: タイトルスライド
- **記載テキスト**:
    - メインタイトル: "生成AIを活用した業務効率化入門"
    - サブタイトル: "ChatGPTとClaudeで始める実践的活用法"
    - 日付: "2024年XX月XX日"
    - 講師名: "[講師名]"
- **視覚要素**:
    - 背景にAIをイメージする抽象的なグラフィック
    - 企業ロゴを右下に配置

[以下、全スライドについて同様の詳細を記載]

出力されるスライド構成案の例

### スライド4: 基本起動とモード
- **目的**: 3つの起動方法の特徴と使い分けを理解させる
- **レイアウトタイプ**: 3分割比較レイアウト
- **記載テキスト**:
  - メインタイトル: "3つの起動方法"
  - セクション1:
    - 見出し: "1. 対話モード(デフォルト)"
    - コード: `claude`
    - 説明: "インタラクティブなシェルを起動し、対話形式でやり取りが可能。複数回のコミュニケーションで段階的に作業を進められます。"
    - 適用場面: "複雑な会話、繰り返しの調整が必要な作業"
  - セクション2:
    - 見出し: "2. 非対話モード"
    - コード: `claude -c "package.jsonを作成"`
    - 説明: "コマンドラインから直接指示を送信し、結果を取得します。スクリプト化や自動化に適しています。"
    - 適用場面: "単発タスク、バッチ処理、CI/CD統合"
  - セクション3:
    - 見出し: "3. ファイル読み込みモード"
    - コード: `claude --file instructions.md`
    - 説明: "事前に準備したファイルから指示を読み込んで実行します。複雑な指示や再利用可能なタスクに最適です。"
    - 適用場面: "複雑な指示、テンプレート化されたタスク"
- **視覚要素**:
  - 3つのボックスを横並びに配置
  - 各ボックスを異なる色(セカンダリーカラーの濃淡)で区別
  - コードブロックは等幅フォント、ダークテーマ

スライドを作成、修正(Genspark)

上記のスライド構成案が完成したら、構成案のテキストと、デザインガイドラインのテキストを添付し、以下のようなプロンプトを実行します。

デザインガイドラインに基づいて、スライド構成案の内容について、スライドを作成してください。

現在はGensparkにデザインテンプレートの機能が実装されましたが、当時はなかったので、以下のようなデザインテンプレートを読み込ませていました。デザインテンプレートでは以下のような情報をドキュメントにまとめていました。

Gensparkの仕組みとして、HTML/CSSでデザインをしているため、カラーコードを指定したり、クラスとして使えるクラスを事前に提供してあげたり、スライドデザインのサンプルHTMLなどを提供してあげたりすると、上手く動作するイメージがありました。

このあたりの挙動をコントロールするノウハウは、機械学習と通じるところがあるので、データサイエンティストだと、アウトプットをコントロールしやすいような気がしますね。

  • 基本コンセプトの定義(エンジニア向けに「クリーン&モダン」な印象を与え、アニメーションは一切禁止とするなど)
  • 視覚要素(色・文字)の規定(メインカラーは深い青(#1E3A8A)、コード記述用には等
  • レイアウトと構造のルール(画面比率は16:9、重要な情報は視線が集まる「上部1/3」に配置するなど)
  • 実装用テンプレートの提供(タイトル、比較(Before/After)、2カラムなど、用途別のHTML/CSSテンプレート記述)
  • 品質管理基準(「1スライド1メッセージになっているか」「文字のコントラスト比は十分か」等のチェック項目)

その後、出てきた内容について、デザインを調整して、以下のようなスライドデザインが完成します。

image.png

ただ、一回で上手くできることは少なく、自然言語ベースで結構なやり取りが発生します。少ないものでバージョン20程度、多いものだと初期の版から100回くらいやり取りを経て完成となります。

ハルシネーションが発生したり、デザイン崩れが発生したりはまだまだあることなので、構成案を渡したら一発でスライド完成という夢の世界からはまだまだ遠い感じがあります。

それでも、スライド作成に対する工数は劇的に下がっていると思います。

読み上げ原稿を作成

スライドが完成したら、以下のようなプロンプトを使って、次ステップのスライド読み上げツールの読み上げ原稿を作成します。

現在はGoogleの音声読み上げを使っているので改善していますが、OpenAIの音声読み上げだと、英語の読み上げの際、英語発音になってしまうので、「API」→「エーピーアイ」と読み上げるといった工夫をしています。

また、音声読み上げで適度に間を取るために、句読点などを多く出力するような工夫もしています。このあたり、どこで調整するのかも含めて、結構工夫が必要です。

作成したスライドについて、以下のスライド出力フォーマットを参考に、読み上げ原稿を作成してください。

スライドに記載してある内容に加えて、追加での説明や補足が必要な内容については情報を補足して、読み上げ用の原稿としてテキストを出力してください。

スライドに書かれている項目については、網羅するようにお願いします。

「API」→「エーピーアイ」といった形で、英単語はそのまま使わず、カタカナで読みを記載してください。

「、」や「。」などを多めに使用し、適度に間を取って話してください。ページ切替のタイミングなど、長い間を取りたいときは、複数個使っても良いです。

強調文字などのマークダウンは使わないで、プレーンテキストで出力してください。

スライドの修正はしないでください。

# 読み上げ原稿サンプル

=== slide_1 === 
みなさん、こんにちは。本日は「生成エーアイプログラミングの最前線」と題しまして、エディタからエージェントまで、最新ツール総まとめについてお話しさせていただきます。 みなさんは今、チャット ジーピーティーやジェミニを使ってコードを書いていらっしゃると思いますが、実は今、プログラミングの世界に大きな革命が起きているんです。それが、今日ご紹介するクロード コードをはじめとした、エージェント型のエーアイツールです。 今日の講座を通じて、みなさんの開発スタイルが根本的に変わる可能性があることを、ぜひ実感していただければと思います。

=== slide_2 === 
まず最初に、みなさんの現在地を確認させてください。 このスライドをご覧ください。今日の講座は、すでにジェミニやチャット ジーピーティーでのコード生成を経験されている方を対象としています。また、プロンプトエンジニアリングの基礎、つまり「エーアイにどう指示を出せば良いコードが生成されるか」についても、ある程度ご存知という前提で進めさせていただきます。 本講座で学ぶことは、次世代ツールへのステップアップです。つまり、単にコードを生成してもらうだけでなく、エーアイと協働して開発するという新しいスタイルを身につけていただきます。

=== slide_3 === 
それでは、生成エーアイプログラミングの進化について見ていきましょう。 このフロー図をご覧ください。生成エーアイプログラミングは、大きく三つの世代に分かれています。 第一世代は、みなさんがお()のチャット型です。チャット ジーピーティーやジェミニがこれにあたります。質問してコードをもらって、それを自分でコピペする、という使い方ですね。 第二世代はエディタ統合型。カーソルやギットハブ コパイロットのように、エディタの中でエーアイが動いて、リアルタイムでコードを提案してくれます。 そして今日のメインテーマ、第三世代のエージェント型です。クロード コードやデビンがこれにあたります。これは何が違うかというと、エーアイが自律的に動いて、プロジェクト全体を理解し、複数のファイルを編集し、テストまで実行してくれるんです。

スライドと読み上げ原稿を元に研修動画を自動出力(自作ツール)

スライドと音声読み上げ原稿が完成したら、以下のスライド生成ツールを用いて、動画を自動生成します。

裏側で動いているGoogleのTTSについての設定を行い、スライドのアップロード、読み上げ原稿をアップロードしたら、動画が完成します。

image.png

スライド、原稿は一括でアップロード、入力が可能になっているので、画像で出力したデータをアップし、テキストをコピペすれば動作するようになっています。

image.png

image.png

動画生成ボタンを押すと、以下のような形で動画生成が走ります。タイムアウト処理や、画像データの処分などが上手くできていない部分があるのですが、社内ツールとして使う分には十分です。

image.png

こちらのツールですが、ClaudeCodeを用いて、大まかに以下のような工数感で作成しました。(スキマ時間で作っているので、延べ工数として下記のようなイメージです)

  • コマンドラインで動画を結合する仕組みの構築(半日程度)
  • 社内共有用にGUIを用いたアプリケーションとして開発(1日程度)
  • OpenAIのTTSからGoogleのTTSに仕様変更(半日程度)
  • Railwaysにデプロイし、本番環境でのでのバグ問題に対して対応(1日程度)
  • 細かなバグや仕様の修正(都度30分~1時間程度)

簡易な社内ツールではありますが、全くAIを使わず開発する場合、以下のようなアプリケーションのため、手が早い人で1カ月程度、平均して2カ月程度はかかるんじゃないかなと思います。

  • フロントエンドとバックエンドがしっかりと分かれている
  • 画像ファイルや動画ファイルなどを扱い、シンプルなDBだけで完結しない
  • GoogleのAPIを呼び出すシステム間連携がある

この一連のプロセスを経て凄いなと思ったのが、データサイエンス、ディレクション業務が中心で、直近あまり手を動かしていないため、モダンなWebの技術からは距離を置いている自分がこのスピードで、このクオリティのアプリケーションを作ることができたことです。

ある程度技術力がある人であれば、社内向けアプリケーションの開発、かつシステム障害などがクリティカルにならない領域であれば、ツールを作ることで、ワークフローを最適化できるのではないかと思います。

業務のワークフローの中で「ここのプロセスさえ自動化できればなぁ」という工程について課題がある方は、是非ClaudeCodeを使って自動化ツールを作ってみると良いかと思います。

完成サンプル

上記の流れで作った動画のサンプルが以下になります。

人間の読み上げの方が聞きやすいかなという感じはありますが、十分にクリアに聞き取れるため、受講を進める分には問題ないクオリティになっているかと思います。

まとめ

このようにワークフローを変えて、生成AIドリブンに研修を作ることで、劇的に生産性を向上することができました。

今までであればチームを作って取り組んでいたところ、ClaudeCodeのリリースから3カ月で(週1~2日程度の時間を使って作ったので、実質1~1.5カ月分くらい!)15時間のClaude Code研修の動画コンテンツを作ることができました。

AIによってホワイトカラーが失業するという話が話題ですが、今まで発注してきた立場からすると、AI失業待ったなしなんじゃないかなという感じがしています・・・

例えば、以下のような部分で、生成AIを活用することによって、生産性が向上したり、生成AIありきのワークフローが生まれてきています。

  • 職務経歴書などをもとに、コミュニティ人材のDBを作成
  • プレゼン資料の作成(アウトライン作成、資料化ともに)
  • データサイエンスにおける、コーディング

感覚としては、3年前と比べ、倍以上の仕事はこなせるようになってきているんじゃないかなと思います。(残った作業が調整、事務作業ばかり残っていて辛いですw)

人間は育てても忘れますし、育ったら単価が上がりますし、急にいなくなる可能性もある。と考えると、経営者としては、再現性があり、24時間利用可能であり、時間経過と共に優秀になっていくAI中心に業務を置き換えていくというのは、経営判断として正しいよなぁと思う限りです。

経営者として生産性が上がることは喜ばしいことですが、スクール事業をやっていて、これからキャリアをスタートする人のサポートをしている立場としては、頭を抱えるばかりです・・・

うまくAIを使いこなせる人を育てていきたいものですね。

ただ、この変化は、悪いことばかりではなく、良い変化も生んでいるかと思います。

今までは開発コストがかかるから取り組めていなかったような取り組みが、開発コストが劇的に圧縮されたおかげで、色々と取り組めるようになっているのも事実です。(今回の研修についても生成AIがなければ、研修として取り組んでいなかったと思います。)

今までは、100万円のリターンがあったとしても、その取り組みに500万円かかるのであれば、取りんでいないようなことが多くあったかと思います。それが、50万円でできるようになったとしたら、100万円のリターンでも十分に取り組めるようになります。

今後は、数カ月かけてじっくり開発という働き方ではなく、数日で結果を出して、また次の課題に取り組むみたいな働き方になっていく可能性もありそうですね。

ワークフロー整理してビジネス課題を発見できる人、そんな人に、より多くのチャンスがやってくるんじゃないかなと思います。

来年もきっとすごい発表が多くあると思いますが、上手く使いこなして乗り切っていきましょう!

PR

生成AIを活用してワークフローを改善したい、ClaudeCodeをはじめとしたコーディングエージェントを社内に導入したいという方がいらっしゃいましたら、データラーニングのサイトよりお問い合わせください!

ワークフローの中でボトルネックを見つけて、最小限のリソースで解決するみたいなお仕事は得意なので、お気軽にご相談頂ければなと思います。

直近もう少し受託に力を入れていこうと思っていますので、お力になれることも多いのかなと思います。

データサイエンス領域のご相談も大歓迎です!

データラーニングギルドとは?

データラーニングギルド は、株式会社データラーニングが運営する、データサイエンスを中心とした学習者・現役データサイエンティスト・エンジニアのためのコミュニティです。

学びの共有・キャリア形成・横のつながりを大切にし、勉強会、LT会、技術相談、キャリア支援、案件紹介など、「データ領域で挑戦したい人を応援する活動」を幅広く行っています。

初心者から実務者まで、誰もが成長できる場づくりを目指しています。

🔗公式サイト:https://data-learning.com/guild

9
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?