mBaaSお役立ちブログ

  • トップ>
  • ブログ>
  • Tips>
  • アプリ企画で役立つ。スマホ上で動くワイヤーフレーム/モックアップ作成ツールのまとめ

アプリ企画で役立つ。スマホ上で動くワイヤーフレーム/モックアップ作成ツールのまとめ

iOSやAndroidアプリの開発をする際に、まず必要になるのがデザインや動作がどういったものになるのかというワイヤーフレーム/モックアップではないかと思います。特にアプリの場合、画面遷移を含めてどう動くのかを見ないと何となく実感もわきづらいというものです。

デザインツールは既に無数にありますが、特に今回はiOSやAndroidデバイス上で作成したり、その動作を確認できるサービス/アプリに限定してまとめてみました。やはり実機上で確認するとより分かりやすく、情報を詰め込み過ぎていないかや画面遷移に違和感がないかと言ったチェックに使えると思います。

pentotype

pentotype
pentotype

iPad上で手書きで画面を作っていきます。導線を矢印で引いていくだけで画面遷移が作れたりしてまるで魔法のようにプロトタイプが作っていけます。

wireframes for great apps | pentotype

Proto.io

Proto.io
Proto.io

デスクトップのブラウザ上でコンポーネントや画像を配置して、画面を作成します。よりリッチで実際のアプリであるかのように見せられます。

Proto.io – Silly-fast mobile prototyping.

Flinto

Flinto
Flinto

予め作成した画像の一部分をタップ可能にして、それを画面遷移として繋いでいくことでモックアップにします。画面よりもアプリとしての動作が問題ないか確認するのに良さそうです。

Flinto – iPhone, iPad and Android Prototyping

Phototapper

Phototapper
Phototapper

画像同士の遷移をiPhone上で作成してそのまま共有できます。App Storeで配布されているプロトタイプ作成アプリです。

Phototapper – Prototyping and Feedback

iMockups for iPad

iMockups for iPad
iMockups for iPad

より本格的なプロトタイプ作成アプリです。アプリに限らずWebサイトでも使えるテンプレートが用意されています。デザインをいつでも好きな時に、というコンセプトです。

iMockups for iPad

SketchyPad

SketchyPad
SketchyPad

SketchyPadもモックアップを作成できるアプリです。デザインはBalsamiq MockupというFlashベースのモックアップ作成ツールにそっくりです。ちょっとだけ手書き風なデザインというのが特徴です。

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 SketchyPad

Interface 2

Interface 2
Interface 2

ネイティブのiOSウィジェットを使ってモックアップの作成ができます。アクションによる画面遷移の関連付けも簡単にできます。

Interface 2 for iPhone & iPad – Advanced Mockup & Prototyping for iOS

POP

POP
POP

紙に書いてカメラで撮影してiPhone/Android上でシミュレートというコンセプトです。撮影後、POP上で画面遷移を設定するだけです。

POP – Prototyping on Paper | iPhone App Prototyping Made Easy

AppCooker

AppCooker
AppCooker

iOSネイティブのウィジェットを使って画面を作成し、さらにそれをシェアしてフィードバックを受け取るといったアプリの企画全般を担えるアプリになっています。19.99ドルと値段も高めなのがその高性能の証かも知れません。

Mockup, Wireframe or Prototype iPhone and iPad Apps with AppCooker – Discover AppCooker the most preferred choice for developers and designer who are serious about creating Apps


いかがでしたか?アプリで提供されている場合、そのUIもシンプルで分かりやすく、はじめてアプリを企画する初心者の方でもすぐに使いこなせると思います。みなさんのアプリ企画、開発の際にお役立てください!

アプリを作り始めたら、きっとサーバの仕組み(データを保存したり、ユーザ管理したり、プッシュ通知を配信したり…)が必要になるはず!そんな時にはぜひニフティクラウド mobile backendのことを思い出してください!










バックナンバー