てくてくテック

【Notion】whimsicalを触ってみた!

さて、今回はnotionについてです。

最近公式の方が愛用しているwhimsicalというサービスと連携できるようにしたで!

って言っていたので、ちょっと触ってみようと思います!

なので、notionと銘打っていますが...ほとんど外部サービスについてです...w

Whimsicalとは?

さて、それでは今回連携されるようになったWhimsicalとは一体何でしょうか...?

whimsicalは一言で言うと作図ツールです。

Whimsicalを使うことで、様々な場面で使用するフロー図などを作成するこができます!

例えば以下のようなものが作れたりします。

Flowchart (一般的なフロー図)

始点、終点があって、矢印でいい感じにそれぞれのノードを繋いだりできます。

公式のデフォルトで用意されている例

文字が小さいですが、もちろん簡単に拡大縮小できます。

さらに、矢印を動かしたり、図形を追加したり...と基本的なことは十分できるようになっています。

僕自身、プログラマーとしてはあまり頻繁に使うわけではないですが、学生時代はパワポばっかり使ってましたね〜。

周りではdraw.ioとかが便利だぞーっては聞きますね。

でも無料で使えてnotionでも使えるなら今後使う機会も出てくるかもしれないので使ってみようかなぁ...と。

こういうフロー図に関してはプログラムのアルゴリズムの説明だけでなく、一般的な業務の流れなどもフロー化して理解の助けにできたりするものです。

ビジネスマンがこう言ったツール一つ使えるだけでも結構いいのかもですね。

Sticky note (看板ボード)

こちらはnotionにもありますが、看板ボード(notionではBoard)もあります。

看板ボードのようなもの

スタックで大枠(画像では二つ作っています)をさくせいすることができ、さらにスタックの左上にある+ボタンでタスクの追加ができます。

スタックごと、タスクだけ、移動させるといったことがとても容易で、グラフィカルにちょっとした会議などでたくさんの意見を出し合って討論する場合等は役に立ちそうな印象です。

もちろん、notion自体でも使えるのですが、グラフィカルなUIの操作感、自由度はこちらの方がやりやすさを感じました。

例えばnotionでは横並びになってしまいます。

notionのボードはずっと横並び

が、このwhimsicalでは上下にも並べることが可能です。

Wire Frame (スマホの画面デモなど)

次はワイヤーフレームです。

これはスマホの画面を模倣したデモ画面を交えて議論したい場合などに有効ですね。

以下は僕が初見で1分程度で作成したやつです。

最初のフローチャートと組み合わせてこんな使い方ができそうですね。

スマホのボタンが押された時にされる処理をフロー的に表示してみた。

これはどちらかと言うとデザイナーさん向けの機能かなと。

Mindmap (マインドマップ)

そして、最後にマインドマップです。

マインドマップの作り方とか全然知らないからあれですが、自分のやりたいことの分析とか?

そう言う奴に使うやつですかね。

見た目だとこんな感じです。

たかぽんのマインドマップ?(雑)

ちょっとマインドマップ書きたくなってきた...!w

そして...

機能としては以上なんですが...

特徴の一つとして、上記で説明したものは全て同じ黒板の上に書きました。

え?

どういうことかって?

こういうことです。

すごく縮小した状態

こんな感じです。

このように、とても巨大な黒板があって、その上で上記で説明した4つの機能を使いながら色々作成したりしていくといった使い方になるようです。

ただ...え?たくさんになってきたら大変ですよね...?w

そこでこの大きな黒板(多分ほぼ無限大なのかな...?)を複数枚作ることももちろんできます。

上がさっきので、したのは別のやつ

ただし、この大きな黒板はフリープランだと4つまでしか作れません。

上限に達するとこれ以上作れなくなる

つまり、プランによって作れる数が変わってくる感じですね。

notionにも出してみる

さて、それではnotionに連携してみます!

whimsicalの好きなボードで右上の飛行機をクリックします。

そして、GetShareableLinkを選択。

そして、リンクをコピーします。

また、EnablePublicLinkAccessがOFF(色が黒)の場合はONにします。

(ONにするとリンクを知っている人は誰でもアクセスできるようになります)

そして、次はnotionの方で、"/whi"と検索してwhimscialを開きます。

開いたら、リンクを入力できるので、そこへ先ほどコピーしたリンクを貼り付けます。

そして少し待つと...?

できました。

右下の-, +ボタンもしくはピンチイン、ピンチアウトで拡大縮小、もちろん左右の移動も可能です。

チームでの使用について

QAをあさってたらこんなの見つけました。

チームで使用する場合、リアルタイムの同期ができるみたいですね!

チームワークスペースに移動しても個人用との切り替えはできるらしいです。

personalプランの成果物は誰とでも(whimsicalをしていない人でも)シェアすることはできる(シェアされた側は編集不可)ので、デザイナーがちょっとアイデアを見せたくて共有するぐらいならParsonalプランで良さそうですね。

おいくらまんえん?

らしいです。

年額だと少し割引が効いて年$120で、毎月$10, 月ごとだと1年間で$144で、毎月$12になるようです。(notionより全然高いですね...)

おまけ

そしてあとから気付いたんですが...

これボード(黒板)削除したら新しいの作れるのかな?って思ったらそんなに甘くありませんでしたw

デフォルト+自作ボード4でfree boardはゼロに
削除!
free boardは4に...ならない!w

作成できるのが4つまでらしいですw

一度作ったら消せねぇぞ?と。

ただ、消しても大丈夫です。

復元はできるようです。

画面上部のfree boards辺りにカーソルを合わせる

上記画像の"from trash"を選択すると以下の画面になり...

選択すると"Restore"が出てくる

restoreすることで元に戻せます。

まぁ、とりあえず4つの黒板だけで遊べよってかんじなんですかね。

以下のQAにも書いてありました...!

まとめ

今回はnotionで使えるようになったwhimsicalについて調べてみました!

そのうちフローが必要になったら触ってみようかなぁ...と...

他で似たサービスで有名どころとして、draw.ioがあり、僕は使ったことがないんですが、こっちの方が後発なだけに、UIとかは"今っぽい”です。

デザイン性重視してるなぁって感じますね!

今度暇があったらdraw.ioも触ってみたいですね...!

notionを使っている皆さんもよかったらwhimsical, 触ってみてくださいね!

それでわ!

モバイルバージョンを終了