Whimsical をノート代わりにした話

Keiichi Inoue
Keiichi Inoue’s Blog
5 min readDec 6, 2019

--

トレタ Advent Calendar 2019 の 6日目の記事です。子どもの風邪看病シリーズが終わったと思ったら、久しぶりに自分が風邪をひきました。はい。

ご存知の方も多いと思いますが、個人的に今年一番活躍した Whimsical というアプリについて書きます。

Whimsical とは

Whimsical は、フローチャート (Flowcharts) 、ワイヤーフレーム(Wireframes)、付箋メモ (Sticky Notes)、マインドマップ (Mind Maps) をオンラインで作成できるウェブアプリです。Chrome と Firefox で動きます。

操作感は Keynote や Power Point と似ていて、パーツやテキストをキャンバスに配置してページを作成していきます。共有機能も充実していて、特定のメンバーに共有したり、Dropbox Paper のように共同編集したり、オブジェクト単位でコメントをつける機能もあります。

フローチャートの例
ワイヤーフレームもかんたん

なぜ使うようになったか

きっかけは、今年の10月から新しいプロダクトのPMを担当するようになったこと。QAエンジニアだった頃に比べて、様々な情報集めて整理したり、思考を整理してアウトプットする機会が格段に増えました。

自分の思考を整理するときの方法として、これまではメモアプリ(最近は Bear とか Dropbox Paper)にテキストで書き出して整理していました。この方法で特に困っていなかったのですが、雑然とした情報を扱う機会が増えるにつけ、絵を描きながら思考を整理したり、整理したものを簡潔にビジュアルで伝えたいケースが増えて、どういうツールを使おう悩むようになりました。

紙のノートを何度か試したものの、紙の管理が面倒なのと、書いた物の検索性の悪さが気になって続かず。社内のデザイナーに以前教えてもらった Whimsical のことを思い出して試してみたところ、すっと定着しました。

Whimsical のよいところ

ノートの代わりとして

Whismical では、フローチャート、ワイヤーフレーム、付箋メモ、マインドマップを作成できます。自分の場合、紙とペンでノートに書きたくなるのはだいたいこれくらいなので、ノート代替の要件を満たせました。今年9月のアップデートでは、1つのページにフローチャートと付箋メモなどを置くこともできるようになり柔軟性が上がりました。

実際、自分が現在担当しているプロダクトでも、付箋メモで集めた情報を整理して共有したり、フローチャートを使ってサービス構成図を書いたり活躍しています。

プロトタイプ作成時には、プロダクトのワイヤーフレームを Whimsical で書いて、デザイナーに共有しディスカッションするのにも利用しました。

アイコンが豊富

絵心がない人間としては、四角形や線のようなオブジェクトだけでなく、アイコンが豊富にあるのもありがたいところ。テキスト検索もできて探しやすいです。

トレタで利用しがちな、レストランや食べ物に関連するアイコンもあっていいですね。

ショートカット完備

キーボードショートカットが、図形やコネクターなど主要なオブジェクト全てに設定されているのがよいところです。使い方を覚えたら格段にメモのスピードが上がりました。

また、OS標準のショートカットにも準拠していて、オプジェクトのコピー & ペーストが ⌘C / ⌘V でできるのも馴染みやすいと思います。

小気味好い操作感

オブジェクトのペーストするときの操作が小粋です。ペーストする直前に行ったアクションをベースに、期待している位置にペーストされます。こういう細かい心配りをしてくれると、ペーストした後の位置調整の手間が減り効率上げてくれます。気が利いている。

さいごに

Whimsical は紙に絵を描くような使い心地の良さで、個人的には今後も活躍しそうです。ユースケースによって感想が変わってくると思いますが、無料でトライアルもできるので、お困りの方は一度試してみても。

また、多機能なアプリでありながら、「このように動いちゃったりして」という try から新しい機能を徐々に発見していくという体験がよくできていて、昨年の UI Crunch のニンテンドーさんの発表を思い出しました。

ちなみに息子はサンタさんにスーパーマリオメーカー2をお願いするそうです。父は、ストレッチャーズやります。

--

--