2018年3月
S M T W T F S
« Feb   Apr »
 123
45678910
11121314151617
18192021222324
25262728293031

このブログ内を検索

アーカイブ

ATOM RSS2.0
<<>>

2018.03.07

01 仕事

モバイルアプリのプロトタイプ作成ツールの紹介

アルク入社1年目のTです。
現在、新しい事業を検討する部署で、モバイルアプリの試作を進めています。
その中で私はプロトタイプと呼ばれる模型作りについて調査しています。
プロトタイプがあると、アプリの完成イメージをより明確にすることができ、開発途中でもお客様とイメージを共有することが可能となります。
現在は、画像データをリンクでつなぎ、アプリの動きを再現することができるMarvel<https://marvelapp.com/>というフリーツールを用いています。

チャットアプリの画像がサンプルとして用意されているので、
①アイコンタップでプロフィールページを表示
②画像の拡大表示
を再現してみたいと思います。

使用する画像はこの4枚です。

まず基本の画面遷移を設定します。
会話ページの編集画面でアイコン部分を範囲選択し、
遷移先候補からプロフィールページを選択。

Screen TransitionタブからFade、ActionタブではClick or Tapを選択します。

これで①アイコンをタップでプロフィールを表示の遷移設定完了です。
②画像の拡大表示のため、
写真の全画面表示への遷移を同様に作成しておきます。

次に拡大表示した際のフレームを設定します。
フレームは画像を切り替えるのではなく写真の上に重ねて表示したいので、レイヤー機能を使います。
まず画面全体を範囲選択し、遷移先候補からフレームページを選択、Layer an imageを選択します。


そのまま、Save Layer。フレーム設定完了です。

最後に、遷移後のページそれぞれに戻るボタンを設定します。


プロフィールページにて戻るボタンを範囲選択後、
Link to last visited。
これでひとつ前のページに戻る設定が完了です。

Marvelのようなプロトタイプ作成用のフリーツールは他にもたくさんあります。
これらのツールを活用することで、開発言語に精通していなくても、イメージを形にすることが可能となります。
アイデアは色々あるけど、開発って難しそう…と躊躇している学生さんも、私達と一緒にチャレンジしてみませんか?

このページの先頭へ