Help us understand the problem. What is going on with this article?

[ Markdownでスライド作成 ] 5種類くらいツールを試してみた結果

2019/12 追記

LTのスライド作成に時間をかけたくない
でリンクをいただいたので調べると、すごくよい機能があるみたいです。!!

Marp for VSCodeというのがあるみたいで、VSCodeを使っている人はこれでいいのではないでしょうか。

2018/08 追記

未だにいいねされるので(2017年初期作成)、
最近の勉強会でよく使われているスライド作成ツールはマークダウンではありませんが
https://slides.com/ 圧倒的にこれだと思います。

Screenshot from 2018-10-25 12-35-55.png

Web上で簡単にスライド作れる系のやつです。

Markdown記法でスライドを作ろう!

内容

  • 簡単な発表に使えるツールのまとめ
  • Markdown記法 + スライド作成!

心の声(思ってないですよ!)

  • 最近Markdown記法使いすぎて、PPTの作成めんどくさい
  • PPTを作らずboostnoteでの発表を本気で考えた
  • 忙しくて…レイアウトにこだわりたくない…簡単な発表にしたいけどどうすればいいの
  • 自己紹介発表めんどう…

試したツール一覧

  • reveal.js
  • remark.js
  • Marp
  • Swipe
  • Qiita

ツールごとのイメージ

こんな感じのマークダウンを書いた結果がこちら。

sample.md
[Title]
===
###### Created by Yuki ( [@ykhirao](http://qiita.com/ykhirao) )
  • reveal.js
    スクリーンショット 2017-02-24 15.42.13.png

  • remark.js
    スクリーンショット 2017-02-24 15.42.20.png

  • Marp
    スクリーンショット 2017-02-24 15.42.25.png

  • Swipe
    スクリーンショット 2017-02-24 15.42.33.png

  • Qiita
    スクリーンショット 2017-02-24 15.42.40.png

次のサンプル

次はこんな感じのマークダウンを書きました。

sample.md
# How to write (1)

# # h1 test テスト
## ## h2 test テスト
### ### h3 test テスト
#### #### h4 test テスト
  • reveal.js
    スクリーンショット 2017-02-24 15.48.47.png

  • remark.js
    スクリーンショット 2017-02-24 15.48.53.png

  • Marp
    スクリーンショット 2017-02-24 15.48.58.png

  • Swipe
    スクリーンショット 2017-02-24 15.49.03.png

  • Qiita
    スクリーンショット 2017-02-24 15.49.07.png

その他ちょっと長めのmdファイルの結果のスライド

こちらのMarkDown記法で書いたファイルを微調整しつつ作ったスライド一覧がこちら!
どれもほとんどプレーンMarkDownですが、
CSSとかいじらなくても、ある程度整えてくれるものが多いです!

reveal.jsはこちら
remark.jsはこちら(pdf)
Marpはこちら(pdf)
Swipeはこちら
Qiitaはこちら

ツール詳細

reveal.js

GitHubからファイルをダウンロードしてきて、index.htmlに直接テキストを書いていく方式です。
何も変更加えなくても、かなり動きがかっこいいです!
スライドは水平方向だけじゃなくて垂直方向にも動いたりして、かっこいい。
[ --- ] この文字列が次のページ,
[ <<< ] こ文字列で垂直下ページへの区切りという設定追加は2行

remark.js

上記と同じくGitHubからダウンロードしてきて、htmlファイルをいじる感じです。ほんと何もしなくてもMDファイルだけに集中すればいい感じです。改ページは[ --- ]
ローカルだとうまくいってるのですが、GitHubページだとうまくいかないので、PDFでの公開です。情報求む。

Marp

こちらからダウンロードできる。
Electronで作られた、デスクトップアプリケーション。普通に使いやすい。
#に色ついたり、上下の余白とかが一番使いやすかった。

Swipe

Webで完結できるMD記法のスライド。
一度作成すると、ファイルがスライドごとに分割されてpdf化とmdファイルの取得ができない(?)ので、mdファイルの編集と保存管理はローカルでやるほうがいいかも。

Qiitaスライド

おなじみキータのスライドモード。限定共有にしてプレゼンすればいいと思った。
使いやすいけど、全画面とプレビュー画面の差が大きい。

まとめ

Marpが一番使いやすかったのと、reveal.jsがかっこよかったのでこの2つはおすすめ。
もちろん自分の用途にあったものをお使いください!

reveal.js remark.js Marp Swipe Qiita
改ページ 設定 --- --- *** *** ***
下線<hr> *** *** ? --- ---
縦スクロール 不可 不可 不可
独断と偏見のおすすめ ***** **** ***** *** ***
  • 縦スクロールは、はみ出した部分が見れるか見れないか
  • 操作感は若干違いあるので、一番気に入ったのを使ってください!

GitHubでwebページ公開しよう

皆様ご存知の通り、
GitHubの[ Master ]ブランチから [ gh-pages ]というブランチを切ったら、
https://[アカウント名].github.io/[リポジトリ名]/
で静的なWEBページ公開できるのでおすすめです!
上記URLだと、[リポジトリ名]直下のindex.htmlが読み込まれます!

最後に

  • Markdownに慣れてるなら、簡単にそれっぽいスライド作れるようになったキガスル
  • 1日でまとめた結果で間違ってる可能性高いので、何か誤情報あれば教えてください!
ykhirao
Web Developer For 3 years. PHP/Laravel && (React OR Vue.js)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away