生成AIとVSCodeで資料作りが秒で終わるようになった理由

## 資料作成が地獄だったあの頃

こんにちは。私はとあるITの上場企業で社内教育という珍しい仕事をやっている人です。

本日は私が生成AIを使って資料作りで楽している話をしたいと思っています。

資料作成でAIを活用しまくることで資料がすぐに完成して中身に集中することができるようになりました。

## 資料作成にもVSCodeを使う

私は資料を作る時は基本的にPowerPointを使って資料作成をしていました。

しかしPowerPointはいろいろできるせいか、資料の記述内容が増えてしまう傾向にあり、資料を作成するのが結構大変でした。

さらに、アニメーションを考えたり、さまざまなチャートを1スライドに置いたりしていると資料のまとまりがなくなってきてしまいます。

スライドの文章量も多くなってしまいまるでカンペのような資料ができてしまいます。

文字が小さく、チャートも小さいので結局何を伝えたいのかメッセージが曖昧になってしまっていました。

## VSCodeとMarpの活用で圧倒的な生産性を実現

現在はVSCodeとMarpを使って資料作成できることになりました。

企業ロゴを右隅に入れることは、設定のMarpからテーマのCSSを指定してあげることで企業カラーや企業ロゴも全てのスライドに適用することができます。

VSCodeの設定から(CTRL+,)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280363/609463d7-f862-4c08-9e9b-0677dba358b1.png)

`marp`と検索して以下の設定を変更します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280363/762c3831-a4da-6900-d719-a59e8058b680.png)

HTMLを有効化

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280363/3c481bbe-52c2-0ea4-d257-84c28331877b.png)


Themeを設定(StyleSheetはご用意ください)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280363/84535fa4-b693-1dcd-cdad-47da7e371125.png)

スライドの区切りは`section`でやっているので、`section`を編集することで企業ロゴをすべてのスライドに適用できます。(やり方はほかの記事を参考にしてください)

Markdownについては知らなくてもサンプルのMarpスライドを見せてあげることで、自分以外のメンバーもMarpを使った資料作成に取り組んでくれるようになりました。

そもそも興味のないメンバーもいるので、Markdownでの資料作成を強要するものではないと思いますが、私の感覚だとすごく作業が楽になり生産性が上がった印象です。

PowerPointを使わなくなったとまではいきませんが、PowerPointを使わなくてもいい時はMarpで資料作成して早く終わらせています。

## MarpとAIをどのように組み合わせて導入するか？

たとえば生成AIに次のような指示を出します

> Create marp slide about history of internet. Each slide includes at least 200 characters narrative explanation With table of contents by Japanese


そうすると次のようなスライドが結果として返ってくるのでVSCodeに貼り付けます。

```markdown
---
marp: true
theme: default
---

# インターネットの歴史

## 目次

1. ARPANETの誕生
2. TCP/IPプロトコルの開発
3. WWWの登場
4. 商用インターネットの普及
5. Web 2.0の時代
6. モバイルインターネットの台頭

---

## 1. ARPANETの誕生

1969年、米国防総省の高等研究計画局（ARPA）が、ARPANETを開発しました。これは、分散型ネットワークの概念を実現した最初の実用的なコンピューターネットワークでした。当初は4つのノードで構成されていましたが、この革新的なシステムは、後のインターネットの基盤となりました。ARPANETの主な目的は、研究機関間でのリソース共有と情報交換を促進することでした。この時期、電子メールやファイル転送などの基本的なネットワークサービスが開発され、コンピューター間の通信に革命をもたらしました[1].

---

## 2. TCP/IPプロトコルの開発

1970年代後半、ヴィントン・サーフとボブ・カーンによってTCP/IPプロトコルが開発されました。これは、異なるネットワーク間での通信を可能にする画期的な技術でした。TCP/IPは、データを小さなパケットに分割し、それらを効率的にルーティングする方法を提供しました。このプロトコルの採用により、世界中の異なるネットワークを相互接続する「ネットワークのネットワーク」、つまりインターネットの概念が現実のものとなりました。1983年、ARPANETはTCP/IPを公式プロトコルとして採用し、これによりインターネットの基盤が確立されました[2].

---

## 3. WWWの登場

1989年、ティム・バーナーズ＝リーがCERNで World Wide Web (WWW) を考案しました。WWWは、ハイパーテキストを用いてインターネット上の情報を簡単に閲覧・共有できるシステムでした。1993年には、イリノイ大学の学生マーク・アンドリーセンらによって、グラフィカルなウェブブラウザ「Mosaic」が開発されました。これにより、一般ユーザーでも簡単にウェブを利用できるようになり、インターネットの爆発的な普及につながりました。WWWの登場は、情報へのアクセスと共有の方法を根本的に変え、現代のデジタル社会の基盤を築きました[3].

---

## 4. 商用インターネットの普及

1990年代半ばから、インターネットの商用利用が急速に拡大しました。ISP（インターネットサービスプロバイダー）の登場により、一般家庭でもダイヤルアップ接続を通じてインターネットにアクセスできるようになりました。この時期、Amazon（1994年）やeBay（1995年）などのオンライン小売業者が登場し、電子商取引（E-コマース）の時代が幕を開けました。また、検索エンジンの発展も重要で、1998年にはGoogleが設立され、インターネット上の情報を効率的に見つけ出す手段を提供しました。これらの発展により、インターネットは単なる学術ネットワークから、ビジネスと日常生活に不可欠なインフラストラクチャーへと進化しました[4].

---

## 5. Web 2.0の時代

2000年代に入ると、「Web 2.0」という概念が登場しました。これは、ユーザー生成コンテンツ、相互作用性、そしてソーシャルネットワーキングを重視する新しいウェブの在り方を指します。この時期、Wikipedia（2001年）、Facebook（2004年）、YouTube（2005年）、Twitter（2006年）などの革新的なプラットフォームが登場しました。これらのサービスにより、ユーザーは単なる情報の消費者から、積極的な情報の生産者および共有者へと変化しました。また、クラウドコンピューティングの発展も、この時期の重要な技術革新でした。Web 2.0の時代は、インターネットをより参加型で双方向的なメディアへと変貌させ、オンラインコミュニティの形成と情報の民主化を促進しました[5].

---

## 6. モバイルインターネットの台頭

2007年のiPhoneの登場を皮切りに、スマートフォンとモバイルインターネットの時代が本格的に始まりました。高速モバイルネットワーク（3G、4G、そして現在の5G）の発展により、ユーザーはいつでもどこでもインターネットにアクセスできるようになりました。これにより、位置情報サービス、モバイル決済、ソーシャルメディアの常時接続など、新しいサービスと利用形態が生まれました。また、IoT（Internet of Things）の発展により、様々な機器がインターネットに接続されるようになり、私たちの生活や仕事のあり方を大きく変えています。モバイルインターネットの普及は、デジタルデバイドの解消にも貢献し、発展途上国を含む世界中の人々にインターネットへのアクセスをもたらしています[6].

```

これでスライドができてしまいます。


## 資料の作成には時間をかけず生産性の高いことに集中しよう

今はツールを習得すればそれだけ効率化につながります。

資料作成に費やしていた時間をもっと生産性の高いことに使いましょう。

と言っておいて私はできているとは言えませんorz