UIデザインで使いたいアプリケーション(止まっている状態のUI制作関連編) #2014.09版

UIデザイナー向けのアプリケーションやツール、プラグインについて
定番含め網羅的にまとまってる記事って見たことないなーと思ったので
とりあえず作ってみました。(すごく長くなってしまったので記事分けしました)

僕がMacユーザーということもあり、8,9割はMac寄りの選定になっています。
その辺はご了承の上ご覧くださいませ mm
(参考までに現在私が使っているものには“※”をつけました)

ということで、第1弾
“止まっている状態のUI制作関連” です。

UI制作系アプリケーション

Adobe Photoshop ※

デザイナー定番のビットマップ画像編集アプリケーション。
デファクトスタンダード的存在でプラグインなども多い。
慣れの問題含めこれ以外を使う理由が無いためだいたいこれ。
Windows : 可

Adobe Illustrator ※

デザイナー定番のベクター画像編集アプリケーション。
ロゴやUI上のアイコン(ピクトグラム)などはだいたいこちらを使う。
複数枚であれば紙ものもこれが多い。
Windows : 可

Pixelmator
カテゴリ: グラフィック&デザイン
価格: ￥3,000
デベロッパ名: Pixelmator Team

Photoshopの対抗馬として用いられる。
購入/使用して思った点で言うと価格の安さ以外で特筆する点がない気がする。
個人的に買ったはいいけど一瞬使って以降使っていないものの
家族共有のMacに入れて運用するとかそういう面ではなかなか。
Macのエンジニアの人がpsd確認で買うのはありだと思う。
Windows : 不可

Sketch 3

Sketch 3
カテゴリ: グラフィック&デザイン
価格: ￥9,800
デベロッパ名: Bohemian Coding

最近注目のベクター画像編集アプリケーション。
一部のデザイナーが使っているのは知ってる、
個人的に買ったはいいけど一瞬使って以降使っていない。
デフォルト(?)でdip別書き出しが行えたりする点が良いらしい。
ミラーリング機能もあり、イラレにミラーリング手段が無いため
実質のUI制作におけるベクター系の1強。
プラグインのSketch Measureとかで
デザインガイドドキュメントを作れたりするみたいだけど
~~ツール変えるほどなのかは要検討。~~
iPhone6と6 Plusの正式発表がされたので個人的な株が一気に上がりましたw
Windows : 不可

Affinity Designer

Affinity Designer
カテゴリ: グラフィック&デザイン
価格: ￥5,000
デベロッパ名: Serif Labs

個人的に気になっているベクター画像編集アプリケーション。
UI的にPixelmatorと揃えるのが良さげ。
2014.9月現在フリーベータ版を提供中。
Windows : 不可

Gravit

最近(?)出たベクター画像編集のフリーアプリケーション。
Mac, WindowsだけでなくLinux, Chromeなどベースは何でも良いらしい。
Windows : 可

GIMP

昔からあるビットマップ画像編集のフリーアプリケーション。
デザイナーがどんなもの使っているのか知るにはいいかも。
ただし、デザイナーで使ってる人見たことないので聞いても無駄。
Windows : 可

Inkscape

昔からあるベクター画像編集のフリーアプリケーション。
デザイナーがどんなもの使っているのか知るにはいいかも。
ただし、デザイナーで使ってる人見たことないので聞いても無駄。
Windows : 可

UI制作/実装補助(UI制作効率系)

Prisma ※

Photoshopの有料になるであろうプラグイン(今はβ版につき無料)。
指定しておいたレイヤーの色をまるっと変換するもの。
すさまじいインパクトを持ちつつも致命的なバグ有りで
そこを調べるかどうかが運命の別れどころ。
バグ内容としては“Adobe Photoshop CC Settings”に“Patterns.psp(パターンファイル)”がある場合 Photoshopを巻き込んでクラッシュというものなので、上記ファイルを一時的に退避させるなどすればOK。
Windows : 可

render.ly

Photoshopのプラグイン。
複数の色別パターンだしみたいな時に重宝しそうなプラグイン。
どちらかと言うとWebの人向けかもしれないですが一応ご紹介。
Windows : 可

Skala Preview ※

Mac用
Skala Preview
カテゴリ: グラフィック&デザイン
価格: 無料
デベロッパ名: Marc Edwards

iOS用
Skala View
カテゴリ: ユーティリティ
価格: 無料
デベロッパ名: Marc Edwards

モバイル(タブレット, ファブレット)などのUIデザインをする上において必須レベルのアプリケーション。
psd(Photoshop)データをモバイル画面に“等倍”で表示させることが出来る。
他の同じようなアプリケーション比較だとAndroidにもミラーリング出来ることが長所となる。
また、端末側クライアントアプリで色盲者チェックが出来る点も大きい。
ただし、作業PCと確認端末が同一ネットワーク上に繋がれている必要があり
psdファイルがなかなか重いファイルだったりするため
デザイナー専用の社内無線LANの設置が望まれる。

— 20140909追記
社内でSkala Previewって動作重いよねみたいな話が出たので使い方補足。
基本的にこのアプリケーションにおいてPhotoshopと連動しなくても良くて
クライアント側のデバイスとConnectさえしていれば
そのファイルの状態でデバイスと同期できます。
なので、Psの“リモート接続”はオフにして(←この連携が重い原因)
psdファイルをSkala Previewにドロップする。
→ Psでそのファイルを保存すると対象ファイルが更新される。
＝クライアント側デバイスで更新される → サクサクやったね！ですます
Windows : 不可

Composite

Composite – Prototyping Tool
カテゴリ: 仕事効率化
価格: ￥1,000
デベロッパ名: Panes Software

Skala Previewまでとは言えないけども
WindowsでもミラーリングができるようになるiOSアプリケーション。
使用に関してはBonjourがWindowsにインストールされていることが条件となる。
Windowsユーザーは試してみるのもいいんじゃないですか？
Windows : 可

The Preview

f:id:tak073:20140906123255p:plain

Skala Previewまでとは言えないけども
WindowsでミラーリングができるようになるAndroidアプリケーション。
Photoshopのリモート接続からAndroidに渡すような形なので
こちらであればWindowsでも使うことが出来る(はず)。
Windows : たぶん可

xScope

Mac用
xScope 4
カテゴリ: 開発ツール
価格: ￥5,000
デベロッパ名: The Iconfactory

iOS用
xScope Mirror
カテゴリ: 仕事効率化
価格: ￥200
デベロッパ名: The Iconfactory

UI, Webデザインの補助として全部盛りの様な老舗補助アプリケーション。
上記Skala Preview比較でAndroidに転送できない点で使うに至らない。
Androidを扱わないなら十分アリ。
Windows : 不可

Sketch Mirror

Sketch Mirror
カテゴリ: ユーティリティ
価格: ￥500
デベロッパ名: Bohemian Coding

Sketch用のミラーリング iOSアプリ。
Androidでは使えないもののiOSサイドの解像度パターンに含まれるため問題クリア。

Review

f:id:tak073:20140901095205p:plain

私が知る中でもモバイルデバイスへの初psdミラーリングアプリケーション。
Mac OS10.6とかの時から存在していたのだが多分もう開発されていない。
なんでこんなのを紹介しているかというと、
他のアプリケーションに無い、アプリケーション内で保存する機能があったから。
アニメーションより見た目が大事でモックアップが大きく重要視されなかった数年前
受託制作会社にいた頃はクライアントとのMTG時にすごく良かったのでこの場で紹介。
Windows : 不可

Dropscreen

f:id:tak073:20140901100527p:plain

上記Reviewの開発終了後使っていたミラーリングアプリケーション。
アイコンの確認機能があったりする。
Reviewより動作が軽くMac OS10.6でも動作したのでこちらも重宝していた。
Windows : 不可

UI制作/実装補助(UI実装用切り出し/リサイズ関連)

Slicy ※

Slicy
カテゴリ: グラフィック&デザイン
価格: ￥3,000
デベロッパ名: MacRabbit

Macにおける定番スライスアプリケーション。
psdのレイヤー名の末尾を“.png”や“.jpg”とするとレイヤー効果込の最小サイズで書きだしてくれる。
“@2x.png”とすればRetinaと非Retina両方書き出せるのでとりあえず推奨。
注意点があるとしたらカンバス外は書き出し対象外になる点と
同一レイヤー名(特にスマートオブジェクト化して管理しているもの)がある場合は注意が必要。
いろいろな方が絶賛記事出しているので詳しくはググるなどを…
Windows : 不可

Generator

アプリケーションではないもののWindowsユーザにSlicy的なPhotoshop機能(CC以降)をご紹介。
こちらもpsdのレイヤー名が書き出し名となるタイプのもの。
Slicyと違いカンバス外も書き出し対象となる。
UI制作をしているWindowsユーザにはとりあえず推奨。
“Photoshop 画像アセット”とかでググると使い方とか出てくるはず。
Windows : 可

Image Optim ※

f:id:tak073:20140906121515p:plain

画像の容量圧縮アプリケーション。
フォルダをそのまま入れることが出来、その配下を全て圧縮適応してくれる。
ただし、自動で置き換えされるので元データを残しておきたい人は注意。
休憩前に放り投げておくだけで良いので楽したいひとには最適。
Windows : 不可

JPEGmini

JPEGmini
カテゴリ: 写真
価格: ￥2,000
デベロッパ名: ICVT Ltd.

jpg画像の容量圧縮の最大手的ポジションのアプリケーション。
業界的に見ても鉄板的存在なイメージ。
Windows : 可

Tiny PNG

png画像容量圧縮の鉄板Webサービス。
正直プラグインの項目と悩みましたがコチラでしょうか。 Photoshop プラグインもあるのでそちらも確認すると良いかもしれないです。
Windows : 可

DevBox ※

DevBox
カテゴリ: 開発ツール
価格: ￥300
デベロッパ名: UNTAMED interactive

iOS, AndroidアプリのUI製作者向けアプリケーション。
アイコン用リサイズ機能とiOSデバイスの情報確認を主に使用。
Android xxxhdpiまでは対応していないもののオススメ。
Windows : 不可

Prepo

Prepo
カテゴリ: 開発ツール
価格: 無料
デベロッパ名: Mothership Software Limited

iOSアプリのデザインイメージ管理アプリケーション。
私はアイコン用リサイズ機能のみを使用。
下に挙げているにはMake app iconでのやりとりが面倒な人向け。
Windows : 不可

Asset Resizer

Asset Resizer - App Image Generator
カテゴリ: 開発ツール
価格: ￥200
デベロッパ名: David Caddy

Androidアプリ向けの画像リサイズアプリケーション。
xxxhdpiやtvdpi書き出しも行うことができるあたりすごい。
下に挙げているにはMake app iconでのやりとりが面倒な人向け。
Windows : 不可

Icon Slate

Icon Slate
カテゴリ: グラフィック&デザイン
価格: ￥500
デベロッパ名: Jeremy Marchand

iOS, Androidアプリ(+Mac, Windowsもできる)両方向けのアイコン書き出しアプリケーション。
その多様性からイチオシしたいところではあるが書き出し後に
色が変わってしまうため様子見の意味を込めてご紹介。
Windows : 不可　

Make app icon

アプリアイコンの自動リサイズWebサービス。
使い勝手すごくいいです。
1024x1024(px)の画像を突っ込むだけのお手軽仕様。
Androidのxxxhdpi(192x192)アイコンは未実装なので注意。
Windows : 可

“UIデザインで使いたいアプリケーション #2014.09版”まとめ

止まっている状態のUI制作関連 (この記事)
UIモック制作関連編
Web関連, ディレクター編

たぶん、ねむたくなる

忘備録的におもったことだけ