Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

画像編集関連で個人的に使っている6つのツールと使い分け

f:id:tbpg:20160216224802p:plain

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

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

1. gviz

f:id:tbpg:20160216224836p:plain

gvizはGraphvizRubyDSLでラップした有向グラフ描画ツール
グラフの情報をコードで管理できるのが利点。
履歴管理しやすいのと、変更コストが非常に低くなる。
以下、作者の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

6. MindMup

f:id:tbpg:20160216225055p:plain

画像編集とはちょっと違いますけど、複数名でマインドマップを書いて
イデアフラッシュをしたい場合などに便利なツール
以下は公式サイト

MindMup

以下は私がまとめた概要

tbpgr.hatenablog.com

Sample

f:id:tbpg:20160216225112g:plain

おまけ

気になってるけどまだ使い込んで無いツール