スライド形式じゃないプレゼンツール「Breakfast」を使って自己紹介してみる

## はじめに

少し前に、かのAmazonが社内プレゼンでパワーポイントを禁止したという記事が話題になりましたよね。
https://news.livedoor.com/article/detail/17366490/

上記記事についてさわりだけ説明すると、
> Amazonが社内プレゼンにパワーポイントを使用することを禁止した。理由として、ビジュアルでの誤魔化しにより、提案の具体性が伝わらないことを挙げている。ジェフ・ベゾスはパワポの代替として、明確なストーリーとして構築された6ページャーのドキュメントでの提案を推奨している。

上記記事を読んで、今まで当たり前のようにプレゼン=スライド形式と考えられていたけど、本当にプレゼン手法として優れてるの？っていう疑問が生まれました。

で、パワーポイントの代替としてどんなツールがあるのか調べてみたら「Breakfast」というストーリー形式でのプレゼンツールを発見し、紹介したいなって思ったのがこの記事を書いた理由です。

## Breakfastってなんぞや
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/001683f4-5c43-a13d-386c-1f60063dd81d.png)
https://wowtools.jp/breakfast/

「Breakfast」について、公式の言葉を借りて説明すると、
>Breakfastでは紙芝居のようなスライド型ではなく、縦スクロール型の発表を採用。
話題の流れをページ単位に分断せず、一連の物語として伝えることに重点を置いています。

っていうことらしいです。
よくわからんので百聞は一見に如かずということで、実際のデモを置いときます。
https://wowtools.jp/breakfast/demo_sample/demo_01.html

webページみたいですよね。
スライドのように項目ごとに内容をぶった切るのではなく、全体を一つのストーリーとしてつなげることで、項目ごとの関係性を断絶させずに伝えることができる。みたいな感じですかね。

https://wowtools.jp/breakfast/story/
上記ページでストーリーについて説明されているので参照してみると「なるほど」って思えるかもしれません。

## インストール
前置きはこのくらいで、実際に使ってみます。

https://wowtools.jp/breakfast/
上記ページにアクセスし、画面右上の無料ダウンロードをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/65173f3c-2d91-837c-f858-d578b8d02250.png)

OSを選択すると利用規約が表示されるので「Agree」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/964da30c-dc08-b7de-0d64-cf68210b3052.png)
ダウンロードが始まります。

次に、ダウンロードしたインストーラーを起動して「Breakfast」をインストールしましょう。

##使い方
「Breakfast」を起動するとこんな感じの画面になってると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/6068bf03-1f26-ea05-3c3d-9f16b3321550.png)

ここから簡単な自己紹介を作ってきます。

###タイトルとテーマを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/423c13a8-3510-00c7-a094-0f5f235c3151.png)
画面の右ペインにあるタイトルに、ページタイトルを入力。
ついでにテーマも設定します。

###ページの中身を作ってく
下画像の黄色くマークしてある部分をクリックすると要素が追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/2f17fb27-53bd-b4f8-ee4d-464a746159a1.png)

次に、要素のスタイルを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/e733ecce-1650-c0a5-8ae6-7c7af4365ef7.png)
要素を選択すると右ペインに設定が表示されるので、お好みでいじってあげてください。
ちなみに背景色はテーマに依存します。
だいたい直感的にわかると思います。

あとはもう上記を繰り返すだけでストーリーを作れちゃいます。

追加できる要素について、いくつか紹介しておきます。
####画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/4f0d40c9-b58f-0017-e235-c269c7c2c167.png)
テキスト追加アイコンの横の画像アイコンをクリックすると追加できます。

ちなみに上記の動作画面はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/15388797-348b-b290-1652-e0517acd5dbc.png)
キャプションがいい感じに表示されます。

####ダイス
ダイスはあらかじめ指定しておいた文字列から、特定の一つをランダムで表示する要素です。
メンバー名をあらかじめ指定しておいて、ダイスで選ばれたメンバーに意見を求める。っていう使い方ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/8274e9e8-da2f-2748-d7b1-f1b6df9ab88d.png)

上記の動作画面はこんな感じです。
![screen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/e1de97b7-541b-5a30-879d-dc258752f1d3.gif)

「意見ある人いますか？」ってシチュエーションで大活躍すること間違いなしですね。

####ユニバース
こちらは言葉で説明するより見てもらったほうが早いです。
設定画面はこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/ab2a5715-1f01-4507-1036-1cd98a1ccc62.png)

動作画面はこちら
![screen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/21decbf0-104b-4956-9d0e-2c51eb6bf6a1.gif)
まさにユニバース。。
使いどころがわからんですがしゃれてますね。

他にも動画やタイマー等、いろんな要素がありますが割愛します。

####要素の配置
要素の中に要素を配置することができ、さらにグリッドを用いてレイアウトも指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/8a000133-6ef1-b6a1-e23e-7c879f3c26b1.png)
要素をドラッグして、追加したい要素の上に持ってくると、上画像のようにひとまとまりになります。

この状態で、要素全体をラップしている部分をクリックするとレイアウトを指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/d8c7585a-3ef2-c903-9eca-ec3c27ce0716.png)

横並びにしたり、格子状に並べたり、サポートされているレイアウトは多岐にわたります。いろいろ試してみてください。

## 完成したもの
そんなこんなで完成した自己紹介がこちらになります。
![screen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/fe6a3d8d-ec44-fbd2-4407-5f326186e1b3.gif)

このくらいのクオリティだと10分かからずできます。

できたファイルはgithubに置いてあります。
https://github.com/Anno328/SandBox/tree/master/SandBox
ちなみに「Breakfast」で作成したドキュメントは「Breakfast」でないと開けないです。
ただ、HTMLに書き出すことはできるので、そっちで運用したほうがいいかもしれません。

## 終わりに
スライドに窮屈に情報を詰め込むよりも、ストーリーで流れの一つとして情報を含ませられるのが個人的に便利だなって思いました。

また、対話的なプレゼンを作りやすいので、聴講者も飽きないんじゃないかって思います。

ちなみに現在ベータ版で商用利用不可なのでお気を付けください。