--- > [!NOTE] 目次 ```table-of-contents title: minLevel: 0 maxLevel: 0 includeLinks: true ``` --- > [!NOTE] リスト掲載用文字列 - [【徹底解説】生成AI×スライド作成ならコレ！Markdown➡Googleスライド変換ツール「deck」の超具体活用フロー｜わたヤク](https://note.com/ai_biostat/n/n3342f8efd06d)【note（ノート）】(2025年08月23日) --- > [!NOTE] この記事の要約（箇条書き） - `deck`は、MarkdownからGoogleスライドを作成する無料ツールで、効率的なスライド作成を目指す。 - スライド作成のワークフローを「コンテンツ作成（Markdown）」と「デザイン（Googleスライド）」に明確に分割する。 - メリットとして、Markdownでのコンテンツ集中の実現、Googleスライドの直感的なデザイン管理、マークダウン修正時の自動反映、およびGoogleスライドの柔軟性（PPT/PDF変換、共有、テーマ再利用）が挙げられる。 - Googleスライドの「レイアウト」と「プレースホルダー」（タイトル、サブタイトル、本文、画像）がデザインの核となる。 - マークダウンの見出しレベル（`#`、`##`）がプレースホルダーにマッピングされ、通常の文章は本文プレースホルダーに流し込まれる。 - スライドはマークダウンの`---`で区切り、`<!-- {\\"layout\\": \\"レイアウト名\ > [!NOTE] 要約おわり ---  ## 【徹底解説】生成AI×スライド作成ならコレ！Markdown➡Googleスライド変換ツール「deck」の超具体活用フロー [わたヤク](https://note.com/ai_biostat) ## はじめに この記事で紹介する『deck』は - スライド作成を **効率化したい** - これまでのスライド作成AIツールが **しっくりきてない** - 既にChatGPTなどの生成AIに課金していて、スライド作成用ツールには **課金したくない** そんな方に役立つツール。 最近はAIスライド生成ツール（Genspark、Felo、Manus、Gammaなど）がたくさん出ていますが、スライド資料を作成するのは想像以上に高度で、 **AIにお任せで満足いくレベルのスライドを作るのはなかなか難しい。** なぜなら **プレゼンの目的って単なる「情報共有」ではなく「心を動かすメッセージを届ける」** ことですよね。 AIツールで綺麗なデザインのスライドがポン出しできるようになったとしても、この **「刺さる」メッセ―ジを届けるのはなかなか難しい** 。 **プレゼン資料づくりの「こだわり」は残しつつ、AIで効率化できるツール** はないのだろうか。 そんな時に見つけたのが **『deck』** です。 --- ## deckとは？特徴とメリット deckはひと言でいうと **『マークダウンからGoogleスライドを作成する』** ツール（ [公式ページ](https://github.com/k1LoW/deck) ）。 最大の特徴は - **コンテンツ作成 ➡ マークダウン** - **デザインの作り込み ➡ Googleスライド** に作業フローを分割していること。 これによって **爆速コンテンツ作成＆直感的なデザインが可能** になります。 具体的にメリットを挙げると - マークダウンで書ける** 👉** コンテンツ作りに全集中できる** 👉** 好きなエディタで書ける - スライドデザインをGoogleスライド側で管理 👉直感的な設定が可能 👉設定したレイアウトが資産になる - マークダウンを修正すればGoogleスライドに反映される** 👉** 一度スライド化してからスライド側で最終調整する煩雑さが解決 そのほか、Googleスライドならではの強みとして - PowerPointやPDFに変換できる - URLで共有できる - 設定したテーマを使いまわせる などスライドを作った後の **柔軟性が高い** のもメリット。 しかも **無料** 。 ### 他のスライド作成ツールとの違い deck同様マークダウンからスライドを作成するツールに **Marp** があります。 Marpでは👇のようにCSSを書いてスライドデザインをカスタマイズします。  CSSでデザインを設定するのは整然としたデザイン作りには向いてる一方で、プログラミングに慣れてない方にとってハードルが高い。 一方、 **deckはGoogleスライドの画面上でポチポチとデザイン設定できる点で非常に直感的で簡単** です。 --- ここからは実践編: Part1. スライドのデザイン設定方法 Part2. deckの必須ルール Part3. deckの使い方 の順番で進めます。 ## 実践編Part1. デザインはGoogleスライドの「レイアウト」が命 deckではスライドのデザインをGoogleスライドの「レイアウト」で設定します。 これだけは押さえたいレイアウト設定の方法は 1. **レイアウト設定方法** 2. **プレースホルダ―の使い方** 3. **コンテンツ配置ルール** の3つ。画像付きで詳細に解説します。 --- ### 1\. レイアウト設定方法 「表示 > テーマ作成ツール」もしくは「スライド > テーマを編集」からレイアウトを編集できます。  スライド全体で1つのテーマと、それに付随した複数のレイアウトが存在します。 **各レイアウトには固有の名前がついている** ことを確認しましょう（名前は自由に変更可能）。  マークダウンで書いたコンテンツをスライドにする時はこのレイアウト名を指定します。（後述）。 --- ### 2\. プレースホルダ―の使い方 プレースホルダとは、テキストをスライドの「決まった場所」に入れるための「仮の箱」です。 レイアウト内にあらかじめ置いておくことで、タイトル・サブタイトル・画像などの要素を決まった書式・位置で簡単に入れられます。 deckでは **3つのプレースホルダ** を使ってマークダウンから挿入します。 - **タイトル** - **サブタイトル** - **本文**  また、画像のプレースホルダも設定することができます。  好みのレイアウトに合わせてプレースホルダーを配置しましょう。 --- ### 3．コンテンツ配置ルール マークダウンに書いた文章は以下のルールでプレースホルダに流し込まれます。 1番高い見出しレベル：タイトルのプレースホルダ 2番目に高い見出しレベル：サブタイトルのプレースホルダ 普通の文章（段落）：本文のプレースホルダ 例えば、次のようなレイアウトを使った場合  マークダウンの記述は👇のようにスライドに反映されます。  左：マークダウン、右：反映されたスライド 例のように同じレベルに複数の文章が存在している場合、より **高い位置のプレースホルダーから先に入る** 仕様です。 --- ## 実践編Part2. まずココだけ押さえて！deckの重要ルール ### 1\. スライドの区切り **マークダウンの『---』（行頭から3つ以上連続するハイフン）でスライドを区切り** ます。  --- ### 2\. レイアウトの指定 『---』区切られた各スライド内に👇のコードを加えることでスライドのレイアウトを指定できます。 ```rust <!-- {"layout": "レイアウト名"} --> ```  なので私の場合は以下の流れでスライドを作成をします。 1. **使いたいレイアウトをイメージ** 2. **レイアウトのプレースホルダーに沿ってマークダウンを記述** 3. **Googleスライドで設定したレイアウト名を指定** レイアウト名はコピペで指定しましょう。 現在のプレゼンテーション内にある **レイアウト一覧を確認** するには以下のコマンドを使います。 ```rust deck ls-layouts deck.md ```  --- ## 実践編Part3. deckの使い方を具体的に解説 deckの具体的な使い方について解説していきます。 まずdeckのインストールと初期設定が済んでいない方は [こちらの記事](https://note.com/ai_biostat/n/nb4fc52685645) で解説しているのでご参照ください。 ### 1\. deckはじめの一歩 deckはターミナルからdeck 〇〇と入力して使います。 私はVSCodeやCursor上のターミナルから使っています。  --- ### 2\. スライドの新規作成 好きなディレクトリに移動して\`deck new ファイル名.md\`を実行しましょう。 ```javascript deck new deck.md ``` deck.md ファイルが無ければ新規作成されます（フロントマターにpresentationIDが自動挿入される）。  このときGoogleスライド側にも新しいプレゼンテーションが作成されます。 GoogleスライドのURLが以下のような場合https://docs.google.com/presentation/d/\*\*\*\*\*\*\*\*\*/  \*\*\*\*\*\*\*\*\*がpresentationIDとしてマークダウンファイルと紐づきます。 **テーマを流用してスライド新規作成** スタイルテンプレート用のものを１つ作ってそれを流用するのがおすすめ。 \`--from\`を使うことで既存のスライドのIDを指定してテーマを流用できます。 ```javascript deck new --from ここにテーマを流用したいプレゼンテーションのIDを入れる deck.md ``` **スライドを開く** \`deck open ファイル名.md\`で作成途中のスライドをブラウザで表示できます。 ```rust deck open deck.md ``` もちろんGoogleスライドのプレゼンテーション一覧から選択して開いてもOK。  --- ### 3\. マークダウン➡Googleスライドの反映 **手動で反映** マークダウンファイルの内容をGoogleスライドに反映させるには\`deck apply ファイル名.md\`を使います。 ```rust deck apply deck.md ``` **リアルタイム反映** これはすごく便利な機能で、以下のコマンドを1回実行しておけば後はマークダウンの変更を自動検知してスライドに反映させてくれます。 ```rust deck apply --watch deck.md ```  --- ### 基本的な使いかたの流れ **① deck new deck.md でマークダウンファイル作成 ② deck apply --watch deck.md を実行しマークダウンファイルを編集 ③ 適宜Googleスライドを確認して位置調整など手直し** Googleスライド側でテーマをしっかり作り込んでおけば **基本的に「マークダウン」と「Googleスライドのテーマ」の編集だけでOK** 。 --- ## 知っておくと役立つルール集 実践編は一通り完了しました。 ここからは知っておくと役立つdeckのルールについて説明します。 **マークダウンの記法** 以下のマークダウンの記法がスライドに反映できます。 ```rust ● 太字 ( **bold** ) ● 斜体 ( *italic* __italic__ ) ● 箇条書き ( - * ) ● 順序付き箇条書き ( 1. 1) ) ● 文字列リンク ( [Link](https://example.com) ) ● URLリンク ( <https://example.com> ) ● コード ( \`code\` ) ● 改行 <br> (for newline) ● 画像挿入 ( ) ● 引用文 ( > block quote ) ● 表 (GitHub Flavored Markdown tables) | Header 1 | Header 2 | Header 3 | |----------|----------|----------| | Cell 1 | **Bold** | \`code\` | | Cell 2 | *Italic* | Normal | ● インラインHTMLタグ (e.g., <mark>, <small>, <kbd>, <cite>, <q>, <span>, <u>, <s>, <sub>, <sup>, <var>, <samp>, <data>, <dfn>, <time>, <abbr>) ``` 特に画像と表はよく使いますが、無理に書き方を覚える必要はありません。 私はいつもAIに「これをマークダウン形式の表／画像にして」とお願いしています。 **※補足：表 (table) や引用 (blockquote) は割り当てるプレースホルダーが無いため手動で位置調整が必要。** --- ### スライド設定機能 「---」で区切られた各スライド内に、HTML形式のコメント (<!-- -->) を入れることで以下のスライド設定ができます。 - **layout: レイアウトの指定** - **freeze: このスライド内容を固定（変更が適用されない）** - **ignore: このスライドを生成しない** - **skip: このスライドを非表示** ```rust <!-- {"layout": "title"} --> <!-- {"freeze": true} --> <!-- {"ignore": true} --> <!-- {"skip": true} --> # 以下のようにまとめて書くこともできる <!-- {"layout":"title","freeze":true,"ignore":true,"skip":true} --> ``` --- ### スピーカーノート **<!-- -->を使ってスピーカーノートを追加** できます。 これ地味に便利です。 ```rust <!-- ここに入れた文章スピーカーノートになる --> ``` ページ設定と書き方が似ているので混同しないようにしましょう。 --- ### 画像挿入と配置ルール 画像を挿入するときはマークダウンに以下のように記述します。 ```rust  ※リモートファイルにも対応可 ``` 画像配置のTipsは以下のとおり - **画像プレースホルダ―をレイアウトに設定** することで好みの場所に配置できます。 - プレースホルダーが無くても画像は挿入できますが、 **配置は手動で調整** しましょう。 - **画像の位置はdeck applyで上書きしても維持** されます。 ※補足：手動で追加した図形もdeck applyで上書きしても維持されます。 --- ### インラインスタイルの設定 テーマの設定で **"style" という名前のレイアウトを作成すると、インライン要素の表示スタイルを定義できる** 特別な仕様が用意されてます。 ```python # 以下について"style"レイアウト装飾できる ● bold：太字 ● italic：斜体 ● link：リンク ● code：コード ● blockquote：ブロック引用 ● HTML element names：インラインHTML (例: <cite> <q>など) ```  --- ### プレースホルダーが足りない場合 マークダウンに書いた内容に対応するレベルのプレースホルダーが存在しない場合、そのテキストはスライドに表示されません。 例えば、以下のようなレイアウトを使用した場合  サブタイトルと本文は2つまでしかプレースホルダーに設定されていないため、3つめのサブタイトルと本文は表示されません。  --- ### 改行ルール デフォルトではマークダウン中の改行はスライドにされません。 マークダウンのフロントマターにbreaks: trueを追加することで本文中の改行がスライドに反映されるようになります。 ```javascript --- breaks: true --- ``` その他、< br> タグを本文中に入れることで改行できます。 --- ## まとめ この記事では、deckの使い方を詳細に解説しました。 AIと連携する使い方も今後記事にする予定です。お楽しみに。 ### 最後に：𝕏, noteのフォローお願いします！ この記事が役に立ったと思っていただけたら幸いです。 𝕏では研究に役立つTipsやAI活用の最新情報を発信しています。よろしければ [こちらからフォロー](https://x.com/ai_biostat) いただけると嬉しいです。 noteは𝕏に収まりきらないコンテンツや𝕏で反応が良かったものをより詳細に発信しています。「スキ」ボタン、フォローいただけると励みになります。 --- ## 参考資料 以下を参考にさせていただきました。 - [公式Githubページ](https://github.com/k1LoW/deck) - deckのコミッターである [songmuさんの記事](https://songmu.jp/riji/entry/2025-08-16-k1low-deck.html) [**k1LoW/deck のコミッターになった | おそらくはそれさえも平凡な日々** *7月頭に技術支援先でプレゼンをする機会があり、いつもの僕の雑なHTMLプレゼンではなくて、ちゃんとしたプレゼンフォーマ* *songmu.jp*](https://songmu.jp/riji/entry/2025-08-16-k1low-deck.html) --- 【徹底解説】生成AI×スライド作成ならコレ！Markdown➡Googleスライド変換ツール「deck」の超具体活用フロー｜わたヤク