iOSやAndroidアプリの開発をする際に、まず必要になるのがデザインや動作がどういったものになるのかというワイヤーフレーム/モックアップではないかと思います。特にアプリの場合、画面遷移を含めてどう動くのかを見ないと何となく実感もわきづらいというものです。
デザインツールは既に無数にありますが、特に今回はiOSやAndroidデバイス上で作成したり、その動作を確認できるサービス/アプリに限定してまとめてみました。やはり実機上で確認するとより分かりやすく、情報を詰め込み過ぎていないかや画面遷移に違和感がないかと言ったチェックに使えると思います。
pentotype
iPad上で手書きで画面を作っていきます。導線を矢印で引いていくだけで画面遷移が作れたりしてまるで魔法のようにプロトタイプが作っていけます。
wireframes for great apps | pentotype
Proto.io
デスクトップのブラウザ上でコンポーネントや画像を配置して、画面を作成します。よりリッチで実際のアプリであるかのように見せられます。
Proto.io - Silly-fast mobile prototyping.
Flinto
予め作成した画像の一部分をタップ可能にして、それを画面遷移として繋いでいくことでモックアップにします。画面よりもアプリとしての動作が問題ないか確認するのに良さそうです。
Flinto – iPhone, iPad and Android Prototyping
Phototapper
画像同士の遷移をiPhone上で作成してそのまま共有できます。App Storeで配布されているプロトタイプ作成アプリです。
Phototapper - Prototyping and Feedback
iMockups for iPad
より本格的なプロトタイプ作成アプリです。アプリに限らずWebサイトでも使えるテンプレートが用意されています。デザインをいつでも好きな時に、というコンセプトです。
SketchyPad
SketchyPadもモックアップを作成できるアプリです。デザインはBalsamiq MockupというFlashベースのモックアップ作成ツールにそっくりです。ちょっとだけ手書き風なデザインというのが特徴です。
iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 SketchyPad
Interface 2
ネイティブのiOSウィジェットを使ってモックアップの作成ができます。アクションによる画面遷移の関連付けも簡単にできます。
Interface 2 for iPhone & iPad - Advanced Mockup & Prototyping for iOS
POP
紙に書いてカメラで撮影してiPhone/Android上でシミュレートというコンセプトです。撮影後、POP上で画面遷移を設定するだけです。
POP - Prototyping on Paper | iPhone App Prototyping Made Easy
AppCooker
iOSネイティブのウィジェットを使って画面を作成し、さらにそれをシェアしてフィードバックを受け取るといったアプリの企画全般を担えるアプリになっています。19.99ドルと値段も高めなのがその高性能の証かも知れません。
さいごに
いかがでしたか?アプリで提供されている場合、そのUIもシンプルで分かりやすく、はじめてアプリを企画する初心者の方でもすぐに使いこなせると思います。みなさんのアプリ企画、開発の際にお役立てください!
アプリを作り始めたら、きっとサーバの仕組み(データを保存したり、ユーザ管理したり、プッシュ通知を配信したり…)が必要になるはず!そんな時にはぜひニフティクラウド mobile backendのことを思い出してください!