ブロックワークス

2010.09.13

iPhone向けモックアップ(UI遷移図)の制作ができる「iPhone Mockup」

iPhone向けモックアップ(UI遷移図)の制作ができる「iPhone Mockup」というサイトを見つけましたのでご紹介します。

どうやらこのページはHTML5+jQueryで作成されているようです。(もしかしたら一部のブラウザでは上手く動作しないかもしれません。FireFox3.6.9では普通に動作しました。)
操作はとても簡単で、「追加したいパーツをドラッグする」「いらないパーツはゴミ箱へドラッグする」だけです。一部のパーツはダブルクリックで文字を変更することができるようです。

iPhone向けモックアップ(UI遷移図)の制作ができる「iPhone Mockup」

この手のアプリ開発は、大きく分けて

  1. UI(動き)のみを考える
  2. ソフトの外観(見た目のビジュアル)を作る
  3. UIと外観の両方を作る

の3パターンの人がいるかとおもいますが、この「iPhone Mockup」では、「1.UI(動き)のみを考える」人に向いているのかな、と感じました。

2.や3.の場合は、例えば「fireworksCS3とCS4で使えるiPhoneUI画像|ブロックワークス」などのテンプレートを使った方が見た目も動き(といっても静止画像ですが)も両方作ることができるため、こちらの方がスピーディーかもしれません。

意思疎通のための資料をサクッと作りたい場合にいいかもしれませんね。