ニートが怖くて生きていけるか

読者です 読者をやめる 読者になる 読者になる

ニートが怖くて生きていけるか

年収780万を捨てて我が道をゆく

ProttでWEBアプリのプロトタイプを作ってみた。改善してほしいポイントまとめ

元プロの社畜 @nabeemichi です。

ぼくはアプリケーションを作る仕事をしてる。

いわゆるエンジニアってやつなんだけど、

新規アプリを作成するためにプロトタイピングツールのProttを利用してみた。

自分もアプリをつくったりして、作ったアプリでイライラすることはある。

使ってみて、だいぶイライラしたので改善してほしいところをまとめてみる。

プロトタイピングツール Protta とは

アプリケーションを作る際の画面遷移などUIをさくっと作れるツールだ。

prottapp.com

特徴てきなのは、手書きののラフ画を利用して画面遷移などを作れるところだ。

手書きのイメージを書く → 画面にアクションつける → 画面遷移を考える 

これがやりたくて使い始めた。

ワイヤーフレーム機能をつかったが、UIパーツの編集ができない

僕はとにかく使い始める派なので、説明もなにも読まずに使い始めた。

デフォルトでUIパーツが用意されており、このパーツを配置するだけで画面構成を作れるワイヤーフレーム機能。


UIパーツのリストを使ってみた

f:id:hrmch-ioii:20170316001931p:plain

このリストを選択状態っぽく、

f:id:hrmch-ioii:20170316002140p:plain

こうしたかったのだが、

こうなるのに時間がかかりまくった。

理由は、テキストの背景色エリアをつかめないのだ。

f:id:hrmch-ioii:20170316002846p:plain

3層構造になってて、1.文字入力するとこ、2.文字の背景色エリア、3.リスト全体エリア。

1.と2.のエリアがデフォルトで狭すぎて、選択できない。


タブの名前の編集とかなるとイライラマックスで編集するのあきらめた

f:id:hrmch-ioii:20170316003419p:plain

「tab name」を編集したいのだが、選択されてるとこより、

更に小さく収まってしまってる、「tab name」のテキスト編集エリア。

もう、これどうやって選択状態にしていいのか僕にはわからない。

事実上、編集不可の固定文字。

リアルっぽいデータを使うとイメージは伝わりやすいはずだ。

なのに編集できないとは。

編集できるはずなのに、できない。

目的のエリア選択できなくて、クリックしまっくた結果

全く編集できなくなる。

UIパーツの移動もできない。

どうやらかたまったのかな?

そんなときは、保存してリロードすると動くようになる。

Javascriptのエラーでもおきたか?

画面遷移アクションをつくりたいのに、作る場所がわからない

ぼくは何も説明読まずに初めた。

f:id:hrmch-ioii:20170316004020p:plain

画面遷移つくりたいので「遷移図」ボタンをクリックするのは必然的なはずだ。

f:id:hrmch-ioii:20170316004308p:plain

自分のつくった画面に対してクリックしたら動くエリアを定義したかっただけなのだが、

クリックするエリア設定できない。

赤い矢印クリックすると、矢印が消えるだけだ。

どこで僕の画面のクリックできるエリアをかえればいいのだ…


黄色い部分がクリックしたらアクションが起きるエリアを定義した部分。

f:id:hrmch-ioii:20170316004648p:plain

まさかの、ホーム画面で定義するというオチは、

ぼくの時間を1時間奪っていっただけだ。

さすがにわからん。

まとめ

改善してほしいとこはこれだ。

  • UIパーツの選択エリアがシビアすぎて編集できない

  • 遷移図のリンクをつくる画面が直感的じゃない。

  • 全体的に動きが遅い

後日、Prottさんが素晴らしい反応をしてくれた。

www.nabehiromichi.com