Androidアプリケーションの開発 設計ツール

2018-10-05

実際にAndroid アプリケーションを開発するに際し、どんなアプリにするか、必要な機能要望がまとまったら、設計を行います。
そこで、設計作業に使えそうなプロトタイプ作成ツールを調べてみました。

日本語対応のプロトタイプ作成ツール「Prott

新規アカウントを作成する

まず、下記のリンクにアクセスします。

https://prottapp.com/ja/

[無料ではじめる]をクリックします。

牲、名、ユーザ名、メールアドレス、パスワードを入力し、会社で利用か個人で利用を選択し、[次へ]をクリックする。

利用用途をフリーランス、趣味・サークル、副業、授業、その他から選択し、[サインアップ]をクリックする。

※最初の30日間は有料の機能を全て使用することができます。
※無料プランは1つのプロジェクトのみが編集可能ですが、スクリーンの数には制限がありません。

ログアウトして、再度サービスにログインするには、下記からログインします。
https://prottapp.com/users/sign_in

プロジェクトの作成

まず、新規にプロジェクトを作成します。
管理画面から「新規プロジェクト」をクリックします。

プロジェクト名を入力し、デバイス、デバイスの向きを選択し、[新規プロジェクトを作成する]をクリックします。
今回は、Androidアプリなので、デバイスは、Nexus7を選択しました。
※デバイスの向きは途中で変更できないので注意して下さい。

スクリーンを作成

プロジェクトを選択すると作業画面が表示されます。ここにスクリーンを追加して行きます。

スクリーン追加方法ですが、3つの方法があります。

  • ワイヤーフレーム機能を使って作成
  • PCから画像を追加
  • Dropboxから画像を追加

ワイヤーフレーム機能の使い方

「ワイヤーフレームを描く」をクリックします。

要素をドラッグアンドドロップで配置

ワイヤーフレーム作成に必要な基本的なコンポーネントが用意されています。
Androidアプリ向けのコンポーネントも用意されていますので、使いたい要素をドラッグアンドドロップで簡単に配置ができます。

ワイヤーフレームの作成が出来ましたら、「保存」をクリックし、保存します。

プレビューでプロトタイプを確認

作成したプロトタイプをプレビュー機能で確認しましょう。スクリーンを選択し、画面上部の「▷プレビュー」をクリックします。

プロトタイプをシェア

URLを発行、共有するだけで、Prottを利用していない人にも簡単にシェアすることができます。
URL共有の他に、QRコード埋め込み、<iframe>タグ埋め込みが可能です。

まずは画面右上のシェアアイコンを押してください。するとシェア画面が表示されます。
「共有設定をオンにする」をクリックします。

※共有によってプロトタイプが外部に漏れるリスクがある場合には、「パスワードを設定する」にチェックを入れて下さい。