たぶん、ねむたくなる

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

UIデザインで使いたいアプリケーション(UIモック制作関連編) #2014.09版

前回に続いて今度は
“UIモック制作関連” のアプリケーションなどを紹介します。

この辺りをちゃんと行うことでより確度の高いプロダクトができるので
UIやUXを考える上でもプロトタイプを用いた検証を推奨はしますが
開発に時間のある案件でないと割と辛いです。。。

また、この辺りのデザイナー視点は中長期的な数字には繋がるものの、
マーケティングや短期的な数字獲得といったものとは逆行している場合が多く
用法用量を正しく見極めて使わないと自分の首を締めるだけなので
案件単位での割り切った考えを持っておいたほうがいいかと思います。


モックアップ/プロトタイプ制作


モックアップ/プロトタイプをつくる一番のメリットは
アプリケーションなどの世界観/使用感の破綻を未然に防ぐ点にある。
また、ワイヤーレベルのもの(企画寄り)と
本実装前のもの(開発寄り)で大きく2分され
ここではどちらかと言うと開発寄りとしてリストアップ。

POP ※

POP - Prototyping on Paper App
カテゴリ: 仕事効率化
価格: 無料
デベロッパ名: Woomoo

iOS, Android, Windows phone上で作るモックアップアプリケーション。
THE GUILDの深津さん(fladdictさん)が出してる
ペーパープロトタイピングパッドと組み合わせると捗る。
他のアプリケーションとの合わせ技(SSした画像を使用など)を
考えると一番手軽でオススメ。
価格 : 無料

Flinto

私が知る中で一番完成度が高い気がしているモックアップ “Web”ツール
WebベースなのでiOS, Android両方共動作可能。業界的に結構名の通った人も使っているのは知ってる…ってかんじでしょうか。
価格 : $20/人月

prott

Prott - 高速プロトタイピングツール App
カテゴリ: 仕事効率化
価格: 無料
デベロッパ名: Goodpatch Inc.

国内のUIメインの制作会社Goodpatchさんが
開発されているモックアップWebツール
クローズドベータの時から触らせていただいていますが完成度が日々上がっている。
最終的にFlinto比較(月額含む)でどうなるんだろうなーっていうのが気になるところ。
価格 : 無料 (現在オープンベータ)

InVision

割りと昔からあるモックアップWebツール
スマートフォンだけでなくPCサイトにも幅が効くため
Web界隈のコーディングしないデザイナーにもいいと思われる。
話によるとバージョン管理(?)とかコメント機能とか機能が多そう。
特筆点などは使ったことないのでノーコメント。
価格 : 無料?

BRIEFS

Mac
Briefs App
カテゴリ: 開発ツール
価格: ¥19,800
デベロッパ名: Briefs, LC

iOS
Briefscase App
カテゴリ: ビジネス
価格: 無料
デベロッパ名: Briefs, LC

ずーっと気になりつつも手を出せていないモックアップアプリケーション。
Mac - iOS専用で設定項目的にも最強そうな気がするし使ってみたいものの
イニシャルでのコストとそもそもこれを使うほどの(開発に余裕のある)案件ってどんな? という2点が買うに至らない要因。
*価格 : $199 (Mac App Store)

Form

Mac
Form App
カテゴリ: 開発ツール
価格: ¥7,800
デベロッパ名: RelativeWave


iOS
Form Viewer App
カテゴリ: ユーティリティ
価格: 無料
デベロッパ名: RelativeWave

先日公開された次世代型モックアップアプリケーション。
Quartz Composerのような(と言うよりほぼそのまま)ビジュアルプログラミングで
ネイティブOpenGLで動作できるあたり完全に異色。
次世代型というよりインタラクティブモックアップに寄っているのでそもそもが違うのかもしれない。
これも個人主導の収益度外視チームでアプリ開発とかなら即使いたい…誰か。。。
あとVJで使えたりするなら即買いけど…人柱誰か。。。
悩むリソースもったいないので買っちゃいました、てへぺろ
価格 : $199 (Mac App Store : ローンチセールで25%off)
※ 2014.11.01追記 いつの間にか定価下がってる…

AppCooker

AppCooker - シェフのようなモックアップ&プロトタイプアプリ! App
カテゴリ: 仕事効率化
価格: ¥2,000
デベロッパ名: Hot Apps Factory

AppTaster - AppCookerで作成したモックアップとプロトタイプをプレイ App
カテゴリ: ユーティリティ
価格: 無料
デベロッパ名: Hot Apps Factory

iPad上で作るモックアップアプリケーション。
買った当時、購入したはいいけど試し終える前に投げてしまった。
UIとか当時と変わってるようなので時間ある人は試してみては?

Origami

FacebookGitHubで公開しているモックアップ用のQuartz Composerプラグイン
VJでQuartz Composerを触っている私的には面倒で使っておりません。
Facebook Design teamって変態なんだなって思いました(褒め言葉)。
価格 : 無料

Framer.js

フロントエンドなどコーディング特化型のデザイナーには
ありかもしれないですが、私はよくわからんです。。。
価格 : $79.99

Marvel

Dropboxベースですすめるモックアップアプリケーション。
psdも対応しているようなのでその辺りがポイントになるかなーと。
Google Driveも対応していく模様。
価格 : 無料?



アニメーション作成


通常のモックアップでは表現しづらい箇所は
動画などにしたほうが早いので動画制作ツールでの共有を推奨。
動画制作だとこの他にMotionやiMovie、Premiereもあるけど
マスクとかができれば何でも良いと思う。

Adobe Aftereffects ※

鉄板動画制作アプリケーション。
これに慣れると特殊表現でもしない限りだいたいのアニメーションはサクッと出来てしまう。
1フレームpsd書き出しなどもできるためAEの有料プラグインをいれている場合においてはこっちでEFXや抜き処理をするなど時短にも可能。
デメリットとしては、高機能が故に学習コストが高いことと快適動作への要求スペックが高いこと。


Adobe Flash

Web界隈的にはお馴染みアプリケーション。
AE比較で動作が非常に軽快。
プレビューの軽さなどはAEでは体験出来ないほど。
CS3からMacromediaからAdobe勢になりタイムラインのUIが近くなってきた。
AE比較で言うと凝ったことが出来ない代わりにいろいろ軽い。


Final Cut Pro

Macの鉄板動画制作アプリケーション。
私はAE使用のため使ったことはない。
たぶん同じようなことができるはず。
デメリットはAEと同じような感じだろうか。


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


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