https://tbpgr.hatenablog.com/entry/2016/02/16/225405

f:id:tbpg:20160216224802p:plain

画像編集関連で個人的に使っている6つのツールについてまとめます。

No	名前	説明
1	gviz	GraphvizをRubyのDSLでラップした有向グラフ描画ツール
2	draw.io	チャート、物理構成図、UML図、ワイヤーフレームなど様々な用途に対応したWebドローツール
3	Skitch	手軽で使いやすい画像編集ソフト
4	LICEcap	アニメーションGIF作成ツール
5	InVision	プロトタイピング、コラボレーション、ワークフロープラットフォーム
6	MindMup	共同編集可能なマインドマップ作成ツール

1. gviz

f:id:tbpg:20160216224836p:plain

gvizはGraphvizをRubyのDSLでラップした有向グラフ描画ツール。
グラフの情報をコードで管理できるのが利点。
履歴管理しやすいのと、変更コストが非常に低くなる。
以下、作者のmerborneさんによる記事。

Gvizの目次 - Rubyの世界からGraphvizの世界にこんにちは！ - hp12c

類似ツールとしてはJava製の PlanUMLがある。

Sample

# encoding: UTF-8
require 'gviz'

Graph do
  global overlap: false

  edge :Tools_gviz
  edge :Tools_drawIo
  edge :Tools_Skitch
  edge :Tools_LICEcap
  edge :Tools_InVision

  save(:gviz, :png)
end

f:id:tbpg:20160216224849p:plain

2. draw.io

f:id:tbpg:20160216224856p:plain

チャート、物理構成図、UML図、ワイヤーフレームなど様々な用途に対応したWebドローツール。
個人的にはアーキテクチャやワークフローの概念図、チャート図の作成に利用しています。（しはじめたばかり）

Cacooのようにリアルタイム同時編集はできないものの、操作感はこちらのほうが使いやすく感じました。
(Cacooよりも軽量で、オブジェクトを掴んだり移動したりする際のストレスが少なく感じる。
ただし、定性的なものなので裏付けはない)

draw.io

Sample

f:id:tbpg:20160216224902p:plain

3. Skitch

f:id:tbpg:20160216224922p:plain

ちょっとした画像加工に最適なツール。
画面キャプチャに囲み線をつけたり、切り取ったりといった操作がとても簡単でき、
他のアプリケーションとの連携もしやすい。

Mac版以外は2016/01/22にサポート終了。

evernote.com

Sample

f:id:tbpg:20160216224802p:plain

4. LICEcap

f:id:tbpg:20160216224945p:plain

アニメーションGIF作成ツール。
esa.ioの中の人が使っているという話をきいて使い始めたツール。

Sample

f:id:tbpg:20160216224951g:plain

5. InVision

f:id:tbpg:20160216225024p:plain

プロトタイピング、コラボレーション、ワークフロープラットフォーム。
ワイヤーフレームの作成、動作するモックアップの作成。
そしてWebベースで作成したモックにコメントをしたりなでUIを中心とした
ワークフローを支援するツール。
モックアップの作成自体はSketchなど他の専用ツールでおこなって、連携してもいい。

www.invisionapp.com

そもそもスケッチ、ワイヤーフレーム、モックアップってどう違うの？という方は以下のページが詳しいです。

photoshopvip.net