メインコンテンツへスキップ
見出し画像

記事からスライドを簡単に作れる制作環境をOSS公開したよ

    過去に書いた記事から、発表用のスライドを簡単に作れる制作環境「marp-slides-studio」を作り、OSSとして公開しました。

    記事のURLをClaude Codeに渡すと、内容を整理してスライドのたたき台を作ってくれます。

    あとは用意されているテーマやレイアウトから好みのものを選び、文章量や構成を調整していく形です。

    画像

    記事を書いたあとに、同じ内容を登壇資料や社内共有用の資料として再利用しやすくなったのが、自分にとって一番大きなポイントです。

    「記事を書く」「スライドにする」「別の場所で発表する」という流れを、以前より気軽に回せるようになりました。


    記事をスライドとして再利用したい

    LTや勉強会、社内共有などで話したい内容は、普段書いている記事をもとにすれば比較的すぐに用意できます。

    ただ、記事の内容をスライド向けに分割し、レイアウトや文字サイズ、配色などを1枚ずつ整えていくのは意外と大変です。

    画像

    話したい内容はすでにあるのに、見た目を調整する作業に時間を取られてしまうこともあります。

    そこで、記事からスライドへの変換と、見た目を整える作業をなるべく省力化するために作ったのが、今回の制作環境です。


    記事のURLからスライドを作れる

    スライドの作成には、Markdownからプレゼンテーション資料を生成できる「Marp」を使っています。

    Claude Codeに記事のURLを渡してスライド化を依頼すると、記事の内容を整理し、用意されたレイアウトに当てはめてくれます。

    ゼロから各ページを考えるのではなく、生成されたものを見ながら「ここは削る」「この説明はもう少し詳しくする」と調整していく流れです。

    画像


    レイアウトとテーマを用意

    スライドの雛形として、表紙や章扉、左右分割、比較、フロー図、コード表示など、19種類のレイアウトパターンを用意しています。

    内容に合ったレイアウトをClaude Code側で選択できるため、同じ形式のページばかりが続くのを避けられます。

    画像

    配色や雰囲気の異なる基本テーマを50種類用意しました。

    画像

    ビジネス向けの落ち着いたものから、LTや勉強会で使いやすいカジュアルなものまで、発表内容や場に合わせて選べます。

    テーマを一覧で確認するギャラリーと、作成中のスライドにテーマを適用して比較できるプレビュー機能も用意しています。

    画像


    詳しい技術解説はこちら

    テーマやレイアウトの設計、スライドの検査方法、Claude Codeに作業を任せるための仕組みなど、技術的な内容はZennに詳しくまとめています。

    記事をスライドとして再利用したい方や、MarpとClaude Codeを組み合わせた資料作成に興味がある方は、ぜひ試してみてください。

    画像


    ▼AI関連の記事は以下にまとめています


    あなたへのおすすめ