フローチャートなどが簡単に作れるwhimsical

はじめに

本記事ではフローチャートと図が簡単に作れるwhimsicalというツールをご紹介します！

whimsicalは簡単に素早くフローチャートが作れるツールです。

Product Huntで2月15日に「Product of the Day」として紹介されています。
Whimsical on Product Hunt

今回の記事では、そんなwhimsicalを少し深掘りし、どういったことが出来るのか、また、実際にwhimsicalを試してみた感想などをご紹介します。

whimsicalとは

whimsicalは簡単にフローチャートと図が作れるツールです。
ポストイット風のノートやワイヤーフレーム、マインドマップなども作れるようになる予定ですが、現在はフローチャートと図を作る機能がサポートされています。

ワイヤーフレームに関しては、こちらの記事でも軽くご紹介しているので、ご興味ある方はぜひご覧ください。
【デザイン】ホームページの作り方:手順と必要な知識その１

whimsicalの紹介ビデオがあるので、興味がある方はぜひこちらをご覧ください！

ビデオを見ると、確かにとてもシンプルなインターフェースで、ビデオや画像の埋め込みなども出来るみたいです。

ディレクターの方やプレゼン作りなどにはもちろん、デザインのフィードバックなどにも利用できるかもしれません。

whimsicalを使ってみた

では、早速whimsicalを使ってみたいと思います。

whimsicalは普通に名前やメールなどを入力して登録することもできますし、Googleアカウントでもサインアップすることができます。

また、料金プランはこちらです。

４プロジェクトまでは無料で作れるみたいなので、気軽にスタートすることができます。

まずwhimsicalに登録すると、このようなインターフェースが出てきます。

初心者用に「getting started」というものがあるので、そちらを開いていきます。

こちらのチュートリアルでは、フローチャートの作り方、動かし方、矢印の入れ方、ズームの仕方、形を前後に持ってくる方法など基本的な操作を教えてくれます。

画面左側にチュートリアル、右側に実際に自分が操作して試すスペースがあるので、とてもスムーズに受けることができます。

Sketchを使っている私からすると、どのショートカットも非常に直感的で良いな、と思いました。

以下、ショートカットをまとめました。
– 長方形を作る (R)
– カンバスを移動する (スペースキー)
– 線を書く (L)
– ズーム (+ ズームイン/ – ズームあうと / 0 ズームのリセット)

ちなみにシェイプは長方形以外にも様々な形がありますので、必要に応じて使ってみてください。

今回は架空のサイト(bagelee)の構成のチャートを作ってみました。

出来上がったらいくつかの方法でエクスポートすることができます。

• 画像の共有リンクをコピーする
• 画像をダウンロードする
• 画像をコピーする
• 印刷する

今回作ったものは非常にシンプルではありますが、時間としては5分もかからずできてしまったので、とにかく早く綺麗なものが作れるな〜という印象です。

まとめ

以上、今回はwhimsicalを使って簡単なフローチャートが作れるツールとその使用方法を簡単にお伝えしました。

とにかく早いというのと、操作がとても簡単なのでいろんな場面で活躍してくれそうだなー、と感じました。

ぜひ興味がある方は一度試してみてください！