0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

このウェビナー動画、ElevenLabsに喋らせています。今回は、音声合成に使ったテキストとTipsを紹介したいと思います。

開発環境

  • ElevenLabs
    • Eleven v3 (alpha)

導入

カスタム音声を作成

ElevenLabsで自分の声を作成して下さい

10秒の音声ファイルをアップロード、もしくはその場で録音するだけで作れます

20251216-013047-d33eaf05.png

テキスト読み上げを選択し、ボイスを自分の声のモデルに設定、テキストを入力し、音声を生成します。

20251216-020422-98f74357.png

できるだけ長く喋らせる

文章を短く生成したものを繋げると、喋り方が若干異なるので、1つのウェビナーに複数人が交代で喋っているように聞こえてしまいます。(知人にはバレます)

音声合成の長さには制限があるため、30枚のスライドで20分のウェビナーの場合、音声合成を4つ(1つあたり5分程度)に分けました。だいたい2000文字くらいです。

音声合成(1つ目)

はい。ただいまより、約30分間で、AIコーディングで変わるソフトウェア開発というセミナーを行います。 前半20分をセミナー形式で話をします。ご質問は随時、チャット欄のQ&Aのところに投稿していただければ、後半の10分間で答えられる範囲で回答させていただきます。

改めまして、ナレッジコミュニケーションのR&D戦略チーム、マネージャーをしております、藤本と申します。 私は主に自社プロダクトの開発に携わっておりまして、これまで、専門家不要で機械学習のモデルを自動で構築するプラットフォームのナレコムAIや、 MicrosoftのHoloLensを用いた屋内ナビゲーションアプリ、ナレコムVRを開発していました。 この数年間は、バクハツ的にフキュウしたセイセイAIに注力しております。

まず、弊社の紹介をさせていただきます。千葉に2拠点と熊本にイッキョテン、オフィスを構えており、本社は千葉のミナミギョウトクにあります。

ヘイシャはクラウドサービスが始まった頃からAWSに取り組み、現在はAWS、Microsoft アジュール、データブリックスをキバンに、 エーアイや、データ活用のプロジェクトをカズオオク、支援しています。設計、ジッソウから運用まで、いっかんしたサービスをテイキョウできるのがツヨミです。

チョッキンの取り組みとしては、セイセイAIの中でも「AIエージェント」に力を入れています。 自社サービスに加えて、AWSやMicrosoft アジュール上でのジッソウ、そしてディフィーといったプラットフォームを使って、様々なAIエージェントの構築を行なっております。

本日の流れについてご説明します。 まず最初に、AIコーディングとは何かという定義を共有します。 次に、代表的なAIコーディングツールについて取り上げます。 その上で、従来の開発プロセスにおける課題を整理したうえで、 カーソルを導入して少人数チームでも劇的に生産性が向上した事例をご紹介します。 最後に、コードを書かずに開発が進む、AIエージェントについても触れていきます。

最初に、AIコーディングとは何かについてご説明します。

AIコーディングとは、自然言語による指示だけでAIがコードを生成・編集してくれる新しい開発手法です。 たとえば、『Reactでログイン画面を作って』と伝えると、ソースコードを提案してくれる。さらにテストやドキュメントの作成まで支援してくれます。 人間の役割はすべてのコードを書くことではなく、設計や意思決定に集中すること。 これによって、従来の開発フローを大きく変える可能性があります。

ではここから、代表的なAIコーディングツールについて見ていきましょう。 ここでご紹介するのは、実際に現場でよく使われているものから、最近話題になっているものまで幅広く取り上げます。

げんざい、AIコーディングのツールはヒジョウにタヨウカしてきています。ダイヒョウテキなものとしては、GitHub コパイロット や カーソル のようにすでにオオクの開発ゲンバで使われている補助型のツール、そして Claude Code や Devin、Windsurf、Manus といった、自律的にコードをセイセイ、実行することをめざす新しいツールがあります。

AIコーディングには、大きく3つの使い方があります。 まず Askモード。これはコードを変更せずに質問や探索を行うモードです。AIの提案を手動で適用するので、安全ですが、適用に手間がかかります。 次に Agentモード。こちらはAIが自動でコードを生成・編集したり、コマンド操作まで行ってくれるモードです。非常に便利ですが、予期せぬ変更が入るリスクがあります。 最後に CLIモード。これはターミナルからAgent機能を利用できるものです。自動で反映される点は同じで、効率的ですが、やはり予期しない変更には注意が必要です。 このように、それぞれメリットとリスクがあるため、開発フェーズやタスクに応じて使い分けることが重要です。

まず、従来の開発プロセスには大きな課題がありました。 新しい技術を導入しようとしても、キャッチアップに時間がかかる。 コードレビューやテストに多くのリソースを割かれる。 結果として、アイデアを形にするまでに1年単位の時間が必要になることも珍しくありませんでした。 つまり、従来の開発はどうしても人の手に依存しており、スピードとスケールに限界があった、という点がオオキナ問題でした。

ひらがな/カタカナを使う

漢字は読めないことがあるので、ひらがな/カタカナを使います。
ひらがなかカタカナかでも発音が異なるのでいい方を選びましょう。

元の文章 変換後の文章
爆発的に バクハツ的に
普及 フキュウ
生成AI セイセイAI
1拠点 イッキョテン
南行徳 ミナミギョウトク
弊社 ヘイシャ
基盤 キバン
数多く カズオオク
実装 ジッソウ
一貫した いっかんした
提供 テイキョウ
強み ツヨミ
直近 チョッキン
現在 げんざい
非常に ヒジョウに
多様化 タヨウカ
代表的 ダイヒョウテキ
多く オオク
現場 ゲンバ
大きな オオキナ

ジャパニーズ・イングリッシュにしたい場合はカタカナを使いましょう。

元の文章 変換後の文章
Microsoft Azure Microsoft アジュール
AI エーアイ
Dify ディフィー
GitHub Copilot GitHub コパイロット
Cursor カーソル

音声間の文頭と文末をオーバーラップする

音声間の文頭と文末をオーバーラップしています。出だしの文章によって、発話のテンションが異なる時があるので、オーバーラップさせることでそれをある程度防いで、自然と繋げられているかなと思います。

1つ目の音声合成の文末

...重要です。

まず、従来の開発プロセスには大きな課題がありました。 新しい技術を導入しようとしても、キャッチアップに時間がかかる。 コードレビューやテストに多くのリソースを割かれる。 結果として、アイデアを形にするまでに1年単位の時間が必要になることも珍しくありませんでした。 つまり、従来の開発はどうしても人の手に依存しており、スピードとスケールに限界があった、という点がオオキナ問題でした。

2つ目の音声合成の文頭

まず、従来の開発プロセスには大きな課題がありました。 新しい技術を導入しようとしても、キャッチアップに時間がかかる。 コードレビューやテストに多くのリソースを割かれる。 結果として、アイデアを形にするまでに1年単位の時間が必要になることも珍しくありませんでした。 つまり、従来の開発はどうしても人の手に依存しており、スピードとスケールに限界があった、という点がオオキナ問題でした。

一方で...

残りの原稿

音声合成(2つ目)

まず、従来の開発プロセスには大きな課題がありました。 新しい技術を導入しようとしても、キャッチアップに時間がかかる。 コードレビューやテストに多くのリソースを割かれる。 結果として、アイデアを形にするまでに1年単位の時間が必要になることも珍しくありませんでした。 つまり、従来の開発はどうしても人の手に依存しており、スピードとスケールに限界があった、という点がオオキナ問題でした。

一方で、この数年で開発スタイルは大きく変化してきています。 2022年までは、書籍や記事を参考にしながら人がイチギョウずつコードを書くのが当たり前でした。 2023年には、チャットで質問しながら開発できるようになり、コードの補助が身近になってきました。 2024年には、Artifactを使ってUIを確認しながらコーディングしたり、エディタ上で直接チャットできるようになり、さらに効率が高まりました。 そして2025年には、自律型のエージェントやCLIを活用したコーディングが実用化しつつあります。 加えて、推論モデル、特に拡張思考が可能なAIの登場によって、コード生成の精度が大きく向上しているのも大きな変化です。 このように、数年単位で開発のスタイルは急速に進化してきています。

2022年頃までは、まだ完全に手動でコーディングしていました。 毎回エラーが出るたびに検索し、記事やサンプルコードを探してはコピペ。 それでも動かないときは、ひたすら一文字ずつタイプして試行錯誤するしかありませんでした。 こうした時代は、ニサンニンの小規模チームで1つのプロダクトを作るのに、リリースまでおよそ1年かかるのが当たり前でした。 つまり、開発のスピードには大きな限界があったんです。

ところが2023年、ジョウキョウはおおきく変わりました。 チャットジーピーティーのようなチャット型AIに質問してコード例をもらい、それをエディタに貼り付けてシュウセイしながら動かす、というスタイルがイッパンテキになってきました。 この変化によって、体感的にカイハツスピードはサンバイイジョウにコウジョウしました。 さらに大きかったのは、学習効率です。 たとえば新卒エンジニアが、わずか1年で3年目レベルの若手エンジニアに匹敵する実力に成長できるようになった、という実感があります。 つまり、AIとのチャットを活用することで、開発スピードだけでなく、人材育成の面でも劇的な進化があったのです。

2024年になると、Claudeの『アーティファクト』機能が登場しました。 これは、左側でAIとチャットをしながら、右側でUIをリアルタイムに確認できる仕組みです。 たとえばチャットボットのサンプルアプリを作るとき、コードだけでなくUIの見た目も即座に確認できるため、プロトタイプの品質が大きく向上しました。 つまり、開発者が“動く形”をすぐに確認できるようになったことで、設計と実装の距離が一気に縮まったのです。

同じく2024年、エディタ上で直接チャットできる環境も整ってきました。 コードエディタとチャットが統合され、質問した内容に応じてAIが修正案を提示し、そのままワンクリックで適用できるようになったのです。 これにより、エディタとチャットアプリをいったりきたりする必要がなくなり、開発効率は大幅に向上しました。 まさに“エディタの中に相棒がいる”という感覚で、開発者は集中したままコードを書き続けられるようになったのです。

そして2025年、いよいよ完全自律型のエージェントやCLIが実用化し始めました。 ユーザーがタスクを指示するだけで、AIが自動でコードを書き、場合によってはサーバーの起動などコマンド操作まで行ってくれます。 これにより、開発者はより上流の設計や戦略に集中できるようになりました。 一方で、AIが予期せぬ変更を加えたり、必要以上に作業を進めてしまうといったリスクもあり、注意深く運用する必要があります。 つまり、リベンセイとリスクがヒョウリイッタイとなる段階に入ったわけです。

こうしたAIコーディングの進化の中で、私たちのチームではカーソルを導入しました。 結果、少人数チームでも劇的に生産性を高めることができました。 以前なら数人で1年かかっていたプロジェクトも、数ヶ月で形にできるようになり、チーム全体のスピード感が大きく変わりました。 さらに、メンバー個々のスキル差もAIによって補完され、全員が高いレベルで開発に参加できるようになっています。 つまり、カーソルの導入は、単なる効率化にとどまらず、チームのあり方そのものを変える大きなインパクトをもたらしたのです。

ここからは実際に カーソルを使ってAIコーディングを始める手順 を見ていきます。 まずは公式サイトからカーソルをダウンロードしてインストールします。 その後、エディタの画面構成や機能の見方を理解することが第一歩です。 次のスライドで、カーソルの画面を実際に見ながら説明します。

音声合成(3つ目)

ここからは実際に カーソルを使ってAIコーディングを始める手順 を見ていきます。 まずは公式サイトからカーソルをダウンロードしてインストールします。 その後、エディタの画面構成や機能の見方を理解することが第一歩です。 次のスライドで、カーソルの画面を実際に見ながら説明します。

カーソルの画面構成は、基本的にVS Codeと似ています。 左側には ファイル一覧や検索、ギット、拡張機能 が並びます。 中央が コードを書くメインエディタ です。 下部には ターミナル があり、コマンドを直接実行できます。 そして右側にあるのが チャットエリア。ここでAIに質問したり、修正を依頼したりすることができます。 つまり、普段の開発フローを保ちながら、AIを自然に取り込めるのがカーソルの強みです。

ここでは、AIコーディングを始める前に最低限必要なプロジェクト環境のセットアップ手順を整理しています。 まず、GitHub上にプライベートリポジトリを作成します。その後、git clone で手元にリポジトリを持ってきて、プロジェクトのフォルダに移動します。 そして最後に、カーソル ドット コマンドでフォルダを開くと、カーソル上でのAIコーディングが始められます。 この流れを一度覚えてしまえば、新規プロジェクトを立ち上げるたびにすぐAIと一緒に開発を始められるようになります。

次に、プロジェクトのフォルダ構成です。 AIと一緒に開発する場合、ある程度ディレクトリ構成を統一しておくと非常に効率的になります。 例えば、フロントエンドは ビィート、React、TypeScript、バックエンドは Express、TypeScript といった形で分けます。 さらに、Pythonの検証用コードを入れる standalone、仕様書や実装手順をまとめる docs フォルダを用意しておくと、AIに仕様整理やドキュメント生成を任せやすくなります。 最後に、全体のリードミーに仕様や起動手順を書いておけば、プロジェクトの見通しが良くなり、チームメンバーやAIの補助がさらに活きるようになります。

ここでは、AIコーディングを進める上で重要なポイントとして「AIが得意とする言語やライブラリを使う」ことを強調しています。 ClaudeのアーティファクトはReactベースで作られているため、フロントエンドはReactを前提に設計するのが自然です。そしてバックエンドもTypeScriptで統一することで、AIにとって理解しやすく、提案の質も安定します。 一方で、Next.jsのようなフルスタックフレームワークはあえて採用していません。理由は大きく3つあります。 1つ目は、チーム分業の観点です。フロントとバックを切り分けた方が責任範囲が明確になります。 2つ目は、スケーラビリティです。アジュール ファンクションズなどマイクロサービスと柔軟に組み合わせられる構成にしておくと、将来の拡張性が高まります。 3つ目は、デプロイの独立性です。片方だけ更新・ロールバックできる方が、運用リスクを減らすことができます。

次に、カーソル上でAIとの会話設定の工夫についてです。 まず大前提として、予測できない変更や「やり過ぎ」を防ぐために、Agentモードは使わずAskモードを基本とします。Askモードなら、AIの提案を一度diffで確認してから適用するフローが作れます。 モデル選択については、普段はAutoを使い、難しいタスクに限ってClaude 4 Sonnetを指定する運用が現実的です。高速リクエスト枠が切れてしまっても困らないように、Autoに慣れておくのも重要です。 さらに、ひとつのチャットで様々なタスクを続けていると精度が落ちるため、タスクごとに新しいチャットを立ち上げて切り替えるのが効率的です。 この運用を徹底するだけで、AIの出力の品質と安定性は大きく変わってきます。

ここでは、新人研修でAIコーディングをどのように始めるかを紹介します。 まず、frontend フォルダにビィート、React、タイプスクリプトのアプリをセットアップします。新人は「ビィートって何?」という状態でも、AIに「セットアップして」と伝えれば、AIが自動でコードを生成してくれます。 出てきたコードをそのままアプライしていくだけで、アプリの形が整っていきます。 最初は「AIに頼ってアプライする」ことを中心に進め、徐々に慣れてきたら自分でコマンドを叩いて一発で環境構築できるようになります。 これで「AIでコードが書ける」体験を最初の日から積ませることができます。

次に、実際にカーソルを使ったAIコーディングの進め方についてです。 AIコーディングは、一度で完璧なコードが出るわけではなく、何度も繰り返しチャットしながら修正していくプロセスが基本です。 できたコードはきちんと記録しておくこと。途中で理解が追いつかなくても諦めずにAIに聞き返すこと。そして、わからない部分は必ず「コードの説明をして」とAIに求めること。 こうしたサイクルを回すことで、自然と「やったことのあるコード」が増えていき、自分の知識として定着していきます。 新人が短期間で成長できるのは、この反復プロセスをAIが伴走してくれるからです。

音声合成(4つ目)

次に、実際にカーソルを使ったAIコーディングの進め方についてです。 AIコーディングは、一度で完璧なコードが出るわけではなく、何度も繰り返しチャットしながら修正していくプロセスが基本です。 できたコードはきちんと記録しておくこと。途中で理解が追いつかなくても諦めずにAIに聞き返すこと。そして、わからない部分は必ず「コードの説明をして」とAIに求めること。 こうしたサイクルを回すことで、自然と「やったことのあるコード」が増えていき、自分の知識として定着していきます。 新人が短期間で成長できるのは、この反復プロセスをAIが伴走してくれるからです。

次に、新人研修初日の実践的な流れです。 まずはトップページの見た目を変える演習をします。編集対象は App.tsx のみ。コード全体に手を出さず、特定のファイルだけをAIに直してもらうことを徹底します。 もしコードが1000行を超えるようになったら、AIに「コンポーネントに分割してください」と指示します。これによって自然にコンポーネント分割の習慣を学べます。 また、コードの意味がわからないときは、そのままにせず必ずAIに「解説して」と頼むこと。AIは教師役としても機能するので、実装と同時に学習が進みます。 つまり、最初の一歩は「AIに頼みつつ、コードの構造と役割を理解していく」ことを意識させる段階です。

次に、実際の開発体制のイメージです。 ここでは、社員3人とアルバイト5人というチーム構成を例にしています。 社員1人につき1つ以上のプロダクトを責任を持って管理します。そしてアルバイトはAIコーディングを使って検証やテストを中心に担当します。 この構成にすることで、社員はプロダクトの全体設計や意思決定に集中でき、アルバイトはAIを使って具体的なタスクを消化しながらスキルを磨いていきます。 結果的に、少人数でも複数プロダクトを同時並行で開発・運用できる体制が実現できます。

ここでは、AIコーディングを導入することでどのくらい生産性が変わったかを紹介します。 これまで製品リリースまでに1年かかっていたものが、わずかニサンカゲツで完成できるようになりました。 また、アルバイトのメンバーでも、AIコーディングを使えばわずか4日で習得可能です。 さらに実際の開発では、コードの90%以上をAIが自動生成してくれるようになっています。 もちろん完全自動化はまだ難しい部分もありますが、それでも生産性は劇的に向上しました。

ここからは、AIコーディングで開発した弊社のナレコムAI Agent Studioを紹介します。 こちらは、ノーコードで簡単にAIエージェントやワークフローをサクセイできるアプリです。 このデモは、ドキュメントの内容にモトづいてAIが回答するというエージェントになっております。 まずサイドメニューからドキュメント入力を配置します。 ドキュメントを選択から、PDFファイルをアップロードします。 次に、テキスト抽出を配置し、ドキュメント入力と繋ぎます。これでPDFからテキストを抽出できます。 テキスト入力を配置し、ドキュメントに対しての質問を入力します。 テキスト結合を配置し、ユーザーの質問と抽出したテキストを結合します。 LLM処理を配置し、質問をユーザーメッセージに繋ぎます。モデルはメニューから変更できます。 最後にテキスト出力を配置すると完成です。 それでは実行してみましょう。 数秒で回答が得られています。ナレコムAI Chatbotは月額いくらですか?という質問に対して、PDFの内容から、回答していますね。 サイゴにゴアンナイです。 本日のアンケートにご協力をお願いします。 こちらのQRコード、または下に記載のURLからアクセスいただけます。 アンケートに回答いただくと、本日の投影資料をダウンロードできるようになっていますので、ぜひご記入ください。 コンゴの改善にもつながりますので、ご意見・ご感想をお待ちしています!

お疲れ様でした。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?