wordpress/Adobe Animate CCなどweb技術やブログ運用に関する話をしていきます!検索エンジン最適化に関する実験に関する情報も!
⇒ 本ブログの詳細/連絡先はコチラ!
web技術TOP WordPress アクセスアップ Adobe Animate CC 便利ソフト/サービス紹介 効率化
  1. ホーム
  2. 〇ブログ/web技術
  3. 便利ソフト/サービス紹介
  4. draw.ioがスゴイ!Webで簡単に説明図が作れちゃう!無料なのにパワポよりも圧倒的に楽です!
■注目記事一覧

高校数学 教科書用シミュレーターの制作に携わりました!!

画像素材サイト「写真AC」が超お得でおすすめです!

エックスサーバーが凄すぎる!高速レスポンスを誇る高品質サーバー!

ブログ記事数500突破!開設から2年3ヵ月のアクセス数変動を振り返ってみた!

[Adobe Animate CC使い方講座] まずはFlashからの変遷から解説!

複数専門ブログと雑記ブログ、両方のいいとこ取りの形態/両立を技術的に実現してみました!

Adobe Animate CC(旧FLASH)が凄い!技術者にこそ是非!
 
全テーマ共通記事一覧

draw.ioがスゴイ!Webで簡単に説明図が作れちゃう!無料なのにパワポよりも圧倒的に楽です!

パワーポイントで説明図など書いていませんか?

皆様、説明図をPC上で書きたいときにはどうしていますか?ビジネスでもブログなどでも、簡単に説明図を書きたいことがあると思います。

そんな時よく使われるのがパワーポイントやエクセルの図形機能だと思います。この図形機能を駆使すれば、一応作りたい図を作成することが出来ます。しかし、とても効率的とはいえないと思います。パワーポイントでもその他そのソフトでも、図形を追加するだけで複数ステップの操作が必要だったりで大変です。たくさん図形が必要になった場合は、同じような操作を何回もしなければいけなかったり大変です。

もっと気軽に、一瞬で頭のなかにあるイメージを描けたら・・・素晴らしいですよね。そんな夢のようなソフトが、web上で無料で使えちゃうんです!それがこのdraw.ioというソフトです!本ブログでも、いろんなところの説明図を作るにに使わせてもらっています。超オススメなソフトなので、ここでご紹介させて頂きます!

↓説明図の例。こんな感じの図を簡単に作れたら、嬉しいですよね。

draw.ioはweb上で使える説明図/フロー図作成ソフト。でも、その機能は普通のソフトを凌駕しています!

まずdraw.ioのソフトですが、下図のような構成になっています。真ん中にステージがあり、右側に追加できる図形の一覧が、そして左側にはその図形の書式を調整するパネルが表示されています。基本はこれだけの画面です。

操作はパワーポイントなどと同じです。真ん中のステージで図形を追加したり、移動したりして、説明図を作っていきます。始めて使う人でも何一つ問題なく、直感的に使えるようになっています。

draw.ioなら、ワンクリックで図形が追加出来る!メチャクチャ楽!

では、何がdraw.ioがすごいのかというと、その操作性です。作れるものはパワーポイントなどとほぼ同じなのですが、その操作性がめちゃくちゃ良いんです!まず、一番に伝えたいのが図形の追加操作の楽さです。

図形の追加、パワーポイントだと追加タブから目的の図形を選んで貼り付けなど大変ですよね。とくに多くの図形を作成したい場合は、何度もその操作が必要になり、大変です。ソレに比べ、draw.ioは簡単です。「追加したい図形をクリックするだけ」
です!これだけで、真ん中のステージ上に図形が貼り付け出来ちゃうんです!もちろん追加した図形は位置を変えたり、大きさを変えたり自由自在です。この操作が本当にワンクリックで、メチャクチャ快適なんです!

↓図形を追加している様子。クリックするごとに、図形が追加されていきます。

しかも図形がメチャクチャ豊富!自分で画像を追加することもできちゃいます!神!

draw.ioはこのように、めちゃくちゃ簡単に図形を追加できます。そして、その図形の数が本当に豊富なんです。下図がその一例のPCに関するクリップアートです。このようなアートがカテゴリごとにあります。また、Googleマークなど、最新のビジネスに関連したマークなども揃っておりますので、必要なアイコンで困ることは少ないと思います。

それでも、アイコンがない場合も困ることは有りません。自分の好きな画像をドラッグすると、登録できちゃうんです!登録した画像は、上で説明したように、クリックすればステージ上に貼り付けられます。無限の拡張性を持っているわけですね!

draw.ioは、線が死ぬほど引きやすい!この機能がヤバすぎる!

説明図で一番悩ましいのが線を引くことです。パワーポイントやイラストレーターなんかで無理やり矢印を作ってりもできます。ただ、位置を調整するのが大変だったり、毎回矢印の作成をしなければいけなかったり…ちょっと大変ですよね。もっと気軽に矢印が引けたら良いのに…と毎回思っていました。

そのような思いを叶えてくれるのがこのdraw.ioです!draw.ioをつかうと、なんと簡単なドラッグ操作だけで、オブジェクト間で線が引けてしまうのです!その様子をアニメーションで録画したのが下図です。わかりますでしょうか。特殊な操作はしていません。ただ、左側のオブジェクトをクリックして選択し、そこから右側のオブジェクトまでドラッグ操作しただけです。たったこれだけで、こんなに綺麗に線が引けてしまうんです!本当に素晴らしいの一言です。まさに、説明図を書くために特化したソフトならではですね。

draw.ioなら、図形(オブジェクト)、線の下に説明文を入れるのも楽々!文字をただ入力するだけ!

もう一つ、パワーポイントなどで絵を作る時に面倒なのが、オブジェクト(図)への説明文追加です。このような場合、パワーポイントでは右クリックをして、「テキストの追加」を選択する必要があります。簡単といえば簡単ですが、毎回この操作をするのが面倒です。また、テキストの位置調整が大変なんですよね。

それに対して、draw.ioはメチャクチャ簡単です。1)テキストを追加したいオブジェクト(図)を選んで、2)そのままテキストを入力すればいいだけです。メチャクチャ簡単です。下図が実際の操作例です。本当に図形をクリックして選択して、テキストを打っているただけ。これだけで図形に紐づくテキストが作れちゃいます!もちろん、図形を移動すると、テキストも移動できますよ!

draw.ioで作った説明図は、色んな形式で保存できます。もちろんローカルPCにも保存できます!

このように、draw.ioならメチャクチャ簡単に説明図が作れちゃいます。もちろん、メチャクチャ凝ったデザインにしたりは出来ませんが、ビジネスで使う説明資料レベルであれば十分すぎるぐらい使えます。必要最低限の機能だけ備え、高速に説明図が作れるように最適化したソフトが、このdraw.ioというわけです。

このdraw.io、web上で使うソフトですが、もちろんデータを保存できるようになっています。しかも保存の仕方も、下図のようにたくさんの中から選べます。もちろん、ローカルに保存もできますが、Google Driveなどのwebサービスに直接保存したりなんかも可能になっています。

また、下図のように画像でエクスポートする機能もあります。形式も、PNGからJPEG、PDFなど各種ファイルフォーマットを選択できます。これだけあれば十分すぎますよね!簡単にパワーポイントやワード、もしくはブログやツイッターなどに貼り付けられます。

まとめ:draw.ioは説明図作成に特化した素晴らしいソフト!ビジネス用途にもブログ/ツイッター貼付け用途でも、なんでも使えちゃう!

最後にまとめです。ビジネス用途でも、ブログなどでも説明図を書きたい時がありますよね。文章だけでは分かりにくく、説明図を書きたい場合とか。本格的なデザインなんて不要で、とにかく簡単に説明図を書きたいのです。

そんな時、多くの場合、パワーポイント等を使うことになると思います。それでもいいですが、パワーポイントは細かいところで冗長的な操作が必要であり、なんだかんだで時間が掛かってしまいます。図形の挿入とか、矢印の挿入とか、色んなとこで複数ステップの操作が必要になってしまいます。

ソレに比べ、draw.ioは神のような操作性を持っています。「説明図/フロー図を作ることに特化」し、簡単な操作で図形や矢印、説明文などが追加できるようになっています。ほとんどの操作がワンステップで済みます。なので、本当に簡単に書きたい説明図ができてしまいます!これなら気軽に使えちゃいます!

さらに、無料で使えてしまいます!さらに、web上のサービスなので、OSの種別は関係ありません!どこからでも使えてしまいます。

ということで、本当にdraw.ioはオススメのwebソフトです!ビジネス用途にもブログ/ツイッター貼付け用途でも、何にでも使えます。本ブログでも多用して使っています。しかも無料です。一度試しに使ってみて下さい!

draw.io:https://www.draw.io/

↓こんな図も一瞬で書けてしまいます。すごく楽です!

 
 


⇒「便利ソフト/サービス紹介」カテゴリ記事一覧

その他関連カテゴリ




お気軽にコメントお願いします!

Your email address will not be published. Required fields are marked *