Skip to content

Commit 28cb4f9

Browse files
ShuntaTodaShuntaToda
committed
feat: AIを使ったスライド作成方法を追加し、関連画像を追加
1 parent 09b29b1 commit 28cb4f9

File tree

3 files changed

+41
-8
lines changed

3 files changed

+41
-8
lines changed

‎images/sample-slide-copy.png‎

220 KB
Loading

‎index.html‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1 id="classmethod-marp-theme">Classmethod Marp Theme</h1>
1414
<h2 id="%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89">セットアップスライド</h2>
1515
<p>2025/08/19 更新</p>
1616
</section>
17-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="2" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="10">
17+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="2" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="11">
1818
<h1 id="%E6%A6%82%E8%A6%81">概要</h1>
1919
<p>クラスメソッドのスライドデザインを参考に作成したMarpテーマです。</p>
2020
<h2 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF">参考リンク</h2>
@@ -26,7 +26,7 @@ <h2 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF">参考リンク</h2>
2626
<p><strong>Marp 公式サイト</strong></p>
2727
<p><a href="https://marp.app/">https://marp.app/</a></p>
2828
</section>
29-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="3" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="10">
29+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="3" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="11">
3030
<h1 id="%E7%89%B9%E5%BE%B4">特徴</h1>
3131
<h2 id="%F0%9F%93%9D-%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E3%81%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E4%BD%9C%E6%88%90"><img class="emoji" draggable="false" alt="📝" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/1f4dd.svg" data-marp-twemoji=""/> マークダウンでスライド作成</h2>
3232
<p>クラスメソッドのスライドデザインのスライドがマークダウンで作成可能</p>
@@ -39,7 +39,7 @@ <h2 id="%F0%9F%A4%96-%E7%94%9F%E6%88%90ai%E3%81%A7%E4%BD%9C%E3%82%8A%E3%82%84%E3
3939
<h2 id="%E5%88%A9%E7%94%A8%E6%96%B9%E6%B3%95">利用方法</h2>
4040
<p>VSCodeやCLIで簡単に使えます</p>
4141
</section>
42-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-class="content-image-right content-60" data-theme="classmethod" lang="ja-JP" class="content-image-right content-60" data-marpit-pagination="5" style="--paginate:true;--class:content-image-right content-60;--theme:classmethod;" data-marpit-pagination-total="10">
42+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-class="content-image-right content-60" data-theme="classmethod" lang="ja-JP" class="content-image-right content-60" data-marpit-pagination="5" style="--paginate:true;--class:content-image-right content-60;--theme:classmethod;" data-marpit-pagination-total="11">
4343
<h1 id="vscode%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">VSCodeでの設定方法</h1>
4444
<p><img src="./images/vscode-marp-theme-setup.png" alt="" style="width:450px;" /><br />
4545
<img src="./images/sample-slide-title.png" alt="" style="width:450px;" /></p>
@@ -57,17 +57,17 @@ <h1 id="vscode%E3%81%A7%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">VSCodeで
5757
<li>このスライドと同じデザインになったらOK！</li>
5858
</ol>
5959
</section>
60-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-class="image" data-theme="classmethod" lang="ja-JP" class="image" data-marpit-pagination="6" style="--paginate:true;--class:image;--theme:classmethod;" data-marpit-pagination-total="10">
60+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-class="image" data-theme="classmethod" lang="ja-JP" class="image" data-marpit-pagination="6" style="--paginate:true;--class:image;--theme:classmethod;" data-marpit-pagination-total="11">
6161
<h1 id="vscode%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E3%81%8B%E3%82%89%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B">VSCode拡張機能を利用してマークダウンからスライドを表示する</h1>
6262
<p>右上のMarpアイコンからマークダウンをスライドで表示することができます</p>
6363
<p><img src="https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/toggle.gif" alt="" style="width:1000px;" /></p>
6464
</section>
65-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-class="image" data-theme="classmethod" lang="ja-JP" class="image" data-marpit-pagination="7" style="--paginate:true;--class:image;--theme:classmethod;" data-marpit-pagination-total="10">
65+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-class="image" data-theme="classmethod" lang="ja-JP" class="image" data-marpit-pagination="7" style="--paginate:true;--class:image;--theme:classmethod;" data-marpit-pagination-total="11">
6666
<h1 id="vscode%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6html%E3%83%BBpdf%E3%81%B8%E3%81%AE%E5%87%BA%E5%8A%9B%E3%82%92%E8%A1%8C%E3%81%86">VSCode拡張機能を利用してHTML・PDFへの出力を行う</h1>
6767
<p>右上のMarpアイコンからHTML・PDFへの出力を行うことができます</p>
6868
<p><img src="https://raw.githubusercontent.com/marp-team/marp-vscode/main/docs/export.gif" alt="" style="width:1000px;" /></p>
6969
</section>
70-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="8" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="10">
70+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="8" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="11">
7171
<h1 id="cli%E3%81%A7%E3%81%AE%E5%88%A9%E7%94%A8">CLIでの利用</h1>
7272
<ol>
7373
<li>
@@ -86,7 +86,7 @@ <h1 id="cli%E3%81%A7%E3%81%AE%E5%88%A9%E7%94%A8">CLIでの利用</h1>
8686
</li>
8787
</ol>
8888
</section>
89-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="9" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="10">
89+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="9" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="11">
9090
<h1 id="%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E6%8C%87%E5%AE%9A%E6%96%B9%E6%B3%95">テーマの指定方法</h1>
9191
<p>Markdownファイルの先頭に以下のFront Matterを記述します</p>
9292
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-markdown">---
@@ -100,7 +100,23 @@ <h1 id="%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E6%8C%87%E5%AE%9A%E6%96%B9%E6%B3%95
100100
<h2 id="%E7%B4%B0%E3%81%8B%E3%81%84%E5%86%85%E5%AE%B9%E3%81%AF%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92%E3%81%94%E8%A6%A7%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84">細かい内容は<strong>サンプルスライドをご覧ください！</strong></h2>
101101
<p><a href="https://classmethod.github.io/classmethod-marp-theme/sample-slide.html">https://classmethod.github.io/classmethod-marp-theme/sample-slide.html</a></p>
102102
</section>
103-
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-class="all-text-center align-center" data-theme="classmethod" lang="ja-JP" class="all-text-center align-center" data-marpit-pagination="10" style="--paginate:true;--class:all-text-center align-center;--theme:classmethod;" data-marpit-pagination-total="10">
103+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-theme="classmethod" lang="ja-JP" data-marpit-pagination="10" style="--paginate:true;--theme:classmethod;" data-marpit-pagination-total="11">
104+
<h1 id="%F0%9F%A4%96ai%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1"><img class="emoji" draggable="false" alt="🤖" src="https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/1f916.svg" data-marp-twemoji=""/>AIを使ってスライドを作成する方法（オススメ）</h1>
105+
<ol>
106+
<li>スライドの内容を考える</li>
107+
<li>sample-slide.mdのテキストをコピー（下図参照）<br />
108+
リンク: <a href="https://github.com/classmethod/classmethod-marp-theme/blob/main/sample-slide.md">https://github.com/classmethod/classmethod-marp-theme/blob/main/sample-slide.md</a></li>
109+
<li>生成AIのチャット欄に貼り付け</li>
110+
</ol>
111+
<pre is="marp-pre" data-auto-scaling="downscale-only"><code class="language-md">{sample-slide.mdのコピペ}
112+
このテンプレートを使って〇〇.mdの内容のMarpスライドを作成して〇〇.mdに出力してください。
113+
</code></pre>
114+
<ol start="4">
115+
<li>スライドの内容、レイアウト、画像のサイズを調整</li>
116+
</ol>
117+
<p><img src="images/sample-slide-copy.png" alt="" style="width:500px;" /></p>
118+
</section>
119+
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-class="all-text-center align-center" data-theme="classmethod" lang="ja-JP" class="all-text-center align-center" data-marpit-pagination="11" style="--paginate:true;--class:all-text-center align-center;--theme:classmethod;" data-marpit-pagination-total="11">
104120
<p><img src="https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg" alt="" style="width:450px;" /></p>
105121
<h1 id="%E3%81%9C%E3%81%B2%E3%81%8A%E8%A9%A6%E3%81%97%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84">ぜひお試しください！</h1>
106122
<p>このテーマはクラスメソッド社の内部使用を目的として作成されています</p>

‎index.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,23 @@ https://classmethod.github.io/classmethod-marp-theme/sample-slide.html
135135

136136
---
137137

138+
139+
# :robot:AIを使ってスライドを作成する方法（オススメ）
140+
141+
1. スライドの内容を考える
142+
2. sample-slide.mdのテキストをコピー（下図参照）
143+
リンク: https://github.com/classmethod/classmethod-marp-theme/blob/main/sample-slide.md
144+
3. 生成AIのチャット欄に貼り付け
145+
```md
146+
{sample-slide.mdのコピペ}
147+
このテンプレートを使って〇〇.mdの内容のMarpスライドを作成して〇〇.mdに出力してください。
148+
```
149+
4. スライドの内容、レイアウト、画像のサイズを調整
150+
151+
![w:500px](images/sample-slide-copy.png)
152+
153+
---
154+
138155
<!-- _class: all-text-center align-center -->
139156

140157
![w:450px](https://classmethod.jp/wp-content/themes/cmn/assets/images/common/logo_classmethod.svg)

0 commit comments

Comments
 (0)