2018年2月26日

デザイン

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

目次

  1. はじめに
  2. whimsicalとは
  3. whimsicalを使ってみた
  4. まとめ

はじめに

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

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

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

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

whimsicalとは

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

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

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

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

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

whimsicalを使ってみた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

2

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP