eyemovic inc.

Culture blog会社の活動・働き方

2014.07.23

スマホアプリのモック作成でflintoを使って感動のあまりおしっこちびりそうになった件。

ツールドフランス盛り上がってますね。
ゴール前のスプリントとか見てると、こっちまで心拍上がってきます。
そして7月末と8月末、ヒルクライムイベントに参加します。
いい大人がこぞってお金を払ってしんどい思いをしに行く変態の集いです。
というか夏真っ盛りのこのタイミングにヒルクライムとか正気の沙汰じゃないですよね。わかります。
最近、できあがったばかりの綺麗なアスファルトを見るとうずうずします。重症です。

そんなことはいいとして。

お仕事でスマホアプリのデザインをするとき、
画面デザインだけだと実際に動いたときのイメージが付きにくい。
かと言ってその都度エンジニアにデータ渡して画面遷移を作るのも無駄な工数がかかる。
ということで最近はアプリを作る人向けに色々モック作成ツールがあるわけですが、
今回は、いくつか調べた上で実際に使ってみた「flinto」というサービスについて紹介します。
めっちゃ使いやすかったのでかなりオススメ。

 

■flintoってなに?
スマホアプリを作成するときに便利なモック作成のウェブサービス。
有料だと月20ドルでプロジェクトがいくつも作れます。
無料30日お試しでまず使用感試せるので、アプリ制作に携わる方はぜひお試しを。
サービスは英語ですが、UIが秀逸なのでイングリッシュスキルがア・リトルなミーでもイージーにメイクできます。
https://www.flinto.com/

 

■作成したモックの閲覧環境
モックを確認できる環境としては
iPhone(iOS)、iPad、Nexus4、Nexus5、Nexus7、Nexus10
で閲覧可能。
パスワードで閲覧制限をかけることもできます。

 

■flintoを使うまでの手順
これは実際の構築フローに近いと思いますが、
①画面遷移図の作成(パワポとか)
②画面構成の作成(UI等の要素レイアウト。これもパワポとか。)
③デザイン作成
④flintoでモック作成
⑤端末で動きをチェック

と、文章で見るより実際のものを見てもらった方が早いと思うので、
簡単なアプリのモックを作ってみます。

まぁとりあえずサンプルってことでよくありそうなSNSの構成っぽいものを書いてみました。
手書きのモックほっこりしますね。

 

で、各画面を1枚ずつの画像にします。
縦スクロールが発生する画面は、縦長の画像にしておくと良いです。
書き出した各画面の画像をまとめて管理画面にドロップ。00ドロップする所

01画面が並びますこんな感じで画面が並びます。一番左上が「ホーム」扱いになります。

 

次に、ヘッダやフッタなど、スクロール時に固定させたいエリアを指定します。
数値を入れればピクセル単位で調整も楽々。02ヘッダを指定

 

 

タップエリアはドラッグで指定。
エリアを指定すると、遷移先の画面を指定します。線をにゅっと伸ばす。
画面遷移時のトランジションも色々選べます。04遷移先を指定

 

 

さらに、ホーム画面に追加したときのアイコンや
スプラッシュ画面まで指定できるので、この辺も揃えると完成イメージとして
かなりいい感じになります。

で、実際に作ったモックがこちら。ぜひご覧下さい。
https://www.flinto.com/p/cc31e432
パスワードは「eyemovic」で。
iOSのSafariでアクセスして、画面の指示に従って「ホーム画面に追加」をしてください。

 

ぜひともこういったウェブサービスの秀逸なUIが画面遷移やワイヤーフレームを作成する際に便利なアプリとして産声を上げてパワーポイントがこの世から消えてなくなる平和な世の中になる事を願って止みません。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。